<!DOCTYPE html>
<html lang="bg">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Book Page Flip</title>
    <link rel="stylesheet" href="styles.css">
    <style>
        body, html {
            height: 100%;
            margin: 0;
            background-color: #fffeff; /* Промяна на фона на бял */
        }
        .navbar {
            margin: 20px;
            display: flex;
            justify-content: center; /* Центриране на бутоните */
        }
        .navbar a {
            text-decoration: none;
            color: black;
            font-size: 14px;
            padding: 5px 10px; /* Намаляване на разстоянието на височина */
            display: inline-block;
            border-right: 1px solid #ccc; /* Оставяне само на дясната и долната граница */
            border-bottom: 1px solid #ccc;
            background-color: #fefefe;
            box-shadow: 2px 2px 1px #ebebe0;
            letter-spacing: -0.5px; /* Намаляване на разстоянието между буквите */
            line-height: 1.2; /* Намаляване на разстоянието между линиите */
            margin: 3px; /* Намаляване на разстоянието между бутоните */
        }
        .navbar a:hover {
            color: #0000A0;
        }
        .book {
            position: relative;
            width: 90%;
            height: calc(100vh - 80px); /* Adjust height to fit within viewport */
            perspective: 2000px;
        }
        .page {
            position: absolute;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.8); /* Промяна на фона на бял */
            border: 1px solid #ccc;
            box-shadow: 0 0 5px rgba(0,0,0,0.3);
            transform-origin: top left;
            transform-style: preserve-3d;
            transition: transform 1s ease-in-out;
            opacity: 0;
            visibility: hidden;
            background: repeating-linear-gradient(
                to bottom,
                rgba(0, 0, 0, 0.002),
                rgba(0, 0, 0, 0.1) 2px,
                transparent 2px,
                transparent 1cm
            );
        }
        .page.active {
            opacity: 1;
            visibility: visible;
            transform: rotateY(0deg);
            z-index: 2;
        }
        .page.flipped {
            transform: rotateY(-180deg) rotateX(0deg) rotateZ(0deg) scale(1);
            z-index: 1;
        }
        .content {
            width: 100%;
            height: 100%;
            background-color: #fffeff; /* Промяна на фона на бял */
        }
        .content iframe {
            width: 100%;
            height: 100%;
            border: none;
        }
    </style>
</head>
<body>
    <div class="navbar">
        <a href="javascript:void(0)" onclick="goToPage(1)"><i><b>Програмиране</b></i></a>
        <a href="javascript:void(0)" onclick="goToPage(2)"><i><b>MS Access</b></i></a>
        <a href="javascript:void(0)" onclick="goToPage(3)"><i><b>Шаблони за сайтове</b></i></a>
        <a href="javascript:void(0)" onclick="goToPage(4)"><i><b>Linux</b></i></a>
        <a href="javascript:void(0)" onclick="goToPage(5)"><i><b>Виртуализация</b></i></a>
        <a href="javascript:void(0)" onclick="goToPage(6)"><i><b>Компютърни мрежи</b></i></a>
    </div>
    <div class="book">
        <div class="page active" id="page1">
            <div class="content">
                <iframe src="https://www.programist.bg/programirane.html" name="targetframe1"></iframe>
            </div>
        </div>
        <div class="page" id="page2">
            <div class="content">
                <iframe src="https://www.programist.bg/acses/acses.html" name="targetframe2"></iframe>
            </div>
        </div>
        <div class="page" id="page3">
            <div class="content">
                <iframe src="temp.html" name="targetframe3"></iframe>
            </div>
        </div>
        <div class="page" id="page4">
            <div class="content">
                <iframe src="linux.html" name="targetframe4"></iframe>
            </div>
        </div>
        <div class="page" id="page5">
            <div class="content">
                <iframe src="https://www.programist.bg/virtual.html" name="targetframe5"></iframe>
            </div>
        </div>
        <div class="page" id="page6">
            <div class="content">
                <iframe src="mreji.html" name="targetframe6"></iframe>
            </div>
        </div>
    </div>
    <script>
        let currentPage = 1;
        const totalPages = 6;

        function goToPage(pageNumber) {
            for (let i = 1; i <= totalPages; i++) {
                const page = document.getElementById(`page${i}`);
                if (i === pageNumber) {
                    page.classList.add('active');
                    page.classList.remove('flipped');
                } else {
                    page.classList.remove('active');
                    page.classList.add('flipped');
                }
            }
            currentPage = pageNumber;
        }

        // Зареждане на първата страница по подразбиране
        document.addEventListener('DOMContentLoaded', () => {
            goToPage(1);
        });
    </script>
</body>
</html>