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 MINISTRY OF TRUTH
+
+
+
set_message(input_ref.current!.textContent ?? '')} contentEditable>{message}
+
+
+
+ )
+}
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',