ezine2/index.html at main · venusflytrapfairy/ezine2 · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>The Riot Collective</title>
  <style>
    /* Add any custom CSS styles here */
    body {
      margin: 0;
      overflow: hidden;
    }
    #container {
      width: 100%;
      height: 100vh;
      display: flex;
    }
    #flipbook {
      width: 70%; /* Increase the width to make the flipbook larger */
      height: 100%;
      display: flex;
      perspective: 1000px;
      position: relative;
    }
    .page {
      width: 100%; /* Each page takes 100% width of the flipbook container */
      height: 100%; /* Each page takes 100% height of the flipbook container */
      display: flex;
      justify-content: center;
      align-items: center;
      backface-visibility: hidden;
      transition: transform 1s;
      position: absolute;
      opacity: 0; /* Hide all pages initially */
    }
    #page1 {
      /* Show only the first page initially */
      opacity: 1;
    }
    .page img {
      max-width: 100%;
      max-height: 100%;
    }
    #commentSection {
      width: 30%; /* Reduce the width of the comment section to accommodate the larger flipbook */
      padding: 20px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
    }
    #commentSection h2 {
      margin-top: 0;
    }
    #commentSection textarea {
      width: 100%;
      height: 100px;
      margin-bottom: 10px;
    }
    #commentSection button {
      display: block;
      margin-bottom: 10px;
    }
    .like-button {
      background-color: #007bff;
      color: white;
      border: none;
      padding: 5px 10px;
      cursor: pointer;
    }
    .like-count {
      display: inline-block;
      margin-left: 5px;
    }
    #commentsContainer {
      max-height: 200px; /* Add a maximum height to the container to limit the comments' height */
      overflow-y: auto; /* Add a scrollbar when the comments exceed the container's height */
    }
  </style>
</head>
<body>
  <!-- Create a container for the flipbook and comment section -->
  <div id="container">
    <!-- Flipbook -->
    <div id="flipbook">
      <!-- Pages will be dynamically added here -->
      <div class="page" id="page1">
        <!-- Content for Page 1 -->
        <img src="Cover.png" alt="Page 1">
      </div>
      <div class="page" id="page2">
        <!-- Content for Page 2 -->
        <img src="pg1.png" alt="Page 2">
      </div>
      <div class="page" id="page3">
        <!-- Content for Page 3 -->
        <img src="playlist.png" alt="Page 3">
      </div>
      <!-- Add more .page div elements with content for additional pages -->
      <!-- Remaining pages with random image URLs (replace placeholders with actual URLs) -->
      <div class="page">
        <!-- Content for Page 4 -->
        <img src="https://via.placeholder.com/800x600" alt="Page 4">
      </div>
      <div class="page">
        <!-- Content for Page 5 -->
        <img src="https://via.placeholder.com/800x600" alt="Page 5">
      </div>
      <!-- Continue adding more pages individually -->

      <!-- Continue adding all 28 pages -->
    </div>

    <!-- Comment Section -->
    <div id="commentSection">
      <h2>Comments</h2>
      <button class="like-button" onclick="likePost()">Like</button>
      <span class="like-count">0 Likes</span>
      <textarea id="commentInput" placeholder="Leave a comment"></textarea>
      <button onclick="submitComment()">Submit Comment</button>
      <div id="commentsContainer">
        <!-- Container for comments -->
        <div id="commentsList">
          <!-- Comments will be dynamically added here -->
        </div>
      </div>
    </div>
  </div>

  <script>
    // JavaScript to add flipbook functionality
    const flipbook = document.getElementById("flipbook");
    const pages = document.querySelectorAll(".page");
    let currentPage = 0;

    // Function to flip the pages
    function flipPages() {
      pages[currentPage].style.transform = "rotateY(180deg)";
      pages[currentPage].style.opacity = "0"; // Hide the current page
      currentPage = (currentPage + 1) % pages.length;
      pages[currentPage].style.transform = "rotateY(0deg)";
      pages[currentPage].style.opacity = "1"; // Show the next page
    }

    // Add a click event listener to each page
    pages.forEach(page => {
      page.addEventListener("click", flipPages);
    });

    // Comment Section
    function submitComment() {
      const commentInput = document.getElementById("commentInput");
      const commentText = commentInput.value.trim();

      if (commentText !== "") {
        const commentList = document.getElementById("commentsList");
        const commentElement = document.createElement("div");
        commentElement.textContent = commentText;
        commentList.appendChild(commentElement);
        commentInput.value = "";
      }
    }

    // Like Button
    let likeCount = 0;
    const likeButton = document.querySelector(".like-button");
    const likeCountElement = document.querySelector(".like-count");

    function likePost() {
      likeCount++;
      likeCountElement.textContent = `${likeCount} Likes`;
    }
  </script>
</body>
</html>