Spaces:
Running
Running
import React, { useState, useEffect } from 'react'; import { motion } from 'framer-motion'; import { FileText, Settings, Calendar, Bug, Palette, Code, Play, Save, History, ChevronRight, Moon, Zap, Eye } from 'lucide-react'; const App = () => { const [activeTab, setActiveTab] = useState('tas'); const [selectedTas, setSelectedTas] = useState(1); const [logs, setLogs] = useState([ '[2024-01-15 14:32:45] INFO: DOKK initialization complete', '[2024-01-15 14:33:12] WARN: Cold start detected in neon-noir module', '[2024-01-15 14:34:01] ERROR: Metaphor cascade failure - E404:MOTIF' ]); const tasSteps = [ { id: 1, title: "Define Micro-Project Scope", description: "Core premise, protagonist profile, constraints", prompt: "Produce a 1,000-word 'Digital Nightmare' short story set in a cold neon-noir city. Protagonist: mid-30s backend engineer with a failing critical service and a moral choice. Constraints: 3 scenes, ~330 words each, keep technical references plausible but accessible. Tone: clinical, anxious, elegiac. Include one log snippet and one error code as motif." }, { id: 2, title: "Create Story Bible", description: "Setting rules, tech ecosystem, key artifacts", prompt: "Return a compact story bible (bulleted) with: city sensory rules, network/stack basics used, protagonist backstory, antagonist forces (corp, rogue AI, infrastructure), three artifacts (log, key, terminal). Keep items terse for use in prompts." }, { id: 3, title: "Break into Beats", description: "3 scenes: inciting glitch, cascade, reveal", prompt: "Output a scene-by-scene beat sheet with scene goals, stakes, physical location, emotional arc, key lines or images to include (max 6 bullets per scene)." }, { id: 4, title: "Draft Prompts/Templates", description: "Generation & revision templates", prompt: "Generate 3 reusable prompts/templates: seed draft prompt, tighten-and-clarify revision prompt, technical-accuracy check prompt. Each must include explicit instructions for length, tone, and placeholders for variables (e.g., {log_snippet})." }, { id: 5, title: "Design Minimal UI", description: "Editor, log view, versioning", prompt: "Describe a minimal editor UI for rapid drafting: main editor, split log/terminal pane, version history, quick-insert snippet palette. Provide keyboard shortcuts and accessible color contrast values (WCAG AA)." }, { id: 6, title: "Implement Generation Pipeline", description: "Prompt runner, temperature control, caching", prompt: "Provide implementation steps and CLI commands to run generation: script to call model API with temperature presets, caching strategy, prompt concatenation order, and example environment variables. Include error handling pseudocode." }, { id: 7, title: "Integrate Evaluation Loop", description: "Unit tests, rubrics, human-in-the-loop", prompt: "Create an evaluation rubric (10–50 pts) for automated checks: coherence, plausibility, emotional arc, jargon clarity, pacing, originality. Add unit-test-style examples to detect hallucinated tech facts." }, { id: 8, title: "Polish & Publish", description: "Tech check, copy edit, formatting", prompt: "Produce a final checklist for polish and publication: tech fact verification, log formatting, copyedit pass, metadata tags, and export templates (Markdown, HTML)." } ]; const carePlan = { water: "Short iterative feedback cycles (daily micro-revisions)", light: "High contrast visuals: deep indigo backgrounds, cyan/neon-pink accents", soil: "Dense, layered motifs — logs, cables, rain-slick streets; keep texture minimal", feeding: "Feed with real engineering artifacts: authentic log formats, concise error codes, 2–3 sensory anchors per scene" }; const seasonalCalendar = [ { week: 1, task: "Scope, story bible, and beat sheet" }, { week: 2, task: "Draft scene 1–3 (one per 1–2 days), gather log snippets" }, { week: 3, task: "Revise for tone, tech plausibility, and pacing" }, { week: 4, task: "Polish, accessibility checks, export + publish" } ]; const troubleshooting = [ { symptom: "Atmosphere feels flat", fix: "Increase neon contrasts, add weather (cold rain, steam) and log-motif repetitions" }, { symptom: "Engineer reader disengaged", fix: "Add concrete constraints (SLA, countdown, failing test) and precise tech terms" }, { symptom: "Story too technical", fix: "Add sensory anchors, shorten jargon lines, insert emotional beats" }, { symptom: "Color palette low contrast", fix: "Use #0B1020 (indigo) background with #00E5FF (cyan) and #FF2D95 (neon-pink) accents; ensure text ≥ AA" } ]; const milestones = [ { day: 1, task: "Confirm bible and beats" }, { day: 3, task: "Scene 1 draft" }, { day: 5, task: "Scene 2 draft" }, { day: 7, task: "Scene 3 draft" }, { day: 10, task: "Revision pass" }, { day: 14, task: "Final polish & publish" } ]; const addLog = (message) => { setLogs(prev => [...prev, `[${new Date().toISOString().slice(0, 19).replace('T', ' ')}] ${message}`]); }; useEffect(() => { addLog(`TAS-${selectedTas} activated`); }, [selectedTas]); return ( <div className="min-h-screen bg-gray-900 text-cyan-100 font-mono"> {/* Header */} <header className="border-b border-cyan-500/30 bg-gray-900/80 backdrop-blur-sm sticky top-0 z-10"> <div className="container mx-auto px-4 py-3 flex items-center justify-between"> <motion.div className="flex items-center space-x-2" initial={{ opacity: 0, x: -20 }} animate={{ opacity: 1, x: 0 }} > <div className="w-3 h-3 bg-pink-500 rounded-full animate-pulse"></div> <h1 className="text-xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-pink-500"> DOKK — Digital Nightmare Toolkit </h1> </motion.div> <div className="flex space-x-4"> <button onClick={() => addLog("System status: Operational")} className="px-3 py-1 bg-cyan-900/50 border border-cyan-500/30 rounded text-xs hover:bg-cyan-800/50 transition-colors" > Status </button> </div> </div> </header> <div className="container mx-auto px-4 py-6 flex flex-col lg:flex-row gap-6"> {/* Sidebar */} <motion.aside className="lg:w-64 flex-shrink-0" initial={{ opacity: 0, x: -20 }} animate={{ opacity: 1, x: 0 }} transition={{ delay: 0.1 }} > <div className="bg-gray-800/50 border border-cyan-500/20 rounded-lg p-4 mb-6"> <h2 className="text-lg font-semibold mb-3 flex items-center"> <Settings className="mr-2 w-5 h-5 text-pink-400" /> Navigation </h2> <nav className="space-y-2"> {[ { id: 'tas', label: 'TAS Steps', icon: FileText }, { id: 'care', label: 'Care Plan', icon: Palette }, { id: 'calendar', label: 'Calendar', icon: Calendar }, { id: 'troubleshoot', label: 'Troubleshoot', icon: Bug }, { id: 'milestones', label: 'Milestones', icon: Eye } ].map((item) => { const Icon = item.icon; return ( <button key={item.id} onClick={() => setActiveTab(item.id)} className={`w-full text-left px-3 py-2 rounded flex items-center transition-colors ${ activeTab === item.id ? 'bg-cyan-900/30 text-cyan-300 border border-cyan-500/30' : 'hover:bg-gray-700/50' }`} > <Icon className="mr-2 w-4 h-4" /> {item.label} </button> ); })} </nav> </div> {/* Live Log */} <div className="bg-gray-800/50 border border-cyan-500/20 rounded-lg p-4"> <h3 className="text-md font-semibold mb-3 flex items-center"> <Code className="mr-2 w-4 h-4 text-cyan-400" /> Live Log </h3> <div className="bg-black/50 border border-cyan-500/10 rounded p-3 h-48 overflow-y-auto text-xs font-mono"> {logs.map((log, index) => ( <div key={index} className="mb-1 last:mb-0"> <span className="text-cyan-300">$</span> {log} </div> ))} </div> <button onClick={() => addLog("Manual log entry added")} className="mt-3 w-full py-1 bg-cyan-900/30 border border-cyan-500/30 rounded text-xs hover:bg-cyan-800/30 transition-colors" > Add Entry </button> </div> </motion.aside> {/* Main Content */} <main className="flex-1"> <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.2 }} > {activeTab === 'tas' && ( <div className="bg-gray-800/50 border border-cyan-500/20 rounded-lg p-6"> <h2 className="text-2xl font-bold mb-6 flex items-center"> <FileText className="mr-3 text-pink-400" /> TAS Steps </h2> <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8"> {tasSteps.map((step) => ( <motion.div key={step.id} whileHover={{ scale: 1.02 }} className={`p-4 rounded-lg border cursor-pointer transition-all ${ selectedTas === step.id ? 'bg-cyan-900/20 border-cyan-500/50' : 'bg-gray-700/30 border-gray-600/30 hover:border-cyan-500/30' }`} onClick={() => setSelectedTas(step.id)} > <div className="flex justify-between items-start"> <div> <h3 className="font-bold text-cyan-300">TAS-{step.id}</h3> <h4 className="font-semibold mt-1">{step.title}</h4> <p className="text-sm text-gray-300 mt-2">{step.description}</p> </div> <ChevronRight className="w-5 h-5 text-cyan-400" /> </div> </motion.div> ))} </div> <div className="bg-black/30 border border-cyan-500/20 rounded-lg p-5"> <div className="flex items-center justify-between mb-4"> <h3 className="text-lg font-semibold text-cyan-300"> Prompt for TAS-{selectedTas} </h3> <div className="flex space-x-2"> <button className="px-3 py-1 bg-cyan-900/30 border border-cyan-500/30 rounded text-xs flex items-center hover:bg-cyan-800/30 transition-colors"> <Play className="w-3 h-3 mr-1" /> Run </button> <button className="px-3 py-1 bg-gray-700/50 border border-gray-600/30 rounded text-xs flex items-center hover:bg-gray-600/50 transition-colors"> <Save className="w-3 h-3 mr-1" /> Save </button> </div> </div> <div className="bg-gray-900/50 border border-gray-700/30 rounded p-4 text-sm"> <pre className="whitespace-pre-wrap font-sans"> {tasSteps.find(t => t.id === selectedTas)?.prompt} </pre> </div> </div> </div> )} {activeTab === 'care' && ( <div className="bg-gray-800/50 border border-cyan-500/20 rounded-lg p-6"> <h2 className="text-2xl font-bold mb-6 flex items-center"> <Palette className="mr-3 text-pink-400" /> Care Plan </h2> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8"> {Object.entries(carePlan).map(([key, value]) => ( <motion.div key={key} whileHover={{ y: -5 }} className="bg-gray-700/30 border border-gray-600/30 rounded-lg p-4" > <h3 className="font-bold text-cyan-300 capitalize mb-2">{key}</h3> <p className="text-sm text-gray-200">{value}</p> </motion.div> ))} </div> <div className="bg-black/30 border border-cyan-500/20 rounded-lg p-5"> <h3 className="text-lg font-semibold mb-4 text-cyan-300">Sustainability Tip</h3> <p className="text-gray-200"> Reuse concise real log formats (e.g., RFC-style timestamps, syslog) as motifs to save creative effort and increase authenticity. </p> </div> </div> )} {activeTab === 'calendar' && ( <div className="bg-gray-800/50 border border-cyan-500/20 rounded-lg p-6"> <h2 className="text-2xl font-bold mb-6 flex items-center"> <Calendar className="mr-3 text-pink-400" /> Seasonal Calendar </h2> <div className="space-y-4"> {seasonalCalendar.map((week, index) => ( <motion.div key={index} initial={{ opacity: 0, x: -20 }} animate={{ opacity: 1, x: 0 }} transition={{ delay: index * 0.1 }} className="flex items-start p-4 bg-gray-700/30 border border-gray-600/30 rounded-lg" > <div className="mr-4"> <div className="w-10 h-10 rounded-full bg-cyan-900/30 border border-cyan-500/30 flex items-center justify-center"> <span className="font-bold text-cyan-300">W{week.week}</span> </div> </div> <div> <h3 className="font-semibold text-cyan-300">Week {week.week}</h3> <p className="text-gray-200">{week.task}</p> </div> </motion.div> ))} </div> </div> )} {activeTab === 'troubleshoot' && ( <div className="bg-gray-800/50 border border-cyan-500/20 rounded-lg p-6"> <h2 className="text-2xl font-bold mb-6 flex items-center"> <Bug className="mr-3 text-pink-400" /> Troubleshooting </h2> <div className="space-y-4"> {troubleshooting.map((item, index) => ( <motion.div key={index} initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: index * 0.1 }} className="p-4 bg-gray-700/30 border border-gray-600/30 rounded-lg" > <h3 className="font-semibold text-cyan-300 mb-2">Symptom: {item.symptom}</h3> <p className="text-gray-200">Fix: {item.fix}</p> </motion.div> ))} </div> </div> )} {activeTab === 'milestones' && ( <div className="bg-gray-800/50 border border-cyan-500/20 rounded-lg p-6"> <h2 className="text-2xl font-bold mb-6 flex items-center"> <Eye className="mr-3 text-pink-400" /> Milestones & Checkpoints </h2> <div className="relative pl-8 border-l-2 border-cyan-500/30"> {milestones.map((milestone, index) => ( <motion.div key={milestone.day} initial={{ opacity: 0, x: -20 }} animate={{ opacity: 1, x: 0 }} transition={{ delay: index * 0.1 }} className="mb-6 relative" > <div className="absolute -left-10 w-6 h-6 rounded-full bg-cyan-500 border-4 border-gray-900 flex items-center justify-center"> <Zap className="w-3 h-3 text-gray-900" /> </div> <div className="bg-gray-700/30 border border-gray-600/30 rounded-lg p-4"> <div className="flex justify-between items-start"> <div> <h3 className="font-bold text-cyan-300">Day {milestone.day}</h3> <p className="text-gray-200 mt-1">{milestone.task}</p> </div> <div className="flex space-x-2"> <button className="px-2 py-1 bg-gray-600/50 border border-gray-500/30 rounded text-xs hover:bg-gray-500/50 transition-colors"> Check </button> </div> </div> </div> </motion.div> ))} </div> </div> )} </motion.div> </main> </div> {/* Footer */} <footer className="border-t border-cyan-500/20 bg-gray-900/80 backdrop-blur-sm mt-12 py-6"> <div className="container mx-auto px-4 text-center text-gray-400 text-sm"> <p>DOKK — Digital Nightmare Toolkit | Cold Neon-Noir Project Management</p> <p className="mt-2">Proceeding with "metaphor" | Placebo pipes activated</p> </div> </footer> </div> ); }; export default App; - Initial Deployment
d07f18c verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>DOKK — Digital Nightmare Toolkit</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/lucide@latest"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Roboto Mono', monospace; | |
| background-color: #111827; | |
| color: #a5f3fc; | |
| } | |
| .animate-pulse { | |
| animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { | |
| opacity: 1; | |
| } | |
| 50% { | |
| opacity: 0.5; | |
| } | |
| } | |
| .gradient-text { | |
| background-image: linear-gradient(to right, #22d3ee, #ec4899); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| /* Custom scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| height: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #1f2937; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #06b6d4; | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #0891b2; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="min-h-screen bg-gray-900 text-cyan-100"> | |
| <!-- Header --> | |
| <header class="border-b border-cyan-500/30 bg-gray-900/80 backdrop-blur-sm sticky top-0 z-10"> | |
| <div class="container mx-auto px-4 py-3 flex items-center justify-between"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-3 h-3 bg-pink-500 rounded-full animate-pulse"></div> | |
| <h1 class="text-xl font-bold gradient-text"> | |
| DOKK — Digital Nightmare Toolkit | |
| </h1> | |
| </div> | |
| <div class="flex space-x-4"> | |
| <button id="statusBtn" class="px-3 py-1 bg-cyan-900/50 border border-cyan-500/30 rounded text-xs hover:bg-cyan-800/50 transition-colors"> | |
| Status | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <div class="container mx-auto px-4 py-6 flex flex-col lg:flex-row gap-6"> | |
| <!-- Sidebar --> | |
| <aside class="lg:w-64 flex-shrink-0"> | |
| <div class="bg-gray-800/50 border border-cyan-500/20 rounded-lg p-4 mb-6"> | |
| <h2 class="text-lg font-semibold mb-3 flex items-center"> | |
| <i data-lucide="settings" class="mr-2 w-5 h-5 text-pink-400"></i> | |
| Navigation | |
| </h2> | |
| <nav class="space-y-2"> | |
| <button data-tab="tas" class="w-full text-left px-3 py-2 rounded flex items-center transition-colors bg-cyan-900/30 text-cyan-300 border border-cyan-500/30"> | |
| <i data-lucide="file-text" class="mr-2 w-4 h-4"></i> | |
| TAS Steps | |
| </button> | |
| <button data-tab="care" class="w-full text-left px-3 py-2 rounded flex items-center transition-colors hover:bg-gray-700/50"> | |
| <i data-lucide="palette" class="mr-2 w-4 h-4"></i> | |
| Care Plan | |
| </button> | |
| <button data-tab="calendar" class="w-full text-left px-3 py-2 rounded flex items-center transition-colors hover:bg-gray-700/50"> | |
| <i data-lucide="calendar" class="mr-2 w-4 h-4"></i> | |
| Calendar | |
| </button> | |
| <button data-tab="troubleshoot" class="w-full text-left px-3 py-2 rounded flex items-center transition-colors hover:bg-gray-700/50"> | |
| <i data-lucide="bug" class="mr-2 w-4 h-4"></i> | |
| Troubleshoot | |
| </button> | |
| <button data-tab="milestones" class="w-full text-left px-3 py-2 rounded flex items-center transition-colors hover:bg-gray-700/50"> | |
| <i data-lucide="eye" class="mr-2 w-4 h-4"></i> | |
| Milestones | |
| </button> | |
| </nav> | |
| </div> | |
| <!-- Live Log --> | |
| <div class="bg-gray-800/50 border border-cyan-500/20 rounded-lg p-4"> | |
| <h3 class="text-md font-semibold mb-3 flex items-center"> | |
| <i data-lucide="code" class="mr-2 w-4 h-4 text-cyan-400"></i> | |
| Live Log | |
| </h3> | |
| <div class="bg-black/50 border border-cyan-500/10 rounded p-3 h-48 overflow-y-auto text-xs"> | |
| <div class="mb-1">$ [2024-01-15 14:32:45] INFO: DOKK initialization complete</div> | |
| <div class="mb-1">$ [2024-01-15 14:33:12] WARN: Cold start detected in neon-noir module</div> | |
| <div class="mb-1">$ [2024-01-15 14:34:01] ERROR: Metaphor cascade failure - E404:MOTIF</div> | |
| <div id="logContainer"></div> | |
| </div> | |
| <button id="addLogBtn" class="mt-3 w-full py-1 bg-cyan-900/30 border border-cyan-500/30 rounded text-xs hover:bg-cyan-800/30 transition-colors"> | |
| Add Entry | |
| </button> | |
| </div> | |
| </aside> | |
| <!-- Main Content --> | |
| <main class="flex-1"> | |
| <!-- TAS Steps Content --> | |
| <div id="tasContent" class="content-section"> | |
| <div class="bg-gray-800/50 border border-cyan-500/20 rounded-lg p-6"> | |
| <h2 class="text-2xl font-bold mb-6 flex items-center"> | |
| <i data-lucide="file-text" class="mr-3 text-pink-400"></i> | |
| TAS Steps | |
| </h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8"> | |
| <div data-step="1" class="step-card bg-cyan-900/20 border-cyan-500/50"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="font-bold text-cyan-300">TAS-1</h3> | |
| <h4 class="font-semibold mt-1">Define Micro-Project Scope</h4> | |
| <p class="text-sm text-gray-300 mt-2">Core premise, protagonist profile, constraints</p> | |
| </div> | |
| <i data-lucide="chevron-right" class="w-5 h-5 text-cyan-400"></i> | |
| </div> | |
| </div> | |
| <div data-step="2" class="step-card bg-gray-700/30 border-gray-600/30 hover:border-cyan-500/30"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="font-bold text-cyan-300">TAS-2</h3> | |
| <h4 class="font-semibold mt-1">Create Story Bible</h4> | |
| <p class="text-sm text-gray-300 mt-2">Setting rules, tech ecosystem, key artifacts</p> | |
| </div> | |
| <i data-lucide="chevron-right" class="w-5 h-5 text-cyan-400"></i> | |
| </div> | |
| </div> | |
| <div data-step="3" class="step-card bg-gray-700/30 border-gray-600/30 hover:border-cyan-500/30"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="font-bold text-cyan-300">TAS-3</h3> | |
| <h4 class="font-semibold mt-1">Break into Beats</h4> | |
| <p class="text-sm text-gray-300 mt-2">3 scenes: inciting glitch, cascade, reveal</p> | |
| </div> | |
| <i data-lucide="chevron-right" class="w-5 h-5 text-cyan-400"></i> | |
| </div> | |
| </div> | |
| <div data-step="4" class="step-card bg-gray-700/30 border-gray-600/30 hover:border-cyan-500/30"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="font-bold text-cyan-300">TAS-4</h3> | |
| <h4 class="font-semibold mt-1">Draft Prompts/Templates</h4> | |
| <p class="text-sm text-gray-300 mt-2">Generation & revision templates</p> | |
| </div> | |
| <i data-lucide="chevron-right" class="w-5 h-5 text-cyan-400"></i> | |
| </div> | |
| </div> | |
| <div data-step="5" class="step-card bg-gray-700/30 border-gray-600/30 hover:border-cyan-500/30"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="font-bold text-cyan-300">TAS-5</h3> | |
| <h4 class="font-semibold mt-1">Design Minimal UI</h4> | |
| <p class="text-sm text-gray-300 mt-2">Editor, log view, versioning</p> | |
| </div> | |
| <i data-lucide="chevron-right" class="w-5 h-5 text-cyan-400"></i> | |
| </div> | |
| </div> | |
| <div data-step="6" class="step-card bg-gray-700/30 border-gray-600/30 hover:border-cyan-500/30"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="font-bold text-cyan-300">TAS-6</h3> | |
| <h4 class="font-semibold mt-1">Implement Generation Pipeline</h4> | |
| <p class="text-sm text-gray-300 mt-2">Prompt runner, temperature control, caching</p> | |
| </div> | |
| <i data-lucide="chevron-right" class="w-5 h-5 text-cyan-400"></i> | |
| </div> | |
| </div> | |
| <div data-step="7" class="step-card bg-gray-700/30 border-gray-600/30 hover:border-cyan-500/30"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="font-bold text-cyan-300">TAS-7</h3> | |
| <h4 class="font-semibold mt-1">Integrate Evaluation Loop</h4> | |
| <p class="text-sm text-gray-300 mt-2">Unit tests, rubrics, human-in-the-loop</p> | |
| </div> | |
| <i data-lucide="chevron-right" class="w-5 h-5 text-cyan-400"></i> | |
| </div> | |
| </div> | |
| <div data-step="8" class="step-card bg-gray-700/30 border-gray-600/30 hover:border-cyan-500/30"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="font-bold text-cyan-300">TAS-8</h3> | |
| <h4 class="font-semibold mt-1">Polish & Publish</h4> | |
| <p class="text-sm text-gray-300 mt-2">Tech check, copy edit, formatting</p> | |
| </div> | |
| <i data-lucide="chevron-right" class="w-5 h-5 text-cyan-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-black/30 border border-cyan-500/20 rounded-lg p-5"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-lg font-semibold text-cyan-300"> | |
| Prompt for TAS-1 | |
| </h3> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 bg-cyan-900/30 border border-cyan-500/30 rounded text-xs flex items-center hover:bg-cyan-800/30 transition-colors"> | |
| <i data-lucide="play" class="w-3 h-3 mr-1"></i> Run | |
| </button> | |
| <button class="px-3 py-1 bg-gray-700/50 border border-gray-600/30 rounded text-xs flex items-center hover:bg-gray-600/50 transition-colors"> | |
| <i data-lucide="save" class="w-3 h-3 mr-1"></i> Save | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-gray-900/50 border border-gray-700/30 rounded p-4 text-sm"> | |
| <pre class="whitespace-pre-wrap font-sans" id="promptContent"> | |
| Produce a 1,000-word 'Digital Nightmare' short story set in a cold neon-noir city. Protagonist: mid-30s backend engineer with a failing critical service and a moral choice. Constraints: 3 scenes, ~330 words each, keep technical references plausible but accessible. Tone: clinical, anxious, elegiac. Include one log snippet and one error code as motif. | |
| </pre> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Care Plan Content --> | |
| <div id="careContent" class="content-section hidden"> | |
| <div class="bg-gray-800/50 border border-cyan-500/20 rounded-lg p-6"> | |
| <h2 class="text-2xl font-bold mb-6 flex items-center"> | |
| <i data-lucide="palette" class="mr-3 text-pink-400"></i> | |
| Care Plan | |
| </h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8"> | |
| <div class="bg-gray-700/30 border border-gray-600/30 rounded-lg p-4"> | |
| <h3 class="font-bold text-cyan-300 capitalize mb-2">water</h3> | |
| <p class="text-sm text-gray-200">Short iterative feedback cycles (daily micro-revisions)</p> | |
| </div> | |
| <div class="bg-gray-700/30 border border-gray-600/30 rounded-lg p-4"> | |
| <h3 class="font-bold text-cyan-300 capitalize mb-2">light</h3> | |
| <p class="text-sm text-gray-200">High contrast visuals: deep indigo backgrounds, cyan/neon-pink accents</p> | |
| </div> | |
| <div class="bg-gray-700/30 border border-gray-600/30 rounded-lg p-4"> | |
| <h3 class="font-bold text-cyan-300 capitalize mb-2">soil</h3> | |
| <p class="text-sm text-gray-200">Dense, layered motifs — logs, cables, rain-slick streets; keep texture minimal</p> | |
| </div> | |
| <div class="bg-gray-700/30 border border-gray-600/30 rounded-lg p-4"> | |
| <h3 class="font-bold text-cyan-300 capitalize mb-2">feeding</h3> | |
| <p class="text-sm text-gray-200">Feed with real engineering artifacts: authentic log formats, concise error codes, 2–3 sensory anchors per scene</p> | |
| </div> | |
| </div> | |
| <div class="bg-black/30 border border-cyan-500/20 rounded-lg p-5"> | |
| <h3 class="text-lg font-semibold mb-4 text-cyan-300">Sustainability Tip</h3> | |
| <p class="text-gray-200"> | |
| Reuse concise real log formats (e.g., RFC-style timestamps, syslog) as motifs | |
| to save creative effort and increase authenticity. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Calendar Content --> | |
| <div id="calendarContent" class="content-section hidden"> | |
| <div class="bg-gray-800/50 border border-cyan-500/20 rounded-lg p-6"> | |
| <h2 class="text-2xl font-bold mb-6 flex items-center"> | |
| <i data-lucide="calendar" class="mr-3 text-pink-400"></i> | |
| Seasonal Calendar | |
| </h2> | |
| <div class="space-y-4"> | |
| <div class="flex items-start p-4 bg-gray-700/30 border border-gray-600/30 rounded-lg"> | |
| <div class="mr-4"> | |
| <div class="w-10 h-10 rounded-full bg-cyan-900/30 border border-cyan-500/30 flex items-center justify-center"> | |
| <span class="font-bold text-cyan-300">W1</span> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold text-cyan-300">Week 1</h3> | |
| <p class="text-gray-200">Scope, story bible, and beat sheet</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start p-4 bg-gray-700/30 border border-gray-600/30 rounded-lg"> | |
| <div class="mr-4"> | |
| <div class="w-10 h-10 rounded-full bg-cyan-900/30 border border-cyan-500/30 flex items-center justify-center"> | |
| <span class="font-bold text-cyan-300">W2</span> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold text-cyan-300">Week 2</h3> | |
| <p class="text-gray-200">Draft scene 1–3 (one per 1–2 days), gather log snippets</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start p-4 bg-gray-700/30 border border-gray-600/30 rounded-lg"> | |
| <div class="mr-4"> | |
| <div class="w-10 h-10 rounded-full bg-cyan-900/30 border border-cyan-500/30 flex items-center justify-center"> | |
| <span class="font-bold text-cyan-300">W3</span> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold text-cyan-300">Week 3</h3> | |
| <p class="text-gray-200">Revise for tone, tech plausibility, and pacing</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start p-4 bg-gray-700/30 border border-gray-600/30 rounded-lg"> | |
| <div class="mr-4"> | |
| <div class="w-10 h-10 rounded-full bg-cyan-900/30 border border-cyan-500/30 flex items-center justify-center"> | |
| <span class="font-bold text-cyan-300">W4</span> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold text-cyan-300">Week 4</h3> | |
| <p class="text-gray-200">Polish, accessibility checks, export + publish</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Troubleshoot Content --> | |
| <div id="troubleshootContent" class="content-section hidden"> | |
| <div class="bg-gray-800/50 border border-cyan-500/20 rounded-lg p-6"> | |
| <h2 class="text-2xl font-bold mb-6 flex items-center"> | |
| <i data-lucide="bug" class="mr-3 text-pink-400"></i> | |
| Troubleshooting | |
| </h2> | |
| <div class="space-y-4"> | |
| <div class="p-4 bg-gray-700/30 border border-gray-600/30 rounded-lg"> | |
| <h3 class="font-semibold text-cyan-300 mb-2">Symptom: Atmosphere feels flat</h3> | |
| <p class="text-gray-200">Fix: Increase neon contrasts, add weather (cold rain, steam) and log-motif repetitions</p> | |
| </div> | |
| <div class="p-4 bg-gray-700/30 border border-gray-600/30 rounded-lg"> | |
| <h3 class="font-semibold text-cyan-300 mb-2">Symptom: Engineer reader disengaged</h3> | |
| <p class="text-gray-200">Fix: Add concrete constraints (SLA, countdown, failing test) and precise tech terms</p> | |
| </div> | |
| <div class="p-4 bg-gray-700/30 border border-gray-600/30 rounded-lg"> | |
| <h3 class="font-semibold text-cyan-300 mb-2">Symptom: Story too technical</h3> | |
| <p class="text-gray-200">Fix: Add sensory anchors, shorten jargon lines, insert emotional beats</p> | |
| </div> | |
| <div class="p-4 bg-gray-700/30 border border-gray-600/30 rounded-lg"> | |
| <h3 class="font-semibold text-cyan-300 mb-2">Symptom: Color palette low contrast</h3> | |
| <p class="text-gray-200">Fix: Use #0B1020 (indigo) background with #00E5FF (cyan) and #FF2D95 (neon-pink) accents; ensure text ≥ AA</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Milestones Content --> | |
| <div id="milestonesContent" class="content-section hidden"> | |
| <div class="bg-gray-800/50 border border-cyan-500/20 rounded-lg p-6"> | |
| <h2 class="text-2xl font-bold mb-6 flex items-center"> | |
| <i data-lucide="eye" class="mr-3 text-pink-400"></i> | |
| Milestones & Checkpoints | |
| </h2> | |
| <div class="relative pl-8 border-l-2 border-cyan-500/30"> | |
| <div class="mb-6 relative"> | |
| <div class="absolute -left-10 w-6 h-6 rounded-full bg-cyan-500 border-4 border-gray-900 flex items-center justify-center"> | |
| <i data-lucide="zap" class="w-3 h-3 text-gray-900"></i> | |
| </div> | |
| <div class="bg-gray-700/30 border border-gray-600/30 rounded-lg p-4"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="font-bold text-cyan-300">Day 1</h3> | |
| <p class="text-gray-200 mt-1">Confirm bible and beats</p> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="px-2 py-1 bg-gray-600/50 border border-gray-500/30 rounded text-xs hover:bg-gray-500/50 transition-colors"> | |
| Check | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-6 relative"> | |
| <div class="absolute -left-10 w-6 h-6 rounded-full bg-cyan-500 border-4 border-gray-900 flex items-center justify-center"> | |
| <i data-lucide="zap" class="w-3 h-3 text-gray-900"></i> | |
| </div> | |
| <div class="bg-gray-700/30 border border-gray-600/30 rounded-lg p-4"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="font-bold text-cyan-300">Day 3</h3> | |
| <p class="text-gray-200 mt-1">Scene 1 draft</p> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="px-2 py-1 bg-gray-600/50 border border-gray-500/30 rounded text-xs hover:bg-gray-500/50 transition-colors"> | |
| Check | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-6 relative"> | |
| <div class="absolute -left-10 w-6 h-6 rounded-full bg-cyan-500 border-4 border-gray-900 flex items-center justify-center"> | |
| <i data-lucide="zap" class="w-3 h-3 text-gray-900"></i> | |
| </div> | |
| <div class="bg-gray-700/30 border border-gray-600/30 rounded-lg p-4"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="font-bold text-cyan-300">Day 5</h3> | |
| <p class="text-gray-200 mt-1">Scene 2 draft</p> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="px-2 py-1 bg-gray-600/50 border border-gray-500/30 rounded text-xs hover:bg-gray-500/50 transition-colors"> | |
| Check | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-6 relative"> | |
| <div class="absolute -left-10 w-6 h-6 rounded-full bg-cyan-500 border-4 border-gray-900 flex items-center justify-center"> | |
| <i data-lucide="zap" class="w-3 h-3 text-gray-900"></i> | |
| </div> | |
| <div class="bg-gray-700/30 border border-gray-600/30 rounded-lg p-4"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="font-bold text-cyan-300">Day 7</h3> | |
| <p class="text-gray-200 mt-1">Scene 3 draft</p> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="px-2 py-1 bg-gray-600/50 border border-gray-500/30 rounded text-xs hover:bg-gray-500/50 transition-colors"> | |
| Check | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-6 relative"> | |
| <div class="absolute -left-10 w-6 h-6 rounded-full bg-cyan-500 border-4 border-gray-900 flex items-center justify-center"> | |
| <i data-lucide="zap" class="w-3 h-3 text-gray-900"></i> | |
| </div> | |
| <div class="bg-gray-700/30 border border-gray-600/30 rounded-lg p-4"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="font-bold text-cyan-300">Day 10</h3> | |
| <p class="text-gray-200 mt-1">Revision pass</p> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="px-2 py-1 bg-gray-600/50 border border-gray-500/30 rounded text-xs hover:bg-gray-500/50 transition-colors"> | |
| Check | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-6 relative"> | |
| <div class="absolute -left-10 w-6 h-6 rounded-full bg-cyan-500 border-4 border-gray-900 flex items-center justify-center"> | |
| <i data-lucide="zap" class="w-3 h-3 text-gray-900"></i> | |
| </div> | |
| <div class="bg-gray-700/30 border border-gray-600/30 rounded-lg p-4"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="font-bold text-cyan-300">Day 14</h3> | |
| <p class="text-gray-200 mt-1">Final polish & publish</p> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="px-2 py-1 bg-gray-600/50 border border-gray-500/30 rounded text-xs hover:bg-gray-500/50 transition-colors"> | |
| Check | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="border-t border-cyan-500/20 bg-gray-900/80 backdrop-blur-sm mt-12 py-6"> | |
| <div class="container mx-auto px-4 text-center text-gray-400 text-sm"> | |
| <p>DOKK — Digital Nightmare Toolkit | Cold Neon-Noir Project Management</p> | |
| <p class="mt-2">Proceeding with "metaphor" | Placebo pipes activated</p> | |
| </div> | |
| </footer> | |
| </div> | |
| <script> | |
| // Initialize Lucide icons | |
| lucide.createIcons(); | |
| // Tab switching functionality | |
| document.querySelectorAll('[data-tab]').forEach(tab => { | |
| tab.addEventListener('click', () => { | |
| // Remove active class from all tabs and content sections | |
| document.querySelectorAll('[data-tab]').forEach(t => { | |
| t.classList.remove('bg-cyan-900/30', 'text-cyan-300', 'border', 'border-cyan-500/30'); | |
| t.classList.add('hover:bg-gray-700/50'); | |
| }); | |
| document.querySelectorAll('.content-section').forEach(section => { | |
| section.classList.add('hidden'); | |
| }); | |
| // Add active class to clicked tab | |
| tab.classList.add('bg-cyan-900/30', 'text-cyan-300', 'border', 'border-cyan-500/30'); | |
| tab.classList.remove('hover:bg-gray-700/50'); | |
| // Show corresponding content | |
| const tabId = tab.getAttribute('data-tab'); | |
| document.getElementById(`${tabId}Content`).classList.remove('hidden'); | |
| }); | |
| }); | |
| // Step card selection functionality | |
| document.querySelectorAll('.step-card').forEach(card => { | |
| card.addEventListener('click', () => { | |
| // Remove active class from all cards | |
| document.querySelectorAll('.step-card').forEach(c => { | |
| c.classList.remove('bg-cyan-900/20', 'border-cyan-500/50'); | |
| c.classList.add('bg-gray-700/30', 'border-gray-600/30', 'hover:border-cyan-500/30'); | |
| }); | |
| // Add active class to clicked card | |
| card.classList.add('bg-cyan-900/20', 'border-cyan-500/50'); | |
| card.classList.remove('bg-gray-700/30', 'border-gray-600/30', 'hover:border-cyan-500/30'); | |
| // Update prompt content | |
| const stepId = card.getAttribute('data-step'); | |
| updatePromptContent(stepId); | |
| // Add log entry | |
| addLog(`TAS-${stepId} activated`); | |
| }); | |
| }); | |
| // Status button functionality | |
| document.getElementById('statusBtn').addEventListener('click', () => { | |
| addLog("System status: Operational"); | |
| }); | |
| // Add log button functionality | |
| document.getElementById('addLogBtn').addEventListener('click', () => { | |
| addLog("Manual log entry added"); | |
| }); | |
| // Function to update prompt content based on selected step | |
| function updatePromptContent(stepId) { | |
| const prompts = [ | |
| "Produce a 1,000-word 'Digital Nightmare' short story set in a cold neon-noir city. Protagonist: mid-30s backend engineer with a failing critical service and a moral choice. Constraints: 3 scenes, ~330 words each, keep technical references plausible but accessible. Tone: clinical, anxious, elegiac. Include one log snippet and one error code as motif.", | |
| "Return a compact story bible (bulleted) with: city sensory rules, network/stack basics used, protagonist backstory, antagonist forces (corp, rogue AI, infrastructure), three artifacts (log, key, terminal). Keep items terse for use in prompts.", | |
| "Output a scene-by-scene beat sheet with scene goals, stakes, physical location, emotional arc, key lines or images to include (max 6 bullets per scene).", | |
| "Generate 3 reusable prompts/templates: seed draft prompt, tighten-and-clarify revision prompt, technical-accuracy check prompt. Each must include explicit instructions for length, tone, and placeholders for variables (e.g., {log_snippet}).", | |
| "Describe a minimal editor UI for rapid drafting: main editor, split log/terminal pane, version history, quick-insert snippet palette. Provide keyboard shortcuts and accessible color contrast values (WCAG AA).", | |
| "Provide implementation steps and CLI commands to run generation: script to call model API with temperature presets, caching strategy, prompt concatenation order, and example environment variables. Include error handling pseudocode.", | |
| "Create an evaluation rubric (10–50 pts) for automated checks: coherence, plausibility, emotional arc, jargon clarity, pacing, originality. Add unit-test-style examples to detect hallucinated tech facts.", | |
| "Produce a final checklist for polish and publication: tech fact verification, log formatting, copyedit pass, metadata tags, and export templates (Markdown, HTML)." | |
| ]; | |
| document.getElementById('promptContent').textContent = prompts[stepId - 1]; | |
| document.querySelector('.bg-black/30 h3').innerHTML = `Prompt for TAS-${stepId}`; | |
| } | |
| // Function to add log entries | |
| function addLog(message) { | |
| const timestamp = new Date().toISOString().slice(0, 19).replace('T', ' '); | |
| const logContainer = document.getElementById('logContainer'); | |
| const logEntry = document.createElement('div'); | |
| logEntry.className = 'mb-1'; | |
| logEntry.innerHTML = `<span class="text-cyan-300">$</span> [${timestamp}] ${message}`; | |
| logContainer.appendChild(logEntry); | |
| // Scroll to bottom of log container | |
| logContainer.parentElement.scrollTop = logContainer.parentElement.scrollHeight; | |
| } | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=dfbdokk/digital-nightmare-1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |