Scribd
Upload
5 views

Bool Reader

Uploaded by

Rasel Gazi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
5 views

Bool Reader

Uploaded by

Rasel Gazi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Photo Book Reader</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/5.15.4/css/all.min.css"> <!-- Font Awesome CDN for icons -->
<style>
body {
font-family: Arial, sans-serif;
background-color: #f8f8f8;
margin: 0;
padding: 0;
}
.book-container {
position: relative;
width: 300px; /* Square layout */
height: 300px; /* Square layout */
margin: 50px auto;
background-color: #f5f5f5;
border: 2px solid #ccc; /* Layout stroke */
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); /* Shadow effect */
overflow: hidden;
border-radius: 10px;
}
.book-page {
position: absolute;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
transition: opacity 0.5s ease-in-out; /* Transition for fade effect */
}
.book-page img {
max-width: 90%;
max-height: 90%;
object-fit: cover;
border-radius: 10px;
}
.navigation-buttons {
position: absolute;
top: 50%;
width: 100%;
display: flex;
justify-content: space-between;
padding: 0 20px; /* Adjust as needed */
}
.navigation-buttons button {
background-color: transparent;
color: #009688; /* Updated theme color */
border: none;
cursor: pointer;
font-size: 20px;
transition: color 0.3s ease-in-out;
}
.navigation-buttons button:hover {
color: #00796b; /* Darker shade for hover effect */
}
</style>
</head>
<body>
<div class="book-container">
<div class="book-page" id="pageContainer">
<img id="bookImage" src="https://via.placeholder.com/600x848?text=Page+1"
alt="Page 1">
</div>
<div class="navigation-buttons">
<button onclick="previousPage()"><i class="fas fa-chevron-left"></i></button>
<button onclick="nextPage()"><i class="fas fa-chevron-right"></i></button>
</div>
</div>

<script>
const bookPages = [
"https://via.placeholder.com/600x848?text=Page+1",
"https://via.placeholder.com/600x848?text=Page+2",
"https://via.placeholder.com/600x848?text=Page+3",
"https://via.placeholder.com/600x848?text=Page+4",
"https://via.placeholder.com/600x848?text=Page+5"
];

let currentPageIndex = 0;
const pageContainer = document.getElementById('pageContainer');
let timer; // Variable to hold the timer

function showPage(pageIndex) {
if (pageIndex >= 0 && pageIndex < bookPages.length) {
pageContainer.style.opacity = 0; // Fade out
setTimeout(() => {
document.getElementById('bookImage').src = bookPages[pageIndex];
currentPageIndex = pageIndex;
pageContainer.style.opacity = 1; // Fade in
}, 500); // Delay to match transition time
}
}

function nextPage() {
clearInterval(timer); // Clear timer to prevent automatic page change
currentPageIndex++;
if (currentPageIndex >= bookPages.length) {
currentPageIndex = 0;
}
showPage(currentPageIndex);
startTimer(); // Start the timer again after manual page change
}

function previousPage() {
clearInterval(timer); // Clear timer to prevent automatic page change
currentPageIndex--;
if (currentPageIndex < 0) {
currentPageIndex = bookPages.length - 1;
}
showPage(currentPageIndex);
startTimer(); // Start the timer again after manual page change
}
function startTimer() {
timer = setInterval(nextPage, 5000); // Change page every 5 seconds
}

// Show initial page and start timer


showPage(currentPageIndex);
startTimer();
</script>
</body>
</html>

You might also like