Add more ad services.
This commit is contained in:
MeowcaTheoRange
parent
fd06319e07
commit
6de3910d96
8 changed files with 153 additions and 130 deletions
51
src/components/Ads/Ads.module.css
Normal file
51
src/components/Ads/Ads.module.css
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
.Mothvertisement {
|
||||
margin-left: auto;
|
||||
display: block;
|
||||
margin-right: auto;
|
||||
max-width: 728px;
|
||||
width: 100%;
|
||||
height: 90px;
|
||||
border: 1px solid var(--pri-fg);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.NavLink {
|
||||
margin-left: auto;
|
||||
display: block;
|
||||
margin-right: auto;
|
||||
border: 1px solid var(--pri-fg);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.Johnvertisement {
|
||||
margin-left: auto;
|
||||
display: block;
|
||||
margin-right: auto;
|
||||
max-width: 732px;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
aspect-ratio: 122 / 15;
|
||||
}
|
||||
|
||||
.Mothvertisement,
|
||||
.NavLink,
|
||||
.Johnvertisement {
|
||||
opacity: 0.5;
|
||||
transition: opacity 0.125s;
|
||||
border: 1px solid var(--pri-fg);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.Mothvertisement:hover,
|
||||
.NavLink:hover,
|
||||
.Johnvertisement:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@media (max-width: 750px) {
|
||||
.Mothvertisement {
|
||||
max-width: 300px;
|
||||
width: 100%;
|
||||
height: 250px;
|
||||
}
|
||||
}
|
||||
95
src/components/Ads/Ads.tsx
Normal file
95
src/components/Ads/Ads.tsx
Normal file
|
|
@ -0,0 +1,95 @@
|
|||
import globals from "@/styles/global.module.css";
|
||||
import Link from "next/link";
|
||||
import { useEffect, useState } from "react";
|
||||
import styles from "./Ads.module.css";
|
||||
|
||||
export default function Ads() {
|
||||
const [hide, setHide] = useState(false);
|
||||
const [adService, setAdService] = useState(0);
|
||||
useEffect(() => {
|
||||
setHide(window.localStorage.getItem("hideAds") === "true");
|
||||
setAdService(Math.random());
|
||||
}, []);
|
||||
return !hide ? (
|
||||
<div className={globals.boxLike}>
|
||||
{adService < 0.25 ? (
|
||||
<iframe
|
||||
src="https://mothvertising.moth.monster/embed"
|
||||
className={styles.Mothvertisement}
|
||||
key={Math.random()}
|
||||
></iframe>
|
||||
) : adService < 0.5 ? (
|
||||
<iframe
|
||||
src="https://dimden.neocities.org/navlink/"
|
||||
key={Math.random()}
|
||||
className={styles.NavLink}
|
||||
name="neolink"
|
||||
width="180"
|
||||
height="180"
|
||||
></iframe>
|
||||
) : adService < 0.75 ? (
|
||||
<iframe
|
||||
className={styles.NavLink}
|
||||
width="300"
|
||||
height="250"
|
||||
src="https://googol.neocities.org/neolink/embed.html"
|
||||
name="neolink"
|
||||
></iframe>
|
||||
) : (
|
||||
<iframe
|
||||
src="https://john.citrons.xyz/embed?ref=example.com"
|
||||
className={styles.Johnvertisement}
|
||||
width="732"
|
||||
height="90"
|
||||
></iframe>
|
||||
)}
|
||||
<div className={globals.horizontalListLeft}>
|
||||
<button
|
||||
onClick={() => {
|
||||
window.localStorage.setItem("hideAds", "true");
|
||||
setHide(true);
|
||||
}}
|
||||
className={globals.small + " " + globals.buttonLink}
|
||||
>
|
||||
Hide forever
|
||||
</button>
|
||||
<span className={globals.small}>-</span>
|
||||
{adService < 0.25 ? (
|
||||
<Link
|
||||
className={globals.small + " " + globals.link}
|
||||
href={"https://mothvertising.moth.monster/"}
|
||||
target="_blank"
|
||||
>
|
||||
Mothvertising
|
||||
</Link>
|
||||
) : adService < 0.5 ? (
|
||||
<Link
|
||||
className={globals.small + " " + globals.link}
|
||||
href={"https://dimden.dev/navlinkads/"}
|
||||
target="_blank"
|
||||
>
|
||||
NavLink Ads
|
||||
</Link>
|
||||
) : adService < 0.75 ? (
|
||||
<Link
|
||||
className={globals.small + " " + globals.link}
|
||||
href={"https://googol.neocities.org/neolink/"}
|
||||
target="_blank"
|
||||
>
|
||||
NeoLink Ads
|
||||
</Link>
|
||||
) : (
|
||||
<Link
|
||||
className={globals.small + " " + globals.link}
|
||||
href={"https://john.citrons.xyz/"}
|
||||
target="_blank"
|
||||
>
|
||||
johnvertisement
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<></>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
.Mothvertisement {
|
||||
margin-left: auto;
|
||||
display: block;
|
||||
margin-right: auto;
|
||||
max-width: 728px;
|
||||
width: 100%;
|
||||
height: 90px;
|
||||
border: 1px solid var(--pri-fg);
|
||||
border-radius: 2px;
|
||||
opacity: 0.5;
|
||||
transition: opacity 0.125s;
|
||||
}
|
||||
.Mothvertisement:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@media (max-width: 750px) {
|
||||
.Mothvertisement {
|
||||
max-width: 300px;
|
||||
width: 100%;
|
||||
height: 250px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
import globals from "@/styles/global.module.css";
|
||||
import Link from "next/link";
|
||||
import { useEffect, useState } from "react";
|
||||
import styles from "./Mothvertising.module.css";
|
||||
|
||||
export default function Mothvertising() {
|
||||
const [hide, setHide] = useState(false);
|
||||
useEffect(() => {
|
||||
setHide(window.localStorage.getItem("hideAds") === "true");
|
||||
}, []);
|
||||
return !hide ? (
|
||||
<div className={globals.boxLike}>
|
||||
<iframe
|
||||
src="https://mothvertising.moth.monster/embed"
|
||||
className={styles.Mothvertisement}
|
||||
key={Math.random()}
|
||||
></iframe>
|
||||
<div className={globals.horizontalListLeft}>
|
||||
<button
|
||||
onClick={() => {
|
||||
window.localStorage.setItem("hideAds", "true");
|
||||
setHide(true);
|
||||
}}
|
||||
className={globals.small + " " + globals.buttonLink}
|
||||
>
|
||||
Hide forever
|
||||
</button>
|
||||
<span className={globals.small}>-</span>
|
||||
<Link
|
||||
className={globals.small + " " + globals.link}
|
||||
href={"https://mothvertising.moth.monster/"}
|
||||
target="_blank"
|
||||
>
|
||||
Mothvertising
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<></>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
.NavLink {
|
||||
margin-left: auto;
|
||||
display: block;
|
||||
margin-right: auto;
|
||||
border: 1px solid var(--pri-fg);
|
||||
border-radius: 2px;
|
||||
opacity: 0.5;
|
||||
transition: opacity 0.125s;
|
||||
}
|
||||
.NavLink:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
import globals from "@/styles/global.module.css";
|
||||
import Link from "next/link";
|
||||
import { useEffect, useState } from "react";
|
||||
import styles from "./NavLink.module.css";
|
||||
|
||||
export default function NavLink() {
|
||||
const [hide, setHide] = useState(false);
|
||||
useEffect(() => {
|
||||
setHide(window.localStorage.getItem("hideAds") === "true");
|
||||
}, []);
|
||||
return !hide ? (
|
||||
<div className={globals.boxLike}>
|
||||
<iframe
|
||||
src="https://dimden.neocities.org/navlink/"
|
||||
key={Math.random()}
|
||||
className={styles.NavLink}
|
||||
name="neolink"
|
||||
width="180"
|
||||
height="180"
|
||||
></iframe>
|
||||
<div className={globals.horizontalListLeft}>
|
||||
<button
|
||||
onClick={() => {
|
||||
window.localStorage.setItem("hideAds", "true");
|
||||
setHide(true);
|
||||
}}
|
||||
className={globals.small + " " + globals.buttonLink}
|
||||
>
|
||||
Hide forever
|
||||
</button>
|
||||
<span className={globals.small}>-</span>
|
||||
<Link
|
||||
className={globals.small + " " + globals.link}
|
||||
href={"https://dimden.dev/navlinkads/"}
|
||||
target="_blank"
|
||||
>
|
||||
NavLink Ads
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<></>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,7 +1,6 @@
|
|||
import Ads from "@/components/Ads/Ads";
|
||||
import Box from "@/components/Box/Box";
|
||||
import Nav from "@/components/Nav/Nav";
|
||||
import Mothvertising from "@/components/ads/Mothvertising/Mothvertising";
|
||||
import NavLink from "@/components/ads/NavLink/NavLink";
|
||||
import "@/styles/_app.css";
|
||||
import "@/styles/global.module.css";
|
||||
import globals from "@/styles/global.module.css";
|
||||
|
|
@ -11,7 +10,7 @@ import Themer, { ThemeModeContext } from "@/utility/react/Themer";
|
|||
import { getCookies } from "cookies-next";
|
||||
import type { AppProps } from "next/app";
|
||||
import Link from "next/link";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useState } from "react";
|
||||
|
||||
export default function App({ Component, pageProps }: AppProps) {
|
||||
const [theme, setTheme] = useState([
|
||||
|
|
@ -23,10 +22,6 @@ export default function App({ Component, pageProps }: AppProps) {
|
|||
TROLLCALL_NAME: string;
|
||||
TROLLCALL_CODE: string;
|
||||
};
|
||||
const [adService, setAdService] = useState(false);
|
||||
useEffect(() => {
|
||||
setAdService(Math.random() > 0.5);
|
||||
}, []);
|
||||
return (
|
||||
<main className={"App" + (theme[2] ? " " + "inverted" : "")}>
|
||||
<Themer
|
||||
|
|
@ -50,7 +45,7 @@ export default function App({ Component, pageProps }: AppProps) {
|
|||
theme: theme[1]
|
||||
}}
|
||||
>
|
||||
{adService ? <Mothvertising /> : <NavLink />}
|
||||
<Ads />
|
||||
<p className={globals.horizontalList}>
|
||||
<Link
|
||||
className={globals.link}
|
||||
|
|
|
|||
|
|
@ -211,7 +211,8 @@ export const ClassValues = Object.values(Class);
|
|||
|
||||
export const SwaySchema = yup.object({
|
||||
name: yup.string().required(),
|
||||
description: yup.string().required()
|
||||
description: yup.string().required(),
|
||||
color: ColorSchema.required()
|
||||
});
|
||||
|
||||
export type SwayType = {
|
||||
|
|
@ -238,7 +239,8 @@ export const SwayValues = Object.values(Sway);
|
|||
|
||||
export const AspectSchema = yup.object({
|
||||
name: yup.string().required(),
|
||||
description: yup.string().required()
|
||||
description: yup.string().required(),
|
||||
color: ColorSchema.required()
|
||||
});
|
||||
|
||||
export type AspectType = {
|
||||
|
|
|
|||
Loading…
Reference in a new issue