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 Box from "@/components/Box/Box";
|
||||||
import Nav from "@/components/Nav/Nav";
|
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/_app.css";
|
||||||
import "@/styles/global.module.css";
|
import "@/styles/global.module.css";
|
||||||
import globals from "@/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 { getCookies } from "cookies-next";
|
||||||
import type { AppProps } from "next/app";
|
import type { AppProps } from "next/app";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { useEffect, useState } from "react";
|
import { useState } from "react";
|
||||||
|
|
||||||
export default function App({ Component, pageProps }: AppProps) {
|
export default function App({ Component, pageProps }: AppProps) {
|
||||||
const [theme, setTheme] = useState([
|
const [theme, setTheme] = useState([
|
||||||
|
|
@ -23,10 +22,6 @@ export default function App({ Component, pageProps }: AppProps) {
|
||||||
TROLLCALL_NAME: string;
|
TROLLCALL_NAME: string;
|
||||||
TROLLCALL_CODE: string;
|
TROLLCALL_CODE: string;
|
||||||
};
|
};
|
||||||
const [adService, setAdService] = useState(false);
|
|
||||||
useEffect(() => {
|
|
||||||
setAdService(Math.random() > 0.5);
|
|
||||||
}, []);
|
|
||||||
return (
|
return (
|
||||||
<main className={"App" + (theme[2] ? " " + "inverted" : "")}>
|
<main className={"App" + (theme[2] ? " " + "inverted" : "")}>
|
||||||
<Themer
|
<Themer
|
||||||
|
|
@ -50,7 +45,7 @@ export default function App({ Component, pageProps }: AppProps) {
|
||||||
theme: theme[1]
|
theme: theme[1]
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{adService ? <Mothvertising /> : <NavLink />}
|
<Ads />
|
||||||
<p className={globals.horizontalList}>
|
<p className={globals.horizontalList}>
|
||||||
<Link
|
<Link
|
||||||
className={globals.link}
|
className={globals.link}
|
||||||
|
|
|
||||||
|
|
@ -211,7 +211,8 @@ export const ClassValues = Object.values(Class);
|
||||||
|
|
||||||
export const SwaySchema = yup.object({
|
export const SwaySchema = yup.object({
|
||||||
name: yup.string().required(),
|
name: yup.string().required(),
|
||||||
description: yup.string().required()
|
description: yup.string().required(),
|
||||||
|
color: ColorSchema.required()
|
||||||
});
|
});
|
||||||
|
|
||||||
export type SwayType = {
|
export type SwayType = {
|
||||||
|
|
@ -238,7 +239,8 @@ export const SwayValues = Object.values(Sway);
|
||||||
|
|
||||||
export const AspectSchema = yup.object({
|
export const AspectSchema = yup.object({
|
||||||
name: yup.string().required(),
|
name: yup.string().required(),
|
||||||
description: yup.string().required()
|
description: yup.string().required(),
|
||||||
|
color: ColorSchema.required()
|
||||||
});
|
});
|
||||||
|
|
||||||
export type AspectType = {
|
export type AspectType = {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue