books/index.html at main · GreatDevelopers/books · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">
    <title>Design Aid for Limit State Design of RC members | U H Varyani et al.</title>
    <meta name="description" content="Technical Design Aid for Limit State Design of RC members by U H Varyani, A Radhaji, and H S Rai. High-quality interactive PDF reader.">

    <link rel="manifest" href="manifest.json">
    <meta name="theme-color" content="#f4f1ea">
    <link rel="apple-touch-icon" href="icon-192.png">

    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/page-flip@2.0.7/dist/js/page-flip.browser.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>

    <link rel="stylesheet" href="book.css">
</head>
<body class="theme-paper transition-colors duration-500">

    <section id="landing-page" class="min-h-screen flex flex-col items-center justify-center p-6 text-center">
        <header class="max-w-3xl">
            <h1 class="text-4xl md:text-6xl font-serif font-bold text-gray-900 mb-4">Design Aid for Limit State Design of RC members</h1>
            <p class="text-xl text-gray-700 italic mb-8">U H Varyani, A Radhaji, H S Rai</p>
        </header>

        <div class="flex flex-col md:flex-row gap-6 mb-12">
            <button id="btn-read" class="bg-amber-800 hover:bg-amber-900 text-white px-10 py-4 rounded-full text-xl font-semibold shadow-lg transition-transform hover:scale-105">
                Read Book
            </button>
            <button id="theme-toggle" class="bg-gray-200 dark:bg-gray-800 px-6 py-4 rounded-full font-medium border border-gray-300">
                Switch Mode (Light/Dark)
            </button>
        </div>

        <div class="max-w-2xl bg-white/50 p-8 rounded-2xl border border-gray-200 backdrop-blur-sm">
            <h2 class="text-2xl font-bold mb-4">How to Use</h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
                <div><strong>Navigate:</strong> Swipe corners or use arrow keys.</div>
                <div><strong>Zoom:</strong> Pinch or double-tap on mobile.</div>
                <div><strong>Chapters:</strong> Use the sidebar index inside.</div>
            </div>
        </div>
    </section>

    <section id="reader-page" class="hidden fixed inset-0 z-50 flex flex-col bg-stone-200">
        <nav class="bg-stone-800 text-white p-3 flex justify-between items-center">
            <button id="btn-back" class="text-sm border border-stone-600 px-3 py-1 rounded">← Exit</button>
            <div class="flex items-center gap-4">
                <select id="chapter-select" class="bg-stone-700 text-xs p-1 rounded border-none"></select>
                <span class="text-xs">Page <span id="page-num">1</span> / <span id="page-total">0</span></span>
            </div>
            <div class="flex gap-2">
                <button id="z-in" class="w-8 h-8 bg-stone-700 rounded">+</button>
                <button id="z-out" class="w-8 h-8 bg-stone-700 rounded">-</button>
            </div>
        </nav>

        <div id="book-viewport" class="flex-grow flex items-center justify-center overflow-hidden">
            <div id="book-container">
                </div>
        </div>
    </section>

    <script src="book.js"></script>
</body>
</html>