image-viewer-mg

Running

App Files Files Community

vericudebuget commited on Nov 30, 2024

Commit

d98b2c2

verified ·

1 Parent(s): df3e28c

Update index.html

Browse files

Files changed (1) hide show

index.html +33 -203

index.html CHANGED Viewed

@@ -1,208 +1,38 @@
 <!DOCTYPE html>
 <html lang="ro">
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Cititor</title>
-  <style>
-    body {
-      margin: 0;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      height: 100vh;
-      background-color: #f5f5f5;
-      overflow: hidden;
-    }
-    #reader-container {
-      position: relative;
-      width: 100%;
-      height: 100%;
-      overflow: hidden;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
-    #reader-container img {
-      width: 100%;
-      height: auto;
-      transform-origin: center center;
-      transition: opacity 0.2s ease, transform 0.3s;
-      cursor: grab;
-      opacity: 0;
-      position: absolute;
-    }
-    #reader-container img.visible {
-      opacity: 1;
-    }
-    @media (min-width: 768px) {
-      #reader-container img {
-        height: 90vh;
-        width: auto;
-      }
-    }
-    .controls {
-      position: absolute;
-      bottom: 20px;
-      display: flex;
-      justify-content: center;
-      gap: 10px;
-    }
-    button {
-      padding: 10px 20px;
-      font-size: 16px;
-      cursor: pointer;
-      border: none;
-      border-radius: 5px;
-      background-color: #007bff;
-      color: white;
-      transition: background-color 0.3s;
-    }
-    button:disabled {
-      background-color: #ddd;
-      cursor: not-allowed;
-    }
-    button:hover:not(:disabled) {
-      background-color: #0056b3;
-    }
-    #page-input {
-      position: absolute;
-      top: 20px;
-      font-size: 24px;
-      padding: 10px 20px;
-      border: none;
-      border-radius: 10px;
-      text-align: center;
-      z-index: 1;
-      width: 210px;
-    }
-    #page-input:focus {
-      outline: none;
-      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
-    }
-    #page-number {
-      position: absolute;
-      top: 20px;
-      left: 20px;
-      font-size: 24px;
-      padding: 10px 20px;
-      border: none;
-      border-radius: 10px;
-      text-align: center;
-      z-index: 1;
-      background-color: #007bff;
-      color: white;
-    }
-    #loading-message {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      font-size: 24px;
-      color: #333;
-    }
-  </style>
-</head>
-<body>
-  <div id="reader-container">
-    <div id="page-number"></div>
-    <input id="page-input" type="number" placeholder="Introdu pagina" oninput="handlePageInput(this.value)">
-    <img id="page-image" src="" alt="Pagina" style="display: none;">
-    <div id="loading-message">Imaginea se încarcă, vă rog așteptați</div>
-  </div>
-  <div class="controls">
-    <button id="prev-button" disabled>Înapoi</button>
-    <button id="next-button">Înainte</button>
-  </div>
-  <script>
-    const TOTAL_PAGES = 92;
-    let currentPage = 1;
-    const imageElement = document.getElementById('page-image');
-    const prevButton = document.getElementById('prev-button');
-    const nextButton = document.getElementById('next-button');
-    const pageNumberElement = document.getElementById('page-number');
-    const loadingMessage = document.getElementById('loading-message');
-    const preloadImages = [];
-    const preload = (pages) => {
-      pages.forEach(page => {
-        if (page >= 1 && page <= TOTAL_PAGES) {
-          const img = new Image();
-          img.src = `pages/${page}.jpg`;
-          preloadImages.push(img);
         }
-      });
-    };
-    const updatePage = () => {
-      imageElement.classList.remove('visible');
-      loadingMessage.style.display = 'block';
-      setTimeout(() => {
-        imageElement.src = `pages/${currentPage}.jpg`;
-        imageElement.alt = `Pagina ${currentPage}`;
-        prevButton.disabled = currentPage === 1;
-        nextButton.disabled = currentPage === TOTAL_PAGES;
-        const pageNumber = currentPage * 2 + 1;
-        pageNumberElement.textContent = `${pageNumber - 1}-${pageNumber}`;
-      }, 0);
-    };
-    imageElement.onload = () => {
-      imageElement.style.display = 'block';
-      loadingMessage.style.display = 'none';
-      imageElement.classList.add('visible');
-    };
-    prevButton.addEventListener('click', () => {
-      if (currentPage > 1) {
-        currentPage--;
-        updatePage();
-      }
-    });
-    nextButton.addEventListener('click', () => {
-      if (currentPage < TOTAL_PAGES) {
-        currentPage++;
-        updatePage();
-      }
-    });
-    document.addEventListener('keydown', (e) => {
-      if (e.key === 'ArrowLeft' && currentPage > 1) {
-        currentPage--;
-        updatePage();
-      } else if (e.key === 'ArrowRight' && currentPage < TOTAL_PAGES) {
-        currentPage++;
-        updatePage();
-      }
-    });
-    function handlePageInput(value) {
-      const pageNumber = parseInt(value);
-      if (!isNaN(pageNumber) && pageNumber >= 1 && pageNumber <= TOTAL_PAGES * 2) {
-        currentPage = Math.ceil(pageNumber / 2);
-        updatePage();
-      }
-    }
-    updatePage();
-  </script>
 </body>
-</html>

 <!DOCTYPE html>
 <html lang="ro">
 <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Carte: Cum am supravețuit clasei a VIII-a</title>
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
+    <style>
+        body {
+            background-color: #1a202c;
+            color: #e2e8f0;
         }
+    </style>
+</head>
+<body class="min-h-screen flex items-center justify-center p-4">
+    <div class="max-w-lg w-full bg-gray-800 rounded-xl shadow-lg overflow-hidden p-6">
+        <img src="cover1.jpg" alt="Coperta Carte" class="mx-auto mb-6 rounded-lg shadow-md">
+        <h1 class="text-2xl font-bold mb-4 text-white">Cum am supravețuit clasei a VIII-a</h1>
+        <p class="text-gray-400 text-lg mb-6">
+         Citește cartea pe internet.
+        </p>
+        <div class="flex justify-between items-center mb-6">
+            <span class="text-lg font-semibold text-green-400">Gratuit</span>
+            <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'">
+                Citește acum
+            </button>
+        </div>
+        <div class="text-sm text-gray-400">
+            <p class="mt-2">Carte scanată de: <i>Petru.</i></p>
+        </div>
+    </div>
 </body>
+</html>