|
|
<!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'; |
|
|
} |
|
|
|
|
|
|
|
|
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> |
