Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>So? - Interactive Philosophy & Decision Engine</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@300;400;500&display=swap" rel="stylesheet"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| fontFamily: { | |
| sans: ['Space Grotesk', 'sans-serif'], | |
| mono: ['JetBrains Mono', 'monospace'], | |
| }, | |
| colors: { | |
| void: '#0a0a0f', | |
| surface: '#12121a', | |
| accent: '#6366f1', | |
| accent2: '#8b5cf6', | |
| text: '#e2e8f0', | |
| muted: '#64748b' | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| * { margin: 0; padding: 0; box-sizing: border-box; } | |
| body { | |
| background: #0a0a0f; | |
| color: #e2e8f0; | |
| font-family: 'Space Grotesk', sans-serif; | |
| overflow-x: hidden; | |
| min-height: 100vh; | |
| } | |
| /* Animated background */ | |
| .bg-mesh { | |
| position: fixed; | |
| inset: 0; | |
| z-index: 0; | |
| background: | |
| radial-gradient(ellipse at 20% 80%, rgba(99, 102, 241, 0.08) 0%, transparent 50%), | |
| radial-gradient(ellipse at 80% 20%, rgba(139, 92, 246, 0.06) 0%, transparent 50%), | |
| radial-gradient(ellipse at 50% 50%, rgba(99, 102, 241, 0.03) 0%, transparent 70%); | |
| animation: bgPulse 8s ease-in-out infinite; | |
| } | |
| @keyframes bgPulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.7; } | |
| } | |
| /* Floating particles */ | |
| .particle { | |
| position: fixed; | |
| width: 2px; | |
| height: 2px; | |
| background: rgba(99, 102, 241, 0.4); | |
| border-radius: 50%; | |
| pointer-events: none; | |
| z-index: 1; | |
| } | |
| /* Glass morphism */ | |
| .glass { | |
| background: rgba(18, 18, 26, 0.7); | |
| backdrop-filter: blur(20px); | |
| -webkit-backdrop-filter: blur(20px); | |
| border: 1px solid rgba(255, 255, 255, 0.06); | |
| } | |
| .glass-strong { | |
| background: rgba(18, 18, 26, 0.85); | |
| backdrop-filter: blur(30px); | |
| -webkit-backdrop-filter: blur(30px); | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| } | |
| /* Glow effects */ | |
| .glow { | |
| box-shadow: 0 0 40px rgba(99, 102, 241, 0.15); | |
| } | |
| .glow-text { | |
| text-shadow: 0 0 30px rgba(99, 102, 241, 0.3); | |
| } | |
| /* Typing cursor */ | |
| .cursor-blink { | |
| animation: blink 1s step-end infinite; | |
| } | |
| @keyframes blink { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0; } | |
| } | |
| /* Breathing animation for the main question */ | |
| .breathe { | |
| animation: breathe 4s ease-in-out infinite; | |
| } | |
| @keyframes breathe { | |
| 0%, 100% { transform: scale(1); opacity: 0.9; } | |
| 50% { transform: scale(1.02); opacity: 1; } | |
| } | |
| /* Card hover */ | |
| .card-hover { | |
| transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-4px); | |
| box-shadow: 0 20px 60px rgba(99, 102, 241, 0.15); | |
| border-color: rgba(99, 102, 241, 0.3); | |
| } | |
| /* Button ripple */ | |
| .btn-ripple { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .btn-ripple::after { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(255,255,255,0.15) 0%, transparent 60%); | |
| opacity: 0; | |
| transition: opacity 0.3s; | |
| } | |
| .btn-ripple:hover::after { | |
| opacity: 1; | |
| } | |
| /* Progress ring */ | |
| .progress-ring { | |
| transform: rotate(-90deg); | |
| } | |
| .progress-ring-circle { | |
| transition: stroke-dashoffset 0.5s ease; | |
| } | |
| /* Scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 6px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: transparent; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: rgba(99, 102, 241, 0.3); | |
| border-radius: 3px; | |
| } | |
| /* Noise texture overlay */ | |
| .noise { | |
| position: fixed; | |
| inset: 0; | |
| z-index: 2; | |
| pointer-events: none; | |
| opacity: 0.03; | |
| background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); | |
| } | |
| /* Section transitions */ | |
| .section-fade { | |
| opacity: 0; | |
| transform: translateY(30px); | |
| transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .section-fade.visible { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| /* Stagger children */ | |
| .stagger-children > * { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| .stagger-children.visible > * { | |
| animation: staggerIn 0.6s ease forwards; | |
| } | |
| .stagger-children.visible > *:nth-child(1) { animation-delay: 0.1s; } | |
| .stagger-children.visible > *:nth-child(2) { animation-delay: 0.2s; } | |
| .stagger-children.visible > *:nth-child(3) { animation-delay: 0.3s; } | |
| .stagger-children.visible > *:nth-child(4) { animation-delay: 0.4s; } | |
| .stagger-children.visible > *:nth-child(5) { animation-delay: 0.5s; } | |
| .stagger-children.visible > *:nth-child(6) { animation-delay: 0.6s; } | |
| @keyframes staggerIn { | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| /* Input focus glow */ | |
| .input-glow:focus { | |
| box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2), 0 0 20px rgba(99, 102, 241, 0.1); | |
| } | |
| /* Decision wheel */ | |
| .wheel-container { | |
| position: relative; | |
| } | |
| .wheel-slice { | |
| position: absolute; | |
| width: 50%; | |
| height: 50%; | |
| transform-origin: 100% 100%; | |
| clip-path: polygon(0 0, 100% 0, 100% 100%); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 0.75rem; | |
| font-weight: 500; | |
| transition: all 0.3s; | |
| } | |
| .wheel-slice:hover { | |
| filter: brightness(1.2); | |
| } | |
| /* Perspective container */ | |
| .perspective-container { | |
| perspective: 1000px; | |
| } | |
| .flip-card { | |
| transform-style: preserve-3d; | |
| transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .flip-card.flipped { | |
| transform: rotateY(180deg); | |
| } | |
| .flip-front, .flip-back { | |
| backface-visibility: hidden; | |
| -webkit-backface-visibility: hidden; | |
| } | |
| .flip-back { | |
| transform: rotateY(180deg); | |
| } | |
| /* Matrix rain effect for the void */ | |
| .matrix-char { | |
| position: fixed; | |
| font-family: 'JetBrains Mono', monospace; | |
| font-size: 14px; | |
| color: rgba(99, 102, 241, 0.3); | |
| pointer-events: none; | |
| z-index: 1; | |
| animation: matrixFall linear; | |
| } | |
| @keyframes matrixFall { | |
| 0% { opacity: 0; transform: translateY(-20px); } | |
| 10% { opacity: 1; } | |
| 90% { opacity: 1; } | |
| 100% { opacity: 0; transform: translateY(100vh); } | |
| } | |
| /* Pulse ring */ | |
| .pulse-ring { | |
| position: absolute; | |
| border-radius: 50%; | |
| border: 1px solid rgba(99, 102, 241, 0.3); | |
| animation: pulseRing 3s ease-out infinite; | |
| } | |
| @keyframes pulseRing { | |
| 0% { transform: scale(0.8); opacity: 1; } | |
| 100% { transform: scale(2); opacity: 0; } | |
| } | |
| /* Custom range slider */ | |
| input[type="range"] { | |
| -webkit-appearance: none; | |
| appearance: none; | |
| background: transparent; | |
| cursor: pointer; | |
| } | |
| input[type="range"]::-webkit-slider-runnable-track { | |
| height: 4px; | |
| background: rgba(99, 102, 241, 0.2); | |
| border-radius: 2px; | |
| } | |
| input[type="range"]::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| appearance: none; | |
| width: 20px; | |
| height: 20px; | |
| background: #6366f1; | |
| border-radius: 50%; | |
| margin-top: -8px; | |
| box-shadow: 0 0 15px rgba(99, 102, 241, 0.4); | |
| transition: all 0.2s; | |
| } | |
| input[type="range"]::-webkit-slider-thumb:hover { | |
| transform: scale(1.2); | |
| box-shadow: 0 0 25px rgba(99, 102, 241, 0.6); | |
| } | |
| /* Loading shimmer */ | |
| .shimmer { | |
| background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.1), transparent); | |
| background-size: 200% 100%; | |
| animation: shimmer 2s infinite; | |
| } | |
| @keyframes shimmer { | |
| 0% { background-position: -200% 0; } | |
| 100% { background-position: 200% 0; } | |
| } | |
| /* Tab indicator */ | |
| .tab-indicator { | |
| transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| /* Tooltip */ | |
| .tooltip { | |
| position: relative; | |
| } | |
| .tooltip::before { | |
| content: attr(data-tip); | |
| position: absolute; | |
| bottom: 100%; | |
| left: 50%; | |
| transform: translateX(-50%) translateY(-8px); | |
| padding: 6px 12px; | |
| background: rgba(18, 18, 26, 0.95); | |
| border: 1px solid rgba(99, 102, 241, 0.2); | |
| border-radius: 8px; | |
| font-size: 0.75rem; | |
| white-space: nowrap; | |
| opacity: 0; | |
| pointer-events: none; | |
| transition: all 0.3s; | |
| } | |
| .tooltip:hover::before { | |
| opacity: 1; | |
| transform: translateX(-50%) translateY(-4px); | |
| } | |
| /* Connection lines for mind map */ | |
| .connection-line { | |
| stroke: rgba(99, 102, 241, 0.2); | |
| stroke-width: 1; | |
| fill: none; | |
| animation: linePulse 2s ease-in-out infinite; | |
| } | |
| @keyframes linePulse { | |
| 0%, 100% { stroke-opacity: 0.2; } | |
| 50% { stroke-opacity: 0.5; } | |
| } | |
| /* Gradient text */ | |
| .gradient-text { | |
| background: linear-gradient(135deg, #6366f1, #8b5cf6, #a78bfa); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| /* Floating animation */ | |
| .float { | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0px); } | |
| 50% { transform: translateY(-10px); } | |
| } | |
| /* Orbit animation */ | |
| .orbit { | |
| animation: orbit 20s linear infinite; | |
| } | |
| @keyframes orbit { | |
| 0% { transform: rotate(0deg) translateX(100px) rotate(0deg); } | |
| 100% { transform: rotate(360deg) translateX(100px) rotate(-360deg); } | |
| } | |
| /* SVG morphing */ | |
| .morph-path { | |
| transition: d 0.5s ease; | |
| } | |
| /* Responsive grid */ | |
| .auto-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); | |
| gap: 1.5rem; | |
| } | |
| /* Terminal effect */ | |
| .terminal-line { | |
| opacity: 0; | |
| animation: terminalReveal 0.5s ease forwards; | |
| } | |
| @keyframes terminalReveal { | |
| to { opacity: 1; } | |
| } | |
| /* Hexagon shape */ | |
| .hexagon { | |
| clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); | |
| } | |
| /* Liquid button */ | |
| .liquid-btn { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .liquid-btn::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: -100%; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent); | |
| transition: left 0.5s; | |
| } | |
| .liquid-btn:hover::before { | |
| left: 100%; | |
| } | |
| /* Perspective tilt on hover */ | |
| .tilt-card { | |
| transition: transform 0.3s ease; | |
| transform-style: preserve-3d; | |
| } | |
| /* Custom checkbox */ | |
| .custom-checkbox { | |
| appearance: none; | |
| width: 20px; | |
| height: 20px; | |
| border: 2px solid rgba(99, 102, 241, 0.3); | |
| border-radius: 6px; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| position: relative; | |
| } | |
| .custom-checkbox:checked { | |
| background: #6366f1; | |
| border-color: #6366f1; | |
| } | |
| .custom-checkbox:checked::after { | |
| content: ''; | |
| position: absolute; | |
| left: 5px; | |
| top: 2px; | |
| width: 6px; | |
| height: 10px; | |
| border: solid white; | |
| border-width: 0 2px 2px 0; | |
| transform: rotate(45deg); | |
| } | |
| /* Wave animation */ | |
| .wave { | |
| animation: wave 2s ease-in-out infinite; | |
| } | |
| @keyframes wave { | |
| 0%, 100% { transform: scaleY(1); } | |
| 50% { transform: scaleY(1.5); } | |
| } | |
| /* Loading dots */ | |
| .loading-dots span { | |
| animation: loadingDot 1.4s ease-in-out infinite; | |
| } | |
| .loading-dots span:nth-child(2) { animation-delay: 0.2s; } | |
| .loading-dots span:nth-child(3) { animation-delay: 0.4s; } | |
| @keyframes loadingDot { | |
| 0%, 80%, 100% { transform: scale(0); opacity: 0; } | |
| 40% { transform: scale(1); opacity: 1; } | |
| } | |
| /* Neon border */ | |
| .neon-border { | |
| position: relative; | |
| } | |
| .neon-border::before { | |
| content: ''; | |
| position: absolute; | |
| inset: -2px; | |
| border-radius: inherit; | |
| background: linear-gradient(135deg, #6366f1, #8b5cf6, #6366f1); | |
| z-index: -1; | |
| opacity: 0; | |
| transition: opacity 0.3s; | |
| filter: blur(8px); | |
| } | |
| .neon-border:hover::before { | |
| opacity: 0.5; | |
| } | |
| /* Scroll indicator */ | |
| .scroll-indicator { | |
| animation: scrollBounce 2s ease-in-out infinite; | |
| } | |
| @keyframes scrollBounce { | |
| 0%, 100% { transform: translateY(0); opacity: 0.5; } | |
| 50% { transform: translateY(10px); opacity: 1; } | |
| } | |
| /* Magnetic button effect */ | |
| .magnetic { | |
| transition: transform 0.2s ease; | |
| } | |
| /* Confetti */ | |
| .confetti { | |
| position: fixed; | |
| width: 10px; | |
| height: 10px; | |
| pointer-events: none; | |
| z-index: 100; | |
| } | |
| /* Perspective text */ | |
| .perspective-text { | |
| transform: perspective(500px) rotateX(10deg); | |
| transition: transform 0.3s; | |
| } | |
| .perspective-text:hover { | |
| transform: perspective(500px) rotateX(0deg); | |
| } | |
| /* Glow border on focus */ | |
| .focus-glow:focus-within { | |
| box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3), 0 0 30px rgba(99, 102, 241, 0.1); | |
| } | |
| /* Smooth number counter */ | |
| .counter { | |
| font-variant-numeric: tabular-nums; | |
| } | |
| /* Image placeholder with pattern */ | |
| .pattern-bg { | |
| background-image: | |
| radial-gradient(circle at 25% 25%, rgba(99, 102, 241, 0.05) 1px, transparent 1px), | |
| radial-gradient(circle at 75% 75%, rgba(139, 92, 246, 0.05) 1px, transparent 1px); | |
| background-size: 20px 20px; | |
| } | |
| /* Status indicator */ | |
| .status-dot { | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| position: relative; | |
| } | |
| .status-dot::after { | |
| content: ''; | |
| position: absolute; | |
| inset: -4px; | |
| border-radius: 50%; | |
| border: 1px solid currentColor; | |
| animation: statusPulse 2s ease-out infinite; | |
| } | |
| @keyframes statusPulse { | |
| 0% { transform: scale(1); opacity: 1; } | |
| 100% { transform: scale(2); opacity: 0; } | |
| } | |
| /* Horizontal scroll snap */ | |
| .snap-scroll { | |
| scroll-snap-type: x mandatory; | |
| -webkit-overflow-scrolling: touch; | |
| } | |
| .snap-scroll > * { | |
| scroll-snap-align: start; | |
| } | |
| /* 3D card stack */ | |
| .card-stack { | |
| perspective: 1000px; | |
| } | |
| .card-stack-item { | |
| transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| /* Ambient light effect */ | |
| .ambient-light { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .ambient-light::before { | |
| content: ''; | |
| position: absolute; | |
| width: 200px; | |
| height: 200px; | |
| background: radial-gradient(circle, rgba(99, 102, 241, 0.15), transparent 70%); | |
| border-radius: 50%; | |
| pointer-events: none; | |
| transition: all 0.3s; | |
| opacity: 0; | |
| } | |
| .ambient-light:hover::before { | |
| opacity: 1; | |
| } | |
| /* Text scramble effect placeholder */ | |
| .scramble-text { | |
| font-family: 'JetBrains Mono', monospace; | |
| } | |
| /* Breathing border */ | |
| .breathing-border { | |
| animation: breathingBorder 3s ease-in-out infinite; | |
| } | |
| @keyframes breathingBorder { | |
| 0%, 100% { border-color: rgba(99, 102, 241, 0.1); } | |
| 50% { border-color: rgba(99, 102, 241, 0.3); } | |
| } | |
| /* Responsive typography */ | |
| .fluid-text { | |
| font-size: clamp(2rem, 8vw, 6rem); | |
| } | |
| .fluid-text-sm { | |
| font-size: clamp(1rem, 3vw, 1.5rem); | |
| } | |
| /* Hide scrollbar but keep functionality */ | |
| .hide-scrollbar { | |
| -ms-overflow-style: none; | |
| scrollbar-width: none; | |
| } | |
| .hide-scrollbar::-webkit-scrollbar { | |
| display: none; | |
| } | |
| /* Selection color */ | |
| ::selection { | |
| background: rgba(99, 102, 241, 0.3); | |
| color: #e2e8f0; | |
| } | |
| /* Focus visible */ | |
| :focus-visible { | |
| outline: 2px solid rgba(99, 102, 241, 0.5); | |
| outline-offset: 2px; | |
| } | |
| /* Reduced motion */ | |
| @media (prefers-reduced-motion: reduce) { | |
| *, *::before, *::after { | |
| animation-duration: 0.01ms ; | |
| animation-iteration-count: 1 ; | |
| transition-duration: 0.01ms ; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Background effects --> | |
| <div class="bg-mesh"></div> | |
| <div class="noise"></div> | |
| <div id="particles"></div> | |
| <div id="matrix-container"></div> | |
| <!-- Navigation --> | |
| <nav class="fixed top-0 left-0 right-0 z-50 glass-strong"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex items-center justify-between h-16"> | |
| <div class="flex items-center gap-3"> | |
| <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-accent to-accent2 flex items-center justify-center"> | |
| <span class="text-white font-bold text-sm">S</span> | |
| </div> | |
| <span class="font-bold text-lg tracking-tight">So?</span> | |
| </div> | |
| <div class="hidden md:flex items-center gap-1"> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="px-3 py-1.5 text-xs text-muted hover:text-text transition-colors rounded-lg hover:bg-white/5"> | |
| Built with anycoder | |
| </a> | |
| <button onclick="scrollToSection('philosophy')" class="nav-btn px-4 py-2 text-sm text-muted hover:text-text transition-colors rounded-lg hover:bg-white/5">Philosophy</button> | |
| <button onclick="scrollToSection('decisions')" class="nav-btn px-4 py-2 text-sm text-muted hover:text-text transition-colors rounded-lg hover:bg-white/5">Decisions</button> | |
| <button onclick="scrollToSection('perspective')" class="nav-btn px-4 py-2 text-sm text-muted hover:text-text transition-colors rounded-lg hover:bg-white/5">Perspective</button> | |
| <button onclick="scrollToSection('void')" class="nav-btn px-4 py-2 text-sm text-muted hover:text-text transition-colors rounded-lg hover:bg-white/5">The Void</button> | |
| </div> | |
| <button onclick="toggleMobileMenu()" class="md:hidden p-2 rounded-lg hover:bg-white/5"> | |
| <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div id="mobile-menu" class="hidden md:hidden glass-strong border-t border-white/5"> | |
| <div class="px-4 py-3 space-y-1"> | |
| <button onclick="scrollToSection('philosophy'); toggleMobileMenu()" class="block w-full text-left px-3 py-2 text-sm text-muted hover:text-text rounded-lg hover:bg-white/5">Philosophy</button> | |
| <button onclick="scrollToSection('decisions'); toggleMobileMenu()" class="block w-full text-left px-3 py-2 text-sm text-muted hover:text-text rounded-lg hover:bg-white/5">Decisions</button> | |
| <button onclick="scrollToSection('perspective'); toggleMobileMenu()" class="block w-full text-left px-3 py-2 text-sm text-muted hover:text-text rounded-lg hover:bg-white/5">Perspective</button> | |
| <button onclick="scrollToSection('void'); toggleMobileMenu()" class="block w-full text-left px-3 py-2 text-sm text-muted hover:text-text rounded-lg hover:bg-white/5">The Void</button> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="relative min-h-screen flex items-center justify-center px-4 z-10"> | |
| <div class="text-center max-w-4xl mx-auto"> | |
| <div class="mb-8"> | |
| <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full glass text-xs text-muted mb-6"> | |
| <span class="status-dot bg-emerald-400 text-emerald-400"></span> | |
| <span id="live-philosophers">2,847</span> philosophers contemplating right now | |
| </div> | |
| </div> | |
| <h1 class="fluid-text font-bold mb-6 breathe glow-text"> | |
| So<span class="gradient-text">?</span> | |
| </h1> | |
| <p class="fluid-text-sm text-muted mb-4 max-w-2xl mx-auto leading-relaxed" id="hero-subtitle"> | |
| The most important question you can ask. | |
| </p> | |
| <div class="h-8 mb-10"> | |
| <p class="text-sm text-accent font-mono" id="typing-text"></p> | |
| <span class="cursor-blink text-accent">|</span> | |
| </div> | |
| <div class="flex flex-col sm:flex-row items-center justify-center gap-4"> | |
| <button onclick="scrollToSection('philosophy')" class="liquid-btn btn-ripple px-8 py-4 bg-gradient-to-r from-accent to-accent2 rounded-xl font-medium text-white shadow-lg shadow-accent/25 hover:shadow-xl hover:shadow-accent/30 transition-all transform hover:scale-105"> | |
| Begin Contemplation | |
| </button> | |
| <button onclick="scrollToSection('void')" class="px-8 py-4 glass rounded-xl font-medium text-text hover:bg-white/10 transition-all"> | |
| Enter the Void | |
| </button> | |
| </div> | |
| <div class="mt-16 scroll-indicator"> | |
| <svg class="w-6 h-6 mx-auto text-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/> | |
| </svg> | |
| </div> | |
| </div> | |
| <!-- Decorative orbits --> | |
| <div class="absolute inset-0 pointer-events-none overflow-hidden"> | |
| <div class="absolute top-1/4 left-1/4 w-2 h-2 bg-accent/40 rounded-full orbit" style="animation-duration: 15s;"></div> | |
| <div class="absolute top-1/3 right-1/4 w-1.5 h-1.5 bg-accent2/40 rounded-full orbit" style="animation-duration: 20s; animation-direction: reverse;"></div> | |
| <div class="absolute bottom-1/4 left-1/3 w-1 h-1 bg-accent/30 rounded-full orbit" style="animation-duration: 25s;"></div> | |
| </div> | |
| </section> | |
| <!-- Philosophy Engine --> | |
| <section id="philosophy" class="relative z-10 py-24 px-4"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="section-fade text-center mb-16"> | |
| <h2 class="text-4xl md:text-5xl font-bold mb-4">Philosophy <span class="gradient-text">Engine</span></h2> | |
| <p class="text-muted max-w-xl mx-auto">Explore fundamental questions through interactive thought experiments. Each card reveals a different dimension of existence.</p> | |
| </div> | |
| <div class="stagger-children auto-grid" id="philosophy-grid"> | |
| <!-- Cards generated by JS --> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Decision Matrix --> | |
| <section id="decisions" class="relative z-10 py-24 px-4"> | |
| <div class="max-w-5xl mx-auto"> | |
| <div class="section-fade text-center mb-16"> | |
| <h2 class="text-4xl md:text-5xl font-bold mb-4">Decision <span class="gradient-text">Matrix</span></h2> | |
| <p class="text-muted max-w-xl mx-auto">When you're stuck between options, let the universe decide. Or don't. It's your choice. Or is it?</p> | |
| </div> | |
| <div class="section-fade glass rounded-2xl p-6 md:p-10 focus-glow"> | |
| <div class="grid md:grid-cols-2 gap-8"> | |
| <!-- Input side --> | |
| <div> | |
| <label class="block text-sm font-medium mb-3 text-muted">What are you deciding?</label> | |
| <input type="text" id="decision-question" placeholder="e.g., Should I quit my job?" | |
| class="w-full px-4 py-3 bg-void/50 border border-white/10 rounded-xl text-text placeholder-muted focus:outline-none input-glow transition-all mb-6"> | |
| <label class="block text-sm font-medium mb-3 text-muted">Your options (one per line)</label> | |
| <textarea id="decision-options" rows="4" placeholder="Stay and endure Quit and travel Start a business Do nothing" | |
| class="w-full px-4 py-3 bg-void/50 border border-white/10 rounded-xl text-text placeholder-muted focus:outline-none input-glow transition-all mb-6 resize-none font-mono text-sm"></textarea> | |
| <div class="flex gap-3 mb-6"> | |
| <button onclick="addOption()" class="px-4 py-2 glass rounded-lg text-sm hover:bg-white/10 transition-all"> | |
| + Add Option | |
| </button> | |
| <button onclick="clearOptions()" class="px-4 py-2 glass rounded-lg text-sm hover:bg-white/10 transition-all text-muted"> | |
| Clear | |
| </button> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-sm font-medium mb-3 text-muted">Decision Mode</label> | |
| <div class="flex gap-2 flex-wrap"> | |
| <button onclick="setMode('random')" class="mode-btn px-4 py-2 rounded-lg text-sm border border-accent/30 bg-accent/10 text-accent transition-all" data-mode="random">Pure Random</button> | |
| <button onclick="setMode('weighted')" class="mode-btn px-4 py-2 rounded-lg text-sm border border-white/10 hover:border-accent/30 transition-all" data-mode="weighted">Weighted</button> | |
| <button onclick="setMode('elimination')" class="mode-btn px-4 py-2 rounded-lg text-sm border border-white/10 hover:border-accent/30 transition-all" data-mode="elimination">Elimination</button> | |
| <button onclick="setMode('universe')" class="mode-btn px-4 py-2 rounded-lg text-sm border border-white/10 hover:border-accent/30 transition-all" data-mode="universe">Universe Says</button> | |
| </div> | |
| </div> | |
| <button onclick="makeDecision()" class="w-full liquid-btn btn-ripple py-4 bg-gradient-to-r from-accent to-accent2 rounded-xl font-medium text-white shadow-lg shadow-accent/25 hover:shadow-xl transition-all transform hover:scale-[1.02]"> | |
| Decide for Me | |
| </button> | |
| </div> | |
| <!-- Result side --> | |
| <div class="flex flex-col items-center justify-center min-h-[300px] relative"> | |
| <div id="decision-spinner" class="hidden absolute inset-0 flex items-center justify-center"> | |
| <div class="loading-dots flex gap-2"> | |
| <span class="w-3 h-3 bg-accent rounded-full"></span> | |
| <span class="w-3 h-3 bg-accent2 rounded-full"></span> | |
| <span class="w-3 h-3 bg-accent rounded-full"></span> | |
| </div> | |
| </div> | |
| <div id="decision-result" class="text-center"> | |
| <div class="w-48 h-48 mx-auto mb-6 relative"> | |
| <svg class="w-full h-full progress-ring" viewBox="0 0 100 100"> | |
| <circle cx="50" cy="50" r="45" fill="none" stroke="rgba(99,102,241,0.1)" stroke-width="2"/> | |
| <circle id="progress-circle" cx="50" cy="50" r="45" fill="none" stroke="url(#gradient)" stroke-width="3" | |
| stroke-dasharray="283" stroke-dashoffset="283" stroke-linecap="round" class="progress-ring-circle"/> | |
| <defs> | |
| <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%"> | |
| <stop offset="0%" stop-color="#6366f1"/> | |
| <stop offset="100%" stop-color="#8b5cf6"/> | |
| </linearGradient> | |
| </defs> | |
| </svg> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <span class="text-5xl">🎲</span> | |
| </div> | |
| </div> | |
| <p class="text-muted text-sm">Enter your options and let fate decide</p> | |
| </div> | |
| <div id="decision-history" class="mt-6 w-full max-h-40 overflow-y-auto hide-scrollbar"> | |
| <!-- History items --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Perspective Shifter --> | |
| <section id="perspective" class="relative z-10 py-24 px-4"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="section-fade text-center mb-16"> | |
| <h2 class="text-4xl md:text-5xl font-bold mb-4">Perspective <span class="gradient-text">Shifter</span></h2> | |
| <p class="text-muted max-w-xl mx-auto">See your situation through different lenses. Sometimes the answer is in the angle.</p> | |
| </div> | |
| <div class="section-fade perspective-container"> | |
| <div class="grid md:grid-cols-3 gap-6" id="perspective-grid"> | |
| <!-- Perspective cards --> | |
| </div> | |
| </div> | |
| <!-- Interactive perspective playground --> | |
| <div class="section-fade mt-12 glass rounded-2xl p-6 md:p-10"> | |
| <h3 class="text-xl font-semibold mb-6 text-center">Perspective Playground</h3> | |
| <div class="grid md:grid-cols-2 gap-8"> | |
| <div> | |
| <label class="block text-sm font-medium mb-3 text-muted">Describe your situation</label> | |
| <textarea id="situation-input" rows="3" placeholder="I'm worried about failing my presentation tomorrow..." | |
| class="w-full px-4 py-3 bg-void/50 border border-white/10 rounded-xl text-text placeholder-muted focus:outline-none input-glow transition-all resize-none mb-4"></textarea> | |
| <button onclick="shiftPerspective()" class="w-full py-3 glass rounded-xl hover:bg-white/10 transition-all"> | |
| Shift My Perspective | |
| </button> | |
| </div> | |
| <div class="glass rounded-xl p-6 bg-void/30"> | |
| <div id="perspective-output" class="space-y-4"> | |
| <p class="text-muted text-sm text-center italic">Enter a situation to see it from different angles...</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- The Void --> | |
| <section id="void" class="relative z-10 py-24 px-4 min-h-screen flex items-center"> | |
| <div class="max-w-4xl mx-auto text-center"> | |
| <div class="section-fade"> | |
| <h2 class="text-4xl md:text-6xl font-bold mb-6">The <span class="gradient-text">Void</span></h2> | |
| <p class="text-muted text-lg mb-12 max-w-2xl mx-auto"> | |
| Sometimes the answer is nothing. Sit with the silence. Let your thoughts dissolve into the infinite. | |
| </p> | |
| </div> | |
| <div class="section-fade relative"> | |
| <!-- Breathing circle --> | |
| <div class="relative w-64 h-64 md:w-80 md:h-80 mx-auto mb-12"> | |
| <div class="absolute inset-0 rounded-full bg-gradient-to-br from-accent/20 to-accent2/20 animate-ping" style="animation-duration: 4s;"></div> | |
| <div class="absolute inset-4 rounded-full bg-gradient-to-br from-accent/15 to-accent2/15 animate-ping" style="animation-duration: 4s; animation-delay: 0.5s;"></div> | |
| <div class="absolute inset-8 rounded-full bg-gradient-to-br from-accent/10 to-accent2/10 animate-ping" style="animation-duration: 4s; animation-delay: 1s;"></div> | |
| <div class="absolute inset-0 rounded-full glass flex items-center justify-center breathing-border"> | |
| <div class="text-center"> | |
| <p class="text-6xl mb-2" id="breath-emoji">🌑</p> | |
| <p class="text-sm text-muted font-mono" id="breath-text">inhale</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Void input --> | |
| <div class="max-w-md mx-auto"> | |
| <div class="relative"> | |
| <input type="text" id="void-input" placeholder="Speak into the void..." | |
| class="w-full px-6 py-4 bg-void/50 border border-white/10 rounded-full text-text placeholder-muted focus:outline-none input-glow transition-all text-center" | |
| onkeypress="if(event.key==='Enter') speakToVoid()"> | |
| <button onclick="speakToVoid()" class="absolute right-2 top-1/2 -translate-y-1/2 p-2 rounded-full hover:bg-white/10 transition-all"> | |
| <svg class="w-5 h-5 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Void responses --> | |
| <div id="void-responses" class="mt-8 max-w-md mx-auto space-y-3 max-h-60 overflow-y-auto hide-scrollbar"> | |
| <!-- Responses appear here --> | |
| </div> | |
| <!-- Void stats --> | |
| <div class="mt-12 flex items-center justify-center gap-8 text-sm text-muted"> | |
| <div class="text-center"> | |
| <p class="text-2xl font-bold text-text counter" id="void-messages">0</p> | |
| <p>messages sent</p> | |
| </div> | |
| <div class="w-px h-10 bg-white/10"></div> | |
| <div class="text-center"> | |
| <p class="text-2xl font-bold text-text counter" id="void-seconds">0</p> | |
| <p>seconds of silence</p> | |
| </div> | |
| <div class="w-px h-10 bg-white/10"></div> | |
| <div class="text-center"> | |
| <p class="text-2xl font-bold text-text">∞</p> | |
| <p>unanswered</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="relative z-10 py-12 px-4 border-t border-white/5"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="flex flex-col md:flex-row items-center justify-between gap-6"> | |
| <div class="flex items-center gap-3"> | |
| <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-accent to-accent2 flex items-center justify-center"> | |
| <span class="text-white font-bold text-sm">S</span> | |
| </div> | |
| <span class="font-bold text-lg">So?</span> | |
| </div> | |
| <div class="flex items-center gap-6 text-sm text-muted"> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="hover:text-text transition-colors">Built with anycoder</a> | |
| <span class="text-white/10">|</span> | |
| <span>Ask better questions</span> | |
| </div> | |
| <div class="flex items-center gap-4"> | |
| <button onclick="scrollToSection('philosophy')" class="text-sm text-muted hover:text-text transition-colors">Philosophy</button> | |
| <button onclick="scrollToSection('decisions')" class="text-sm text-muted hover:text-text transition-colors">Decisions</button> | |
| <button onclick="scrollToSection('perspective')" class="text-sm text-muted hover:text-text transition-colors">Perspective</button> | |
| </div> | |
| </div> | |
| <div class="mt-8 text-center text-xs text-muted/50"> | |
| <p>"The unexamined life is not worth living." — Socrates, probably after saying "So?"</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Toast notification --> | |
| <div id="toast" class="fixed bottom-6 right-6 z-50 glass-strong rounded-xl px-6 py-4 transform translate-y-20 opacity-0 transition-all duration-500 max-w-sm"> | |
| <p id="toast-message" class="text-sm"></p> | |
| </div> | |
| <script> | |
| // ==================== STATE ==================== | |
| const state = { | |
| decisionMode: 'random', | |
| decisionHistory: [], | |
| voidMessages: [], | |
| breathPhase: 0, | |
| voidSeconds: 0, | |
| livePhilosophers: 2847 | |
| }; | |
| // ==================== PHILOSOPHY CARDS ==================== | |
| const philosophyCards = [ | |
| { | |
| title: "The Ship of Theseus", | |
| icon: "🚢", | |
| question: "If every part of an object is replaced, is it still the same object?", | |
| description: "Consider: You replace every plank of a ship. Is it the same ship? What if you kept |