| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Wavetype Frequency Grid - Pro</title> |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css" rel="stylesheet"> |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.11.1/font/bootstrap-icons.min.css" rel="stylesheet"> |
| <style> |
| :root { |
| --border-html: #ff0000; |
| --border-python: #0000ff; |
| --border-image: #00ff00; |
| --border-video: #800080; |
| --border-3d: #ffa500; |
| --border-txt: #808080; |
| --border-url: #00ffff; |
| --bg-shade: 0.1; |
| } |
| |
| body, html { |
| margin: 0; padding: 0; width: 100%; height: 100vh; |
| overflow: hidden; background-color: #000; |
| font-family: "Courier New", Courier, monospace; color: white; |
| } |
| |
| #sidebar { |
| position: fixed; left: 0; top: 0; width: 320px; height: 100vh; |
| background: linear-gradient(180deg, #1a1a1a 0%, #0d0d0d 100%); |
| border-right: 2px solid #333; z-index: 2000; |
| transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); |
| box-shadow: 4px 0 20px rgba(0, 0, 0, 0.5); overflow-y: auto; |
| } |
| |
| #sidebar.collapsed { transform: translateX(-320px); } |
| |
| #sidebar-toggle { |
| position: fixed; left: 320px; top: 20px; width: 40px; height: 40px; |
| background: #1a1a1a; border: 2px solid #333; border-left: none; |
| border-radius: 0 8px 8px 0; cursor: pointer; z-index: 2001; |
| display: flex; align-items: center; justify-content: center; color: white; |
| transition: all 0.3s; |
| } |
| |
| #sidebar.collapsed ~ #sidebar-toggle { left: 0; } |
| |
| .auth-section { padding: 15px; border-bottom: 1px solid #333; background: #111; } |
| |
| .social-btn { |
| width: 100%; margin-top: 8px; font-size: 12px; display: flex; |
| align-items: center; justify-content: center; gap: 10px; |
| } |
| |
| #grid-container { |
| display: grid; width: 100vw; height: 100vh; gap: 4px; padding: 4px; |
| padding-left: 324px; transition: padding-left 0.3s cubic-bezier(0.4, 0, 0.2, 1); |
| } |
| |
| #sidebar.collapsed ~ #grid-container { padding-left: 4px; } |
| |
| .block { |
| position: relative; background-color: rgba(255, 255, 255, var(--bg-shade)); |
| border: 2px solid #333; display: flex; flex-direction: column; |
| align-items: center; justify-content: center; cursor: pointer; |
| overflow: hidden; animation: liquidPop 0.8s forwards; |
| } |
| |
| @keyframes liquidPop { |
| 0% { opacity: 0; transform: scale(0.8); } |
| 100% { opacity: 1; transform: scale(1); } |
| } |
| |
| .type-html { border-color: var(--border-html); } |
| .type-python { border-color: var(--border-python); } |
| .type-image { border-color: var(--border-image); } |
| .type-video { border-color: var(--border-video); } |
| .type-3d { border-color: var(--border-3d); } |
| .type-txt { border-color: var(--border-txt); } |
| .type-url { border-color: var(--border-url); } |
| |
| .block.active { |
| position: fixed; top: 0; left: 0; width: 100vw !important; |
| height: 100vh !important; z-index: 2500; background: #000; padding: 20px; |
| } |
| |
| .close-btn { |
| display: none; position: absolute; top: 20px; right: 20px; |
| background: #dc3545; color: white; border: none; padding: 8px 16px; |
| } |
| |
| .block.active .close-btn { display: block; } |
| |
| .preview-content { max-width: 90%; max-height: 80%; display: none; } |
| .block.active .preview-content { display: block; } |
| |
| .type-selector-overlay { |
| position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; |
| background: rgba(0,0,0,0.9); z-index: 3000; display: none; |
| align-items: center; justify-content: center; |
| } |
| |
| .type-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } |
| |
| .type-option { |
| width: 80px; height: 80px; border: 2px solid #444; border-radius: 8px; |
| display: flex; flex-direction: column; align-items: center; |
| justify-content: center; cursor: pointer; font-size: 10px; |
| } |
| |
| .add-block-btn { |
| position: absolute; bottom: 5px; right: 5px; width: 24px; height: 24px; |
| background: #00ff00; border-radius: 50%; color: #000; border: none; font-weight: bold; |
| } |
| |
| .python-console { |
| width: 100%; height: 60%; background: #000; color: #0f0; |
| font-family: monospace; padding: 10px; border: 1px solid #333; |
| overflow-y: auto; display: none; margin-top: 10px; |
| } |
| .block.active .python-console { display: block; } |
| </style> |
| </head> |
| <body> |
|
|
| <div id="sidebar"> |
| <div class="auth-section"> |
| <div id="user-profile" style="display: none;"> |
| <p class="small mb-2">Welcome, <span id="user-name" class="fw-bold">User</span></p> |
| <button class="btn btn-outline-danger btn-sm w-100" onclick="handleLogout()">Sign Out</button> |
| </div> |
| <div id="login-section"> |
| <p class="small text-muted mb-2">Sign in to save layouts</p> |
| <button class="btn btn-light social-btn" onclick="handleLogin('Google')"> |
| <i class="bi bi-google"></i> Google |
| </button> |
| <button class="btn btn-primary social-btn" onclick="handleLogin('GitHub')"> |
| <i class="bi bi-github"></i> GitHub |
| </button> |
| </div> |
| </div> |
|
|
| <div class="p-3"> |
| <div class="mb-4"> |
| <label class="form-label small">GRID DENSITY</label> |
| <input type="range" class="form-range" id="blockSlider" min="1" max="64" value="4" oninput="updateGrid()"> |
| <div class="d-flex justify-content-between small"> |
| <span id="countVal">4</span> Blocks |
| <span id="saveIcon" style="display:none; color:#0f0;">Saved!</span> |
| </div> |
| </div> |
| <div class="mb-4"> |
| <label class="form-label small">BACKGROUND SHADE</label> |
| <input type="range" class="form-range" id="shadeRange" min="0" max="0.5" step="0.05" value="0.1" oninput="updateShade()"> |
| </div> |
| <button class="btn btn-success btn-sm w-100 mb-2" onclick="saveToCache()">MANUAL SAVE</button> |
| <button class="btn btn-outline-secondary btn-sm w-100" onclick="clearGrid()">RESET ALL</button> |
| </div> |
| </div> |
|
|
| <button id="sidebar-toggle" onclick="toggleSidebar()"> |
| <i class="bi bi-chevron-left"></i> |
| </button> |
|
|
| <div class="type-selector-overlay" id="typeSelectorOverlay"> |
| <div class="bg-dark p-4 rounded border border-secondary text-center"> |
| <h6>SELECT MODULE TYPE</h6> |
| <div class="type-options"> |
| <div class="type-option" onclick="addNewBlock('html')"><i class="bi bi-code"></i>HTML</div> |
| <div class="type-option" onclick="addNewBlock('python')"><i class="bi bi-terminal"></i>PY</div> |
| <div class="type-option" onclick="addNewBlock('image')"><i class="bi bi-image"></i>IMG</div> |
| <div class="type-option" onclick="addNewBlock('video')"><i class="bi bi-play-circle"></i>VID</div> |
| <div class="type-option" onclick="addNewBlock('url')"><i class="bi bi-globe"></i>URL</div> |
| </div> |
| <button class="btn btn-sm btn-link text-danger mt-3" onclick="closeTypeSelector()">CANCEL</button> |
| </div> |
| </div> |
|
|
| <div id="grid-container"></div> |
|
|
| <script src="https://cdn.jsdelivr.net/pyodide/v0.27.3/full/pyodide.js"></script> |
| <script> |
| const container = document.getElementById("grid-container"); |
| const countDisplay = document.getElementById("countVal"); |
| const contentTypes = ["html", "python", "image", "video", "url"]; |
| let blocks = []; |
| let currentUser = null; |
| let pyodide = null; |
| |
| async function initPython() { |
| if (!pyodide) { |
| pyodide = await loadPyodide(); |
| await pyodide.loadPackage("micropip"); |
| } |
| } |
| |
| function handleLogin(provider) { |
| currentUser = { name: provider + " User", id: Date.now() }; |
| document.getElementById("login-section").style.display = "none"; |
| document.getElementById("user-profile").style.display = "block"; |
| document.getElementById("user-name").innerText = currentUser.name; |
| saveToCache(); |
| } |
| |
| function handleLogout() { |
| currentUser = null; |
| document.getElementById("login-section").style.display = "block"; |
| document.getElementById("user-profile").style.display = "none"; |
| } |
| |
| function saveToCache() { |
| const data = { blocks, shade: document.getElementById("shadeRange").value, user: currentUser }; |
| localStorage.setItem("wave_grid_cache", JSON.stringify(data)); |
| document.getElementById("saveIcon").style.display = "inline"; |
| setTimeout(() => { document.getElementById("saveIcon").style.display = "none"; }, 1500); |
| } |
| |
| function loadFromCache() { |
| const cache = localStorage.getItem("wave_grid_cache"); |
| if (cache) { |
| const data = JSON.parse(cache); |
| blocks = data.blocks; |
| document.getElementById("shadeRange").value = data.shade; |
| if (data.user) handleLogin(data.user.name.split(' ')[0]); |
| renderGrid(); |
| } else { |
| updateGrid(); |
| } |
| } |
| |
| function toggleSidebar() { document.getElementById("sidebar").classList.toggle("collapsed"); } |
| function openTypeSelector() { document.getElementById("typeSelectorOverlay").style.display = "flex"; } |
| function closeTypeSelector() { document.getElementById("typeSelectorOverlay").style.display = "none"; } |
| |
| function updateGrid() { |
| const count = parseInt(document.getElementById("blockSlider").value); |
| countDisplay.innerText = count; |
| while (blocks.length < count) { |
| blocks.push({ id: Date.now() + Math.random(), type: contentTypes[Math.floor(Math.random() * contentTypes.length)], data: "" }); |
| } |
| while (blocks.length > count) blocks.pop(); |
| renderGrid(); |
| saveToCache(); |
| } |
| |
| function addNewBlock(type) { |
| blocks.push({ id: Date.now(), type, data: "" }); |
| closeTypeSelector(); |
| renderGrid(); |
| saveToCache(); |
| } |
| |
| function renderGrid() { |
| const cols = Math.ceil(Math.sqrt(blocks.length)) || 1; |
| container.style.gridTemplateColumns = `repeat(${cols}, 1fr)`; |
| container.innerHTML = ""; |
| blocks.forEach((b, i) => { |
| const el = document.createElement("div"); |
| el.className = `block type-${b.type}`; |
| el.onclick = () => { if(!el.classList.contains('active')) el.classList.add('active'); }; |
| |
| let content = `<span class="small fw-bold opacity-50">${b.type.toUpperCase()}</span>`; |
| if(b.type === 'python') { |
| content += `<textarea class="form-control form-control-sm m-2 w-75 bg-dark text-white" style="display:none" placeholder="print('hello')"></textarea> |
| <button class="btn btn-sm btn-primary m-1" style="display:none" onclick="runPython(${i}, this)">RUN</button> |
| <div class="python-console" id="console-${i}">Ready...</div>`; |
| } |
| content += `<button class="close-btn" onclick="event.stopPropagation(); this.parentElement.classList.remove('active')">EXIT</button> |
| <button class="add-block-btn" onclick="event.stopPropagation(); openTypeSelector()">+</button>`; |
| el.innerHTML = content; |
| container.appendChild(el); |
| }); |
| } |
| |
| async function runPython(index, btn) { |
| event.stopPropagation(); |
| const code = btn.previousElementSibling.value; |
| const consoleEl = document.getElementById(`console-${index}`); |
| consoleEl.innerText = "Executing..."; |
| try { |
| await initPython(); |
| let result = await pyodide.runPythonAsync(code); |
| consoleEl.innerText = result || "Success (no output)"; |
| } catch (err) { |
| consoleEl.innerText = "Error: " + err.message; |
| } |
| } |
| |
| window.onload = loadFromCache; |
| </script> |
| </body> |
| </html> |
|
|
