Skip to content

Instantly share code, notes, and snippets.

@RyanMagyar777

RyanMagyar777/gist:fa9f0dd6f55036491cc565778340882b

Created April 30, 2026 14:07
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save RyanMagyar777/fa9f0dd6f55036491cc565778340882b to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save RyanMagyar777/fa9f0dd6f55036491cc565778340882b to your computer and use it in GitHub Desktop.
Download ZIP
Archive Viewer
Raw
gistfile1.txt
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Archive Viewer v2.0 - Local Save Enabled</title>
<style>
body {
background-color: #008080;
font-family: "MS Sans Serif", Tahoma, Geneva, sans-serif;
font-size: 12px;
margin: 10px;
color: #000;
}
#os-window {
background-color: #c0c0c0;
border: 2px solid;
border-color: #ffffff #808080 #808080 #ffffff;
width: 100%;
max-width: 800px;
margin: 0 auto;
padding: 2px;
box-shadow: 2px 2px 0px #000;
}
.title-bar {
background: linear-gradient(90deg, #000080, #1084d0);
color: white;
padding: 3px 5px;
font-weight: bold;
display: flex;
justify-content: space-between;
align-items: center;
}
.tabs {
display: flex;
padding: 5px 5px 0 5px;
background: #c0c0c0;
border-bottom: 2px solid #808080;
overflow-x: auto;
}
.tab-button {
padding: 4px 12px;
border: 1px solid #808080;
border-bottom: none;
background: #d4d0c8;
cursor: pointer;
margin-right: 2px;
white-space: nowrap;
}
.tab-button.active {
background: #ece9d8;
font-weight: bold;
margin-bottom: -2px;
padding-bottom: 6px;
border-top: 2px solid #fff;
border-left: 2px solid #fff;
border-right: 2px solid #808080;
}
.toolbar {
padding: 8px;
background: #c0c0c0;
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
}
.content-area {
background: #ffffff;
border: 2px inset #808080;
height: 400px;
overflow-y: scroll;
padding: 10px;
}
.post {
border-bottom: 1px solid #c0c0c0;
padding: 10px 0;
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.post-info { flex-grow: 1; }
.post-time { font-size: 10px; color: #555; margin-bottom: 3px; }
.post-title { font-weight: bold; font-size: 13px; }
.upload-zone {
padding: 10px;
border-top: 2px solid #808080;
background: #d4d0c8;
}
input, select, button {
border: 1px solid #808080;
font-family: inherit;
padding: 3px;
}
button {
background: #c0c0c0;
border: 2px solid;
border-color: #fff #808080 #808080 #fff;
cursor: pointer;
}
button:active {
border-color: #808080 #fff #fff #808080;
}
.del-btn {
color: #ff0000;
font-size: 10px;
margin-left: 10px;
}
</style>
</head>
<body>
<div id="os-window">
<div class="title-bar">
<span>Archive_Explorer_v2.exe</span>
<span>[?] [X]</span>
</div>
<div class="tabs" id="tab-list">
<button class="tab-button active" onclick="setTab('video', this)">Video</button>
<button class="tab-button" onclick="setTab('audio', this)">Audio</button>
<button class="tab-button" onclick="setTab('txt', this)">Text</button>
<button class="tab-button" onclick="setTab('images', this)">Images</button>
<button class="tab-button" onclick="setTab('events', this)">Events</button>
<button class="tab-button" onclick="setTab('files', this)">Files</button>
</div>
<div class="toolbar">
<label>Filter:</label>
<select id="status-filter" onchange="render()">
<option value="found">Found</option>
<option value="lost">Lost</option>
</select>
<input type="text" id="search-bar" placeholder="Search entries..." onkeyup="render()">
</div>
<div class="content-area" id="display"></div>
<div class="upload-zone">
<strong>New Entry:</strong><br>
<input type="text" id="new-title" placeholder="Description/Title">
<input type="file" id="file-picker">
<button onclick="addEntry()">Commit to Disk</button>
</div>
</div>
<script>
let currentTab = 'video';
// Load existing data or start fresh
let db = JSON.parse(localStorage.getItem('archiveDB')) || {
video: [], audio: [], txt: [], images: [], events: [], files: []
};
function setTab(t, el) {
currentTab = t;
document.querySelectorAll('.tab-button').forEach(b => b.classList.remove('active'));
el.classList.add('active');
render();
}
function addEntry() {
const titleInput = document.getElementById('new-title');
const status = document.getElementById('status-filter').value;
if(!titleInput.value) {
alert("Error: Please provide a title.");
return;
}
const now = new Date();
const entry = {
id: Date.now(),
title: titleInput.value,
status: status,
timestamp: now.toLocaleDateString() + " @ " + now.toLocaleTimeString()
};
db[currentTab].push(entry);
saveAndRender();
titleInput.value = '';
}
function deleteEntry(id) {
if(confirm("Confirm deletion of record?")) {
db[currentTab] = db[currentTab].filter(item => item.id !== id);
saveAndRender();
}
}
function saveAndRender() {
localStorage.setItem('archiveDB', JSON.stringify(db));
render();
}
function render() {
const view = document.getElementById('display');
const filter = document.getElementById('status-filter').value;
const query = document.getElementById('search-bar').value.toLowerCase();
view.innerHTML = '';
const items = db[currentTab].filter(i =>
i.status === filter &&
i.title.toLowerCase().includes(query)
);
if(items.length === 0) {
view.innerHTML = '<div style="color:#808080; padding:20px; text-align:center;">- No entries found in this directory -</div>';
return;
}
items.forEach(i => {
const div = document.createElement('div');
div.className = 'post';
div.innerHTML = `
<div class="post-info">
<div class="post-time">${i.timestamp}</div>
<div class="post-title">${i.title}</div>
</div>
<button class="del-btn" onclick="deleteEntry(${i.id})">DEL</button>
`;
view.appendChild(div);
});
}
// Initial load
render();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment