Spaces:

Json026
/

DSA_Tutorials

Configuration error

App Files Files Community

Json026 commited on 3 days ago

Commit

5e12356

verified ·

1 Parent(s): 08aa6ae

Update index.html

Browse files

Files changed (1) hide show

index.html +127 -274

index.html CHANGED Viewed

@@ -1,299 +1,152 @@
 <!DOCTYPE html>
-<html lang="en" class="dark">
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>DSA Portfolio</title>
-  <meta name="description"
-    content="Modern DSA portfolio showcasing solved coding problems with explanations and solutions.">
-  <script src="https://cdn.tailwindcss.com"></script>
-  <link rel="stylesheet" href="./assets/style.css">
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link
-    href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700;800&family=JetBrains+Mono:wght@400;500&display=swap"
-    rel="stylesheet">
-  <script>
-    tailwind.config = {
-      darkMode: 'class',
-      theme: {
-        extend: {
-          fontFamily: {
-            inter: ['Inter', 'sans-serif'],
-            mono: ['JetBrains Mono', 'monospace']
-          }
         }
-      }
-    }
-  </script>
-</head>
-<body class="bg-slate-950 text-white font-inter min-h-screen">
-  <!-- Header -->
-  <header class="border-b border-white/10 sticky top-0 bg-slate-950/80 glass z-50">
-    <div class="max-w-7xl mx-auto px-6 py-5 flex items-center justify-between">
-      <div>
-        <h1 class="text-3xl font-extrabold gradient-text">
-          DSA Portfolio
-        </h1>
-        <p class="text-slate-400 mt-1">
-          Personal Knowledge Repository
-        </p>
-      </div>
-      <button id="themeToggle"
-        class="px-4 py-2 rounded-xl bg-white/10 hover:bg-white/20 transition">
-        🌙
-      </button>
     </div>
-  </header>
-  <!-- Hero -->
-  <section class="max-w-7xl mx-auto px-6 py-16">
-    <h2 class="text-5xl font-black leading-tight max-w-3xl">
-      Documenting My
-      <span class="gradient-text">
-        DSA Journey
-      </span>
-    </h2>
-    <p class="text-slate-400 mt-6 text-lg max-w-2xl">
-      Every problem includes intuition, explanation, dry run,
-      complexity analysis, and optimized solutions.
-    </p>
-    <!-- Progress -->
-    <div class="mt-10 max-w-xl">
-      <div class="flex justify-between mb-2">
-        <span>Programs Solved</span>
-        <span id="progressText">0/30</span>
-      </div>
-      <div class="w-full bg-white/10 rounded-full h-3 overflow-hidden">
-        <div id="progressBar"
-          class="bg-gradient-to-r from-cyan-400 to-violet-500 h-full rounded-full"
-          style="width:0%">
         </div>
-      </div>
-    </div>
-  </section>
-  <!-- Controls -->
-  <section class="max-w-7xl mx-auto px-6 mb-10">
-    <input type="text"
-      id="searchInput"
-      placeholder="Search problems..."
-      class="w-full px-5 py-4 rounded-2xl bg-white/10 border border-white/10 outline-none focus:ring-2 focus:ring-cyan-400">
-    <div id="filterContainer"
-      class="flex flex-wrap gap-3 mt-5">
     </div>
-  </section>
-  <!-- Problem Cards -->
-  <main class="max-w-7xl mx-auto px-6 pb-20">
-    <div id="problemGrid"
-      class="grid md:grid-cols-2 xl:grid-cols-3 gap-8">
-    </div>
-  </main>
-  <!-- Footer -->
-  <footer class="border-t border-white/10 py-8 text-center text-slate-500">
-    Built with HTML + Tailwind + Vanilla JS
-  </footer>
-  <script>
-    let problems = [];
-    let activeFilter = "All";
-    const grid = document.getElementById("problemGrid");
-    const searchInput = document.getElementById("searchInput");
-    const filterContainer = document.getElementById("filterContainer");
-    async function fetchProblems() {
-      const response = await fetch("./data.json");
-      problems = await response.json();
-      renderStats();
-      renderFilters();
-      renderProblems(problems);
-    }
-    function renderStats() {
-      const solved = problems.length;
-      const target = 30;
-      document.getElementById("progressText").textContent =
-        `${solved}/${target}`;
-      document.getElementById("progressBar").style.width =
-        `${(solved / target) * 100}%`;
-    }
-    function renderFilters() {
-      const topics =
-        [...new Set(problems.map(p => p.topic))];
-      const filters =
-        ["All", "Easy", "Medium", "Hard", ...topics];
-      filters.forEach(filter => {
-        const btn = document.createElement("button");
-        btn.textContent = filter;
-        btn.className =
-          "px-4 py-2 rounded-full bg-white/10 hover:bg-cyan-500 transition";
-        btn.onclick = () => {
-          activeFilter = filter;
-          filterProblems();
         }
-        filterContainer.appendChild(btn);
-      });
-    }
-    function filterProblems() {
-      const search =
-        searchInput.value.toLowerCase();
-      const filtered = problems.filter(problem => {
-        const matchesSearch =
-          problem.title.toLowerCase().includes(search);
-        const matchesFilter =
-          activeFilter === "All" ||
-          problem.difficulty === activeFilter ||
-          problem.topic === activeFilter;
-        return matchesSearch && matchesFilter;
-      });
-      renderProblems(filtered);
-    }
-    searchInput.addEventListener("input", filterProblems);
-    function difficultyColor(level) {
-      if (level === "Easy")
-        return "text-green-400 bg-green-500/10";
-      if (level === "Medium")
-        return "text-yellow-400 bg-yellow-500/10";
-      return "text-red-400 bg-red-500/10";
-    }
-    function renderProblems(data) {
-      grid.innerHTML = "";
-      data.forEach(problem => {
-        const card = document.createElement("article");
-        card.className =
-          "p-6 rounded-3xl border border-white/10 bg-white/5 hover:-translate-y-2 transition";
-        card.innerHTML = `
-          <div class="flex items-start justify-between gap-3">
-            <div>
-              <p class="text-cyan-400 text-sm font-mono">
-                ${problem.topic}
-              </p>
-              <h2 class="text-2xl font-bold mt-3">
-                ${problem.title}
-              </h2>
-            </div>
-            <span class="px-3 py-1 rounded-full text-xs ${difficultyColor(problem.difficulty)}">
-              ${problem.difficulty}
-            </span>
-          </div>
-          <div class="mt-5 flex flex-wrap gap-2">
-            ${problem.tags.map(tag => `
-              <span class="text-xs px-3 py-1 rounded-full bg-white/10">
-                ${tag}
-              </span>
-            `).join("")}
-          </div>
-          <div class="mt-8 flex items-center justify-between">
-            <span class="text-slate-400 text-sm">
-              ${problem.dateSolved}
-            </span>
-            <a href="${problem.url}"
-              class="px-5 py-3 rounded-xl bg-gradient-to-r from-cyan-500 to-violet-500 font-semibold">
-              View →
-            </a>
-          </div>
-        `;
-        grid.appendChild(card);
-      });
-    }
-    fetchProblems();
-  </script>
 </body>
 </html>

 <!DOCTYPE html>
+<html lang="en">
 <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Surprise for Mummy</title>
+    <style>
+        /* --- CSS STYLES --- */
+        body {
+            margin: 0;
+            padding: 0;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(180deg, #fff5f7 0%, #fce4ec 100%);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            min-height: 100vh;
+            color: #4a4a4a;
+        }
+        header {
+            margin-top: 40px;
+            text-align: center;
+        }
+        h1 { color: #d81b60; font-weight: 300; }
+        /* Balloon Area */
+        .balloon-container {
+            display: flex;
+            gap: 20px;
+            margin: 50px 0;
+            flex-wrap: wrap;
+            justify-content: center;
+        }
+        .balloon {
+            width: 70px;
+            height: 90px;
+            border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
+            cursor: pointer;
+            transition: transform 0.2s ease-in-out;
+            box-shadow: inset -5px -5px 10px rgba(0,0,0,0.1);
+            animation: float 3s ease-in-out infinite;
+        }
+        @keyframes float {
+            0%, 100% { transform: translateY(0); }
+            50% { transform: translateY(-15px); }
         }
+        .balloon:hover { transform: scale(1.2); }
+        /* Polaroid Popup Overlay */
+        .overlay {
+            display: none; /* Hidden by default */
+            position: fixed;
+            top: 0; left: 0;
+            width: 100%; height: 100%;
+            background: rgba(0, 0, 0, 0.7);
+            justify-content: center;
+            align-items: center;
+            z-index: 1000;
+        }
+        .polaroid {
+            background: white;
+            padding: 15px 15px 50px 15px;
+            box-shadow: 0 15px 30px rgba(0,0,0,0.3);
+            text-align: center;
+            max-width: 300px;
+            border-radius: 2px;
+        }
+        .polaroid img {
+            width: 100%;
+            height: 350px;
+            object-fit: cover; /* Keeps photo from stretching */
+            border: 1px solid #eee;
+        }
+        .caption {
+            margin-top: 20px;
+            font-size: 1.2rem;
+            font-family: 'Cursive', sans-serif;
+            color: #d81b60;
+        }
+        .close-btn {
+            margin-top: 20px;
+            padding: 8px 20px;
+            background: #d81b60;
+            color: white;
+            border: none;
+            border-radius: 20px;
+            cursor: pointer;
+        }
+    </style>
+</head>
+<body>
+    <header>
+        <h1>Pop a Balloon, Mummy! 🎈</h1>
+        <p>Each one has a special memory inside.</p>
+    </header>
+    <div class="balloon-container">
+        <div class="balloon" style="background-color: #ff80ab;" onclick="openSurprise(0)"></div>
+        <div class="balloon" style="background-color: #ba68c8;" onclick="openSurprise(1)"></div>
+        <div class="balloon" style="background-color: #4fc3f7;" onclick="openSurprise(2)"></div>
     </div>
+    <div class="overlay" id="overlay">
+        <div class="polaroid">
+            <img id="display-image" src="" alt="Memory">
+            <div class="caption" id="display-caption"></div>
+            <button class="close-btn" onclick="closeSurprise()">Close</button>
         </div>
     </div>
+    <script>
+        /* --- CONFIGURATION --- */
+        // Change the links below to your own photos!
+        const myMemories = [
+            {
+                image: "YOUR_IMAGE_URL_HERE_1.jpg",
+                text: "The prettiest woman I know! ✨"
+            },
+            {
+                image: "YOUR_IMAGE_URL_HERE_2.jpg",
+                text: "Always by my side. ❤️"
+            },
+            {
+                image: "YOUR_IMAGE_URL_HERE_3.jpg",
+                text: "Growing up to be just like you. 🌸"
+            }
+        ];
+        function openSurprise(index) {
+            const data = myMemories[index];
+            document.getElementById('display-image').src = data.image;
+            document.getElementById('display-caption').innerText = data.text;
+            document.getElementById('overlay').style.display = 'flex';
         }
+        function closeSurprise() {
+            document.getElementById('overlay').style.display = 'none';
+        }
+    </script>
 </body>
 </html>