remove text based componets, add blog, minor theming changes

2026-01-30 17:58:52 -05:00
parent 24b8a6c4ec
commit d5d0fb904a
18 changed files with 1510 additions and 322 deletions
--- a/app/components/AboutShrimpOS.vue
+++ b/app/components/AboutShrimpOS.vue
@@ -0,0 +1,148 @@
+<template>
+  <Teleport to="body">
+    <div
+      v-if="isOpen"
+      id="aboutDiag"
+      class="fixed inset-0 flex items-center justify-center z-50"
+      @click.self="close"
+    >
+      <div
+        class="bg-[#c0c0c0] border-2 border-white border-r-[#808080] border-b-[#808080] shadow-lg"
+        style="width: 400px"
+        @mousedown="startDrag"
+      >
+        <!-- Title Bar -->
+        <div
+          ref="titleBar"
+          class="bg-linear-to-r from-[#0054E3] to-[#3C8CF7] px-2 py-1 flex justify-between items-center cursor-move"
+        >
+          <div class="flex items-center gap-1 text-white font-bold text-sm">
+            <span>About ShrimpOS</span>
+          </div>
+          <button
+            class="bg-[#c0c0c0] border-2 border-white border-r-[#808080] border-b-[#808080] w-6 h-6 flex items-center justify-center text-xs font-bold hover:bg-[#dfdfdf]"
+            @click="close"
+          >
+            <X :size="60" />
+          </button>
+        </div>
+
+        <!-- Content -->
+        <div class="p-6">
+          <div class="flex items-start gap-4 mb-4">
+            <div class="text-6xl">🦐</div>
+            <div class="flex-1">
+              <h2 class="text-2xl font-bold mb-2">ShrimpOS</h2>
+              <p class="text-sm mb-1">Version 1.0</p>
+              <p class="text-xs text-gray-600 mb-4">© 2026 ShrimpOS. All rights reserved.</p>
+            </div>
+          </div>
+
+          <div class="border-t-2 border-[#808080] border-b-2 pt-3 pb-3 mb-4">
+            <p class="text-sm mb-3">
+              <strong>ShrimpOS is activated.</strong>
+            </p>
+            <p class="text-xs text-gray-700 leading-relaxed">
+              If you encounter any issues or have questions, please contact us 
+              at 1-800-SHRIMP-OS or visit our website at
+              <a href="https://teamhydra.dev" class="text-blue-600 underline" target="_blank">www.shrimpos.com/support</a>.
+            </p>
+          </div>
+
+          <div class="mb-4">
+            <p class="text-xs font-bold mb-2">ShrimpOS is proudly powered by:</p>
+            <div class="space-y-1 text-xs">
+              <div class="flex items-center gap-2">
+                <span class="text-[#42b883]">●</span>
+                <span>Vue.js - Progressive JavaScript Framework</span>
+              </div>
+              <div class="flex items-center gap-2">
+                <span class="text-[#00DC82]">●</span>
+                <span>Nuxt 3 - The Intuitive Vue Framework</span>
+              </div>
+              <div class="flex items-center gap-2">
+                <span class="text-[#F38020]">●</span>
+                <span>Cloudflare Pages - Fast & Secure Hosting</span>
+              </div>
+              <div class="flex items-center gap-2">
+                <span class="text-[#F6821F]">●</span>
+                <span>Cloudflare D1 - Serverless SQL Database</span>
+              </div>
+            </div>
+          </div>
+
+          <div class="flex justify-end">
+            <button
+              class="bg-[#c0c0c0] border-2 border-white border-r-[#808080] border-b-[#808080] px-6 py-1 text-sm hover:bg-[#dfdfdf] active:border-[#808080] active:border-r-white active:border-b-white"
+              @click="close"
+            >
+              OK
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { X } from 'lucide-vue-next'
+import { ref } from 'vue'
+
+defineProps<{
+  isOpen: boolean
+}>()
+
+defineOptions({
+  name: 'AboutShrimpOS'
+})
+
+const emit = defineEmits<{
+  close: []
+}>()
+
+const titleBar = ref<HTMLElement | null>(null)
+const isDragging = ref(false)
+const dragOffset = ref({ x: 0, y: 0 })
+
+const close = () => {
+  emit('close')
+}
+
+const startDrag = (e: MouseEvent) => {
+  // Only start dragging if clicking on the title bar, not the close button
+  if ((e.target as HTMLElement).closest('.bg-gradient-to-r') && !(e.target as HTMLElement).closest('button')) {
+    isDragging.value = true
+    const dialog = (e.currentTarget as HTMLElement)
+    const rect = dialog.getBoundingClientRect()
+    dragOffset.value = {
+      x: e.clientX - rect.left,
+      y: e.clientY - rect.top
+    }
+    document.addEventListener('mousemove', drag)
+    document.addEventListener('mouseup', stopDrag)
+  }
+}
+
+const drag = (e: MouseEvent) => {
+  if (!isDragging.value) return
+  const dialog = document.getElementById('aboutDiag')?.firstElementChild as HTMLElement
+  if (dialog) {
+    dialog.style.position = 'fixed'
+    dialog.style.left = `${e.clientX - dragOffset.value.x}px`
+    dialog.style.top = `${e.clientY - dragOffset.value.y}px`
+  }
+}
+
+const stopDrag = () => {
+  isDragging.value = false
+  document.removeEventListener('mousemove', drag)
+  document.removeEventListener('mouseup', stopDrag)
+}
+</script>
+
+<style scoped>
+.cursor-move {
+  cursor: move;
+}
+</style>