Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Lorely.AI - AI Adventure Engine</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/framer-motion@10.16.4/dist/framer-motion.js"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"> | |
| <style> | |
| :root { | |
| --primary: oklch(65% 0.25 260); | |
| --secondary: oklch(70% 0.2 190); | |
| --accent: oklch(75% 0.3 350); | |
| --bg-dark: oklch(15% 0.05 260); | |
| --bg-darker: oklch(10% 0.03 260); | |
| --text-primary: oklch(95% 0.02 260); | |
| --text-secondary: oklch(75% 0.05 260); | |
| } | |
| body { | |
| background-color: var(--bg-dark); | |
| color: var(--text-primary); | |
| font-family: 'Inter', sans-serif; | |
| overflow: hidden; | |
| } | |
| .glass-panel { | |
| background: rgba(20, 20, 30, 0.5); | |
| backdrop-filter: blur(16px) saturate(180%); | |
| -webkit-backdrop-filter: blur(16px) saturate(180%); | |
| border: 1px solid rgba(255, 255, 255, 0.05); | |
| border-radius: 12px; | |
| } | |
| .sidebar-item { | |
| transition: all 0.3s ease; | |
| border-left: 3px solid transparent; | |
| } | |
| .sidebar-item:hover { | |
| background: rgba(255, 255, 255, 0.05); | |
| border-left: 3px solid var(--primary); | |
| } | |
| .sidebar-item.active { | |
| background: rgba(255, 255, 255, 0.1); | |
| border-left: 3px solid var(--accent); | |
| } | |
| .tab-button { | |
| transition: all 0.3s ease; | |
| border-bottom: 2px solid transparent; | |
| } | |
| .tab-button.active { | |
| border-bottom: 2px solid var(--accent); | |
| color: var(--accent); | |
| } | |
| .node { | |
| background: rgba(30, 30, 40, 0.7); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-radius: 8px; | |
| transition: all 0.3s ease; | |
| } | |
| .node:hover { | |
| box-shadow: 0 0 0 2px var(--primary); | |
| transform: translateY(-2px); | |
| } | |
| .connection-line { | |
| stroke: var(--primary); | |
| stroke-width: 2; | |
| stroke-dasharray: 5; | |
| animation: dash 30s linear infinite; | |
| } | |
| @keyframes dash { | |
| to { | |
| stroke-dashoffset: 1000; | |
| } | |
| } | |
| .pulse-animation { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { box-shadow: 0 0 0 0 rgba(var(--primary), 0.7); } | |
| 70% { box-shadow: 0 0 0 10px rgba(var(--primary), 0); } | |
| 100% { box-shadow: 0 0 0 0 rgba(var(--primary), 0); } | |
| } | |
| .bg-pattern { | |
| background-image: radial-gradient(circle at 50% 50%, rgba(var(--primary), 0.1) 1px, transparent 1px); | |
| background-size: 20px 20px; | |
| } | |
| .scrollbar-hide::-webkit-scrollbar { | |
| display: none; | |
| } | |
| </style> | |
| </head> | |
| <body class="h-screen w-screen flex overflow-hidden bg-pattern"> | |
| <!-- Sidebar --> | |
| <div class="glass-panel h-full w-64 flex flex-col border-r border-gray-800"> | |
| <div class="p-4 flex items-center space-x-3 border-b border-gray-800"> | |
| <div class="w-10 h-10 rounded-full bg-gradient-to-br from-primary to-accent flex items-center justify-center"> | |
| <i class="fas fa-dragon text-white"></i> | |
| </div> | |
| <div> | |
| <h1 class="font-bold text-lg">Lorely.AI</h1> | |
| <p class="text-xs text-text-secondary">v1.0.0</p> | |
| </div> | |
| </div> | |
| <div class="flex-1 overflow-y-auto scrollbar-hide py-2"> | |
| <div class="px-3 py-2"> | |
| <div class="text-xs uppercase font-semibold text-text-secondary mb-2 px-2">Adventure Engine</div> | |
| <div class="space-y-1"> | |
| <a href="#" class="sidebar-item active flex items-center px-3 py-2 rounded"> | |
| <i class="fas fa-gamepad mr-3 text-accent"></i> | |
| <span>Dashboard</span> | |
| </a> | |
| <a href="#" class="sidebar-item flex items-center px-3 py-2 rounded"> | |
| <i class="fas fa-brain mr-3"></i> | |
| <span>AI Director</span> | |
| </a> | |
| <a href="#" class="sidebar-item flex items-center px-3 py-2 rounded"> | |
| <i class="fas fa-project-diagram mr-3"></i> | |
| <span>Story Graph</span> | |
| </a> | |
| <a href="#" class="sidebar-item flex items-center px-3 py-2 rounded"> | |
| <i class="fas fa-book mr-3"></i> | |
| <span>Lore Database</span> | |
| </a> | |
| <a href="#" class="sidebar-item flex items-center px-3 py-2 rounded"> | |
| <i class="fas fa-users mr-3"></i> | |
| <span>Character Builder</span> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="px-3 py-2 mt-4"> | |
| <div class="text-xs uppercase font-semibold text-text-secondary mb-2 px-2">Current Project</div> | |
| <div class="space-y-1"> | |
| <a href="#" class="sidebar-item flex items-center px-3 py-2 rounded"> | |
| <i class="fas fa-scroll mr-3"></i> | |
| <span>Quest Editor</span> | |
| </a> | |
| <a href="#" class="sidebar-item flex items-center px-3 py-2 rounded"> | |
| <i class="fas fa-map mr-3"></i> | |
| <span>World Builder</span> | |
| </a> | |
| <a href="#" class="sidebar-item flex items-center px-3 py-2 rounded"> | |
| <i class="fas fa-cogs mr-3"></i> | |
| <span>Game Rules</span> | |
| </a> | |
| <a href="#" class="sidebar-item flex items-center px-3 py-2 rounded"> | |
| <i class="fas fa-magic mr-3"></i> | |
| <span>AI Generation</span> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="px-3 py-2 mt-4"> | |
| <div class="text-xs uppercase font-semibold text-text-secondary mb-2 px-2">Settings</div> | |
| <div class="space-y-1"> | |
| <a href="#" class="sidebar-item flex items-center px-3 py-2 rounded"> | |
| <i class="fas fa-sliders-h mr-3"></i> | |
| <span>Preferences</span> | |
| </a> | |
| <a href="#" class="sidebar-item flex items-center px-3 py-2 rounded"> | |
| <i class="fas fa-plug mr-3"></i> | |
| <span>Integrations</span> | |
| </a> | |
| <a href="#" class="sidebar-item flex items-center px-3 py-2 rounded"> | |
| <i class="fas fa-cloud mr-3"></i> | |
| <span>Cloud Sync</span> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4 border-t border-gray-800"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center"> | |
| <i class="fas fa-user"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="text-sm">John Doe</div> | |
| <div class="text-xs text-text-secondary">Game Designer</div> | |
| </div> | |
| <button class="text-text-secondary hover:text-text-primary"> | |
| <i class="fas fa-cog"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="flex-1 flex flex-col overflow-hidden"> | |
| <!-- Top Bar --> | |
| <div class="glass-panel h-12 flex items-center justify-between px-4 border-b border-gray-800"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="text-sm font-medium">Current Project: <span class="text-accent">The Lost Kingdom</span></div> | |
| <div class="flex items-center space-x-2 text-xs"> | |
| <span class="px-2 py-1 rounded bg-gray-800 text-text-secondary">AI Connected</span> | |
| <span class="px-2 py-1 rounded bg-green-900/50 text-green-400 flex items-center"> | |
| <span class="w-2 h-2 rounded-full bg-green-500 mr-2"></span> | |
| Generating... | |
| </span> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-3"> | |
| <button class="w-8 h-8 rounded-full bg-gray-800 hover:bg-gray-700 flex items-center justify-center"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| <button class="w-8 h-8 rounded-full bg-gray-800 hover:bg-gray-700 flex items-center justify-center"> | |
| <i class="fas fa-bell"></i> | |
| </button> | |
| <button class="px-3 py-1 rounded-full bg-gradient-to-r from-primary to-accent text-white text-sm font-medium flex items-center"> | |
| <i class="fas fa-plus mr-2"></i> | |
| New | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Content Area --> | |
| <div class="flex-1 flex overflow-hidden"> | |
| <!-- Left Panel --> | |
| <div class="w-72 glass-panel border-r border-gray-800 flex flex-col"> | |
| <div class="p-3 border-b border-gray-800"> | |
| <div class="flex space-x-1"> | |
| <button class="tab-button active px-3 py-2 text-sm">Assets</button> | |
| <button class="tab-button px-3 py-2 text-sm">Scenes</button> | |
| <button class="tab-button px-3 py-2 text-sm">AI Tools</button> | |
| </div> | |
| </div> | |
| <div class="flex-1 overflow-y-auto p-3 space-y-3"> | |
| <div class="p-3 rounded-lg bg-gray-800/50"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <h3 class="font-medium">Characters</h3> | |
| <button class="text-xs text-accent">+ Add</button> | |
| </div> | |
| <div class="space-y-2"> | |
| <div class="flex items-center p-2 rounded hover:bg-gray-700/50 cursor-pointer"> | |
| <div class="w-8 h-8 rounded-full bg-purple-600 mr-2 flex items-center justify-center"> | |
| <i class="fas fa-user text-xs"></i> | |
| </div> | |
| <div> | |
| <div class="text-sm">Sir Galen</div> | |
| <div class="text-xs text-text-secondary">Knight</div> | |
| </div> | |
| </div> | |
| <div class="flex items-center p-2 rounded hover:bg-gray-700/50 cursor-pointer"> | |
| <div class="w-8 h-8 rounded-full bg-red-600 mr-2 flex items-center justify-center"> | |
| <i class="fas fa-user text-xs"></i> | |
| </div> | |
| <div> | |
| <div class="text-sm">Mira</div> | |
| <div class="text-xs text-text-secondary">Rogue</div> | |
| </div> | |
| </div> | |
| <div class="flex items-center p-2 rounded hover:bg-gray-700/50 cursor-pointer"> | |
| <div class="w-8 h-8 rounded-full bg-blue-600 mr-2 flex items-center justify-center"> | |
| <i class="fas fa-user text-xs"></i> | |
| </div> | |
| <div> | |
| <div class="text-sm">Eldrin</div> | |
| <div class="text-xs text-text-secondary">Wizard</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-3 rounded-lg bg-gray-800/50"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <h3 class="font-medium">Locations</h3> | |
| <button class="text-xs text-accent">+ Add</button> | |
| </div> | |
| <div class="space-y-2"> | |
| <div class="flex items-center p-2 rounded hover:bg-gray-700/50 cursor-pointer"> | |
| <div class="w-8 h-8 rounded-full bg-yellow-600 mr-2 flex items-center justify-center"> | |
| <i class="fas fa-map-marker-alt text-xs"></i> | |
| </div> | |
| <div> | |
| <div class="text-sm">Eldermere</div> | |
| <div class="text-xs text-text-secondary">Capital City</div> | |
| </div> | |
| </div> | |
| <div class="flex items-center p-2 rounded hover:bg-gray-700/50 cursor-pointer"> | |
| <div class="w-8 h-8 rounded-full bg-green-600 mr-2 flex items-center justify-center"> | |
| <i class="fas fa-tree text-xs"></i> | |
| </div> | |
| <div> | |
| <div class="text-sm">Whisperwood</div> | |
| <div class="text-xs text-text-secondary">Forest</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-3 rounded-lg bg-gray-800/50"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <h3 class="font-medium">Quests</h3> | |
| <button class="text-xs text-accent">+ Add</button> | |
| </div> | |
| <div class="space-y-2"> | |
| <div class="flex items-center p-2 rounded hover:bg-gray-700/50 cursor-pointer"> | |
| <div class="w-8 h-8 rounded-full bg-indigo-600 mr-2 flex items-center justify-center"> | |
| <i class="fas fa-scroll text-xs"></i> | |
| </div> | |
| <div> | |
| <div class="text-sm">The Lost Crown</div> | |
| <div class="text-xs text-text-secondary">Main Quest</div> | |
| </div> | |
| </div> | |
| <div class="flex items-center p-2 rounded hover:bg-gray-700/50 cursor-pointer"> | |
| <div class="w-8 h-8 rounded-full bg-pink-600 mr-2 flex items-center justify-center"> | |
| <i class="fas fa-scroll text-xs"></i> | |
| </div> | |
| <div> | |
| <div class="text-sm">Bandit Trouble</div> | |
| <div class="text-xs text-text-secondary">Side Quest</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Panel --> | |
| <div class="flex-1 flex flex-col overflow-hidden"> | |
| <div class="p-4 border-b border-gray-800"> | |
| <div class="flex items-center justify-between"> | |
| <h2 class="text-xl font-bold">Adventure Dashboard</h2> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 rounded bg-gray-800 hover:bg-gray-700 text-sm flex items-center"> | |
| <i class="fas fa-save mr-2"></i> | |
| Save | |
| </button> | |
| <button class="px-3 py-1 rounded bg-gradient-to-r from-primary to-accent text-white text-sm flex items-center"> | |
| <i class="fas fa-play mr-2"></i> | |
| Test Adventure | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex-1 overflow-auto p-6"> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <!-- AI Director Panel --> | |
| <div class="glass-panel p-4 rounded-xl col-span-1"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="font-bold text-lg flex items-center"> | |
| <i class="fas fa-brain mr-2 text-accent"></i> | |
| AI Director | |
| </h3> | |
| <div class="flex space-x-2"> | |
| <button class="w-6 h-6 rounded-full bg-gray-800 hover:bg-gray-700 flex items-center justify-center"> | |
| <i class="fas fa-cog text-xs"></i> | |
| </button> | |
| <button class="w-6 h-6 rounded-full bg-gray-800 hover:bg-gray-700 flex items-center justify-center"> | |
| <i class="fas fa-ellipsis-h text-xs"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="p-3 rounded-lg bg-gray-800/50"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <div class="text-sm font-medium">Current Scene</div> | |
| <div class="text-xs text-accent">Adapting...</div> | |
| </div> | |
| <div class="text-sm">Tavern Introduction</div> | |
| <div class="text-xs text-text-secondary mt-1">AI is adjusting based on player choices</div> | |
| </div> | |
| <div class="p-3 rounded-lg bg-gray-800/50"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <div class="text-sm font-medium">Player Engagement</div> | |
| <div class="text-xs text-green-400">High</div> | |
| </div> | |
| <div class="h-2 w-full bg-gray-700 rounded-full overflow-hidden"> | |
| <div class="h-full bg-gradient-to-r from-green-400 to-green-600 rounded-full" style="width: 85%"></div> | |
| </div> | |
| </div> | |
| <div class="p-3 rounded-lg bg-gray-800/50"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <div class="text-sm font-medium">Next Plot Twist</div> | |
| <div class="text-xs text-accent">Ready</div> | |
| </div> | |
| <div class="text-sm">Innkeeper reveals secret</div> | |
| <div class="text-xs text-text-secondary mt-1">Trigger: When players ask about the crown</div> | |
| </div> | |
| <button class="w-full py-2 rounded-lg bg-gradient-to-r from-primary to-accent text-white font-medium flex items-center justify-center"> | |
| <i class="fas fa-magic mr-2"></i> | |
| Generate New Twist | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Story Graph --> | |
| <div class="glass-panel p-4 rounded-xl col-span-2"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="font-bold text-lg flex items-center"> | |
| <i class="fas fa-project-diagram mr-2 text-accent"></i> | |
| Story Graph | |
| </h3> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 rounded bg-gray-800 hover:bg-gray-700 text-sm flex items-center"> | |
| <i class="fas fa-plus mr-2"></i> | |
| Add Node | |
| </button> | |
| <button class="px-3 py-1 rounded bg-gray-800 hover:bg-gray-700 text-sm flex items-center"> | |
| <i class="fas fa-robot mr-2"></i> | |
| AI Suggest | |
| </button> | |
| </div> | |
| </div> | |
| <div class="relative h-96 bg-gray-900/50 rounded-lg overflow-hidden"> | |
| <!-- This would be an interactive SVG or canvas in a real implementation --> | |
| <svg width="100%" height="100%" viewBox="0 0 800 400" class="absolute inset-0"> | |
| <!-- Background grid --> | |
| <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse"> | |
| <path d="M 40 0 L 0 0 0 40" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="1"/> | |
| </pattern> | |
| <rect width="100%" height="100%" fill="url(#grid)" /> | |
| <!-- Connection lines --> | |
| <path class="connection-line" d="M150,100 L300,150" /> | |
| <path class="connection-line" d="M150,100 L300,50" /> | |
| <path class="connection-line" d="M300,50 L450,100" /> | |
| <path class="connection-line" d="M300,150 L450,100" /> | |
| <path class="connection-line" d="M450,100 L600,150" /> | |
| <path class="connection-line" d="M450,100 L600,50" /> | |
| <!-- Nodes --> | |
| <foreignObject x="100" y="50" width="100" height="100"> | |
| <div class="node w-full h-full p-3 flex flex-col"> | |
| <div class="text-xs text-accent mb-1">START</div> | |
| <div class="text-sm font-medium">Tavern Scene</div> | |
| <div class="text-xs text-text-secondary mt-1">All players meet</div> | |
| </div> | |
| </foreignObject> | |
| <foreignObject x="250" y="0" width="100" height="100"> | |
| <div class="node w-full h-full p-3 flex flex-col"> | |
| <div class="text-xs text-accent mb-1">PATH A</div> | |
| <div class="text-sm font-medium">Investigate</div> | |
| <div class="text-xs text-text-secondary mt-1">Ask about crown</div> | |
| </div> | |
| </foreignObject> | |
| <foreignObject x="250" y="100" width="100" height="100"> | |
| <div class="node w-full h-full p-3 flex flex-col"> | |
| <div class="text-xs text-accent mb-1">PATH B</div> | |
| <div class="text-sm font-medium">Ignore</div> | |
| <div class="text-xs text-text-secondary mt-1">Leave tavern</div> | |
| </div> | |
| </foreignObject> | |
| <foreignObject x="400" y="50" width="100" height="100"> | |
| <div class="node w-full h-full p-3 flex flex-col pulse-animation"> | |
| <div class="text-xs text-accent mb-1">ACTIVE</div> | |
| <div class="text-sm font-medium">Innkeeper</div> | |
| <div class="text-xs text-text-secondary mt-1">Reveals secret</div> | |
| </div> | |
| </foreignObject> | |
| <foreignObject x="550" y="0" width="100" height="100"> | |
| <div class="node w-full h-full p-3 flex flex-col"> | |
| <div class="text-xs text-accent mb-1">OUTCOME A</div> | |
| <div class="text-sm font-medium">Find Clue</div> | |
| <div class="text-xs text-text-secondary mt-1">Map fragment</div> | |
| </div> | |
| </foreignObject> | |
| <foreignObject x="550" y="100" width="100" height="100"> | |
| <div class="node w-full h-full p-3 flex flex-col"> | |
| <div class="text-xs text-accent mb-1">OUTCOME B</div> | |
| <div class="text-sm font-medium">Ambush</div> | |
| <div class="text-xs text-text-secondary mt-1">Bandits attack</div> | |
| </div> | |
| </foreignObject> | |
| </svg> | |
| </div> | |
| <div class="mt-4 flex items-center justify-between"> | |
| <div class="text-sm text-text-secondary"> | |
| <span class="text-accent">3</span> active branches | | |
| <span class="text-accent">12</span> total nodes | |
| </div> | |
| <button class="text-sm text-accent hover:underline"> | |
| <i class="fas fa-expand mr-1"></i> | |
| Fullscreen Editor | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Recent Activity --> | |
| <div class="glass-panel p-4 rounded-xl col-span-1"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="font-bold text-lg flex items-center"> | |
| <i class="fas fa-history mr-2 text-accent"></i> | |
| Recent Activity | |
| </h3> | |
| <button class="text-sm text-text-secondary hover:text-text-primary"> | |
| <i class="fas fa-ellipsis-h"></i> | |
| </button> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="w-8 h-8 rounded-full bg-blue-600/30 flex items-center justify-center mr-3 mt-1"> | |
| <i class="fas fa-robot text-blue-400 text-xs"></i> | |
| </div> | |
| <div> | |
| <div class="text-sm">AI generated new dialogue options for "Innkeeper"</div> | |
| <div class="text-xs text-text-secondary mt-1">2 minutes ago</div> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="w-8 h-8 rounded-full bg-purple-600/30 flex items-center justify-center mr-3 mt-1"> | |
| <i class="fas fa-user text-purple-400 text-xs"></i> | |
| </div> | |
| <div> | |
| <div class="text-sm">You updated "Sir Galen" backstory</div> | |
| <div class="text-xs text-text-secondary mt-1">15 minutes ago</div> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="w-8 h-8 rounded-full bg-green-600/30 flex items-center justify-center mr-3 mt-1"> | |
| <i class="fas fa-magic text-green-400 text-xs"></i> | |
| </div> | |
| <div> | |
| <div class="text-sm">AI suggested plot twist for Act 2</div> | |
| <div class="text-xs text-text-secondary mt-1">1 hour ago</div> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="w-8 h-8 rounded-full bg-yellow-600/30 flex items-center justify-center mr-3 mt-1"> | |
| <i class="fas fa-save text-yellow-400 text-xs"></i> | |
| </div> | |
| <div> | |
| <div class="text-sm">Project auto-saved</div> | |
| <div class="text-xs text-text-secondary mt-1">2 hours ago</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- AI Suggestions --> | |
| <div class="glass-panel p-4 rounded-xl col-span-1"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="font-bold text-lg flex items-center"> | |
| <i class="fas fa-lightbulb mr-2 text-accent"></i> | |
| AI Suggestions | |
| </h3> | |
| <button class="text-sm text-text-secondary hover:text-text-primary"> | |
| <i class="fas fa-sync-alt"></i> | |
| </button> | |
| </div> | |
| <div class="space-y-3"> | |
| <div class="p-3 rounded-lg bg-gray-800/50"> | |
| <div class="text-sm font-medium mb-1">Add a mysterious artifact</div> | |
| <div class="text-xs text-text-secondary">Could create new quest opportunities</div> | |
| <div class="flex mt-2 space-x-2"> | |
| <button class="text-xs px-2 py-1 rounded bg-gray-700 hover:bg-gray-600">Dismiss</button> | |
| <button class="text-xs px-2 py-1 rounded bg-accent hover:bg-accent/80">Accept</button> | |
| </div> | |
| </div> | |
| <div class="p-3 rounded-lg bg-gray-800/50"> | |
| <div class="text-sm font-medium mb-1">Develop Mira's backstory</div> | |
| <div class="text-xs text-text-secondary">Players seem interested in this character</div> | |
| <div class="flex mt-2 space-x-2"> | |
| <button class="text-xs px-2 py-1 rounded bg-gray-700 hover:bg-gray-600">Dismiss</button> | |
| <button class="text-xs px-2 py-1 rounded bg-accent hover:bg-accent/80">Accept</button> | |
| </div> | |
| </div> | |
| <div class="p-3 rounded-lg bg-gray-800/50"> | |
| <div class="text-sm font-medium mb-1">Add combat encounter</div> | |
| <div class="text-xs text-text-secondary">Gameplay pacing could use more action</div> | |
| <div class="flex mt-2 space-x-2"> | |
| <button class="text-xs px-2 py-1 rounded bg-gray-700 hover:bg-gray-600">Dismiss</button> | |
| <button class="text-xs px-2 py-1 rounded bg-accent hover:bg-accent/80">Accept</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Quick Actions --> | |
| <div class="glass-panel p-4 rounded-xl col-span-1"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="font-bold text-lg flex items-center"> | |
| <i class="fas fa-bolt mr-2 text-accent"></i> | |
| Quick Actions | |
| </h3> | |
| <button class="text-sm text-text-secondary hover:text-text-primary"> | |
| <i class="fas fa-ellipsis-h"></i> | |
| </button> | |
| </div> | |
| <div class="grid grid-cols-2 gap-3"> | |
| <button class="p-3 rounded-lg bg-gray-800/50 hover:bg-gray-700/50 flex flex-col items-center"> | |
| <i class="fas fa-book text-lg mb-1 text-primary"></i> | |
| <span class="text-xs">New Lore</span> | |
| </button> | |
| <button class="p-3 rounded-lg bg-gray-800/50 hover:bg-gray-700/50 flex flex-col items-center"> | |
| <i class="fas fa-user-plus text-lg mb-1 text-primary"></i> | |
| <span class="text-xs">New Character</span> | |
| </button> | |
| <button class="p-3 rounded-lg bg-gray-800/50 hover:bg-gray-700/50 flex flex-col items-center"> | |
| <i class="fas fa-scroll text-lg mb-1 text-primary"></i> | |
| <span class="text-xs">New Quest</span> | |
| </button> | |
| <button class="p-3 rounded-lg bg-gray-800/50 hover:bg-gray-700/50 flex flex-col items-center"> | |
| <i class="fas fa-map-marked-alt text-lg mb-1 text-primary"></i> | |
| <span class="text-xs">New Location</span> | |
| </button> | |
| <button class="p-3 rounded-lg bg-gray-800/50 hover:bg-gray-700/50 flex flex-col items-center"> | |
| <i class="fas fa-dice text-lg mb-1 text-primary"></i> | |
| <span class="text-xs">Random Event</span> | |
| </button> | |
| <button class="p-3 rounded-lg bg-gray-800/50 hover:bg-gray-700/50 flex flex-col items-center"> | |
| <i class="fas fa-magic text-lg mb-1 text-primary"></i> | |
| <span class="text-xs">AI Generate</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Panel --> | |
| <div class="w-72 glass-panel border-l border-gray-800 flex flex-col"> | |
| <div class="p-3 border-b border-gray-800"> | |
| <div class="flex space-x-1"> | |
| <button class="tab-button active px-3 py-2 text-sm">Properties</button> | |
| <button class="tab-button px-3 py-2 text-sm">Console</button> | |
| <button class="tab-button px-3 py-2 text-sm">Stats</button> | |
| </div> | |
| </div> | |
| <div class="flex-1 overflow-y-auto p-3"> | |
| <div class="space-y-4"> | |
| <div> | |
| <div class="text-sm font-medium mb-2">Selected Node</div> | |
| <div class="p-3 rounded-lg bg-gray-800/50"> | |
| <div class="text-sm font-medium mb-1">Innkeeper</div> | |
| <div class="text-xs text-text-secondary">NPC - Reveals secret</div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="text-sm font-medium mb-2">Dialogue Options</div> | |
| <div class="space-y-2"> | |
| <div class="p-2 rounded bg-gray-800/50 text-sm"> | |
| "I've heard rumors about the crown..." | |
| </div> | |
| <div class="p-2 rounded bg-gray-800/50 text-sm"> | |
| "Strange folk have been asking about that..." | |
| </div> | |
| <div class="p-2 rounded bg-gray-800/50 text-sm"> | |
| "Best you forget you ever asked..." | |
| </div> | |
| </div> | |
| <button class="w-full mt-2 py-1 rounded bg-gray-800 hover:bg-gray-700 text-sm flex items-center justify-center"> | |
| <i class="fas fa-plus mr-2"></i> | |
| Add Option | |
| </button> | |
| </div> | |
| <div> | |
| <div class="text-sm font-medium mb-2">AI Parameters</div> | |
| <div class="space-y-2"> | |
| <div> | |
| <label class="text-xs text-text-secondary block mb-1">Personality</label> | |
| <select class="w-full bg-gray-800 border border-gray-700 rounded px-2 py-1 text-sm"> | |
| <option>Mysterious</option> | |
| <option>Friendly</option> | |
| <option>Hostile</option> | |
| <option>Neutral</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="text-xs text-text-secondary block mb-1">Knowledge Level</label> | |
| <input type="range" min="0" max="100" value="75" class="w-full accent-accent"> | |
| </div> | |
| <div> | |
| <label class="text-xs text-text-secondary block mb-1">Trust Level</label> | |
| <input type="range" min="0" max="100" value="40" class="w-full accent-accent"> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="text-sm font-medium mb-2">Triggers</div> | |
| <div class="space-y-2"> | |
| <div class="flex items-center justify-between p-2 rounded bg-gray-800/50 text-sm"> | |
| <span>Player asks about crown</span> | |
| <i class="fas fa-toggle-on text-accent"></i> | |
| </div> | |
| <div class="flex items-center justify-between p-2 rounded bg-gray-800/50 text-sm"> | |
| <span>Player shows coin</span> | |
| <i class="fas fa-toggle-off text-text-secondary"></i> | |
| </div> | |
| <div class="flex items-center justify-between p-2 rounded bg-gray-800/50 text-sm"> | |
| <span>Night time</span> | |
| <i class="fas fa-toggle-on text-accent"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="w-full py-2 rounded-lg bg-gradient-to-r from-primary to-accent text-white font-medium mt-4"> | |
| Save Changes | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Simple tab switching functionality | |
| document.querySelectorAll('.tab-button').forEach(button => { | |
| button.addEventListener('click', () => { | |
| // Remove active class from all buttons in this tab group | |
| const tabGroup = button.closest('.flex.space-x-1'); | |
| tabGroup.querySelectorAll('.tab-button').forEach(btn => { | |
| btn.classList.remove('active'); | |
| }); | |
| // Add active class to clicked button | |
| button.classList.add('active'); | |
| // Here you would add logic to show/hide the corresponding content panels | |
| }); | |
| }); | |
| // Sidebar item selection | |
| document.querySelectorAll('.sidebar-item').forEach(item => { | |
| item.addEventListener('click', (e) => { | |
| e.preventDefault(); | |
| // Remove active class from all items in this sidebar section | |
| const section = item.closest('.space-y-1'); | |
| section.querySelectorAll('.sidebar-item').forEach(i => { | |
| i.classList.remove('active'); | |
| }); | |
| // Add active class to clicked item | |
| item.classList.add('active'); | |
| }); | |
| }); | |
| // Simulate AI generation status | |
| let generating = true; | |
| setInterval(() => { | |
| const statusElement = document.querySelector('.bg-green-900\\/50'); | |
| if (generating) { | |
| statusElement.innerHTML = '<span class="w-2 h-2 rounded-full bg-green-500 mr-2"></span>Processing...'; | |
| generating = false; | |
| } else { | |
| statusElement.innerHTML = '<span class="w-2 h-2 rounded-full bg-green-500 mr-2"></span>Generating...'; | |
| generating = true; | |
| } | |
| }, 3000); | |
| // Node hover effects | |
| document.querySelectorAll('.node').forEach(node => { | |
| node.addEventListener('mouseenter', () => { | |
| node.style.transform = 'translateY(-2px)'; | |
| node.style.boxShadow = '0 0 0 2px var(--primary)'; | |
| }); | |
| node.addEventListener('mouseleave', () => { | |
| node.style.transform = ''; | |
| node.style.boxShadow = ''; | |
| }); | |
| }); | |
| </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=bradynapier/lorely" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |