Spaces:

abeea
/

Codepen

No application file

App Files Files Community

abeea commited on Nov 29, 2025

Commit

e71468e

verified ·

1 Parent(s): 331d991

Create Index.html

Browse files

Files changed (1) hide show

Index.html +348 -0

Index.html ADDED Viewed

	@@ -0,0 +1,348 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <title>Mini CodePen – Live Preview</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <style>
+    * {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    }
+    body {
+      background: #0f172a;
+      color: #e5e7eb;
+      min-height: 100vh;
+      display: flex;
+      flex-direction: column;
+    }
+    header {
+      padding: 12px 20px;
+      border-bottom: 1px solid #1f2937;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+    }
+    header h1 {
+      font-size: 1.1rem;
+      font-weight: 600;
+      color: #f9fafb;
+    }
+    header span {
+      font-size: 0.8rem;
+      color: #9ca3af;
+    }
+    .actions {
+      display: flex;
+      gap: 8px;
+    }
+    button {
+      border: none;
+      padding: 8px 14px;
+      border-radius: 999px;
+      font-size: 0.85rem;
+      cursor: pointer;
+      background: #22c55e;
+      color: #022c22;
+      font-weight: 600;
+      transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.15s ease;
+    }
+    button:hover {
+      transform: translateY(-1px);
+      box-shadow: 0 8px 20px rgba(34, 197, 94, 0.35);
+    }
+    button.secondary {
+      background: #111827;
+      color: #e5e7eb;
+      border: 1px solid #374151;
+      box-shadow: none;
+    }
+    button.secondary:hover {
+      background: #020617;
+    }
+    main {
+      flex: 1;
+      display: grid;
+      grid-template-columns: 1.1fr 1fr;
+      min-height: 0;
+    }
+    @media (max-width: 900px) {
+      main {
+        grid-template-columns: 1fr;
+        grid-template-rows: minmax(300px, 1fr) minmax(250px, 1fr);
+      }
+    }
+    .panes {
+      display: grid;
+      grid-template-rows: repeat(3, minmax(0, 1fr));
+      border-right: 1px solid #1f2937;
+      min-height: 0;
+    }
+    .editor {
+      display: flex;
+      flex-direction: column;
+      border-bottom: 1px solid #1f2937;
+      min-height: 0;
+      background: #020617;
+    }
+    .editor-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 6px 10px;
+      font-size: 0.75rem;
+      border-bottom: 1px solid #111827;
+      background: linear-gradient(to right, #020617, #0f172a);
+    }
+    .editor-header span.label {
+      text-transform: uppercase;
+      letter-spacing: 0.08em;
+      font-weight: 600;
+    }
+    .editor-header span.badge {
+      font-size: 0.65rem;
+      padding: 2px 8px;
+      border-radius: 999px;
+      background: #111827;
+      border: 1px solid #1f2937;
+      color: #9ca3af;
+    }
+    textarea {
+      flex: 1;
+      width: 100%;
+      border: none;
+      resize: none;
+      padding: 10px 12px;
+      font-family: "Fira Code", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+      font-size: 0.8rem;
+      line-height: 1.4;
+      color: #e5e7eb;
+      background: #020617;
+      outline: none;
+      overflow: auto;
+    }
+    textarea::placeholder {
+      color: #4b5563;
+    }
+    .preview-pane {
+      display: flex;
+      flex-direction: column;
+      min-height: 0;
+      background: #020617;
+    }
+    .preview-header {
+      padding: 6px 10px;
+      font-size: 0.75rem;
+      border-bottom: 1px solid #111827;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      background: linear-gradient(to right, #111827, #1f2937);
+    }
+    .preview-header span {
+      text-transform: uppercase;
+      letter-spacing: 0.08em;
+      font-weight: 600;
+    }
+    iframe {
+      flex: 1;
+      border: none;
+      background: white;
+    }
+    footer {
+      font-size: 0.7rem;
+      padding: 6px 12px;
+      text-align: right;
+      color: #6b7280;
+      border-top: 1px solid #111827;
+    }
+  </style>
+</head>
+<body>
+  <header>
+    <div>
+      <h1>Mini Code Preview</h1>
+      <span>Paste HTML, CSS, JS and click “Run” to preview</span>
+    </div>
+    <div class="actions">
+      <button id="run-btn">Run ▶</button>
+      <button id="reset-btn" class="secondary">Reset</button>
+    </div>
+  </header>
+  <main>
+    <!-- Left: Editors -->
+    <section class="panes">
+      <div class="editor">
+        <div class="editor-header">
+          <span class="label">HTML</span>
+          <span class="badge">Markup</span>
+        </div>
+        <textarea id="html-input" placeholder="&lt;h1&gt;Hello World&lt;/h1&gt;">
+<div class="card">
+  <h1>Hello Mini CodePen 👋</h1>
+  <p>Edit HTML, CSS, and JS, then press <strong>Run</strong>.</p>
+  <button onclick="alert('JS is working!')">Click Me</button>
+</div>
+        </textarea>
+      </div>
+      <div class="editor">
+        <div class="editor-header">
+          <span class="label">CSS</span>
+          <span class="badge">Styles</span>
+        </div>
+        <textarea id="css-input" placeholder="body { font-family: sans-serif; }">
+body {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  margin: 0;
+  background: linear-gradient(135deg, #22c55e, #0ea5e9);
+  font-family: system-ui, sans-serif;
+}
+.card {
+  background: white;
+  padding: 24px 28px;
+  border-radius: 16px;
+  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.35);
+  max-width: 360px;
+  text-align: center;
+}
+.card h1 {
+  margin-bottom: 10px;
+  color: #111827;
+}
+.card p {
+  margin-bottom: 16px;
+  color: #4b5563;
+}
+.card button {
+  border: none;
+  background: #22c55e;
+  color: #022c22;
+  padding: 8px 18px;
+  border-radius: 999px;
+  font-weight: 600;
+  cursor: pointer;
+}
+        </textarea>
+      </div>
+      <div class="editor">
+        <div class="editor-header">
+          <span class="label">JavaScript</span>
+          <span class="badge">Logic</span>
+        </div>
+        <textarea id="js-input" placeholder="console.log('Hello');">
+console.log("Mini CodePen ready!");
+        </textarea>
+      </div>
+    </section>
+    <!-- Right: Preview -->
+    <section class="preview-pane">
+      <div class="preview-header">
+        <span>Preview</span>
+        <small id="status-text">Idle</small>
+      </div>
+      <iframe id="preview-frame" title="Live Preview"></iframe>
+    </section>
+  </main>
+  <footer>
+    Mini Code Preview • Pure HTML + CSS + JavaScript
+  </footer>
+  <script>
+    const htmlInput = document.getElementById("html-input");
+    const cssInput = document.getElementById("css-input");
+    const jsInput = document.getElementById("js-input");
+    const previewFrame = document.getElementById("preview-frame");
+    const runBtn = document.getElementById("run-btn");
+    const resetBtn = document.getElementById("reset-btn");
+    const statusText = document.getElementById("status-text");
+    function runPreview() {
+      const html = htmlInput.value || "";
+      const css = cssInput.value || "";
+      const js = jsInput.value || "";
+      const finalCode = `
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<style>
+${css}
+</style>
+</head>
+<body>
+${html}
+<script>
+${js.replace(/<\/script>/gi, "<\\/script>")}
+</script>
+</body>
+</html>`;
+      previewFrame.srcdoc = finalCode;
+      statusText.textContent = "Last run: " + new Date().toLocaleTimeString();
+    }
+    function resetEditors() {
+      htmlInput.value = "<h1>Hello World</h1>";
+      cssInput.value = "body { font-family: system-ui, sans-serif; }";
+      jsInput.value = "console.log('Reset!');";
+      runPreview();
+    }
+    runBtn.addEventListener("click", runPreview);
+    resetBtn.addEventListener("click", resetEditors);
+    // Optional: auto-run on Ctrl+Enter in any editor
+    [htmlInput, cssInput, jsInput].forEach((area) => {
+      area.addEventListener("keydown", (e) => {
+        if (e.ctrlKey && e.key === "Enter") {
+          e.preventDefault();
+          runPreview();
+        }
+      });
+    });
+    // Initial load
+    runPreview();
+  </script>
+</body>
+</html>