Add more ad services.

This commit is contained in:
MeowcaTheoRange 2023-09-05 08:02:21 -05:00
parent fd06319e07
commit 6de3910d96
8 changed files with 153 additions and 130 deletions

View 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;
}
}

View 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>
) : (
<></>
);
}

View file

@ -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;
}
}

View file

@ -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>
) : (
<></>
);
}

View file

@ -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;
}

View file

@ -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>
) : (
<></>
);
}

View file

@ -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}

View file

@ -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 = {