diff --git a/public/big_brother_screen.gif b/public/big_brother_screen.gif new file mode 100644 index 0000000..abc150c Binary files /dev/null and b/public/big_brother_screen.gif differ diff --git a/src/app/airstrip_one/0/components/BeegText.css.ts b/src/app/airstrip_one/0/components/BeegText.css.ts new file mode 100644 index 0000000..ded742a --- /dev/null +++ b/src/app/airstrip_one/0/components/BeegText.css.ts @@ -0,0 +1,29 @@ +import { style } from '@vanilla-extract/css' + +export const beeg_container = style({ + position: 'relative', + width: 'max-content', + height: 'max-content', +}) + +const beeg = style({ + position: 'absolute', + fontSize: '3em', +}) + +export const beeg_dummy = style([beeg, { + position: 'static', + color: 'transparent', +}]) + +export const beeg_foreground = style([beeg, { + background: 'linear-gradient(90deg, rgba(255,0,0,1) 0%, rgba(255,255,0,1) 16%, rgba(0,255,0,1) 33%, rgba(0,255,255,1) 50%, rgba(0,0,255,1) 66%, rgba(255,0,255,1) 83%, rgba(255,0,0,1) 100%)', + backgroundClip: 'text', + color: 'transparent', +}]) + +export const beeg_background = style([beeg, { + left: '-0.1em', + top: ' 0.1em', + color: 'black', +}]) \ No newline at end of file diff --git a/src/app/airstrip_one/0/components/BeegText.tsx b/src/app/airstrip_one/0/components/BeegText.tsx new file mode 100644 index 0000000..f288694 --- /dev/null +++ b/src/app/airstrip_one/0/components/BeegText.tsx @@ -0,0 +1,16 @@ +import { + beeg_container, + beeg_dummy, + beeg_foreground, + beeg_background, +} from './BeegText.css' + +export default function BeegText({ children }: { children: React.ReactNode }) { + return ( +
+

{children}

+

{children}

+

{children}

+
+ ) +} \ No newline at end of file diff --git a/src/app/airstrip_one/0/components/Marquee.css.ts b/src/app/airstrip_one/0/components/Marquee.css.ts new file mode 100644 index 0000000..dc67afa --- /dev/null +++ b/src/app/airstrip_one/0/components/Marquee.css.ts @@ -0,0 +1,25 @@ +import { style, keyframes } from '@vanilla-extract/css' + +export const marquee_container = style({ + display: 'flex', + width: '100%', + height: 'max-content', + overflow: 'hidden', + backgroundColor: 'black', +}) + +const scroll_marquee = keyframes({ + '0%': { left: ' 0%' }, + '100%': { left: '-100%' }, +}) + +export const marquee_content = style({ + position: 'relative', + fontSize: '1em', + color: 'magenta', + whiteSpace: 'nowrap', + animationName: scroll_marquee, + animationDuration: '8s', + animationTimingFunction: 'linear', + animationIterationCount: 'infinite', +}) diff --git a/src/app/airstrip_one/0/components/Marquee.tsx b/src/app/airstrip_one/0/components/Marquee.tsx new file mode 100644 index 0000000..ad6576f --- /dev/null +++ b/src/app/airstrip_one/0/components/Marquee.tsx @@ -0,0 +1,13 @@ +import { + marquee_container, + marquee_content, +} from './Marquee.css' + +export default function Marquee({ children }: { children: React.ReactNode }) { + return ( +
+

{children}

+

{children}

+
+ ) +} \ No newline at end of file diff --git a/src/app/airstrip_one/0/ministry_of_truth/layout.tsx b/src/app/airstrip_one/0/ministry_of_truth/layout.tsx new file mode 100644 index 0000000..a9ebaa3 --- /dev/null +++ b/src/app/airstrip_one/0/ministry_of_truth/layout.tsx @@ -0,0 +1,10 @@ +import { Metadata } from 'next' + +export const metadata: Metadata = { + title: 'The Ministry of Truth', + description: 'The Ministry of Truth', +} + +export default function Layout({ children }: { children: React.ReactNode }) { + return <>{children} +} \ No newline at end of file diff --git a/src/app/airstrip_one/0/ministry_of_truth/page.css.ts b/src/app/airstrip_one/0/ministry_of_truth/page.css.ts new file mode 100644 index 0000000..407eae4 --- /dev/null +++ b/src/app/airstrip_one/0/ministry_of_truth/page.css.ts @@ -0,0 +1,40 @@ +import { keyframes, style } from "@vanilla-extract/css"; + +export const center_vertical = style({ + position: 'relative', + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + margin: 'auto', + width: '50%', + border: '0.3em solid purple' +}) + +export const border = style({ + width: '60%', + marginBottom: '4em', + border: '0.3em solid purple', +}) + +export const big_brother_style = style({ + display: 'block', + width: '100%', + height: 'auto', +}) + +export const message_style = style({ + boxSizing: 'border-box', + width: '100%', + height: 'max-content', + margin: 0, + border: 'none', + padding: '0.5em', + fontSize: '2em', + color: 'magenta', + backgroundColor: 'black', + overflowWrap: 'break-word', + textAlign: 'center', + ':focus': { + outline: 'none', + } +}) diff --git a/src/app/airstrip_one/0/ministry_of_truth/page.tsx b/src/app/airstrip_one/0/ministry_of_truth/page.tsx new file mode 100644 index 0000000..36a83ba --- /dev/null +++ b/src/app/airstrip_one/0/ministry_of_truth/page.tsx @@ -0,0 +1,47 @@ +'use client' + +import { useEffect, useRef } from 'react' +import Image from 'next/image' +import { useSearchParams } from 'next/navigation' +import BeegText from '../components/BeegText' +import Marquee from '../components/Marquee' +import { + center_vertical, + border, + big_brother_style, + message_style, +} from './page.css' + +export default function Home() { + const search_params = useSearchParams() + const input_ref = useRef(null) + + const set_message = (message: string) => { + const encoded = btoa(message) + const new_url = `${window.location.protocol}//${window.location.host}${window.location.pathname}?e=${encoded}` + window.history.replaceState('', '', new_url) + } + + const message = search_params.get('e') ? + atob(search_params.get('e')!) : + ( + search_params.get('m') + ?? 'At the apex of the pyramid comes Big Brother. Big Brother is infallible and all-powerful. Every success, every achievement, every victory, every scientific discovery, all knowledge, all wisdom, all happiness, all virtue, are held to issue directly from his leadership and inspiration.' + ) + + useEffect(() => { + set_message(message) + }) + + return ( +
+ THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU + THE MINISTRY OF TRUTH +
+ Big Brother +

set_message(input_ref.current!.textContent ?? '')} contentEditable>{message}

+
+ THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU +
+ ) +} diff --git a/src/app/airstrip_one/0/page.css.ts b/src/app/airstrip_one/0/page.css.ts index 5760aa2..0c8f089 100644 --- a/src/app/airstrip_one/0/page.css.ts +++ b/src/app/airstrip_one/0/page.css.ts @@ -10,58 +10,6 @@ export const center_vertical = style({ border: '0.3em solid purple' }) -export const marquee_container = style({ - display: 'flex', - width: '100%', - height: 'max-content', - overflow: 'hidden', - backgroundColor: 'black', -}) - -const scroll_marquee = keyframes({ - '0%': { left: ' 0%' }, - '100%': { left: '-100%' }, -}) - -export const marquee_content = style({ - position: 'relative', - fontSize: '1em', - color: 'magenta', - whiteSpace: 'nowrap', - animationName: scroll_marquee, - animationDuration: '8s', - animationTimingFunction: 'linear', - animationIterationCount: 'infinite', -}) - -export const beeg_container = style({ - position: 'relative', - width: 'max-content', - height: 'max-content', -}) - -const beeg = style({ - position: 'absolute', - fontSize: '3em', -}) - -export const beeg_dummy = style([beeg, { - position: 'static', - color: 'transparent', -}]) - -export const beeg_foreground = style([beeg, { - background: 'linear-gradient(90deg, rgba(255,0,0,1) 0%, rgba(255,255,0,1) 16%, rgba(0,255,0,1) 33%, rgba(0,255,255,1) 50%, rgba(0,0,255,1) 66%, rgba(255,0,255,1) 83%, rgba(255,0,0,1) 100%)', - backgroundClip: 'text', - color: 'transparent', -}]) - -export const beeg_background = style([beeg, { - left: '-0.1em', - top: ' 0.1em', - color: 'black', -}]) - export const big_brother_style = style({ width: '40%', height: 'auto', diff --git a/src/app/airstrip_one/0/page.tsx b/src/app/airstrip_one/0/page.tsx index 410b7b9..8055c2d 100644 --- a/src/app/airstrip_one/0/page.tsx +++ b/src/app/airstrip_one/0/page.tsx @@ -1,36 +1,19 @@ +import { Metadata } from 'next' import Image from 'next/image' +import Marquee from './components/Marquee' +import BeegText from './components/BeegText' import { center_vertical, - marquee_container, - marquee_content, - beeg_container, - beeg_foreground, - beeg_background, big_brother_style, cats_div, subcats_div, reverse_subcats_div, cat, - beeg_dummy, } from './page.css' -function BeegText({ children }: { children: React.ReactNode }) { - return ( -
-

{children}

-

{children}

-

{children}

-
- ) -} - -function Marquee({ children }: { children: React.ReactNode }) { - return ( -
-

{children}

-

{children}

-
- ) +export const metadata: Metadata = { + title: 'The Snack is Watching You', + description: 'The Snack is Watching You', } export default function Home() { diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 3fe7b8e..34fbb0c 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -2,11 +2,6 @@ import type { Metadata } from 'next' import localFont from 'next/font/local' import './global.css' -export const metadata: Metadata = { - title: 'The Snack is Watching You', - description: 'The Snack is Watching You', -} - const comic_sans = localFont({ src: './comic.ttf', weight: '100',