Spaces:

Wavetype
/

Imagulessss

Running

App Files Files Community

Wavetype commited on Jan 16

Commit

0457181

verified ·

1 Parent(s): be05c4b

Update index.html

Browse files

Files changed (1) hide show

index.html +179 -134

index.html CHANGED Viewed

@@ -3,7 +3,8 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Live Modular Builder</title>
     <style>
         :root {
             --bg: #0a0a0a;
@@ -17,7 +18,7 @@
         body {
             background: var(--bg);
             color: var(--text);
-            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
             margin: 0;
             padding: 20px;
             display: flex;
@@ -27,10 +28,10 @@
         #canvas {
             width: 100%;
-            max-width: 800px;
             display: flex;
             flex-direction: column;
-            gap: 20px;
         }
         .module-box {
@@ -38,7 +39,6 @@
             border: 2px solid var(--accent);
             border-radius: 12px;
             padding: 20px;
-            position: relative;
             box-shadow: 0 8px 32px rgba(0,0,0,0.8);
         }
@@ -51,95 +51,74 @@
             color: var(--accent);
         }
-        .exit-btn {
-            color: #ff4444;
-            cursor: pointer;
-            text-decoration: none;
         }
         textarea {
             width: 100%;
-            height: 150px;
             background: #000;
             color: #00ff41;
             border: 1px solid var(--border);
             border-radius: 6px;
-            font-family: 'Courier New', monospace;
             padding: 12px;
             box-sizing: border-box;
-            resize: vertical;
-            font-size: 0.9rem;
         }
-        .preview-container {
-            margin-top: 15px;
-            background: white;
-            color: black;
             border-radius: 6px;
-            min-height: 50px;
-            overflow: hidden;
-            display: block;
         }
-        .preview-label {
-            background: #222;
-            color: #aaa;
-            font-size: 0.7rem;
-            padding: 4px 10px;
-            display: block;
         }
-        iframe {
             width: 100%;
-            border: none;
-            background: white;
-            min-height: 50px;
-        }
-        .controls {
-            margin-top: 15px;
-            display: flex;
-            gap: 12px;
-            flex-wrap: wrap;
         }
-        button {
-            background: transparent;
-            color: white;
-            border: 1px solid var(--accent);
-            padding: 10px 20px;
-            border-radius: 6px;
             cursor: pointer;
-            transition: all 0.2s ease;
-            font-size: 0.85rem;
-            font-weight: 600;
-            text-transform: uppercase;
-        }
-        button:hover {
-            background: var(--accent);
         }
-        .save-btn {
-            border-color: var(--success);
-            color: var(--success);
         }
-        #library {
             width: 100%;
-            max-width: 800px;
-            margin: 40px 0;
-            padding: 20px;
-            background: #111;
-            border: 1px dashed #444;
-            border-radius: 12px;
-        }
-        .library-grid {
-            display: flex;
-            gap: 10px;
-            flex-wrap: wrap;
-            margin-top: 10px;
         }
         .lib-item {
@@ -149,13 +128,19 @@
             font-size: 0.8rem;
             cursor: pointer;
             border-radius: 4px;
         }
         .add-module-trigger {
-            margin-top: 30px;
-            padding: 18px 50px;
-            font-size: 1rem;
-            border-width: 2px;
         }
     </style>
 </head>
@@ -163,118 +148,178 @@
     <div id="canvas"></div>
-    <button class="add-module-trigger" onclick="createModule()">+ ADD NEW MODULE</button>
-    <div id="library">
-        <div style="font-size: 0.9rem; color: #888;">SAVED HTML SNIPPETS</div>
-        <div id="library-grid" class="library-grid"></div>
     </div>
     <script>
-        let library = JSON.parse(localStorage.getItem('html_library')) || [];
-        let activeSessions = JSON.parse(localStorage.getItem('active_sessions')) || [];
         function init() {
             renderLibrary();
-            // Reload previous session if it exists, otherwise create empty module
             if (activeSessions.length > 0) {
-                activeSessions.forEach(content => createModule(content));
             } else {
                 createModule();
             }
         }
-        function createModule(initialContent = '') {
             const canvas = document.getElementById('canvas');
-            const moduleId = 'mod_' + Math.random().toString(36).substr(2, 9);
             const box = document.createElement('div');
             box.className = 'module-box';
-            box.id = moduleId;
             box.innerHTML = `
                 <div class="module-header">
-                    <span>LIVE HTML NODE</span>
-                    <span class="exit-btn" onclick="removeModule('${moduleId}')">[EXIT]</span>
                 </div>
-                <textarea
-                    placeholder="Type code here (Auto-renders)..."
-                    id="text_${moduleId}"
-                    spellcheck="false"
-                    oninput="handleInput('${moduleId}')"
-                >${initialContent}</textarea>
-                <div class="controls">
-                    <button class="save-btn" onclick="saveToLibrary('${moduleId}')">SAVE TO LIBRARY</button>
                 </div>
-                <div class="preview-container">
-                    <span class="preview-label">LIVE OUTPUT</span>
-                    <iframe id="iframe_${moduleId}" sandbox="allow-scripts"></iframe>
                 </div>
             `;
             canvas.appendChild(box);
-            if(initialContent) renderPreview(moduleId);
-            updateSessionStore();
         }
-        function handleInput(moduleId) {
-            renderPreview(moduleId);
-            updateSessionStore();
-        }
-        function renderPreview(moduleId) {
-            const code = document.getElementById(`text_${moduleId}`).value;
-            const iframe = document.getElementById(`iframe_${moduleId}`);
-            if (!iframe) return;
-            const blob = new Blob([code], { type: 'text/html' });
-            const url = URL.createObjectURL(blob);
-            iframe.src = url;
-            iframe.onload = () => {
-                setTimeout(() => {
-                    if(iframe.contentWindow.document.body) {
-                        iframe.style.height = (iframe.contentWindow.document.body.scrollHeight + 20) + 'px';
-                    }
-                }, 50);
             };
-        }
-        function saveToLibrary(moduleId) {
-            const content = document.getElementById(`text_${moduleId}`).value;
-            if (!content.trim()) return;
-            const name = prompt("Name this snippet:", "Snippet " + (library.length + 1));
-            if (name) {
-                library.push({ name, content });
-                localStorage.setItem('html_library', JSON.stringify(library));
-                renderLibrary();
             }
         }
-        function updateSessionStore() {
-            const texts = Array.from(document.querySelectorAll('textarea')).map(t => t.value);
-            localStorage.setItem('active_sessions', JSON.stringify(texts));
         }
-        function removeModule(moduleId) {
-            document.getElementById(moduleId).remove();
             updateSessionStore();
         }
         function renderLibrary() {
             const grid = document.getElementById('library-grid');
             grid.innerHTML = '';
             library.forEach(item => {
                 const btn = document.createElement('button');
                 btn.className = 'lib-item';
-                btn.innerText = item.name;
-                btn.onclick = () => createModule(item.content);
                 grid.appendChild(btn);
             });
         }
         init();
     </script>
 </body>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Multi-Asset Live Builder</title>
+    <script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.4.0/model-viewer.min.js"></script>
     <style>
         :root {
             --bg: #0a0a0a;
         body {
             background: var(--bg);
             color: var(--text);
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
             margin: 0;
             padding: 20px;
             display: flex;
         #canvas {
             width: 100%;
+            max-width: 900px;
             display: flex;
             flex-direction: column;
+            gap: 25px;
         }
         .module-box {
             border: 2px solid var(--accent);
             border-radius: 12px;
             padding: 20px;
             box-shadow: 0 8px 32px rgba(0,0,0,0.8);
         }
             color: var(--accent);
         }
+        .exit-btn { color: #ff4444; cursor: pointer; }
+        .input-area {
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
         }
         textarea {
             width: 100%;
+            height: 120px;
             background: #000;
             color: #00ff41;
             border: 1px solid var(--border);
             border-radius: 6px;
+            font-family: monospace;
             padding: 12px;
             box-sizing: border-box;
         }
+        .dimension-controls {
+            background: #1a1a1a;
+            padding: 10px;
             border-radius: 6px;
+            margin: 10px 0;
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 15px;
         }
+        .slider-group {
+            display: flex;
+            flex-direction: column;
+            font-size: 0.75rem;
+            color: #888;
         }
+        input[type="range"] {
             width: 100%;
+            accent-color: var(--accent);
         }
+        .file-upload-btn {
+            background: #222;
+            border: 1px dashed var(--accent);
+            padding: 10px;
+            text-align: center;
             cursor: pointer;
+            font-size: 0.8rem;
+            margin-bottom: 10px;
         }
+        .preview-container {
+            margin-top: 15px;
+            background: #fff; /* White background for visibility */
+            border-radius: 6px;
+            overflow: hidden;
+            position: relative;
+            display: flex;
+            justify-content: center;
+            align-items: center;
         }
+        iframe, model-viewer, img {
             width: 100%;
+            height: 300px; /* Default */
+            border: none;
+            display: block;
         }
         .lib-item {
             font-size: 0.8rem;
             cursor: pointer;
             border-radius: 4px;
+            color: white;
+            margin: 5px;
         }
         .add-module-trigger {
+            margin: 30px;
+            padding: 15px 40px;
+            background: var(--accent);
+            border: none;
+            color: white;
+            font-weight: bold;
+            border-radius: 8px;
+            cursor: pointer;
         }
     </style>
 </head>
     <div id="canvas"></div>
+    <button class="add-module-trigger" onclick="createModule()">+ NEW MULTI-ASSET MODULE</button>
+    <div id="library" style="width: 100%; max-width: 900px; border-top: 1px solid #333; padding-top: 20px;">
+        <div style="color: #888; font-size: 0.8rem; margin-bottom: 10px;">SAVED ASSETS</div>
+        <div id="library-grid"></div>
     </div>
     <script>
+        let library = JSON.parse(localStorage.getItem('asset_library')) || [];
+        let activeSessions = JSON.parse(localStorage.getItem('asset_sessions')) || [];
         function init() {
             renderLibrary();
             if (activeSessions.length > 0) {
+                activeSessions.forEach(data => createModule(data.content, data.width, data.height, data.type));
             } else {
                 createModule();
             }
         }
+        function createModule(content = '', width = 100, height = 300, type = 'html') {
             const canvas = document.getElementById('canvas');
+            const id = 'mod_' + Math.random().toString(36).substr(2, 9);
             const box = document.createElement('div');
             box.className = 'module-box';
+            box.id = id;
             box.innerHTML = `
                 <div class="module-header">
+                    <span>ASSET NODE (${type.toUpperCase()})</span>
+                    <span class="exit-btn" onclick="removeModule('${id}')">[EXIT]</span>
                 </div>
+                <div class="input-area">
+                    <label class="file-upload-btn">
+                        📁 UPLOAD GLB / IMAGE / HTML
+                        <input type="file" hidden onchange="handleFile(this, '${id}')">
+                    </label>
+                    <textarea id="text_${id}" placeholder="Or paste HTML/CSS/JS here..." oninput="updateLive('${id}')">${content}</textarea>
+                    <div class="dimension-controls">
+                        <div class="slider-group">
+                            <label>WIDTH: <span id="w_val_${id}">${width}</span>%</label>
+                            <input type="range" min="10" max="100" value="${width}" oninput="updateDims('${id}', 'width', this.value)">
+                        </div>
+                        <div class="slider-group">
+                            <label>HEIGHT: <span id="h_val_${id}">${height}</span>px</label>
+                            <input type="range" min="50" max="800" value="${height}" oninput="updateDims('${id}', 'height', this.value)">
+                        </div>
+                    </div>
+                    <button class="lib-item" style="border-color: var(--success)" onclick="saveToLibrary('${id}')">SAVE TO LIBRARY</button>
                 </div>
+                <div class="preview-container" id="cont_${id}">
+                    <div id="display_${id}" style="width:${width}%; height:${height}px"></div>
                 </div>
             `;
             canvas.appendChild(box);
+            box.dataset.type = type;
+            updateLive(id);
         }
+        function handleFile(input, id) {
+            const file = input.files[0];
+            if (!file) return;
+            const reader = new FileReader();
+            const ext = file.name.split('.').pop().toLowerCase();
+            reader.onload = (e) => {
+                const box = document.getElementById(id);
+                const content = e.target.result;
+                if (['glb', 'gltf'].includes(ext)) box.dataset.type = '3d';
+                else if (['png', 'jpg', 'jpeg', 'webp', 'gif'].includes(ext)) box.dataset.type = 'img';
+                else box.dataset.type = 'html';
+                document.getElementById(`text_${id}`).value = content;
+                updateLive(id);
             };
+            if (['glb', 'gltf', 'png', 'jpg', 'jpeg', 'webp', 'gif'].includes(ext)) {
+                reader.readAsDataURL(file);
+            } else {
+                reader.readAsText(file);
             }
         }
+        function updateLive(id) {
+            const box = document.getElementById(id);
+            const content = document.getElementById(`text_${id}`).value;
+            const display = document.getElementById(`display_${id}`);
+            const type = box.dataset.type;
+            display.innerHTML = ''; // Clear previous
+            if (type === '3d') {
+                const mv = document.createElement('model-viewer');
+                mv.src = content;
+                mv.setAttribute('auto-rotate', '');
+                mv.setAttribute('camera-controls', '');
+                mv.style.height = '100%';
+                display.appendChild(mv);
+            } else if (type === 'img') {
+                const img = document.createElement('img');
+                img.src = content;
+                img.style.objectFit = 'contain';
+                img.style.height = '100%';
+                display.appendChild(img);
+            } else {
+                const iframe = document.createElement('iframe');
+                const blob = new Blob([content], { type: 'text/html' });
+                iframe.src = URL.createObjectURL(blob);
+                iframe.style.height = '100%';
+                display.appendChild(iframe);
+            }
+            updateSessionStore();
         }
+        function updateDims(id, dim, val) {
+            const display = document.getElementById(`display_${id}`);
+            const label = document.getElementById(`${dim === 'width' ? 'w' : 'h'}_val_${id}`);
+            label.innerText = val;
+            if (dim === 'width') display.style.width = val + '%';
+            else display.style.height = val + 'px';
             updateSessionStore();
         }
+        function saveToLibrary(id) {
+            const content = document.getElementById(`text_${id}`).value;
+            const type = document.getElementById(id).dataset.type;
+            const name = prompt("Name this asset:", "Asset " + (library.length + 1));
+            if (name) {
+                library.push({ name, content, type });
+                localStorage.setItem('asset_library', JSON.stringify(library));
+                renderLibrary();
+            }
+        }
         function renderLibrary() {
             const grid = document.getElementById('library-grid');
             grid.innerHTML = '';
             library.forEach(item => {
                 const btn = document.createElement('button');
                 btn.className = 'lib-item';
+                btn.innerText = `[${item.type.toUpperCase()}] ${item.name}`;
+                btn.onclick = () => createModule(item.content, 100, 300, item.type);
                 grid.appendChild(btn);
             });
         }
+        function updateSessionStore() {
+            const sessions = Array.from(document.querySelectorAll('.module-box')).map(box => ({
+                content: document.getElementById(`text_${box.id}`).value,
+                width: document.querySelector(`#w_val_${box.id}`).innerText,
+                height: document.querySelector(`#h_val_${box.id}`).innerText,
+                type: box.dataset.type
+            }));
+            localStorage.setItem('asset_sessions', JSON.stringify(sessions));
+        }
+        function removeModule(id) {
+            document.getElementById(id).remove();
+            updateSessionStore();
+        }
         init();
     </script>
 </body>