Upload 4 files

Browse files

Files changed (4) hide show

index.html +193 -0
signedin.html +192 -0
signin.html +126 -0
signup.html +129 -0

index.html ADDED Viewed

	@@ -0,0 +1,193 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Book Reading Streak Tracker</title>
+    <style>
+        body {
+            font-family: 'Helvetica Neue', Arial, sans-serif;
+            text-align: center;
+            margin: 0;
+            padding: 0;
+            background: url('https://source.unsplash.com/1920x1080/?book') no-repeat center center fixed;
+            background-size: cover;
+            color: white;
+        }
+        header {
+            background-color: rgba(0, 0, 0, 0.7);
+            padding: 10px 20px;
+            position: fixed;
+            width: 100%;
+            top: 0;
+            z-index: 1000;
+        }
+        #container {
+            background: rgba(255, 255, 255, 0.7);
+            padding: 20px;
+            border-radius: 10px;
+            margin-top: 60px;
+        }
+        h1 {
+            color: #333;
+        }
+        p {
+            color: #555;
+        }
+        button {
+            padding: 10px 20px;
+            font-size: 16px;
+            cursor: pointer;
+            margin: 10px;
+            background-color: #007bff;
+            color: #fff;
+            border: none;
+            border-radius: 5px;
+            position: relative;
+        }
+        #streak {
+            font-size: 24px;
+            font-weight: bold;
+            color: #007bff;
+        }
+        .notification-bar {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            background-color: rgba(0, 0, 0, 0.7);
+            color: white;
+            padding: 15px;
+            text-align: center;
+            display: none;
+        }
+        .menu-icon {
+            display: none;
+            cursor: pointer;
+            font-size: 24px;
+            color: #fff;
+            position: absolute;
+            top: 15px;
+            left: 20px;
+        }
+        .menu-options {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            background-color: rgba(0, 0, 0, 0.7);
+            z-index: 100;
+            flex-direction: column;
+            transform: translateY(-100%);
+            transition: transform 0.3s ease-in-out;
+        }
+        .menu-option {
+            margin: 20px;
+            font-size: 18px;
+            color: #fff;
+            cursor: pointer;
+        }
+                div.scrollmenu {
+  background-color: #333;
+  overflow: auto;
+  white-space: nowrap;
+}
+div.scrollmenu a {
+  display: inline-block;
+  color: white;
+  text-align: center;
+  padding: 14px;
+  text-decoration: none;
+}
+div.scrollmenu a:hover {
+  background-color: #777;
+}
+    </style>
+</head>
+<body>
+<div class="scrollmenu">
+  <a href="index.html">Home</a>
+  <a href="signup.html">Sign Up</a>
+  <a href="signin.html">Sign In</a>
+  <a href="#about">About</a>
+  <a href="#support">Support</a>
+</div>
+    <div id="container">
+        <h1>Book Reading Streak Tracker</h1>
+        <p>Track your daily reading streak by clicking the button below:</p>
+        <button onclick="updateStreak()">Read a Book Today</button>
+        <button onclick="deleteStreak()">Delete Streak</button>
+        <p>Your current streak: <span id="streak">1</span> days</p>
+    </div>
+    <div class="notification-bar">
+        This website uses cookies to save your reading streak data. By using this site, you agree to our use of cookies.
+    </div>
+    <script>
+        // Function to update the reading streak
+        function updateStreak() {
+            let lastClickDate = localStorage.getItem('lastClickDate');
+            let currentDate = new Date().toLocaleDateString();
+            if (lastClickDate !== currentDate) {
+                let currentStreak = parseInt(document.getElementById('streak').innerText);
+                currentStreak++;
+                document.getElementById('streak').innerText = currentStreak;
+                // Update the last click date in local storage
+                localStorage.setItem('lastClickDate', currentDate);
+                // Show notification
+                showNotification();
+            } else {
+                alert('You already clicked the button today. Come back tomorrow!');
+            }
+        }
+        // Function to delete the last streak
+        function deleteStreak() {
+            let lastClickDate = localStorage.getItem('lastClickDate');
+            let currentDate = new Date().toLocaleDateString();
+            if (lastClickDate === currentDate) {
+                // If the button was clicked today, update the streak
+                let currentStreak = parseInt(document.getElementById('streak').innerText);
+                currentStreak = Math.max(1, currentStreak - 1); // Ensure streak is not less than 1
+                document.getElementById('streak').innerText = currentStreak;
+                // Clear the last click date in local storage
+                localStorage.removeItem('lastClickDate');
+            } else {
+                alert('No streak to delete for today.');
+            }
+        }
+        // Function to show notification
+        function showNotification() {
+            document.querySelector('.notification-bar').style.display = 'block';
+            setTimeout(function() {
+                document.querySelector('.notification-bar').style.display = 'none';
+            }, 5000);
+        }
+        // Function to toggle menu options
+        function toggleMenu() {
+            const menuOptions = document.querySelector('.menu-options');
+            menuOptions.style.transform = menuOptions.style.transform === 'translateY(0)' ? 'translateY(-100%)' : 'translateY(0)';
+        }
+    </script>
+</body>
+</html>

signedin.html ADDED Viewed

	@@ -0,0 +1,192 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Book Reading Streak Tracker</title>
+    <style>
+        body {
+            font-family: 'Helvetica Neue', Arial, sans-serif;
+            text-align: center;
+            margin: 0;
+            padding: 0;
+            background: url('https://source.unsplash.com/1920x1080/?book') no-repeat center center fixed;
+            background-size: cover;
+            color: white;
+        }
+        header {
+            background-color: rgba(0, 0, 0, 0.7);
+            padding: 10px 20px;
+            position: fixed;
+            width: 100%;
+            top: 0;
+            z-index: 1000;
+        }
+        #container {
+            background: rgba(255, 255, 255, 0.7);
+            padding: 20px;
+            border-radius: 10px;
+            margin-top: 60px;
+        }
+        h1 {
+            color: #333;
+        }
+        p {
+            color: #555;
+        }
+        button {
+            padding: 10px 20px;
+            font-size: 16px;
+            cursor: pointer;
+            margin: 10px;
+            background-color: #007bff;
+            color: #fff;
+            border: none;
+            border-radius: 5px;
+            position: relative;
+        }
+        #streak {
+            font-size: 24px;
+            font-weight: bold;
+            color: #007bff;
+        }
+        .notification-bar {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            background-color: rgba(0, 0, 0, 0.7);
+            color: white;
+            padding: 15px;
+            text-align: center;
+            display: none;
+        }
+        .menu-icon {
+            display: none;
+            cursor: pointer;
+            font-size: 24px;
+            color: #fff;
+            position: absolute;
+            top: 15px;
+            left: 20px;
+        }
+        .menu-options {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            background-color: rgba(0, 0, 0, 0.7);
+            z-index: 100;
+            flex-direction: column;
+            transform: translateY(-100%);
+            transition: transform 0.3s ease-in-out;
+        }
+        .menu-option {
+            margin: 20px;
+            font-size: 18px;
+            color: #fff;
+            cursor: pointer;
+        }
+                div.scrollmenu {
+  background-color: #333;
+  overflow: auto;
+  white-space: nowrap;
+}
+div.scrollmenu a {
+  display: inline-block;
+  color: white;
+  text-align: center;
+  padding: 14px;
+  text-decoration: none;
+}
+div.scrollmenu a:hover {
+  background-color: #777;
+}
+    </style>
+</head>
+<body>
+<div class="scrollmenu">
+  <a href="index.html">Home</a>
+  <a href="index.html">Sign Out</a>
+  <a href="#about">About</a>
+  <a href="#support">Support</a>
+</div>
+    <div id="container">
+        <h1>Book Reading Streak Tracker</h1>
+        <p>Track your daily reading streak by clicking the button below:</p>
+        <button onclick="updateStreak()">Read a Book Today</button>
+        <button onclick="deleteStreak()">Delete Streak</button>
+        <p>Your current streak: <span id="streak">1</span> days</p>
+    </div>
+    <div class="notification-bar">
+        This website uses cookies to save your reading streak data. By using this site, you agree to our use of cookies.
+    </div>
+    <script>
+        // Function to update the reading streak
+        function updateStreak() {
+            let lastClickDate = localStorage.getItem('lastClickDate');
+            let currentDate = new Date().toLocaleDateString();
+            if (lastClickDate !== currentDate) {
+                let currentStreak = parseInt(document.getElementById('streak').innerText);
+                currentStreak++;
+                document.getElementById('streak').innerText = currentStreak;
+                // Update the last click date in local storage
+                localStorage.setItem('lastClickDate', currentDate);
+                // Show notification
+                showNotification();
+            } else {
+                alert('You already clicked the button today. Come back tomorrow!');
+            }
+        }
+        // Function to delete the last streak
+        function deleteStreak() {
+            let lastClickDate = localStorage.getItem('lastClickDate');
+            let currentDate = new Date().toLocaleDateString();
+            if (lastClickDate === currentDate) {
+                // If the button was clicked today, update the streak
+                let currentStreak = parseInt(document.getElementById('streak').innerText);
+                currentStreak = Math.max(1, currentStreak - 1); // Ensure streak is not less than 1
+                document.getElementById('streak').innerText = currentStreak;
+                // Clear the last click date in local storage
+                localStorage.removeItem('lastClickDate');
+            } else {
+                alert('No streak to delete for today.');
+            }
+        }
+        // Function to show notification
+        function showNotification() {
+            document.querySelector('.notification-bar').style.display = 'block';
+            setTimeout(function() {
+                document.querySelector('.notification-bar').style.display = 'none';
+            }, 5000);
+        }
+        // Function to toggle menu options
+        function toggleMenu() {
+            const menuOptions = document.querySelector('.menu-options');
+            menuOptions.style.transform = menuOptions.style.transform === 'translateY(0)' ? 'translateY(-100%)' : 'translateY(0)';
+        }
+    </script>
+</body>
+</html>

signin.html ADDED Viewed

	@@ -0,0 +1,126 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sign Up - Book Reading Streak Tracker</title>
+    <style>
+        body {
+            font-family: 'Helvetica Neue', Arial, sans-serif;
+            text-align: center;
+            margin: 0;
+            padding: 0;
+            background: url('https://source.unsplash.com/1920x1080/?book') no-repeat center center fixed;
+            background-size: cover;
+            color: white;
+        }
+        header {
+            background-color: rgba(0, 0, 0, 0.7);
+            padding: 10px 20px;
+            position: fixed;
+            width: 100%;
+            top: 0;
+            z-index: 1000;
+        }
+        #container {
+            background: rgba(255, 255, 255, 0.7);
+            padding: 20px;
+            border-radius: 10px;
+            margin-top: 60px;
+        }
+        h1 {
+            color: #333;
+        }
+        form {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+        label {
+            color: #333;
+            font-size: 18px;
+            margin-top: 10px;
+        }
+        input {
+            padding: 10px;
+            margin: 5px;
+            width: 100%;
+            box-sizing: border-box;
+        }
+        button {
+            padding: 10px 20px;
+            font-size: 16px;
+            cursor: pointer;
+            margin: 10px;
+            background-color: #007bff;
+            color: #fff;
+            border: none;
+            border-radius: 5px;
+            width: 100%;
+        }
+        div.scrollmenu {
+  background-color: #333;
+  overflow: auto;
+  white-space: nowrap;
+}
+div.scrollmenu a {
+  display: inline-block;
+  color: white;
+  text-align: center;
+  padding: 14px;
+  text-decoration: none;
+}
+div.scrollmenu a:hover {
+  background-color: #777;
+}
+    </style>
+</head>
+<body>
+<div class="scrollmenu">
+  <a href="index.html">Home</a>
+  <a href="signup.html">Sign Up</a>
+  <a href="signup.html">Sign In</a>
+  <a href="#about">About</a>
+  <a href="#support">Support</a>
+</div>
+    <div id="container">
+        <h1>Sign Up</h1>
+        <form>
+            <label for="username">Username:</label>
+            <input type="text" id="username" name="username" required>
+            <label for="password">Password:</label>
+            <input type="password" id="password" name="password" required>
+            <a type="submit" onclick="showNotification()" href="signedin.html">Sign Up</a>
+        </form>
+    </div>
+    <div class="notification-bar">
+        This website uses cookies to save your reading streak data. By using this site, you agree to our use of cookies.
+    </div>
+    <script>
+        // Function to show notification
+        function showNotification() {
+            document.querySelector('.notification-bar').style.display = 'block';
+            setTimeout(function() {
+                document.querySelector('.notification-bar').style.display = 'none';
+            }, 5000);
+        }
+        // Function to toggle menu options
+        function toggleMenu() {
+            const menuOptions = document.querySelector('.menu-options');
+            menuOptions.style.transform = menuOptions.style.transform === 'translateY(0)' ? 'translateY(-100%)' : 'translateY(0)';
+        }
+    </script>
+</body>
+</html>

signup.html ADDED Viewed

	@@ -0,0 +1,129 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sign Up - Book Reading Streak Tracker</title>
+    <style>
+        body {
+            font-family: 'Helvetica Neue', Arial, sans-serif;
+            text-align: center;
+            margin: 0;
+            padding: 0;
+            background: url('https://source.unsplash.com/1920x1080/?book') no-repeat center center fixed;
+            background-size: cover;
+            color: white;
+        }
+        header {
+            background-color: rgba(0, 0, 0, 0.7);
+            padding: 10px 20px;
+            position: fixed;
+            width: 100%;
+            top: 0;
+            z-index: 1000;
+        }
+        #container {
+            background: rgba(255, 255, 255, 0.7);
+            padding: 20px;
+            border-radius: 10px;
+            margin-top: 60px;
+        }
+        h1 {
+            color: #333;
+        }
+        form {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+        label {
+            color: #333;
+            font-size: 18px;
+            margin-top: 10px;
+        }
+        input {
+            padding: 10px;
+            margin: 5px;
+            width: 100%;
+            box-sizing: border-box;
+        }
+        button {
+            padding: 10px 20px;
+            font-size: 16px;
+            cursor: pointer;
+            margin: 10px;
+            background-color: #007bff;
+            color: #fff;
+            border: none;
+            border-radius: 5px;
+            width: 100%;
+        }
+        div.scrollmenu {
+  background-color: #333;
+  overflow: auto;
+  white-space: nowrap;
+}
+div.scrollmenu a {
+  display: inline-block;
+  color: white;
+  text-align: center;
+  padding: 14px;
+  text-decoration: none;
+}
+div.scrollmenu a:hover {
+  background-color: #777;
+}
+    </style>
+</head>
+<body>
+<div class="scrollmenu">
+  <a href="signedin.html">Home</a>
+  <a href="signup.html">Sign Up</a>
+  <a href="signin.html">Sign In</a>
+  <a href="#about">About</a>
+  <a href="#support">Support</a>
+</div>
+    <div id="container">
+        <h1>Sign Up</h1>
+        <form>
+            <label for="username">Username:</label>
+            <input type="text" id="username" name="username" required>
+            <label for="email">Email:</label>
+            <input type="email" id="email" name="email" required>
+            <label for="password">Password:</label>
+            <input type="password" id="password" name="password" required>
+            <a type="submit" onclick="showNotification()" href="signedin.html">Sign Up</a>
+        </form>
+    </div>
+    <div class="notification-bar">
+        This website uses cookies to save your reading streak data. By using this site, you agree to our use of cookies.
+    </div>
+    <script>
+        // Function to show notification
+        function showNotification() {
+            document.querySelector('.notification-bar').style.display = 'block';
+            setTimeout(function() {
+                document.querySelector('.notification-bar').style.display = 'none';
+            }, 5000);
+        }
+        // Function to toggle menu options
+        function toggleMenu() {
+            const menuOptions = document.querySelector('.menu-options');
+            menuOptions.style.transform = menuOptions.style.transform === 'translateY(0)' ? 'translateY(-100%)' : 'translateY(0)';
+        }
+    </script>
+</body>
+</html>