mirror of
https://github.com/milk-net/milk-net.github.io.git
synced 2025-04-19 21:53:40 -05:00
189 lines
5.3 KiB
HTML
189 lines
5.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>MilkNet | Library</title>
|
|
<link id="favicon" rel="icon" href="/assets/img/milk.png" type="image/x-icon">
|
|
<script src="/index.js"></script>
|
|
<style>
|
|
body {
|
|
background-color: #000;
|
|
color: #fff;
|
|
font-family: Arial, sans-serif;
|
|
margin: 0;
|
|
height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.header {
|
|
background-color: #000;
|
|
padding: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.hamburger {
|
|
font-size: 24px;
|
|
background: none;
|
|
border: none;
|
|
color: #fff;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.main {
|
|
display: flex;
|
|
flex-grow: 1;
|
|
height: 100%;
|
|
}
|
|
|
|
.file-list {
|
|
width: 200px;
|
|
background-color: #068148;
|
|
overflow-y: auto;
|
|
padding: 10px;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.file-list.hidden {
|
|
transform: translateX(-100%);
|
|
}
|
|
|
|
.file-button {
|
|
display: block;
|
|
width: 100%;
|
|
padding: 10px;
|
|
margin-bottom: 5px;
|
|
background-color: #068148;
|
|
border: none;
|
|
color: #fff;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
transition: background-color 0.3s;
|
|
}
|
|
|
|
.file-button:hover {
|
|
background-color: #046c3d;
|
|
}
|
|
|
|
.text-display {
|
|
flex-grow: 1;
|
|
padding: 20px;
|
|
overflow-y: auto;
|
|
background-color: #000;
|
|
border-left: 6px solid #333;
|
|
}
|
|
|
|
.text-display h1, .text-display h2, .text-display h3 {
|
|
color: #00aced;
|
|
}
|
|
|
|
.text-display pre, .text-display code {
|
|
background-color: #222;
|
|
padding: 5px;
|
|
display: block;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.divider {
|
|
background-color: #333;
|
|
cursor: ew-resize;
|
|
width: 6px;
|
|
height: 100%;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="header">
|
|
<button class="hamburger" onclick="toggleMenu()">☰</button>
|
|
</div>
|
|
<div class="main">
|
|
<div class="file-list hidden" id="fileList">
|
|
<button class="file-button" onclick="loadText('/library/1984.txt')">George Orwell - 1984</button>
|
|
<button class="file-button" onclick="loadText('/library/animal-farm.txt')">George Orwell - Animal Farm</button>
|
|
<button class="file-button" onclick="loadText('/library/the-great-gatsby.txt')">F. Scott Fitzgerald - The Great Gatsby</button>
|
|
</div>
|
|
<div class="divider" id="divider" onmousedown="startResize(event)"></div>
|
|
<div class="text-display" id="textDisplay">
|
|
<p>Select a book to read. Not much here right now, unless you submit any .txts or .mds then I can add them</p>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
|
<script>
|
|
let isResizing = false;
|
|
let lastDownX = 0;
|
|
|
|
// Define the toggleMenu function
|
|
function toggleMenu() {
|
|
const fileList = document.getElementById('fileList');
|
|
fileList.classList.toggle('hidden');
|
|
}
|
|
|
|
async function loadText(fileUrl) {
|
|
const display = document.getElementById('textDisplay');
|
|
display.innerHTML = 'Loading...';
|
|
|
|
// First try fetching the file directly
|
|
try {
|
|
const response = await fetch(fileUrl);
|
|
if (!response.ok) throw new Error('Failed to load text.');
|
|
const text = await response.text();
|
|
console.log('Fetched text:', text.slice(0, 500)); // Debug: show first 500 chars
|
|
const html = marked.parse(text);
|
|
display.innerHTML = html;
|
|
|
|
// Hide the menu after loading
|
|
document.getElementById('fileList').classList.add('hidden');
|
|
} catch (error) {
|
|
console.error('Fetch error:', error);
|
|
|
|
// If it fails (likely due to CORS), use the CORS proxy
|
|
const proxyUrl = 'https://cors-anywhere.herokuapp.com/';
|
|
const proxyRequestUrl = proxyUrl + fileUrl;
|
|
try {
|
|
const response = await fetch(proxyRequestUrl);
|
|
if (!response.ok) throw new Error('Failed to load text via proxy.');
|
|
const text = await response.text();
|
|
console.log('Fetched text via proxy:', text.slice(0, 500)); // Debug: show first 500 chars
|
|
const html = marked.parse(text);
|
|
display.innerHTML = html;
|
|
|
|
// Hide the menu after loading
|
|
document.getElementById('fileList').classList.add('hidden');
|
|
} catch (proxyError) {
|
|
console.error('Proxy fetch error:', proxyError);
|
|
display.textContent = 'Error loading file: ' + proxyError.message;
|
|
}
|
|
}
|
|
}
|
|
|
|
function startResize(e) {
|
|
isResizing = true;
|
|
lastDownX = e.clientX;
|
|
|
|
window.addEventListener('mousemove', handleResize);
|
|
window.addEventListener('mouseup', stopResize);
|
|
}
|
|
|
|
function handleResize(e) {
|
|
if (!isResizing) return;
|
|
|
|
const offsetRight = document.body.offsetWidth - e.clientX;
|
|
const newWidth = e.clientX;
|
|
|
|
if (newWidth > 100 && newWidth < window.innerWidth - 100) {
|
|
document.querySelector('.file-list').style.width = `${newWidth}px`;
|
|
document.querySelector('.text-display').style.width = `${window.innerWidth - newWidth - 10}px`;
|
|
}
|
|
}
|
|
|
|
function stopResize() {
|
|
isResizing = false;
|
|
window.removeEventListener('mousemove', handleResize);
|
|
window.removeEventListener('mouseup', stopResize);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|