Intractive-Book-Serverless-Hosting/index.html at main · Nobodycod4/Intractive-Book-Serverless-Hosting · 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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- Mobile Redirection Script -->
    <script>
        (function() {
            const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
                          || window.innerWidth <= 768;

            if (isMobile && !window.location.pathname.includes('mobile.html')) {
                window.location.href = 'mobile.html';
            }
        })();
    </script>
    <!-- <script src="Load-Your-Analytics-Script-Here [ Optional ]"></script> -->

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <title>Online Book</title>
    <link rel="icon" type="image/x-icon" href="fav_icon">

    <!-- Catalyst SDK - MUST BE LOADED FIRST -->
    <script src="https://static.zohocdn.com/catalyst/sdk/js/4.5.0/catalystWebSDK.js"></script>
    <script src="/__catalyst/sdk/init.js"></script>

    <!-- Load jQuery -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

    <!-- Then load turn.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/turn.js/3/turn.min.js"></script>

    <!-- Link to CSS -->
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <!-- Mobile Welcome Message Overlay -->
    <div class="mobile-welcome-overlay" id="mobileWelcome">
        <div class="mobile-welcome-content">
            <h2>📖 Welcome to Novel November!</h2>
            <div class="welcome-instructions">
                <div class="instruction-item">
                    <span class="instruction-icon">🔄</span>
                    <p><strong>Tap left/right</strong> sides of the page to navigate</p>
                </div>
                <div class="instruction-item">
                    <span class="instruction-icon">⬅️➡️</span>
                    <p>Use the <strong>arrow buttons</strong> at the bottom</p>
                </div>
                <div class="instruction-item">
                    <span class="instruction-icon">📱</span>
                    <p>Click the <strong>fullscreen button</strong> (top right) for best experience</p>
                </div>
            </div>
            <button class="got-it-btn" id="gotItBtn">Got it! Let's Read →</button>
        </div>
    </div>

    <!-- Fullscreen Toggle Button -->
    <button class="fullscreen-btn" id="fullscreenBtn" title="Toggle Fullscreen">
        <svg class="fullscreen-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/>
        </svg>
        <svg class="exit-fullscreen-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3"/>
        </svg>
    </button>


<!-- DISCUSSION BUTTON -->
<button class="floating-discussion-btn" id="floatingDiscussionBtn" title="Discussion">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
        <path d="M8 10h.01M12 10h.01M16 10h.01"/>
    </svg>
    <span class="discussion-badge" id="discussionBadge">0</span>
</button>

<!-- MODERN DISCUSSION PANEL -->
<div class="discussion-panel" id="discussionPanel">
    <div class="discussion-container">
        <!-- Header -->
        <div class="discussion-header">
            <button class="discussion-close" id="discussionClose">✕</button>
            <h2 id="discussionTitle">Chapter Discussion</h2>
            <div class="discussion-meta">
                <span>📖 <span id="chapterName">Chapter 1</span></span>
                <span>💬 <span id="discussionCount">0 responses</span></span>
            </div>
        </div>

        <!-- Discussion Content -->
        <div class="discussion-content">
            <!-- Prompt Box -->
            <div class="discussion-prompt">
                <h3>💭 Share your thoughts</h3>
                <p id="discussionPrompt">What did you think about this chapter? Share your insights, questions, or favorite moments!</p>
            </div>

            <!-- New Response Form -->
            <div class="new-response-form">
                <div class="form-header">
                    <div class="user-avatar-large" id="responseAvatar">JD</div>
                    <div class="form-info">
                        <h4 id="responseUserName">Your Response</h4>
                        <p>Share your perspective on this chapter</p>
                    </div>
                </div>
                <textarea
                    id="responseTextarea"
                    class="response-textarea"
                    placeholder="What are your thoughts? Be thoughtful and constructive..."
                    maxlength="1000"
                ></textarea>
                <div class="form-actions">
                    <span class="char-counter" id="responseCharCount">0 / 1000</span>
                    <button class="btn-post-response" id="btnPostResponse" disabled>
                        Post Response
                    </button>
                </div>
            </div>

            <!-- Responses List -->
            <div class="responses-section">
                <div class="responses-header">
                    <h3>Recent Responses</h3>
                    <span class="responses-count" id="responsesCountDisplay">0</span>
                </div>
                <div id="responsesList" class="responses-list">
                    <!-- Responses will be inserted here dynamically -->
                </div>
            </div>
        </div>
    </div>
</div>
    <!-- Hamburger Menu -->
    <div class="hamburger" id="hamburger">
        <span></span>
        <span></span>
        <span></span>
    </div>

    <div class="container">
        <!-- Left Sidebar -->
        <aside class="sidebar" id="sidebar">
            <div class="sidebar-header">
                <div class="novel-box">
                    <img src="https://imgs-development.zohostratus.in/zs_logo.png" alt="Logo" class="novel-logo">
                    <h1>Made by Aathithyan V L</h1>
                </div>
            </div>

            <div class="sidebar-content">
                <div class="sidebar-section">
                    <h3>Chapters</h3>
                    <div id="chapterNav">
                        <!-- Dynamically generated chapter links -->
                    </div>
                </div>
            </div>
        </aside>

        <!-- Main Content Area -->
        <div class="main-content">
            <!-- Book Area -->
            <div class="book-wrapper" id="bookWrapper">

                <!-- Touch zones for page navigation -->
                <div class="touch-zone touch-zone-left" id="touchZoneLeft"></div>
                <div class="touch-zone touch-zone-right" id="touchZoneRight"></div>

                <div id="magazine">
                    <!-- Pages will be dynamically generated -->
                </div>
            </div>

            <!-- Navigation Controls -->
            <div class="nav-controls">
                <button id="prevBtn">← Previous</button>
                <span id="page-number"></span>
                <button id="nextBtn">Next →</button>
            </div>
        </div>
    </div>

    <!-- Load Scripts -->
    <script src="config.js"></script>
    <script src="bookContent.js"></script>
    <script src="main.js"></script>
    <button id="notifyNewChapter" style="display:none; position:fixed; bottom:20px; right:20px; z-index:9999; padding:10px 20px; background:#4CAF50; color:white; border:none; border-radius:5px; cursor:pointer;">📢 Notify New Chapter</button>
</body>
</html>