Tuesday, May 7, 2024

ગુજરાતી ટેક્સ્ટ-ટુ-સ્પીચ પ્લેઅર

Books 📚

Html code

<!DOCTYPE html>
<html>
<head>

.book {
display: flex;
margin: auto;
width: 300px;
/*1* let pointer event go trough pages of lower Z than .book */
pointer-events: none;
transform-style: preserve-3d;
transition: translate 1s;
translate: calc(min(var(--c), 1) * 50%) 0%;
/* DEMO ONLY: incline on the X axis for pages preview */
rotate: 1 0 0 30deg;
}

.page {
--thickness: 5;
/* PS: Don't go below thickness 0.4 or the pages might transpare */
flex: none;
display: flex;
width: 100%;
/*1* allow pointer events on pages */
pointer-events: all;
user-select: none;
transform-style: preserve-3d;
border: 1px solid #0008;
transform-origin: left center;
transition:
transform 1s,
rotate 1s ease-in calc((min(var(--i), var(--c)) - max(var(--i), var(--c))) * 50ms);
translate: calc(var(--i) * -100%) 0px 0px;
transform: translateZ( calc((var(--c) - var(--i) - 0.5) * calc(var(--thickness) * 1px)));
rotate: 0 1 0 calc(clamp(0, var(--c) - var(--i), 1) * -180deg);
}

.page img {
width: 100%;
height: 100%;
object-fit: cover;
}

.front,
.back {
flex: none;
width: 100%;
padding: 2rem;
backface-visibility: hidden;
background-color: #fff;
/* Fix backface visibility Firefox: */
translate: 0px;
}

.back {
background-image: linear-gradient(to right, #fff 80%, #ddd 100%);
translate: -100% 0;
rotate: 0 1 0 180deg;
}

</style>
</head>
<body>

const flipBook = (elBook) => {
elBook.style.setProperty("--c", 0); // Set current page
elBook.querySelectorAll(".page").forEach((page, idx) => {
    page.style.setProperty("--i", idx);
    page.addEventListener("click", (evt) => {
      const curr = evt.target.closest(".back") ? idx : idx + 1;
      elBook.style.setProperty("--c", curr);
    });
});
};

document.querySelectorAll(".book").forEach(flipBook);
</script>

</body>
</html>

Books

My example Website

Lorem ipsum 1

Lorem ipsum dolor sit amet,
consetetur sadipscing elitr,

sed diam nonumy eirmod tempor
invidunt ut labore et dolore

magna aliquyam erat, sed diam
voluptua. At vero eos et accusam

et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea

takimata sanctus est Lorem ipsum
dolor sit amet. Lorem ipsum dolor

sit amet
Back

Poetry Collection

Lorem ipsum book

E-book number 1

Open

Lorem ipsum 3

Lorem ipsum 2

Lorem ipsum 5

Lorem ipsum 4

Lorem ipsum 7

Lorem ipsum 6

End of the book Back

Lorem ipsum 8

Text 26

With ❤️ by Nidhanshu Sharma

text 12

text 11

text 10

text 9

text 8

text 7

text 6

text 5

text 4

text 3

text 2

text 1

📖

Html code

<!DOCTYPE html>
<html>
<head>

}
</style>
</head>
<body>
<div class="book-section">
       <p>With ❤️ by <a href="https://github.com/nidhanshusharma" target="_blank">Nidhanshu Sharma</a></p>
        <div class="container">
           <div class="right">
                <figure class="back"><p>text 12</p></figure>
                <figure class="front" id="cover">
                    <p>text 11</p>
                </figure>
            </div>
            <div class="right">
                <figure class="back"><p>text 10</p></figure>
                <figure class="front" id="cover">
                    <p>text 9</p>
                </figure>
            </div>
            <div class="right">
                <figure class="back"><p>text 8</p></figure>
                <figure class="front" id="cover">
                    <p>text 7</p>
                </figure>
            </div>
            <div class="right">
                <figure class="back"><p>text 6</p></figure>
                <figure class="front" id="cover">
                    <p>text 5</p>
                </figure>
            </div>
            <div class="right">
                <figure class="back"><p>text 4</p></figure>
                <figure class="front" id="cover">
                    <p>text 3</p>
                </figure>
            </div>
            <div class="right">
                <figure class="back"><p>text 2</p></figure>
                <figure class="front" id="cover">
                    <p>text 1</p>
                </figure>
            </div>
        </div>
        <button onclick="turnLeft()">Prev</button> <button onclick="turnRight()">Next</button>

</div>

</body>
</html>

Text 25

Flipbook

Page 1 Content

Page 2 Content

Html code

<div id="flipbook-container">

<button id="prev-btn">Previous</button>


<span id="page-number">1</span>


<button id="next-btn">Next</button>


<input type="range" id="page-slider" min="1" max="40" value="1">


<div class="page">Page 1 Content</div>
<div class="page">Page 2 Content</div>

</div>

</body>
</html>

Text 24

Flipbook

Page 1

Page 2

Html code

<!DOCTYPE html>

<head>

<title>Flipbook</title>

<style>

/* Style for flipbook container */

.flipbook {

width: 100%;

height: auto;

overflow: hidden;

position: relative;

}

/* Style for pages */

.page {

width: 100%;

height: auto;

display: none;

}

/* Style for active page */

.active {

display: block;

}

</style>

</head>

<body>

</div>

<button onclick="prevPage()">Previous</button>

// JavaScript functions for controlling flipbook

let currentPage = 1;

const totalPages = 40;

const pageSlider = document.getElementById("pageSlider");

const pageNumber = document.getElementById("pageNumber");

function prevPage() {

if (currentPage > 1) {

currentPage--;

updatePage();

}

function nextPage() {

if (currentPage < totalPages) {

currentPage++;

updatePage();

}

function goToPage(page) {

currentPage = parseInt(page);

updatePage();

}

function updatePage() {

const pages = document.querySelectorAll(".page");

pages.forEach(page => page.classList.remove("active"));

pages[currentPage - 1].classList.add("active");

pageSlider.value = currentPage;

pageNumber.innerText = currentPage;

}

</script>

</body>

</html>

Text 23

Flipbook

Page 1 Content

Page 2 Content

HTML code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flipbook</title>
<style>
/* Style for the flipbook container */
.flipbook-container {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    position: relative;
}
/* Style for the page content */
.page-content {
    height: 500px; /* Adjust as needed */
    border: 1px solid #ccc;
    background-color: #f0f0f0;
    display: none;
}
/* Style for the active page */
.page-content.active {
    display: block;
}
</style>
</head>
<body>
<div class="flipbook-container">

<button id="prevBtn">Previous</button>

<input type="range" id="pageSlider" min="1" max="40" value="1" step="1">

<button id="nextBtn">Next</button>

<div class="page-content active" id="page1">
    Page 1 Content
</div>


<div class="page-content" id="page2">
    Page 2 Content
</div>

</div>
<script>
// Get elements
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
const pageSlider = document.getElementById('pageSlider');

// Add event listeners
prevBtn.addEventListener('click', goToPreviousPage);
nextBtn.addEventListener('click', goToNextPage);
pageSlider.addEventListener('input', goToPage);

// Function to navigate to previous page
function goToPreviousPage() {
    const currentPage = parseInt(pageSlider.value);
    if (currentPage > 1) {
      pageSlider.value = currentPage - 1;
      showPage(currentPage - 1);
    }
}

// Function to navigate to next page
function goToNextPage() {
    const currentPage = parseInt(pageSlider.value);
    if (currentPage < 40) {
      pageSlider.value = currentPage + 1;
      showPage(currentPage + 1);
    }
}

// Function to navigate to a specific page
function goToPage() {
const pageNumber = parseInt(pageSlider.value);
showPage(pageNumber);
}

// Function to show a specific page
function showPage(pageNumber) {
    // Hide all pages
    const pages = document.querySelectorAll('.page-content');
    pages.forEach(page => page.classList.remove('active'));
    // Show the selected page
    const selectedPage = document.getElementById('page' + pageNumber);
    if (selectedPage) {
      selectedPage.classList.add('active');
    }
}
</script>
</body>
</html>

Text 22

Flipbook

Html code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flipbook</title>
<style>
.container {
    width: 100%;
    text-align: center;
}
.page {
    width: 100%;
    height: 500px; /* Adjust height as needed */
    background-color: lightgray;
    display: none;
}
#currentPage {
    margin-top: 10px;
}
</style>
</head>
<body>

<div class="container">
<button onclick="prevPage()">Previous</button>
<span id="currentPage">1</span>
<input type="range" id="pageSlider" min="1" max="10" value="1" onchange="changePage()">
<button onclick="nextPage()">Next</button>
</div>

function showPage(pageNum) {
    document.querySelectorAll('.page').forEach(page => {
      page.style.display = 'none';
    });
    document.getElementById(`page${pageNum}`).style.display = 'block';
    document.getElementById('currentPage').textContent = pageNum;
    document.getElementById('pageSlider').value = pageNum;
}

function nextPage() {
    if (currentPage < totalPages) {
      currentPage++;
      showPage(currentPage);
    }
}

function prevPage() {
    if (currentPage > 1) {
      currentPage--;
      showPage(currentPage);
    }
}

function changePage() {
currentPage = parseInt(document.getElementById('pageSlider').value);
showPage(currentPage);
}

showPage(currentPage);
</script>

</body>
</html>

Html teg

Pages

Html

Pages

Tuesday, May 7, 2024

Audio player

ગુજરાતી ટેક્સ્ટ-ટુ-સ્પીચ પ્લેઅર

Text

Gujarati Text-to-Speech Player

Books 📚

Books

Lorem ipsum 1

Poetry Collection

Lorem ipsum book

E-book number 1

Lorem ipsum 3

Lorem ipsum 2

Lorem ipsum 5

Lorem ipsum 4

Lorem ipsum 7

Lorem ipsum 6

Lorem ipsum 8

Text 26

Text 25

Text 24

Text 23

Text 22