Skip to content

Commit 142aa94

Browse files
CodeDotJSCodeDotJS
authored
simulate navigation + download
1 parent eaa086b commit 142aa94

1 file changed

Lines changed: 162 additions & 0 deletions

File tree

‎random/index3.html‎

Lines changed: 162 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,162 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Free Classic Books (PDF)</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
8+
<style>
9+
body {
10+
font-family: Arial, sans-serif;
11+
max-width: 800px;
12+
margin: 40px auto;
13+
padding: 0 16px;
14+
background: #f9f9f9;
15+
}
16+
17+
h1 {
18+
text-align: center;
19+
}
20+
21+
.grid {
22+
display: grid;
23+
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
24+
gap: 20px;
25+
margin-top: 32px;
26+
}
27+
28+
.card {
29+
background: #fff;
30+
padding: 24px;
31+
border-radius: 8px;
32+
box-shadow: 0 3px 6px rgba(0,0,0,0.1);
33+
cursor: pointer;
34+
transition: transform 0.2s;
35+
}
36+
37+
.card:hover {
38+
transform: translateY(-4px);
39+
}
40+
41+
.hidden {
42+
display: none;
43+
}
44+
45+
.details {
46+
background: #fff;
47+
padding: 32px;
48+
border-radius: 8px;
49+
box-shadow: 0 3px 6px rgba(0,0,0,0.1);
50+
margin-top: 32px;
51+
}
52+
53+
.download {
54+
display: inline-block;
55+
margin-top: 20px;
56+
background: #007bff;
57+
color: #fff;
58+
padding: 10px 14px;
59+
border-radius: 4px;
60+
text-decoration: none;
61+
}
62+
63+
.download:hover {
64+
background: #0056b3;
65+
}
66+
67+
.back {
68+
display: inline-block;
69+
margin-top: 24px;
70+
color: #007bff;
71+
cursor: pointer;
72+
text-decoration: underline;
73+
}
74+
</style>
75+
</head>
76+
<body>
77+
78+
<h1>Free Classic Books (PDF)</h1>
79+
80+
<!-- SECTION LIST -->
81+
<div id="listView" class="grid">
82+
<div class="card" onclick="openBook(0)">
83+
<h3>Dubliners</h3>
84+
<p>James Joyce</p>
85+
</div>
86+
87+
<div class="card" onclick="openBook(1)">
88+
<h3>The Adventures of Huckleberry Finn</h3>
89+
<p>Mark Twain</p>
90+
</div>
91+
92+
<div class="card" onclick="openBook(2)">
93+
<h3>Middlemarch</h3>
94+
<p>George Eliot</p>
95+
</div>
96+
97+
<div class="card" onclick="openBook(3)">
98+
<h3>Pride and Prejudice</h3>
99+
<p>Jane Austen</p>
100+
</div>
101+
</div>
102+
103+
<!-- DETAILS PAGE -->
104+
<div id="detailView" class="details hidden">
105+
<h2 id="bookTitle"></h2>
106+
<p id="bookAuthor"></p>
107+
108+
<a
109+
id="downloadLink"
110+
class="download"
111+
target="_blank"
112+
rel="noopener"
113+
>
114+
Download PDF
115+
</a>
116+
117+
<div class="back" onclick="goBack()">← Back to list</div>
118+
</div>
119+
120+
<script>
121+
const books = [
122+
{
123+
title: "Dubliners",
124+
author: "James Joyce",
125+
url: "https://www.planetebook.com/free-ebooks/dubliners.pdf"
126+
},
127+
{
128+
title: "The Adventures of Huckleberry Finn",
129+
author: "Mark Twain",
130+
url: "https://www.planetebook.com/free-ebooks/the-adventures-of-huckleberry-finn.pdf"
131+
},
132+
{
133+
title: "Middlemarch",
134+
author: "George Eliot",
135+
url: "https://www.planetebook.com/free-ebooks/middlemarch.pdf"
136+
},
137+
{
138+
title: "Pride and Prejudice",
139+
author: "Jane Austen",
140+
url: "https://www.planetebook.com/free-ebooks/pride-and-prejudice.pdf"
141+
}
142+
];
143+
144+
function openBook(index) {
145+
const book = books[index];
146+
147+
document.getElementById("bookTitle").textContent = book.title;
148+
document.getElementById("bookAuthor").textContent = book.author;
149+
document.getElementById("downloadLink").href = book.url;
150+
151+
document.getElementById("listView").classList.add("hidden");
152+
document.getElementById("detailView").classList.remove("hidden");
153+
}
154+
155+
function goBack() {
156+
document.getElementById("detailView").classList.add("hidden");
157+
document.getElementById("listView").classList.remove("hidden");
158+
}
159+
</script>
160+
161+
</body>
162+
</html>

0 commit comments

Comments
 (0)