Spaces:

SalexAI
/

cbx

Sleeping

App Files Files Community

SalexAI commited on May 10

Commit

3f5f4d1

verified ·

1 Parent(s): 83787dd

Create index.html

Browse files

Files changed (1) hide show

index.html +195 -0

index.html ADDED Viewed

	@@ -0,0 +1,195 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>UniShare</title>
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+      margin: 0;
+      padding: 0;
+      background: #f0f2f5;
+    }
+    header {
+      background: #3b82f6;
+      color: white;
+      padding: 1em;
+      text-align: center;
+      font-size: 1.8em;
+    }
+    #overview {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+      gap: 1em;
+      padding: 1em;
+    }
+    .list-tile {
+      background: white;
+      padding: 1em;
+      border-radius: 10px;
+      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+      cursor: pointer;
+      transition: transform 0.2s;
+    }
+    .list-tile:hover {
+      transform: scale(1.02);
+    }
+    #list-view {
+      display: none;
+      padding: 1em;
+    }
+    .back-button {
+      background: #3b82f6;
+      color: white;
+      padding: 0.5em 1em;
+      border: none;
+      border-radius: 5px;
+      cursor: pointer;
+      margin-bottom: 1em;
+    }
+    .card {
+      background: white;
+      padding: 1em;
+      border-radius: 10px;
+      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+      margin-bottom: 1em;
+    }
+    .submenu {
+      margin-top: 1em;
+    }
+    .submenu h4 {
+      margin: 0.5em 0;
+    }
+    .grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+      gap: 1em;
+    }
+    .item {
+      background: #f9f9f9;
+      padding: 1em;
+      border-radius: 10px;
+      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
+    }
+    .item img {
+      max-width: 100%;
+      max-height: 150px;
+      object-fit: cover;
+      border-radius: 5px;
+      margin-bottom: 0.5em;
+    }
+    .item a {
+      display: inline-block;
+      margin-top: 0.5em;
+      text-decoration: none;
+      color: #3b82f6;
+    }
+    #toast {
+      position: fixed;
+      bottom: 20px;
+      right: 20px;
+      background: #333;
+      color: white;
+      padding: 1em;
+      border-radius: 5px;
+      display: none;
+      z-index: 1000;
+    }
+  </style>
+</head>
+<body>
+  <header>UniShare</header>
+  <div id="overview"></div>
+  <div id="list-view">
+    <button class="back-button" onclick="backToOverview()">← Back to Overview</button>
+    <div id="content"></div>
+  </div>
+  <div id="toast"></div>
+  <script>
+    const urlParams = new URLSearchParams(window.location.search);
+    const overviewDiv = document.getElementById('overview');
+    const contentDiv = document.getElementById('content');
+    const listViewDiv = document.getElementById('list-view');
+    const toastDiv = document.getElementById('toast');
+    const lists = {};
+    function showToast(message) {
+      toastDiv.textContent = message;
+      toastDiv.style.display = 'block';
+      setTimeout(() => {
+        toastDiv.style.display = 'none';
+      }, 3000);
+    }
+    function backToOverview() {
+      listViewDiv.style.display = 'none';
+      overviewDiv.style.display = 'grid';
+    }
+    function showList(name) {
+      const sections = lists[name];
+      contentDiv.innerHTML = '';
+      sections.forEach(section => {
+        const card = document.createElement('div');
+        card.className = 'card';
+        const title = document.createElement('h3');
+        title.textContent = section.sectionTitle;
+        card.appendChild(title);
+        const grid = document.createElement('div');
+        grid.className = 'grid';
+        section.items.forEach(item => {
+          const div = document.createElement('div');
+          div.className = 'item';
+          let content = <strong>${item.title}</strong><br>;
+          if (item.link.match(/\.(jpeg|jpg|gif|png)$/)) {
+            content += <img src="${item.link}" alt="${item.title}" />;
+          }
+          content += <a href="${item.link}" download>Download</a>;
+          div.innerHTML = content;
+          grid.appendChild(div);
+        });
+        card.appendChild(grid);
+        contentDiv.appendChild(card);
+      });
+      overviewDiv.style.display = 'none';
+      listViewDiv.style.display = 'block';
+    }
+    // Load from single ?lists= parameter with NEWLISTBREAK separator
+    if (urlParams.has('lists')) {
+      const rawData = decodeURIComponent(urlParams.get('lists'));
+      const listStrings = rawData.split('NEWLISTBREAK');
+      listStrings.forEach((listStr, index) => {
+        try {
+          const parsed = JSON.parse(listStr);
+          if (Array.isArray(parsed)) {
+            const listName = List ${index + 1};
+            lists[listName] = parsed;
+            const tile = document.createElement('div');
+            tile.className = 'list-tile';
+            tile.innerHTML = <strong>${listName}</strong><br>${parsed.length} sections;
+            tile.onclick = () => showList(listName);
+            overviewDiv.appendChild(tile);
+            showToast(Loaded ${listName});
+          }
+        } catch (e) {
+          console.warn('Failed to parse list:', e);
+        }
+      });
+    }
+    if (Object.keys(lists).length === 0) {
+      overviewDiv.innerHTML = '<p style="padding:1em">No valid list data found in ?lists parameter.</p>';
+    }
+  </script>
+</body>
+</html>