Spaces:

Wavetype
/

Imagulessss

Running

App Files Files Community

Wavetype commited on 3 days ago

Commit

be4f5b5

verified ·

1 Parent(s): 0457181

Update index.html

Browse files

Files changed (1) hide show

index.html +124 -108

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <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 {
@@ -26,12 +26,35 @@
             align-items: center;
         }
-        #canvas {
             width: 100%;
             max-width: 900px;
             display: flex;
-            flex-direction: column;
             gap: 25px;
         }
         .module-box {
@@ -40,6 +63,8 @@
             border-radius: 12px;
             padding: 20px;
             box-shadow: 0 8px 32px rgba(0,0,0,0.8);
         }
         .module-header {
@@ -53,15 +78,9 @@
         .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);
@@ -69,6 +88,7 @@
             font-family: monospace;
             padding: 12px;
             box-sizing: border-box;
         }
         .dimension-controls {
@@ -84,43 +104,64 @@
         .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 {
             background: #1a1a1a;
             border: 1px solid #333;
@@ -131,36 +172,33 @@
             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>
 <body>
-    <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 {
@@ -168,76 +206,69 @@
             }
         }
         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) {
@@ -245,47 +276,45 @@
             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));
@@ -305,20 +334,7 @@
             });
         }
-        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>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Multi-Asset Grid Builder</title>
     <script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.4.0/model-viewer.min.js"></script>
     <style>
         :root {
             align-items: center;
         }
+        /* Layout Controls */
+        #top-bar {
             width: 100%;
             max-width: 900px;
             display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            position: sticky;
+            top: 0;
+            z-index: 100;
+            background: var(--bg);
+            padding: 10px 0;
+        }
+        #canvas {
+            width: 100%;
+            max-width: 1200px;
+            display: flex;
+            flex-direction: column; /* Default Portrait */
             gap: 25px;
+            transition: all 0.3s ease;
+        }
+        /* Grid Mode Class */
+        #canvas.grid-mode {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
+            flex-direction: row;
         }
         .module-box {
             border-radius: 12px;
             padding: 20px;
             box-shadow: 0 8px 32px rgba(0,0,0,0.8);
+            display: flex;
+            flex-direction: column;
         }
         .module-header {
         .exit-btn { color: #ff4444; cursor: pointer; }
         textarea {
             width: 100%;
+            height: 100px;
             background: #000;
             color: #00ff41;
             border: 1px solid var(--border);
             font-family: monospace;
             padding: 12px;
             box-sizing: border-box;
+            font-size: 0.8rem;
         }
         .dimension-controls {
         .slider-group {
             display: flex;
             flex-direction: column;
+            font-size: 0.7rem;
             color: #888;
         }
+        input[type="range"] { width: 100%; accent-color: var(--accent); }
         .file-upload-btn {
             background: #222;
             border: 1px dashed var(--accent);
+            padding: 8px;
             text-align: center;
             cursor: pointer;
+            font-size: 0.75rem;
             margin-bottom: 10px;
+            border-radius: 4px;
         }
         .preview-container {
             margin-top: 15px;
+            background: #fff;
             border-radius: 6px;
             overflow: hidden;
             position: relative;
             display: flex;
             justify-content: center;
             align-items: center;
+            flex-grow: 1;
         }
         iframe, model-viewer, img {
             width: 100%;
+            height: 100%;
             border: none;
             display: block;
         }
+        .btn-ui {
+            background: #1a1a1a;
+            color: white;
+            border: 1px solid var(--accent);
+            padding: 10px 15px;
+            border-radius: 6px;
+            cursor: pointer;
+            font-size: 0.8rem;
+            font-weight: bold;
+        }
+        .btn-ui:hover { background: var(--accent); }
+        .btn-ui.active { background: var(--accent); box-shadow: 0 0 10px var(--accent); }
+        #library {
+            width: 100%;
+            max-width: 1200px;
+            margin: 40px 0;
+            border-top: 1px solid #333;
+            padding-top: 20px;
+        }
         .lib-item {
             background: #1a1a1a;
             border: 1px solid #333;
             color: white;
             margin: 5px;
         }
     </style>
 </head>
 <body>
+    <div id="top-bar">
+        <div style="display:flex; gap:10px;">
+            <button class="btn-ui active" id="btn-portrait" onclick="setLayout('portrait')">PORTRAIT</button>
+            <button class="btn-ui" id="btn-grid" onclick="setLayout('grid')">GRID VIEW</button>
+        </div>
+        <button class="btn-ui" style="border-color:var(--success)" onclick="createModule()">+ ADD MODULE</button>
+    </div>
+    <div id="canvas"></div>
+    <div id="library">
         <div style="color: #888; font-size: 0.8rem; margin-bottom: 10px;">SAVED ASSETS</div>
+        <div id="library-grid" style="display:flex; flex-wrap:wrap;"></div>
     </div>
     <script>
         let library = JSON.parse(localStorage.getItem('asset_library')) || [];
         let activeSessions = JSON.parse(localStorage.getItem('asset_sessions')) || [];
+        let currentLayout = localStorage.getItem('layout_pref') || 'portrait';
         function init() {
             renderLibrary();
+            setLayout(currentLayout);
             if (activeSessions.length > 0) {
                 activeSessions.forEach(data => createModule(data.content, data.width, data.height, data.type));
             } else {
             }
         }
+        function setLayout(mode) {
+            currentLayout = mode;
+            localStorage.setItem('layout_pref', mode);
+            const canvas = document.getElementById('canvas');
+            document.getElementById('btn-portrait').classList.toggle('active', mode === 'portrait');
+            document.getElementById('btn-grid').classList.toggle('active', mode === 'grid');
+            if (mode === 'grid') {
+                canvas.classList.add('grid-mode');
+            } else {
+                canvas.classList.remove('grid-mode');
+            }
+        }
         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.dataset.type = type;
             box.innerHTML = `
                 <div class="module-header">
+                    <span>${type.toUpperCase()} NODE</span>
                     <span class="exit-btn" onclick="removeModule('${id}')">[EXIT]</span>
                 </div>
+                <label class="file-upload-btn">📁 UPLOAD ASSET<input type="file" hidden onchange="handleFile(this, '${id}')"></label>
+                <textarea id="text_${id}" oninput="updateLive('${id}')">${content}</textarea>
+                <div class="dimension-controls">
+                    <div class="slider-group">
+                        <label>W: <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>H: <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="margin:0; width:100%; border-color:var(--success)" onclick="saveToLibrary('${id}')">SAVE ASSET</button>
+                <div class="preview-container">
                     <div id="display_${id}" style="width:${width}%; height:${height}px"></div>
                 </div>
             `;
             canvas.appendChild(box);
             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);
+                box.dataset.type = ['glb','gltf'].includes(ext) ? '3d' : (['png','jpg','jpeg','webp'].includes(ext) ? 'img' : 'html');
+                document.getElementById(`text_${id}`).value = e.target.result;
                 updateLive(id);
             };
+            if (['glb','gltf','png','jpg','jpeg','webp'].includes(ext)) reader.readAsDataURL(file);
+            else reader.readAsText(file);
         }
         function updateLive(id) {
             const content = document.getElementById(`text_${id}`).value;
             const display = document.getElementById(`display_${id}`);
             const type = box.dataset.type;
+            display.innerHTML = '';
             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}`);
+            document.getElementById(`${dim === 'width' ? 'w' : 'h'}_val_${id}`).innerText = val;
             if (dim === 'width') display.style.width = val + '%';
             else display.style.height = val + 'px';
             updateSessionStore();
         }
+        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 saveToLibrary(id) {
             const content = document.getElementById(`text_${id}`).value;
             const type = document.getElementById(id).dataset.type;
+            const name = prompt("Name this asset:");
             if (name) {
                 library.push({ name, content, type });
                 localStorage.setItem('asset_library', JSON.stringify(library));
             });
         }
+        function removeModule(id) { document.getElementById(id).remove(); updateSessionStore(); }
         init();
     </script>