| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| <meta name="description" content="Draw your dreams and see them come to life in an interactive 3D art museum. Powered by SDXL and ControlNet scribble guidance." /> |
| <title>Dream Museum — Materialize Your Dreams in 3D</title> |
| <link rel="preconnect" href="https://fonts.googleapis.com"> |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
| <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&display=swap" rel="stylesheet"> |
| <link rel="stylesheet" href="/static/style.css" /> |
| <script type="importmap"> |
| { |
| "imports": { |
| "three": "https://cdn.jsdelivr.net/npm/three@0.183.0/build/three.module.js", |
| "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.183.0/examples/jsm/" |
| } |
| } |
| </script> |
| </head> |
| <body> |
|
|
| <canvas id="museum-canvas"></canvas> |
|
|
| |
| <div id="museum-logo"> |
| <span class="logo-glyph">◈</span> |
| <span class="logo-text">Dream Museum</span> |
| </div> |
|
|
| |
| <div id="hud-topright"> |
| <div class="auth-area"> |
| <span id="auth-name" class="auth-name hidden"></span> |
| <input id="auth-input" class="auth-input" type="text" placeholder="Enter as…" /> |
| <button id="auth-btn" class="btn-outline-sm">✦</button> |
| </div> |
| <button class="hud-pill" id="btn-my-gallery">My Gallery</button> |
| </div> |
|
|
| |
| <button class="fab fab--left" id="btn-create"> |
| <span class="fab-icon"> |
| <svg viewBox="0 0 24 24" fill="currentColor" width="20" height="20"> |
| <path d="M7 14c-1.66 0-3 1.34-3 3 0 1.31-1.16 2-2 2 .92 1.22 2.49 2 4 2 2.21 0 4-1.79 4-4 0-1.66-1.34-3-3-3zm13.71-9.37l-1.34-1.34c-.39-.39-1.02-.39-1.41 0L9 12.25 11.75 15l8.96-8.96c.39-.39.39-1.02 0-1.41z"/> |
| </svg> |
| </span> |
| <span class="fab-label">Paint</span> |
| </button> |
|
|
| |
| <a class="fab fab--right" href="/galeria"> |
| <span class="fab-icon">◈</span> |
| <span class="fab-label">Gallery</span> |
| </a> |
|
|
| |
| <div id="room-hint"> |
| <span>Click a painting to view it</span> |
| </div> |
|
|
| |
| <div id="panel-create" class="side-panel hidden"> |
| <button class="panel-close" id="close-create">✕</button> |
| <div class="panel-scroll"> |
|
|
| <div class="panel-head"> |
| <h2>Create a Dream</h2> |
| <p>Draw its shape. Describe its soul. Let the museum do the rest.</p> |
| </div> |
|
|
| <div class="create-layout"> |
|
|
| |
| <div class="canvas-col"> |
| <div class="draw-toolbar"> |
| <button class="tool active" id="t-pen" title="Brush"> |
| <svg viewBox="0 0 24 24" fill="currentColor" width="15" height="15"> |
| <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/> |
| </svg> |
| </button> |
| <button class="tool" id="t-eraser" title="Eraser"> |
| <svg viewBox="0 0 24 24" fill="currentColor" width="15" height="15"> |
| <path d="M15.14 3c-.51 0-1.02.2-1.41.59L2.59 14.73c-.78.77-.78 2.04 0 2.83L5.03 20h7.66l8.72-8.72c.79-.78.79-2.05 0-2.83l-4.86-4.86c-.39-.39-.9-.59-1.41-.59zm-3.73 15H5.17l-1.8-1.8 4.86-4.86 5.18 5.18V18z"/> |
| </svg> |
| </button> |
|
|
| <div class="tool-sep"></div> |
|
|
| <input type="color" id="t-color" value="#ffffff" class="color-picker" title="Color" /> |
| <div class="color-swatches"> |
| <button class="swatch" style="--c:#ffffff" data-color="#ffffff"></button> |
| <button class="swatch" style="--c:#f9c6da" data-color="#f9c6da"></button> |
| <button class="swatch" style="--c:#c9a0dc" data-color="#c9a0dc"></button> |
| <button class="swatch" style="--c:#7ec8e3" data-color="#7ec8e3"></button> |
| <button class="swatch" style="--c:#f0cc6e" data-color="#f0cc6e"></button> |
| <button class="swatch" style="--c:#ff8fab" data-color="#ff8fab"></button> |
| <button class="swatch" style="--c:#8888ee" data-color="#8888ee"></button> |
| <button class="swatch" style="--c:#1a0f2e" data-color="#1a0f2e"></button> |
| </div> |
|
|
| <div class="tool-sep"></div> |
|
|
| <div class="brush-row"> |
| <input type="range" id="t-size" min="1" max="40" value="6" /> |
| <div id="brush-preview" class="brush-preview"></div> |
| </div> |
|
|
| <div class="tool-sep"></div> |
|
|
| <button class="tool" id="t-clear" title="Clear"> |
| <svg viewBox="0 0 24 24" fill="currentColor" width="15" height="15"> |
| <path d="M19 4h-3.5l-1-1h-5l-1 1H5v2h14V4zM6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12z"/> |
| </svg> |
| </button> |
| </div> |
|
|
| <div class="canvas-frame"> |
| <canvas id="draw-canvas" width="512" height="512"></canvas> |
| </div> |
| </div> |
|
|
| |
| <div class="ctrl-col"> |
|
|
| <div class="field-group"> |
| <label class="field-label" for="dream-desc">Describe your dream</label> |
| <textarea id="dream-desc" |
| placeholder="A cathedral of clouds, golden light through impossible windows, the feeling of floating between colours…" |
| rows="5"></textarea> |
| </div> |
|
|
| <div class="field-group"> |
| <div class="slider-label"> |
| <span>Sketch faithfulness</span> |
| <span id="strength-val" class="slider-num">0.7</span> |
| </div> |
| <input type="range" id="strength" min="0.3" max="1.0" step="0.05" value="0.7" /> |
| <div class="slider-hints"> |
| <span>Free interpretation</span> |
| <span>Follows sketch</span> |
| </div> |
| </div> |
|
|
| <button id="generate-btn" class="btn-materialize"> |
| <span id="gen-label">✦ Materialize Dream</span> |
| <span id="gen-spin" class="spinner hidden"></span> |
| </button> |
|
|
| <div id="result-area" class="result-area hidden"> |
| <div class="result-diptych"> |
| <div class="res-side"> |
| <div class="res-label">Sketch</div> |
| <img id="res-sketch" alt="sketch" /> |
| </div> |
| <div class="res-arrow">→</div> |
| <div class="res-side"> |
| <div class="res-label">Dream</div> |
| <img id="res-dream" alt="dream" /> |
| </div> |
| </div> |
|
|
| <div id="save-area" class="save-area"> |
| <p id="need-auth" class="auth-notice hidden"> |
| Enter your name above to save this dream. |
| </p> |
| <div id="save-btns" class="save-btns hidden"> |
| <button id="btn-publish" class="btn-gold">Exhibit in the Museum</button> |
| <button id="btn-private" class="btn-outline">Save privately</button> |
| </div> |
| <button id="btn-download" class="btn-ghost">Download image</button> |
| </div> |
| </div> |
|
|
| </div> |
| </div> |
|
|
| </div> |
| </div> |
|
|
| |
| <div id="panel-gallery" class="side-panel hidden"> |
| <button class="panel-close" id="close-gallery">✕</button> |
| <div class="panel-scroll"> |
| <div class="panel-head"> |
| <h2>My Gallery</h2> |
| <p id="gallery-subtitle">Your private dream archive</p> |
| </div> |
| <div id="my-grid" class="dream-grid"> |
| <div class="empty-state">No dreams saved yet.</div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="dream-modal" class="modal hidden"> |
| <div class="modal-backdrop"></div> |
| <div class="modal-box"> |
| <button class="modal-close">✕</button> |
| <div class="modal-diptych"> |
| <div class="modal-side"> |
| <div class="modal-lbl">Sketch</div> |
| <img id="modal-sketch" alt="sketch" /> |
| </div> |
| <div class="modal-arrow">→</div> |
| <div class="modal-side"> |
| <div class="modal-lbl">Dream</div> |
| <img id="modal-dream" alt="dream" /> |
| </div> |
| </div> |
| <p id="modal-desc" class="modal-desc"></p> |
| <div id="modal-meta" class="modal-meta"></div> |
| <div id="modal-owner" class="modal-owner hidden"> |
| <button id="modal-toggle" class="btn-outline"></button> |
| <button id="modal-delete" class="btn-danger">Delete</button> |
| </div> |
| </div> |
| </div> |
|
|
| <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.2/dist/gsap.min.js"></script> |
| <script type="module" src="/static/app.js"></script> |
| </body> |
| </html> |
|
|
