Hugging Face's logo

Spaces:
vericudebuget
/
book1
Running

App Files Community
vericudebuget commited on
Commit
e2c3be1
·
verified ·
1 Parent(s): 55b743d

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +207 -38
index.html CHANGED
@@ -1,38 +1,207 @@
1
- <!DOCTYPE html>
2
- <html lang="ro">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Carte: Cum am supravețuit clasei a VIII-a</title>
7
- <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
8
- <style>
9
- body {
10
- background-color: #1a202c;
11
- color: #e2e8f0;
12
- }
13
- </style>
14
- </head>
15
- <body class="min-h-screen flex items-center justify-center p-4">
16
- <div class="max-w-lg w-full bg-gray-800 rounded-xl shadow-lg overflow-hidden p-6">
17
- <img src="cover1.jpg" alt="Coperta Carte" class="mx-auto mb-6 rounded-lg shadow-md">
18
-
19
- <h1 class="text-2xl font-bold mb-4 text-white">Cum am supravețuit clasei a VIII-a</h1>
20
-
21
- <p class="text-gray-400 text-lg mb-6">
22
- Citește cartea pe internet.
23
- </p>
24
-
25
- <div class="flex justify-between items-center mb-6">
26
- <span class="text-lg font-semibold text-green-400">Gratuit</span>
27
- <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition duration-300" onclick="window.location.href='reader.html'">
28
- Citește acum
29
- </button>
30
- </div>
31
-
32
- <div class="text-sm text-gray-400">
33
-
34
- <p class="mt-2">Carte scanată de: <i>Petru.</i></p>
35
- </div>
36
- </div>
37
- </body>
38
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="ro">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Cititor</title>
7
+ <style>
8
+ body {
9
+ margin: 0;
10
+ display: flex;
11
+ flex-direction: column;
12
+ align-items: center;
13
+ justify-content: center;
14
+ height: 100vh;
15
+ background-color: #f5f5f5;
16
+ overflow: hidden;
17
+ }
18
+
19
+ #reader-container {
20
+ position: relative;
21
+ width: 100%;
22
+ height: 100%;
23
+ overflow: hidden;
24
+ display: flex;
25
+ justify-content: center;
26
+ align-items: center;
27
+ }
28
+
29
+ #reader-container img {
30
+ width: 100%;
31
+ height: auto;
32
+ transform-origin: center center;
33
+ transition: opacity 0.2s ease, transform 0.3s;
34
+ cursor: grab;
35
+ opacity: 0;
36
+ position: absolute;
37
+ }
38
+
39
+ #reader-container img.visible {
40
+ opacity: 1;
41
+ }
42
+
43
+ @media (min-width: 768px) {
44
+ #reader-container img {
45
+ height: 90vh;
46
+ width: auto;
47
+ }
48
+ }
49
+
50
+ .controls {
51
+ position: absolute;
52
+ bottom: 20px;
53
+ display: flex;
54
+ justify-content: center;
55
+ gap: 10px;
56
+ }
57
+
58
+ button {
59
+ padding: 10px 20px;
60
+ font-size: 16px;
61
+ cursor: pointer;
62
+ border: none;
63
+ border-radius: 5px;
64
+ background-color: #007bff;
65
+ color: white;
66
+ transition: background-color 0.3s;
67
+ }
68
+
69
+ button:disabled {
70
+ background-color: #ddd;
71
+ cursor: not-allowed;
72
+ }
73
+
74
+ button:hover:not(:disabled) {
75
+ background-color: #0056b3;
76
+ }
77
+
78
+ #page-input {
79
+ position: absolute;
80
+ top: 20px;
81
+ font-size: 24px;
82
+ padding: 10px 20px;
83
+ border: none;
84
+ border-radius: 10px;
85
+ text-align: center;
86
+ z-index: 1;
87
+ width: 210px;
88
+ }
89
+
90
+ #page-input:focus {
91
+ outline: none;
92
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
93
+ }
94
+
95
+ #page-number {
96
+ position: absolute;
97
+ top: 20px;
98
+ left: 20px;
99
+ font-size: 24px;
100
+ padding: 10px 20px;
101
+ border: none;
102
+ border-radius: 10px;
103
+ text-align: center;
104
+ z-index: 1;
105
+ background-color: #007bff;
106
+ color: white;
107
+ }
108
+
109
+ #loading-message {
110
+ position: absolute;
111
+ top: 50%;
112
+ left: 50%;
113
+ transform: translate(-50%, -50%);
114
+ font-size: 24px;
115
+ color: #333;
116
+ }
117
+ </style>
118
+ </head>
119
+ <body>
120
+ <div id="reader-container">
121
+ <div id="page-number"></div>
122
+ <input id="page-input" type="number" placeholder="Introdu pagina" oninput="handlePageInput(this.value)">
123
+ <img id="page-image" src="" alt="Pagina" style="display: none;">
124
+ <div id="loading-message">Imaginea se încarcă, vă rog așteptați</div>
125
+ </div>
126
+
127
+ <div class="controls">
128
+ <button id="prev-button" disabled>Înapoi</button>
129
+ <button id="next-button">Înainte</button>
130
+ </div>
131
+
132
+ <script>
133
+ const TOTAL_PAGES = 92;
134
+ let currentPage = 1;
135
+ const imageElement = document.getElementById('page-image');
136
+ const prevButton = document.getElementById('prev-button');
137
+ const nextButton = document.getElementById('next-button');
138
+ const pageNumberElement = document.getElementById('page-number');
139
+ const loadingMessage = document.getElementById('loading-message');
140
+
141
+ const preloadImages = [];
142
+
143
+ const preload = (pages) => {
144
+ pages.forEach(page => {
145
+ if (page >= 1 && page <= TOTAL_PAGES) {
146
+ const img = new Image();
147
+ img.src = `pages/${page}.jpg`;
148
+ preloadImages.push(img);
149
+ }
150
+ });
151
+ };
152
+
153
+ const updatePage = () => {
154
+ imageElement.classList.remove('visible');
155
+ loadingMessage.style.display = 'block';
156
+ setTimeout(() => {
157
+ imageElement.src = `pages/${currentPage}.jpg`;
158
+ imageElement.alt = `Pagina ${currentPage}`;
159
+ prevButton.disabled = currentPage === 1;
160
+ nextButton.disabled = currentPage === TOTAL_PAGES;
161
+ const pageNumber = currentPage * 2 + 1;
162
+ pageNumberElement.textContent = `${pageNumber - 1}-${pageNumber}`;
163
+ }, 0);
164
+ };
165
+
166
+ imageElement.onload = () => {
167
+ imageElement.style.display = 'block';
168
+ loadingMessage.style.display = 'none';
169
+ imageElement.classList.add('visible');
170
+ };
171
+
172
+ prevButton.addEventListener('click', () => {
173
+ if (currentPage > 1) {
174
+ currentPage--;
175
+ updatePage();
176
+ }
177
+ });
178
+
179
+ nextButton.addEventListener('click', () => {
180
+ if (currentPage < TOTAL_PAGES) {
181
+ currentPage++;
182
+ updatePage();
183
+ }
184
+ });
185
+
186
+ document.addEventListener('keydown', (e) => {
187
+ if (e.key === 'ArrowLeft' && currentPage > 1) {
188
+ currentPage--;
189
+ updatePage();
190
+ } else if (e.key === 'ArrowRight' && currentPage < TOTAL_PAGES) {
191
+ currentPage++;
192
+ updatePage();
193
+ }
194
+ });
195
+
196
+ function handlePageInput(value) {
197
+ const pageNumber = parseInt(value);
198
+ if (!isNaN(pageNumber) && pageNumber >= 1 && pageNumber <= TOTAL_PAGES * 2) {
199
+ currentPage = Math.ceil(pageNumber / 2);
200
+ updatePage();
201
+ }
202
+ }
203
+
204
+ updatePage();
205
+ </script>
206
+ </body>
207
+ </html>