Hugging Face's logo

Spaces:
Wavetype
/
Imagulessss
Running

App Files Community
Wavetype commited on
Commit
be05c4b
·
verified ·
1 Parent(s): 17a9615

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +46 -46
index.html CHANGED
@@ -3,7 +3,7 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Modular HTML Builder</title>
7
  <style>
8
  :root {
9
  --bg: #0a0a0a;
@@ -71,15 +71,14 @@
71
  font-size: 0.9rem;
72
  }
73
 
74
- /* LIVE RENDER AREA */
75
  .preview-container {
76
  margin-top: 15px;
77
- background: white; /* Default white background for rendered content */
78
  color: black;
79
  border-radius: 6px;
80
  min-height: 50px;
81
  overflow: hidden;
82
- display: none; /* Shown only when rendered */
83
  }
84
 
85
  .preview-label {
@@ -94,6 +93,7 @@
94
  width: 100%;
95
  border: none;
96
  background: white;
 
97
  }
98
 
99
  .controls {
@@ -118,7 +118,6 @@
118
 
119
  button:hover {
120
  background: var(--accent);
121
- transform: translateY(-1px);
122
  }
123
 
124
  .save-btn {
@@ -126,11 +125,6 @@
126
  color: var(--success);
127
  }
128
 
129
- .save-btn:hover {
130
- background: var(--success);
131
- color: white;
132
- }
133
-
134
  #library {
135
  width: 100%;
136
  max-width: 800px;
@@ -141,17 +135,11 @@
141
  border-radius: 12px;
142
  }
143
 
144
- .library-title {
145
- font-size: 0.9rem;
146
- margin-bottom: 15px;
147
- color: #888;
148
- letter-spacing: 1px;
149
- }
150
-
151
  .library-grid {
152
  display: flex;
153
  gap: 10px;
154
  flex-wrap: wrap;
 
155
  }
156
 
157
  .lib-item {
@@ -163,39 +151,37 @@
163
  border-radius: 4px;
164
  }
165
 
166
- .lib-item:hover {
167
- border-color: var(--accent);
168
- background: #222;
169
- }
170
-
171
  .add-module-trigger {
172
  margin-top: 30px;
173
  padding: 18px 50px;
174
  font-size: 1rem;
175
  border-width: 2px;
176
- background: rgba(123, 47, 247, 0.1);
177
  }
178
  </style>
179
  </head>
180
  <body>
181
 
182
- <div id="canvas">
183
- </div>
184
 
185
  <button class="add-module-trigger" onclick="createModule()">+ ADD NEW MODULE</button>
186
 
187
  <div id="library">
188
- <div class="library-title">SAVED HTML SNIPPETS (AUTO-SAVED)</div>
189
  <div id="library-grid" class="library-grid"></div>
190
  </div>
191
 
192
  <script>
193
  let library = JSON.parse(localStorage.getItem('html_library')) || [];
 
194
 
195
  function init() {
196
  renderLibrary();
197
- // Start with one module automatically
198
- createModule();
 
 
 
 
199
  }
200
 
201
  function createModule(initialContent = '') {
@@ -208,21 +194,21 @@
208
 
209
  box.innerHTML = `
210
  <div class="module-header">
211
- <span>HTML NODE</span>
212
- <span class="exit-btn" onclick="document.getElementById('${moduleId}').remove()">[EXIT]</span>
213
  </div>
214
  <textarea
215
- placeholder="Paste or type HTML/JS/CSS code here..."
216
  id="text_${moduleId}"
217
  spellcheck="false"
 
218
  >${initialContent}</textarea>
219
 
220
  <div class="controls">
221
- <button onclick="renderPreview('${moduleId}')">RENDER PREVIEW</button>
222
  <button class="save-btn" onclick="saveToLibrary('${moduleId}')">SAVE TO LIBRARY</button>
223
  </div>
224
 
225
- <div class="preview-container" id="cont_${moduleId}">
226
  <span class="preview-label">LIVE OUTPUT</span>
227
  <iframe id="iframe_${moduleId}" sandbox="allow-scripts"></iframe>
228
  </div>
@@ -230,30 +216,35 @@
230
 
231
  canvas.appendChild(box);
232
  if(initialContent) renderPreview(moduleId);
 
 
 
 
 
 
233
  }
234
 
235
  function renderPreview(moduleId) {
236
  const code = document.getElementById(`text_${moduleId}`).value;
237
- const container = document.getElementById(`cont_${moduleId}`);
238
  const iframe = document.getElementById(`iframe_${moduleId}`);
239
-
240
- container.style.display = 'block';
241
-
242
  const blob = new Blob([code], { type: 'text/html' });
243
- iframe.src = URL.createObjectURL(blob);
244
-
245
- // Auto-resize iframe height
246
- iframe.onload = function() {
247
  setTimeout(() => {
248
- iframe.style.height = (iframe.contentWindow.document.body.scrollHeight + 20) + 'px';
249
- }, 100);
 
 
250
  };
251
  }
252
 
253
  function saveToLibrary(moduleId) {
254
  const content = document.getElementById(`text_${moduleId}`).value;
255
  if (!content.trim()) return;
256
-
257
  const name = prompt("Name this snippet:", "Snippet " + (library.length + 1));
258
  if (name) {
259
  library.push({ name, content });
@@ -262,14 +253,23 @@
262
  }
263
  }
264
 
 
 
 
 
 
 
 
 
 
 
265
  function renderLibrary() {
266
  const grid = document.getElementById('library-grid');
267
  grid.innerHTML = '';
268
- library.forEach((item, index) => {
269
  const btn = document.createElement('button');
270
  btn.className = 'lib-item';
271
  btn.innerText = item.name;
272
- btn.title = "Click to open in new module";
273
  btn.onclick = () => createModule(item.content);
274
  grid.appendChild(btn);
275
  });
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Live Modular Builder</title>
7
  <style>
8
  :root {
9
  --bg: #0a0a0a;
 
71
  font-size: 0.9rem;
72
  }
73
 
 
74
  .preview-container {
75
  margin-top: 15px;
76
+ background: white;
77
  color: black;
78
  border-radius: 6px;
79
  min-height: 50px;
80
  overflow: hidden;
81
+ display: block;
82
  }
83
 
84
  .preview-label {
 
93
  width: 100%;
94
  border: none;
95
  background: white;
96
+ min-height: 50px;
97
  }
98
 
99
  .controls {
 
118
 
119
  button:hover {
120
  background: var(--accent);
 
121
  }
122
 
123
  .save-btn {
 
125
  color: var(--success);
126
  }
127
 
 
 
 
 
 
128
  #library {
129
  width: 100%;
130
  max-width: 800px;
 
135
  border-radius: 12px;
136
  }
137
 
 
 
 
 
 
 
 
138
  .library-grid {
139
  display: flex;
140
  gap: 10px;
141
  flex-wrap: wrap;
142
+ margin-top: 10px;
143
  }
144
 
145
  .lib-item {
 
151
  border-radius: 4px;
152
  }
153
 
 
 
 
 
 
154
  .add-module-trigger {
155
  margin-top: 30px;
156
  padding: 18px 50px;
157
  font-size: 1rem;
158
  border-width: 2px;
 
159
  }
160
  </style>
161
  </head>
162
  <body>
163
 
164
+ <div id="canvas"></div>
 
165
 
166
  <button class="add-module-trigger" onclick="createModule()">+ ADD NEW MODULE</button>
167
 
168
  <div id="library">
169
+ <div style="font-size: 0.9rem; color: #888;">SAVED HTML SNIPPETS</div>
170
  <div id="library-grid" class="library-grid"></div>
171
  </div>
172
 
173
  <script>
174
  let library = JSON.parse(localStorage.getItem('html_library')) || [];
175
+ let activeSessions = JSON.parse(localStorage.getItem('active_sessions')) || [];
176
 
177
  function init() {
178
  renderLibrary();
179
+ // Reload previous session if it exists, otherwise create empty module
180
+ if (activeSessions.length > 0) {
181
+ activeSessions.forEach(content => createModule(content));
182
+ } else {
183
+ createModule();
184
+ }
185
  }
186
 
187
  function createModule(initialContent = '') {
 
194
 
195
  box.innerHTML = `
196
  <div class="module-header">
197
+ <span>LIVE HTML NODE</span>
198
+ <span class="exit-btn" onclick="removeModule('${moduleId}')">[EXIT]</span>
199
  </div>
200
  <textarea
201
+ placeholder="Type code here (Auto-renders)..."
202
  id="text_${moduleId}"
203
  spellcheck="false"
204
+ oninput="handleInput('${moduleId}')"
205
  >${initialContent}</textarea>
206
 
207
  <div class="controls">
 
208
  <button class="save-btn" onclick="saveToLibrary('${moduleId}')">SAVE TO LIBRARY</button>
209
  </div>
210
 
211
+ <div class="preview-container">
212
  <span class="preview-label">LIVE OUTPUT</span>
213
  <iframe id="iframe_${moduleId}" sandbox="allow-scripts"></iframe>
214
  </div>
 
216
 
217
  canvas.appendChild(box);
218
  if(initialContent) renderPreview(moduleId);
219
+ updateSessionStore();
220
+ }
221
+
222
+ function handleInput(moduleId) {
223
+ renderPreview(moduleId);
224
+ updateSessionStore();
225
  }
226
 
227
  function renderPreview(moduleId) {
228
  const code = document.getElementById(`text_${moduleId}`).value;
 
229
  const iframe = document.getElementById(`iframe_${moduleId}`);
230
+ if (!iframe) return;
231
+
 
232
  const blob = new Blob([code], { type: 'text/html' });
233
+ const url = URL.createObjectURL(blob);
234
+ iframe.src = url;
235
+
236
+ iframe.onload = () => {
237
  setTimeout(() => {
238
+ if(iframe.contentWindow.document.body) {
239
+ iframe.style.height = (iframe.contentWindow.document.body.scrollHeight + 20) + 'px';
240
+ }
241
+ }, 50);
242
  };
243
  }
244
 
245
  function saveToLibrary(moduleId) {
246
  const content = document.getElementById(`text_${moduleId}`).value;
247
  if (!content.trim()) return;
 
248
  const name = prompt("Name this snippet:", "Snippet " + (library.length + 1));
249
  if (name) {
250
  library.push({ name, content });
 
253
  }
254
  }
255
 
256
+ function updateSessionStore() {
257
+ const texts = Array.from(document.querySelectorAll('textarea')).map(t => t.value);
258
+ localStorage.setItem('active_sessions', JSON.stringify(texts));
259
+ }
260
+
261
+ function removeModule(moduleId) {
262
+ document.getElementById(moduleId).remove();
263
+ updateSessionStore();
264
+ }
265
+
266
  function renderLibrary() {
267
  const grid = document.getElementById('library-grid');
268
  grid.innerHTML = '';
269
+ library.forEach(item => {
270
  const btn = document.createElement('button');
271
  btn.className = 'lib-item';
272
  btn.innerText = item.name;
 
273
  btn.onclick = () => createModule(item.content);
274
  grid.appendChild(btn);
275
  });