Novel-reader/Index.html at main · Sebes12345/Novel-reader · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Novel Website Viewer</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 text-gray-900 dark:bg-gray-900 dark:text-white">
<div class="max-w-2xl mx-auto p-4 text-center">
<h2 class="text-2xl font-bold">Novel Website Viewer</h2>
<div class="mt-4">
<input id="urlInput" type="text" placeholder="Enter novel website URL"
class="w-full p-2 border rounded-lg dark:bg-gray-700 dark:text-white">
<button id="loadBtn" class="mt-2 w-full p-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
Load Website
</button>
</div>
<div class="mt-4 flex justify-between">
<button id="backBtn" class="p-2 bg-gray-500 text-white rounded-lg">⬅ Back</button>
<button id="refreshBtn" class="p-2 bg-gray-500 text-white rounded-lg">🔄 Refresh</button>
<button id="toggleDarkMode" class="p-2 bg-yellow-500 text-black rounded-lg">🌙 Dark Mode</button>
</div>
</div>
<iframe id="novelFrame" class="w-full h-screen border-0 mt-4 bg-white dark:bg-gray-800"></iframe>

<script>
const urlInput = document.getElementById("urlInput");
const novelFrame = document.getElementById("novelFrame");
let historyStack = [];

document.getElementById("loadBtn").addEventListener("click", function() {
let url = urlInput.value.trim();
if (!url.startsWith("http")) url = "https://" + url;
if (isValidURL(url)) {
historyStack.push(url);
novelFrame.src = url;
} else {
alert("Invalid URL. Please enter a valid website.");
}
});

document.getElementById("backBtn").addEventListener("click", function() {
if (historyStack.length > 1) {
historyStack.pop();
novelFrame.src = historyStack[historyStack.length - 1];
} else {
alert("No previous page to go back to.");
}
});

document.getElementById("refreshBtn").addEventListener("click", function() {
novelFrame.src = novelFrame.src;
});

function isValidURL(string) {
try { new URL(string); return true; } catch (_) { return false; }
}

document.getElementById("toggleDarkMode").addEventListener("click", function() {
document.body.classList.toggle("dark");
});
</script>
</body>
</html>