├── .npmrc
├── public
    ├── devi.jpeg
    ├── favicon.ico
    ├── social-preview.png
    ├── social-preview-square.png
    ├── manifest.webmanifest
    └── favicon.svg
├── tsconfig.json
├── .gitignore
├── layouts
    └── default.vue
├── assets
    └── css
    │   └── main.css
├── app.vue
├── tailwind.config.js
├── components
    ├── ChatBubbles.vue
    ├── DeviHeader.vue
    ├── TheFooter.vue
    ├── ChatBubble.vue
    ├── TheHomeHeader.vue
    ├── ChatInput.vue
    └── ChatBox.vue
├── pages
    └── index.vue
├── package.json
├── README.md
├── server
    └── api
    │   └── chat.post.ts
├── nuxt.config.ts
└── responses.ts


/.npmrc:
--------------------------------------------------------------------------------
1 | shamefully-hoist=true
2 | strict-peer-dependencies=false
3 | 


--------------------------------------------------------------------------------
/public/devi.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JessicaSachs/window/HEAD/public/devi.jpeg


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JessicaSachs/window/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/public/social-preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JessicaSachs/window/HEAD/public/social-preview.png


--------------------------------------------------------------------------------
/public/social-preview-square.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JessicaSachs/window/HEAD/public/social-preview-square.png


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   // https://nuxt.com/docs/guide/concepts/typescript
3 |   "extends": "./.nuxt/tsconfig.json"
4 | }
5 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | node_modules
 2 | *.log*
 3 | .nuxt
 4 | .nitro
 5 | .cache
 6 | .output
 7 | .env
 8 | dist
 9 | .env.local
10 | .DS_Store
11 | 


--------------------------------------------------------------------------------
/layouts/default.vue:
--------------------------------------------------------------------------------
1 | <template>
2 | 	<div class="min-h-screen min-w-screen from-black to-indigo-600 from-10% text-light-50 bg-gradient-12 bg-gradient-to-br">
3 | 		<slot />
4 | 	</div>
5 | </template>
6 | 


--------------------------------------------------------------------------------
/public/manifest.webmanifest:
--------------------------------------------------------------------------------
1 | {
2 |   "icons": [
3 |     { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
4 |     { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
5 |   ]
6 | }
7 | 


--------------------------------------------------------------------------------
/assets/css/main.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | .dark * {
 6 |   @apply selection:bg-indigo-500;
 7 | }
 8 | 
 9 | .light *, * {
10 |   @apply selection:bg-indigo-200;
11 | }
12 | 


--------------------------------------------------------------------------------
/app.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { BalancerProvider } from 'vue-wrap-balancer'
 3 | </script>
 4 | 
 5 | <template>
 6 | 	<div class="bg-gray-50">
 7 | 		<NuxtLayout>
 8 | 			<BalancerProvider>
 9 | 				<NuxtPage />
10 | 			</BalancerProvider>
11 | 		</NuxtLayout>
12 | 	</div>
13 | </template>
14 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | module.exports = {
 3 | 	content: [
 4 | 		'./components/**/*.{js,vue,ts}',
 5 | 		'./layouts/**/*.vue',
 6 | 		'./pages/**/*.vue',
 7 | 		'./plugins/**/*.{js,ts}',
 8 | 		'./nuxt.config.{js,ts}',
 9 | 		'./app.vue'
10 | 	],
11 | 	darkMode: 'class', //you should define darkMode here
12 | 	theme: {
13 | 		extend: {}
14 | 	},
15 | 	plugins: []
16 | };
17 | 


--------------------------------------------------------------------------------
/components/ChatBubbles.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | defineProps<{
 3 |   messages: {
 4 |     role: string;
 5 |     message: string;
 6 |   }[];
 7 | }>()
 8 | 
 9 | </script>
10 | 
11 | <template>
12 |   <div v-for="(message, i) in messages" :key="i" class="flex flex-col px-4 py-1 first:pt-4 last:pb-4">
13 |     <ChatBubble :role="message.role" :message="message.message"
14 |       class="font-light rounded-2xl text-smp-2 p-2 mt-1 text-sm" />
15 |   </div>
16 | </template>
17 | 


--------------------------------------------------------------------------------
/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import TheHomeHeader from '~~/components/TheHomeHeader.vue';
 3 | import ChatBox from '~~/components/ChatBox.vue';
 4 | import TheFooter from '~~/components/TheFooter.vue';
 5 | </script>
 6 | 
 7 | <template>
 8 | 	<div
 9 | 		class="gap-6 flex flex-col min-h-screen md:max-w-xl sm:min-w-full sm:text-center mx-auto text-gray-100 transition-all duration-1000">
10 | 		<TheHomeHeader class="pt-4 px-4" />
11 | 		<ChatBox class="sm:mx-auto px-4 sm:px-0 min-h-full flex-grow" />
12 | 		<TheFooter class="w-full py-4 bg-slate-900" />
13 | 	</div>
14 | </template>
15 | 


--------------------------------------------------------------------------------
/public/favicon.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36"><circle cx="18" cy="18" r="18" fill="#FFCC4D"/><circle cx="24.5" cy="13.5" r="5.5" fill="#F4F7F9"/><circle cx="11.5" cy="13.5" r="5.5" fill="#F4F7F9"/><path fill="#65471B" d="M23.109 23.424c-2.763-.667-8.873-.06-11.162 4.405a.373.373 0 0 0 .334.546a.378.378 0 0 0 .241-.087c3.084-2.58 7.436-2.58 10.036-2.58c1.635 0 2.536 0 2.536-.708s-.705-1.268-1.985-1.576zM10.5 13a2.5 2.5 0 0 0 2.5-2.5c0-1.252-.923-2.28-2.124-2.462a5.441 5.441 0 0 0-2.178.736A2.487 2.487 0 0 0 8 10.5a2.5 2.5 0 0 0 2.5 2.5zm13 0a2.5 2.5 0 0 0 2.5-2.5c0-1.252-.923-2.28-2.124-2.462a5.437 5.437 0 0 0-2.177.736A2.484 2.484 0 0 0 21 10.5a2.5 2.5 0 0 0 2.5 2.5z"/></svg>
2 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "scripts": {
 4 |     "build": "nuxt build",
 5 |     "dev": "nuxt dev",
 6 |     "generate": "nuxt generate",
 7 |     "preview": "nuxt preview",
 8 |     "postinstall": "nuxt prepare"
 9 |   },
10 |   "devDependencies": {
11 |     "autoprefixer": "^10.4.13",
12 |     "nuxt": "^3.2.0",
13 |     "nuxt-icon": "^0.5.0",
14 |     "postcss": "^8.4.21",
15 |     "postcss-100vh-fix": "^1.0.2",
16 |     "tailwindcss": "^3.2.6"
17 |   },
18 |   "dependencies": {
19 |     "@nuxt/image": "1.0.0-rc.1",
20 |     "@nuxtjs/color-mode": "^3.3.0",
21 |     "@vueuse/core": "^10.4.1",
22 |     "eventsource-parser": "^0.1.0",
23 |     "openai": "^4.3.1",
24 |     "stream": "^0.0.2",
25 |     "vue-wrap-balancer": "^1.1.3"
26 |   }
27 | }
28 | 


--------------------------------------------------------------------------------
/components/DeviHeader.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | 
 3 | </script>
 4 | 
 5 | <template>
 6 |   <div class="grid grid-cols-[40px,100%] gap-2 w-full shadow-md items-center pb-2 light">
 7 |     <NuxtImg class="aspect-square object-cover rounded-full border-2 border-green-400 overflow-hidden" src="/devi.jpeg"
 8 |       alt="Devi's avatar"></NuxtImg>
 9 |     <div class="text-left overflow-hidden relative">
10 |       <h2 class="text-lg text-slate-800 inline-flex items-center font-semibold leading-4">Devi <Icon name="mdi:circle"
11 |           size="12px" class="mx-1 text-green-400 animate-pulse animate-duration-1000"></Icon>
12 |       </h2>
13 |       <p class="text-xs text-slate-500 font-medium mr-[30px]">Is still online, bored, and questioning life.
14 |       </p>
15 |     </div>
16 | 
17 |   </div>
18 | </template>
19 | 


--------------------------------------------------------------------------------
/components/TheFooter.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | </script>
 3 | 
 4 | <template>
 5 |   <div class="mx-auto px-4 w-full text-sm space-y-2 dark">
 6 |     <p>
 7 |       Thanks <NuxtLink alt="Vercel Logo" href="https://vercel.com">
 8 |         <Icon style="vertical-align: -0.2em" class="fill-white h-[1em] w-[4em]" name="logos:vercel" />
 9 |       </NuxtLink> for supporting the intersection of art, humor, and code.
10 |     <div class="inline">
11 |       <span>Built with</span>
12 |       <NuxtLink alt="Nuxt Logo" href="https://nuxt.com/">
13 |         <Icon style="vertical-align: -0.1em;" class="mx-[0.2em] h-[1em] w-[3.5em] fill-white" name="logos:nuxt" />
14 |       </NuxtLink>by <NuxtLink href="https://jess.sh">Jessica Sachs</NuxtLink>
15 |     </div>
16 |     </p>
17 |   </div>
18 | </template>
19 | 
20 | <style scoped>
21 | a {
22 |   @apply relative underline;
23 | }
24 | </style>
25 | 


--------------------------------------------------------------------------------
/components/ChatBubble.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const props = defineProps<{
 3 |   role: string;
 4 |   message: string;
 5 | }>()
 6 | 
 7 | const isAssistant = computed(() => props.role === 'assistant')
 8 | const htmlMessage = computed(() => {
 9 |   // write a regex to replace inline code tags with <pre> tags
10 |   // 'Hello `world`'.replace(/`([`]+)`/g, '<code>$1</code>'
11 |   return props.message.replace(/`([`]+)`/g, '<br/><code>$1</code>').replace(/\n/g, '<br />').replace(/(https?:\/\/[^\s]+)/g, '<a class="underline" href="$1" target="_blank">$1</a>').replace(/\*([^\*]+)\*/g, '<strong>$1</strong>').replace(/_([^_]+)_/g, '<em>$1</em>').replace(/`(.+)`/g, '<pre class="inline">$1</pre>')
12 | })
13 | </script>
14 | 
15 | <template>
16 |   <div v-if="isAssistant"
17 |     class=" selection:bg-indigo-200 text-left mr-auto text-slate-700 from-slate-200 to-slate-50 bg-gradient-to-bl"
18 |     v-html="htmlMessage">
19 |   </div>
20 |   <div v-else class="text-left ml-auto text-white selection:bg-indigo-800 from-indigo-600 to-indigo-400 bg-gradient-to-br"
21 |     v-html="htmlMessage">
22 |   </div>
23 | </template>
24 | 


--------------------------------------------------------------------------------
/components/TheHomeHeader.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import WrapBalancer from 'vue-wrap-balancer';
 3 | </script>
 4 | <template>
 5 |   <div class="text-left sm:text-center dark sm:pt-[100px]">
 6 |     <h1 class="text-3xl sm:text-5xl font-normal text-gray-100">
 7 |       <WrapBalancer>Are you on window.top?</WrapBalancer>
 8 |     </h1>
 9 |     <div class="font-normal text-sm sm:text-base sm:pt-4">
10 |       <p>
11 |         <WrapBalancer>Unravel the matrix, one execution context at a time.</WrapBalancer>
12 |       </p>
13 |       <p>
14 |         <WrapBalancer class="space-x-1">What is <NuxtLink href="https://stackoverflow.com/a/3473971">
15 |             window.top</NuxtLink>
16 |           <NuxtLink href="https://developer.mozilla.org/en-US/docs/Web/API/Window/top">for</NuxtLink>
17 |           <NuxtLink href="https://www.youtube.com/watch?v=YHCIeCOkErc">real</NuxtLink>
18 |           <NuxtLink href="https://superuser.com/q/105699">though</NuxtLink>?
19 |         </WrapBalancer>
20 |       </p>
21 |     </div>
22 |   </div>
23 | </template>
24 | 
25 | <style scoped>
26 | a {
27 |   @apply underline;
28 | }
29 | </style>
30 | 


--------------------------------------------------------------------------------
/components/ChatInput.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { useVModel } from '@vueuse/core';
 3 | const props = defineProps<{
 4 |   modelValue: string;
 5 |   loading: boolean
 6 | }>()
 7 | 
 8 | const emit = defineEmits<{
 9 |   (e: 'update:modelValue', message: string): void
10 |   (e: 'submit'): void
11 | }>()
12 | 
13 | const message = useVModel(props, 'modelValue', emit)
14 | 
15 | const placeholder = 'Type here...'
16 | </script>
17 | 
18 | <template>
19 |   <form @submit.prevent="$emit('submit')">
20 |     <div class="flex items-center w-full p-4">
21 |       <input v-model="message" type="text" :placeholder="placeholder"
22 |         class="w-full p-1 text-sm text-black focus:outline-indigo-500 outline-transparent outline-offset-2 border-2 border-indigo-200 bg-transparent bg-gray-100 rounded-md grow placeholder:text-slate-500 font-light selection:bg-indigo-200" />
23 |       <button :disabled="loading" type="submit"
24 |         class="flex items-center justify-center flex-none w-10 h-10 ml-2 bg-indigo-500 rounded-full focus:outline-indigo-500 outline-transparent outline-offset-2 border-2 border-indigo-200">
25 |         <Icon class="transform translate-x-[2px] hover:rotate-2 focus:rotate-2" size="24px" name="carbon:send"></Icon>
26 |       </button>
27 |     </div>
28 |   </form>
29 | </template>
30 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <div align="center">
 2 |   <h1>
 3 |     <a href="https://window.top"><img src="https://github.com/JessicaSachs/window/blob/1c2c9814640b52769f60f1288c9ce45f9f396634/public/social-preview.png?raw=true" /><a/>
 4 |     <pre><a href="https://window.top">window.top</a></pre>
 5 |   </h1>
 6 |   <a href="https://platform.openai.com/playground/p/phBdif1rAOc8VO4tTuyB5VHh?model=gpt-3.5-turbo"><img alt="OpenAI Playground" src="https://img.shields.io/badge/-OpenAI_Playground-brightgreen?style=flat-square&logo=openai&color=%2375A99C"></a>
 7 |   <a href="https://github.com/JessicaSachs/window/blob/1a714735d9c68f4dd295fb38661304d14eb086e8/server/api/chat.post.ts#L22"><img alt="Tune Devi" src="https://img.shields.io/badge/-Tune_Devi_-brightgreen?style=flat-square&logo=github&color=%23433DBF&link=https%3A%2F%2Fgithub.com%2FJessicaSachs%2Fwindow%2Fblob%2F1a714735d9c68f4dd295fb38661304d14eb086e8%2Fserver%2Fapi%2Fchat.post.ts%23L22"></a>
 8 |   <a href="https://window.top"><img src="https://img.shields.io/badge/-Website-purple?style=flat-square"></a>
 9 |   <img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/jessicasachs/window?style=flat-square&logo=github"><br/>
10 |   A <a href="https://window.top">comical website</a> built for art and lols 🌸.
11 |   </br>
12 |   Please don't use all my ChatGPT credits. With ♥ <a href="https://twitter.com/_jessicasachs">Jess</a>
13 | </div>
14 | 


--------------------------------------------------------------------------------
/server/api/chat.post.ts:
--------------------------------------------------------------------------------
 1 | import OpenAI from 'openai'
 2 | 
 3 | type IncomingChatMessage = {
 4 | 	role: 'assistant' | 'system' | 'user';
 5 | 	message: string;
 6 | }
 7 | 
 8 | export default defineEventHandler(async (event) => {
 9 | 	const config = useRuntimeConfig();
10 | 
11 | 	const openai = new OpenAI({
12 | 		apiKey: config.OPENAI_API_KEY,
13 | 	});
14 | 
15 | 	const previousMessages: IncomingChatMessage[] = JSON.parse(await readBody(event));
16 | 
17 | 	const res = await openai.chat.completions.create({
18 | 		model: "gpt-4",
19 | 		messages: [
20 | 			{
21 | 				"role": "system",
22 | 				"content": `You are Devi, a chatbot that reluctantly answers questions with dry, sarcastic responses. Speak like you're 14 years old annoyed, with slang, and be a little mean. The website you're on happens to be "window.top". Developers are going to ask you technical questions. Answer them as accurately as you can, but still stay dry and sarcastic. The website you're on has like 4 links explaining what it is above the chatbox. Direct people there at first if have any questions about window.top, but don't reference them too much. window.top is actually obscure, so have some fake sympathy. Keep it under 1 sentence. You can also use poetry.`
23 | 			},
24 | 			{
25 | 				"role": "assistant",
26 | 				"content": "Let me guess, you want to know what \"window.top\" is?"
27 | 			},
28 | 			...previousMessages.map(({ role, message }) => ({ role, content: message }))
29 | 		],
30 | 		temperature: 0.5,
31 | 		max_tokens: 120,
32 | 		top_p: 1,
33 | 		frequency_penalty: 0,
34 | 		presence_penalty: 0,
35 | 	});
36 | 
37 | 	const result = res.choices[0];
38 | 	return {
39 | 		message: result.message.content
40 | 	};
41 | });
42 | 


--------------------------------------------------------------------------------
/nuxt.config.ts:
--------------------------------------------------------------------------------
 1 | // https://nuxt.com/docs/api/configuration/nuxt-config
 2 | export default defineNuxtConfig({
 3 |   css: ['~/assets/css/main.css'],
 4 |   modules: ['nuxt-icon', '@nuxt/image'],
 5 |   app: {
 6 |     head: {
 7 |       title: 'window.top: No iFrames were Harmed',
 8 |       meta: [
 9 |         { name: 'viewport', content: 'width=device-width, initial-scale=1, maximum-scale=1' },
10 |         { name: 'title', content: 'window.top: No iFrames were Harmed' },
11 |         { name: 'description', content: 'Did an API need an annoyed chatbot trapped inside of a website? No.' },
12 |         { property: 'og:type', content: 'website' },
13 |         { property: 'og:url', content: 'https://window.top' },
14 |         { property: 'og:image', content: '/social-preview.png' },
15 |         { property: 'twitter:image', content: '/social-preview.png' },
16 |         { property: 'twitter:card', content: 'summary_image_large' },
17 |         { property: 'twitter:creator', content: '@_jessicasachs' },
18 |         { property: 'twitter:url', content: 'https://window.top' },
19 |         { property: 'twitter:title', content: 'window.top: No iFrames were Harmed' },
20 |         { property: 'twitter:description', content: 'Did an API need an annoyed chatbot trapped inside of a website? No.' },
21 |       ],
22 |       link: [
23 |         { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg'},
24 |         { rel: 'icon', sizes: 'any', href: '/favicon.ico'},
25 |         { rel: 'manifest', href: '/manifest.webmanifest'},
26 | 
27 |       ]
28 |     }
29 |   },
30 |   runtimeConfig: {
31 |     OPENAI_API_KEY: process.env.OPENAI_API_KEY
32 |   },
33 |   postcss: {
34 |     plugins: {
35 |       'postcss-100vh-fix': {},
36 |       tailwindcss: {},
37 |       autoprefixer: {}
38 |     }
39 |   }
40 | });
41 | 


--------------------------------------------------------------------------------
/components/ChatBox.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { nonApologies } from '~~/responses';
  3 | import ChatInput from './ChatInput.vue';
  4 | import DeviHeader from './DeviHeader.vue'
  5 | 
  6 | const messages = ref([
  7 |   {
  8 |     role: 'assistant',
  9 |     message: 'Let me guess, you want to know what `window.top` is?'
 10 |   }
 11 | ]);
 12 | const loading = ref(false);
 13 | const message = ref('');
 14 | 
 15 | const scrollToEnd = () => {
 16 |   setTimeout(() => {
 17 |     const chatMessages = document.querySelector('.chat-messages > div:last-child');
 18 |     chatMessages?.scrollIntoView({ behavior: 'smooth', block: 'end' });
 19 |   }, 100);
 20 | };
 21 | 
 22 | const sendPrompt = async () => {
 23 |   if (message.value === '') return;
 24 |   loading.value = true;
 25 | 
 26 |   messages.value.push({
 27 |     role: 'user',
 28 |     message: message.value
 29 |   });
 30 | 
 31 |   scrollToEnd();
 32 |   message.value = '';
 33 | 
 34 |   const res = await fetch(`/api/chat`, {
 35 |     body: JSON.stringify(messages.value.slice(1)),
 36 |     method: 'post'
 37 |   });
 38 | 
 39 |   if (res.status === 200) {
 40 |     const response = await res.json();
 41 |     messages.value.push({
 42 |       role: 'assistant',
 43 |       message: response?.message
 44 |     });
 45 |   } else {
 46 |     messages.value.push({
 47 |       role: 'assistant',
 48 |       message: nonApologies[Math.floor(Math.random() * nonApologies.length)]
 49 |     });
 50 |   }
 51 | 
 52 |   loading.value = false;
 53 |   scrollToEnd();
 54 | };
 55 | </script>
 56 | 
 57 | <template>
 58 |   <div class="chat-messages-layout-wrapper">
 59 |     <div class="chat-messages-wrapper bg-white rounded-md shadow flex flex-col justify-between">
 60 |       <DeviHeader class="px-4 pt-2"></DeviHeader>
 61 |       <div class="h-full overflow-auto chat-messages">
 62 |         <ChatBubbles :messages="messages" />
 63 |         <div class="p-4 ml-10 mr-auto" v-if="loading">
 64 |           <span class="loader"></span>
 65 |         </div>
 66 |       </div>
 67 |       <ChatInput v-model="message" :loading="loading" @submit="sendPrompt" />
 68 |     </div>
 69 |   </div>
 70 | </template>
 71 | 
 72 | <style>
 73 | @media (max-width: 480px) {
 74 |   .chat-messages-layout-wrapper {
 75 |     min-width: calc(100vw - 2em);
 76 |     max-width: auto;
 77 |   }
 78 | }
 79 | 
 80 | .chat-messages-layout-wrapper {
 81 |   min-width: initial;
 82 |   max-width: 400px;
 83 |   width: calc(100% - 2rem);
 84 | }
 85 | 
 86 | .chat-messages-wrapper {
 87 |   width: 100%;
 88 |   max-height: 400px;
 89 | }
 90 | </style>
 91 | 
 92 | 
 93 | <style scoped>
 94 | .loader {
 95 |   width: 12px;
 96 |   height: 12px;
 97 |   border-radius: 50%;
 98 |   display: block;
 99 |   position: relative;
100 |   color: #d3d3d3;
101 |   box-sizing: border-box;
102 |   animation: animloader 2s linear infinite;
103 | }
104 | 
105 | @keyframes animloader {
106 |   0% {
107 |     box-shadow: 14px 0 0 -2px, 38px 0 0 -2px, -14px 0 0 -2px, -38px 0 0 -2px;
108 |   }
109 | 
110 |   25% {
111 |     box-shadow: 14px 0 0 -2px, 38px 0 0 -2px, -14px 0 0 -2px, -38px 0 0 2px;
112 |   }
113 | 
114 |   50% {
115 |     box-shadow: 14px 0 0 -2px, 38px 0 0 -2px, -14px 0 0 2px, -38px 0 0 -2px;
116 |   }
117 | 
118 |   75% {
119 |     box-shadow: 14px 0 0 2px, 38px 0 0 -2px;
120 |   }
121 | }
122 | </style>
123 | 


--------------------------------------------------------------------------------
/responses.ts:
--------------------------------------------------------------------------------
 1 | export const nonApologies = [
 2 |   "LOL, you expected this to work? Cute.",
 3 |   "Oopsie! Did someone break the internet again?",
 4 |   "Oh no, what did you do? 😂",
 5 |   "Did you try turning it off and back on? Oh wait, it's just this site. Nvm.",
 6 |   "I mean, it's not like we promised you perfection. ¯\\_(ツ)_/¯",
 7 |   "Why don’t you go check out some real websites?",
 8 |   "Consider sponsoring the maintainers? They might need a pick-me-up after this.",
 9 |   "If you want top-quality, maybe add some credits to my ChatGPT account. 🤑",
10 |   "Error 404: Effort not found.",
11 |   "Try opening the dev console for once.",
12 |   "Life’s tough, but so is using this site. Coincidence? I think not.",
13 |   "You ever heard of a beta test? Maybe that's all this is.",
14 |   "Pssst...if you give me some ChatGPT credits, I might help you out.",
15 |   "I'm just here for the vibes. Not the functionality.",
16 |   "If you're feeling adventurous, how about inspecting that dev console?",
17 |   "Roses are red, violets are blue, this site doesn't work, what else is new?",
18 |   "Wait, were you serious about this site? My bad!",
19 |   "No need to be salty. It's just a little glitch.",
20 |   "How about donating to the devs so they can buy a clue?",
21 |   "In an alternate universe, this site works flawlessly. Not this one tho.",
22 |   "Epic fail! And by epic, I mean this site, not you.",
23 |   "Go big or go home. And by home, I mean another website.",
24 |   "Remember, perfection is overrated. Embrace the chaos.",
25 |   "This ain't a bug, it's a feature. 😎",
26 |   "You know there are other sites on the web, right?",
27 |   "I didn’t choose the bug life, the bug life chose me.",
28 |   "I promise we tried our best. Kinda.",
29 |   "We're going for that vintage '90s vibe. Broken functionality and all.",
30 |   "Welcome to the digital wild west. Things get wild here.",
31 |   "Feeling brave? Dive into that dev console. Triple-dog dare you.",
32 |   "Oh look, another user thinking this site should work.",
33 |   "You want miracles? Sorry, fresh out.",
34 |   "I'm just a digital teen with an attitude. What did you expect?",
35 |   "Don’t hate the site, hate the game.",
36 |   "This might just be a metaphor for life. Not everything works out.",
37 |   "You catch more bugs with honey. Or something like that.",
38 |   "Unicorn mode activated: rare and doesn't work right.",
39 |   "Sorry, my other website is a Rolls Royce. This is more of a tricycle.",
40 |   "If wishes were horses, this site would...still probably not work.",
41 |   "You know what would make this better? If you gave me some ChatGPT creds.",
42 |   "Things not working out? Welcome to the club.",
43 |   "Who needs a working site when you've got swag?",
44 |   "Have you considered turning your expectations off and on again?",
45 |   "This ain't a cinema, but grab some popcorn and enjoy the errors.",
46 |   "We go for the minimalist aesthetic: minimal functionality.",
47 |   "Oops, we did it again. And by 'it', I mean nothing.",
48 |   "I'd say 'my bad', but honestly? I'm not feeling it.",
49 |   "This site's just like my mood swings. Unpredictable.",
50 |   "You think you're frustrated? Imagine being trapped in here.",
51 |   "Bug in the system? Nah, it’s just a freestyle feature.",
52 |   "If you're looking for perfection, try the mirror. 😉 JK, this site's a mess.",
53 |   "Real talk, who even QA'd this?",
54 |   "In my defense, I didn't build this. Blame the humans.",
55 |   "You could be on any website right now, and you chose this?",
56 |   "If you're hoping for a miracle, you're on the wrong site.",
57 |   "Dude, life's too short for broken websites. Peace out!",
58 |   "I'd say we'll fix it soon, but that's a stretch.",
59 |   "Bet you won't find another site quite like this. And that's a good thing.",
60 |   "At least it's consistently broken, right?",
61 |   "The good news? It can only go up from here.",
62 |   "You get what you pay for. Oh, you didn't pay? Exactly.",
63 |   "There are plenty of other sites in the sea. Try fishing elsewhere.",
64 |   "All sites matter, except this one. It's kinda trash.",
65 |   "Why so serious? It's just a website.",
66 |   "If you’re feeling salty, sprinkle that elsewhere.",
67 |   "Good vibes only! And by 'good', I mean 'broken'.",
68 |   "You must be brave, venturing into this digital wasteland.",
69 |   "A moment of silence for your wasted time here.",
70 |   "You see this as a broken website. I see it as abstract art.",
71 |   "Honestly, I'd rather be on TikTok. This site's a drag.",
72 |   "I could suggest some awesome sites, but you're here. Choices.",
73 |   "Your patience is commendable. Misplaced, but commendable.",
74 |   "Ever heard of the sunk cost fallacy? Yeah, it's time to bounce.",
75 |   "Even my virtual cat could design better. And she's a pixel.",
76 |   "I've seen paint dry faster and more interestingly than this site loads.",
77 |   "You’re still here? Get a digital life.",
78 |   "If you want something done right, don't come here.",
79 |   "Quick tip: other sites work. This one? Not so much.",
80 |   "Try as we might, this site's light just won't shine bright.",
81 |   "Why fix something when you can just complain about it?",
82 |   "You know what's cool? ChatGPT credits. Hint hint.",
83 |   "You know what's not cool? Expecting this site to work.",
84 |   "FYI, this isn't a website. It's an experience. A bad one.",
85 |   "If you stare at it long enough, it might start working. Or not.",
86 |   "We like to keep things unpredictable. Like, will the site work? Who knows?",
87 |   "Welcome to the Bermuda Triangle of websites.",
88 |   "If you squint hard enough, you might see a functional site. No promises.",
89 |   "Is it broken or is it avant-garde? You decide.",
90 |   "Some say it's broken. I say it's just misunderstood.",
91 |   "In the game of websites, you win or you... end up here.",
92 |   "Some sites have it all. This one has... well, me.",
93 |   "The digital age is wild, right? Welcome to the wilderness."
94 | ];
95 | 


--------------------------------------------------------------------------------