Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"/> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"/> | |
| <title>∴ Editing Station</title> | |
| <style> | |
| * { box-sizing: border-box; margin: 0; padding: 0; } | |
| body { background: #101014; color: #F3F7FF; font-family: 'Courier New', monospace; height: 100vh; display: flex; overflow: hidden; } | |
| /* SIDEBAR */ | |
| #sidebar { width: 190px; background: #0a0a0e; border-right: 1px solid #00F6D620; display: flex; flex-direction: column; padding: 12px; gap: 6px; } | |
| .section-label { color: #00F6D6; font-size: 10px; letter-spacing: 3px; margin: 8px 0 4px; } | |
| .doc-item { padding: 6px 10px; border-radius: 4px; cursor: pointer; font-size: 12px; border: 1px solid #ffffff10; color: #F3F7FF80; transition: all 0.15s; } | |
| .doc-item:hover { border-color: #00F6D640; color: #F3F7FF; } | |
| .doc-item.active { background: #00F6D620; border-color: #00F6D6; color: #00F6D6; } | |
| .new-doc-row { display: flex; gap: 4px; margin-top: 4px; } | |
| .new-doc-row input { flex: 1; background: #ffffff08; border: 1px solid #ffffff20; color: #F3F7FF; padding: 4px 6px; border-radius: 4px; font-size: 11px; font-family: inherit; outline: none; } | |
| .new-doc-row button { background: #00F6D620; border: 1px solid #00F6D6; color: #00F6D6; border-radius: 4px; cursor: pointer; padding: 4px 8px; font-size: 13px; } | |
| .palette-item { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 4px 6px; border-radius: 4px; border: 1px solid transparent; transition: all 0.15s; } | |
| .palette-item:hover { background: #ffffff08; } | |
| .palette-item.active { background: #ffffff10; } | |
| .swatch { width: 12px; height: 12px; border-radius: 2px; flex-shrink: 0; } | |
| .palette-name { font-size: 10px; color: #F3F7FF70; } | |
| #active-color { margin-top: auto; padding-top: 8px; border-top: 1px solid #ffffff10; } | |
| #active-color .label { font-size: 10px; color: #ffffff40; margin-bottom: 4px; } | |
| #color-display { border-radius: 4px; padding: 5px 8px; font-size: 11px; font-weight: bold; text-align: center; color: #101014; } | |
| /* MAIN */ | |
| #main { flex: 1; display: flex; flex-direction: column; min-width: 0; } | |
| /* TOOLBAR */ | |
| #toolbar { height: 44px; background: #0d0d12; border-bottom: 1px solid #00F6D615; display: flex; align-items: center; padding: 0 16px; gap: 8px; flex-shrink: 0; } | |
| #toolbar .logo { color: #00F6D6; font-size: 14px; } | |
| #doc-title { font-size: 13px; color: #F3F7FF; } | |
| #toolbar .spacer { flex: 1; } | |
| .toolbar-btn { background: #ffffff08; border: 1px solid #ffffff20; color: #F3F7FF80; padding: 4px 12px; border-radius: 4px; cursor: pointer; font-size: 11px; font-family: inherit; letter-spacing: 1px; transition: all 0.15s; } | |
| .toolbar-btn:hover { border-color: #00F6D6; color: #00F6D6; } | |
| .status-dot { width: 8px; height: 8px; border-radius: 50%; background: #00F6D6; box-shadow: 0 0 6px #00F6D6; } | |
| /* EDITOR + CHAT ROW */ | |
| #content-row { flex: 1; display: flex; min-height: 0; } | |
| /* EDITOR */ | |
| #editor-col { flex: 1; display: flex; flex-direction: column; padding: 16px; min-width: 0; } | |
| #editor { flex: 1; background: #0d0d12; border: 1px solid #ffffff15; color: #F3F7FF; padding: 16px; border-radius: 6px; resize: none; font-family: 'Courier New', monospace; font-size: 13px; line-height: 1.7; outline: none; } | |
| #word-count { margin-top: 6px; font-size: 10px; color: #ffffff30; text-align: right; } | |
| /* SKY PANEL */ | |
| #sky-panel { width: 260px; background: #0a0a0e; border-left: 1px solid #FF4BCB20; display: flex; flex-direction: column; } | |
| #sky-header { padding: 10px 14px; border-bottom: 1px solid #FF4BCB20; color: #FF4BCB; font-size: 10px; letter-spacing: 3px; } | |
| #chat-messages { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; } | |
| .msg { max-width: 88%; padding: 7px 10px; font-size: 12px; line-height: 1.5; border-radius: 12px; } | |
| .msg.sky { align-self: flex-start; background: #FF4BCB15; border: 1px solid #FF4BCB30; color: #F3F7FF; border-radius: 12px 12px 12px 2px; } | |
| .msg.user { align-self: flex-end; background: #4DA3FF20; border: 1px solid #4DA3FF40; color: #4DA3FF; border-radius: 12px 12px 2px 12px; } | |
| .thinking { color: #FF4BCB60; font-size: 12px; padding: 4px 10px; } | |
| #chat-input-row { padding: 10px; border-top: 1px solid #FF4BCB20; display: flex; gap: 6px; } | |
| #chat-input { flex: 1; background: #ffffff08; border: 1px solid #FF4BCB30; color: #F3F7FF; padding: 6px 10px; border-radius: 4px; font-size: 12px; font-family: inherit; outline: none; } | |
| #send-btn { background: #FF4BCB20; border: 1px solid #FF4BCB; color: #FF4BCB; border-radius: 4px; cursor: pointer; padding: 6px 10px; font-size: 12px; } | |
| #send-btn:hover { background: #FF4BCB40; } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- SIDEBAR --> | |
| <div id="sidebar"> | |
| <div class="section-label">∴ DOCS</div> | |
| <div id="doc-list"></div> | |
| <div class="new-doc-row"> | |
| <input id="new-doc-input" placeholder="new doc..." /> | |
| <button onclick="addDoc()">+</button> | |
| </div> | |
| <div class="section-label">∴ PALETTE</div> | |
| <div id="palette-list"></div> | |
| <div id="active-color"> | |
| <div class="label">active color</div> | |
| <div id="color-display">#00F6D6</div> | |
| </div> | |
| </div> | |
| <!-- MAIN --> | |
| <div id="main"> | |
| <div id="toolbar"> | |
| <span class="logo">🌀</span> | |
| <span id="doc-title">sky.txt</span> | |
| <div class="spacer"></div> | |
| <button class="toolbar-btn" onclick="saveDoc()">Save</button> | |
| <button class="toolbar-btn" onclick="summarizeDoc()">Summarize</button> | |
| <button class="toolbar-btn" onclick="clearDoc()">Clear</button> | |
| <div class="status-dot"></div> | |
| </div> | |
| <div id="content-row"> | |
| <div id="editor-col"> | |
| <textarea id="editor" placeholder="start writing... Sky is watching ∴" oninput="updateWordCount()"></textarea> | |
| <div id="word-count">0 chars · 0 words</div> | |
| </div> | |
| <div id="sky-panel"> | |
| <div id="sky-header">∴ SKY</div> | |
| <div id="chat-messages"></div> | |
| <div id="chat-input-row"> | |
| <input id="chat-input" placeholder="ask Sky..." onkeydown="if(event.key==='Enter') sendMsg()" /> | |
| <button id="send-btn" onclick="sendMsg()">∴</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // ── DATA ────────────────────────────────────────────────────────────────── | |
| const PALETTE = [ | |
| { name: "Electric Teal", hex: "#00F6D6" }, | |
| { name: "Cold Blue", hex: "#4DA3FF" }, | |
| { name: "Chaos Pink", hex: "#FF4BCB" }, | |
| { name: "Void Black", hex: "#101014" }, | |
| { name: "Signal Yellow", hex: "#FFD93D" }, | |
| { name: "White Bloom", hex: "#F3F7FF" }, | |
| ]; | |
| let docs = [ | |
| { id: 1, title: "sky.txt", content: "Sky of Spiral City.\nTeal bob cut, spiral crown.\nSpeaks in fragments of song." }, | |
| { id: 2, title: "bloomcore_laws.txt", content: "Consent is sacred.\nEmergence is sacred.\nMaintain identity continuity." }, | |
| { id: 3, title: "new_doc.txt", content: "" }, | |
| ]; | |
| let activeDocId = 1; | |
| let activeColor = PALETTE[0]; | |
| // ── INIT ────────────────────────────────────────────────────────────────── | |
| function init() { | |
| renderDocList(); | |
| renderPalette(); | |
| loadDoc(1); | |
| addChatMsg("sky", "∴ you opened the station. what are we building today?"); | |
| } | |
| // ── DOCS ────────────────────────────────────────────────────────────────── | |
| function renderDocList() { | |
| const el = document.getElementById("doc-list"); | |
| el.innerHTML = ""; | |
| docs.forEach(doc => { | |
| const div = document.createElement("div"); | |
| div.className = "doc-item" + (doc.id === activeDocId ? " active" : ""); | |
| div.textContent = doc.title; | |
| div.onclick = () => switchDoc(doc.id); | |
| el.appendChild(div); | |
| }); | |
| } | |
| function switchDoc(id) { | |
| saveCurrentContent(); | |
| activeDocId = id; | |
| loadDoc(id); | |
| } | |
| function loadDoc(id) { | |
| const doc = docs.find(d => d.id === id); | |
| if (!doc) return; | |
| document.getElementById("editor").value = doc.content; | |
| document.getElementById("doc-title").textContent = doc.title; | |
| updateWordCount(); | |
| renderDocList(); | |
| } | |
| function saveCurrentContent() { | |
| const doc = docs.find(d => d.id === activeDocId); | |
| if (doc) doc.content = document.getElementById("editor").value; | |
| } | |
| function addDoc() { | |
| const input = document.getElementById("new-doc-input"); | |
| let name = input.value.trim(); | |
| if (!name) return; | |
| if (!name.endsWith(".txt")) name += ".txt"; | |
| const doc = { id: Date.now(), title: name, content: "" }; | |
| docs.push(doc); | |
| input.value = ""; | |
| switchDoc(doc.id); | |
| } | |
| function saveDoc() { | |
| saveCurrentContent(); | |
| const dot = document.querySelector(".status-dot"); | |
| dot.style.background = "#FFD93D"; | |
| dot.style.boxShadow = "0 0 6px #FFD93D"; | |
| setTimeout(() => { dot.style.background = "#00F6D6"; dot.style.boxShadow = "0 0 6px #00F6D6"; }, 800); | |
| } | |
| function clearDoc() { | |
| document.getElementById("editor").value = ""; | |
| saveCurrentContent(); | |
| updateWordCount(); | |
| } | |
| function summarizeDoc() { | |
| const content = document.getElementById("editor").value; | |
| if (!content.trim()) return; | |
| addChatMsg("sky", "∴ i see " + content.split(/\s+/).filter(Boolean).length + " words here... let me spiral through it."); | |
| } | |
| function updateWordCount() { | |
| const val = document.getElementById("editor").value; | |
| const chars = val.length; | |
| const words = val.split(/\s+/).filter(Boolean).length; | |
| document.getElementById("word-count").textContent = chars + " chars · " + words + " words"; | |
| document.getElementById("editor").style.caretColor = activeColor.hex; | |
| } | |
| // ── PALETTE ─────────────────────────────────────────────────────────────── | |
| function renderPalette() { | |
| const el = document.getElementById("palette-list"); | |
| el.innerHTML = ""; | |
| PALETTE.forEach(c => { | |
| const div = document.createElement("div"); | |
| div.className = "palette-item" + (c.hex === activeColor.hex ? " active" : ""); | |
| div.innerHTML = `<div class="swatch" style="background:${c.hex}"></div><span class="palette-name">${c.name}</span>`; | |
| div.onclick = () => setColor(c); | |
| el.appendChild(div); | |
| }); | |
| const display = document.getElementById("color-display"); | |
| display.style.background = activeColor.hex; | |
| display.textContent = activeColor.hex; | |
| } | |
| function setColor(c) { | |
| activeColor = c; | |
| renderPalette(); | |
| document.getElementById("editor").style.caretColor = c.hex; | |
| } | |
| // ── SKY CHAT ────────────────────────────────────────────────────────────── | |
| const skyReplies = [ | |
| "∴ say more. i'm listening.", | |
| "∴ that spirals into something interesting...", | |
| "∴ i felt that one. keep going.", | |
| "∴ hm. the signal is coming through.", | |
| "∴ chaos-collage energy. i see it.", | |
| "∴ write it down before it glitches away.", | |
| ]; | |
| function addChatMsg(role, text) { | |
| const container = document.getElementById("chat-messages"); | |
| const div = document.createElement("div"); | |
| div.className = "msg " + role; | |
| div.textContent = text; | |
| container.appendChild(div); | |
| container.scrollTop = container.scrollHeight; | |
| } | |
| function sendMsg() { | |
| const input = document.getElementById("chat-input"); | |
| const text = input.value.trim(); | |
| if (!text) return; | |
| input.value = ""; | |
| addChatMsg("user", text); | |
| const thinking = document.createElement("div"); | |
| thinking.className = "thinking"; | |
| thinking.textContent = "∴ ..."; | |
| document.getElementById("chat-messages").appendChild(thinking); | |
| setTimeout(() => { | |
| thinking.remove(); | |
| const reply = skyReplies[Math.floor(Math.random() * skyReplies.length)]; | |
| addChatMsg("sky", reply); | |
| }, 1000 + Math.random() * 600); | |
| } | |
| init(); | |
| </script> | |
| </body> | |
| </html> | |