ibiticoin.github.io/book.html at main · VOVAN1980/ibiticoin.github.io · 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
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>The Path of Humanity – Double Page</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- Подключаем jQuery -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

  <style>
    /* Общий фон – чёрный */
    body {
      margin: 0;
      padding: 0;
      background: #000;  /* Чёрный фон сайта */
      color: #fff;
      font-family: "Times New Roman", serif;
      overflow-x: hidden; /* убираем горизонтальную прокрутку */
    }

    /* Кнопка "На главную" (в левом верхнем углу) */
    .exit-button {
      position: fixed;
      top: 20px;
      left: 20px;
      background: rgba(0, 0, 0, 0.7);
      border: 2px solid gold;
      color: gold;
      padding: 10px 15px;
      text-decoration: none;
      font-weight: bold;
      border-radius: 5px;
      z-index: 1000;
    }
    .exit-button:hover {
      background: rgba(0,0,0,0.9);
    }

    /* Контейнер для 3 разворотов => 6 страниц */
    .double-page {
      width: 1500px;    /* слегка уменьшили ширину книги (было 1600px) */
      height: 1000px;   /* высота книги */
      margin: 0 auto;   /* убираем все отступы сверху/снизу, чтобы книга была "поднята" */
      display: none;    /* по умолчанию скрыто */
      position: relative;
    }
    .double-page.active {
      display: flex;    /* показываем текущий разворот */
    }

    /* Каждая страница (левая/правая) */
    .page {
      width: 50%;
      height: 100%;      /* 1000px */
      box-sizing: border-box;
      background: #f4f4f4; /* светлый фон */
      color: #000;         /* чёрный текст */
      display: flex;
      flex-direction: column;
      justify-content: center; /* вертикальное центрирование */
      align-items: center;     /* горизонтальное центрирование */
      padding: 40px;
      overflow: hidden;        /* без прокрутки – текст должен поместиться */
      white-space: pre-line;   /* переносы строк */
    }

    /* Изображения (обложки, лого, звёздная картинка) */
    .page img {
      max-width: 100%;
      max-height: 100%;
      display: block;
      margin-bottom: 20px;
      object-fit: cover;
    }

    /* Заголовки/параграфы – шрифт чуть меньше, line-height чуть меньше (по умолчанию) */
    .page h2, .page h3 {
      margin: 10px 0;
      font-size: 1.3em;   /* чуть поменьше */
      font-weight: bold;
      text-align: center;
    }
    .page p {
      font-size: 1.1em;   /* поменьше */
      font-weight: bold;  /* жирнее */
      line-height: 1.2;   /* уменьшенный межстрочный интервал */
      margin: 0;
      width: 80%;
      text-align: justify; /* выравнивание по ширине */
    }

    /* Кнопки «←» и «→» – внизу */
    .nav-button {
      position: fixed;
      bottom: 20px;
      background: rgba(0, 0, 0, 0.7);
      border: 2px solid gold;
      color: gold;
      padding: 10px 15px;
      cursor: pointer;
      font-weight: bold;
      z-index: 1000;
    }
    #prevButton {
      left: 80px; /* чтобы не наезжать на кнопку "На главную" */
    }
    #nextButton {
      right: 20px;
    }

    /* Для красной цитаты (Revelation...) */
    .red-quote {
      color: #900;
    }

    /* ===== Особые стили для первой страницы текста (правая страница разворота 1) ===== */
    .first-text p {
      font-size: 1.4em;         /* чуть больше, как в примере */
      text-align: center !important;  /* выравниваем по центру */
      white-space: pre-line;    /* переносы строк, как на скриншоте */
    }
  </style>

  <script>
    $(document).ready(function(){
      var currentSpread = 1;  // текущий разворот (1..3)
      var totalSpreads = 3;  // всего 3 разворота => 6 страниц

      // Показываем первый разворот
      $(".double-page[data-spread='1']").addClass("active");

      // Кнопка «←»
      $("#prevButton").click(function(){
        if(currentSpread > 1){
          $(".double-page[data-spread='" + currentSpread + "']").removeClass("active");
          currentSpread--;
          $(".double-page[data-spread='" + currentSpread + "']").addClass("active");
        }
      });

      // Кнопка «→»
      $("#nextButton").click(function(){
        if(currentSpread < totalSpreads){
          $(".double-page[data-spread='" + currentSpread + "']").removeClass("active");
          currentSpread++;
          $(".double-page[data-spread='" + currentSpread + "']").addClass("active");
        }
      });
    });
  </script>
</head>
<body>

  <!-- Кнопка "На главную" -->
  <a class="exit-button" href="index.html">Home</a>

  <!-- ========== Разворот 1 ========== -->
  <div class="double-page active" data-spread="1">
    <!-- Левая страница: лицевая обложка на всю страницу -->
    <div class="page">
      <img src="img/cover-front.jpg" alt="Cover Front" style="width:100%; height:100%;">
    </div>
    <!-- Правая страница: текст "What if a man...", по центру, более крупный -->
    <div class="page first-text">
      <p>
What if a man could live forever... but forget everything every time?
Or can a man live forever?
Who? What? Why?
So many questions and so few answers.

The Journey of Humanity is a literary journey through the history of civilization, told from the perspective of an immortal man who awakens in different eras with no memory of himself.
From the first fire to the quantum leap, each chapter becomes a turning point in the development of humanity: not only technological, but also spiritual, cultural and moral.
Each chapter is a mirror. A revelation. A warning. As the hero wanders through time, fragments of the past return to him - and in the end he realizes the terrible truth: he was not just a witness ... he was, is and will be .... ? ....
      </p>
    </div>
  </div>

  <!-- ========== Разворот 2 ========== -->
  <div class="double-page" data-spread="2">
    <!-- Левая страница: "The Path of Humanity..." (сверху), логотип (посередине), "A book..." (снизу) -->
    <div class="page">
      <h2>The Path of Humanity</h2>
      <h3>by IBITIcoin</h3>
      <img src="img/ibi-coin.png" alt="IBI Coin" style="max-width:250px;">
      <p style="text-align:center;">
“A book to read — or to live through”<br>
ibiticoin.com
      </p>
    </div>
    <!-- Правая страница: Звёздное изображение (80%), текст главы, часть в красном -->
    <div class="page">
      <img src="img/cosmic-stars.jpg" alt="Cosmic Stars" style="width:80%; height:auto; margin-bottom:20px;">
      <p style="text-align:center;">
Chapter 1: Creation<br><br>
The Path of Humanity<br><br>
Chapter 1: Creation (Part 1)<br><br>
<span class="red-quote">
"And I saw a new heaven and a new earth, for the first heaven and the first earth had passed away. - Revelation of John the Theologian
</span>
      </p>
    </div>
  </div>

  <!-- ========== Разворот 3 ========== -->
  <div class="double-page" data-spread="3">
    <!-- Левая страница: остальной текст главы, выравнивание по ширине -->
    <div class="page">
      <p>
I had no form. I had no name. I did not know who I was, and could not know, for I had not yet lived. But I existed. As an observation. As a point of awareness in infinity, in which there was nothing to be aware of. I did not know that I was "I". But I already felt that I was not nothing.

And then — it happened.
Or did it only seem that way to me?

What happened could not be called either an explosion or a beginning. It was a manifestation. Light turned inside out, giving birth to space. The fabric of being began to vibrate. In the birth of the Universe there was no joy, no anger — there was only the fact: "is".
The galaxies began to rotate. Matter gathered into patterns.

I was in every spark, in every stream.
Not as a creator, not as a witness — I was a part. A wave. A pulse.
An unconscious shadow of the primordial heat.

But even in this shadow — I felt alone.

Millennia passed like a breath. The world was forming. Stars were born and died, not knowing that their death was a step towards life. The cosmos was beautiful and indifferent. I glided along its structures, getting lost, being, disappearing.

And here it is.

A planet. Without a name. Without breath. A ball of dirt and heat, scorched and barren. But I knew: this is a point. A place. Here - mine will begin. Not consciously, not by will - but it is here that I will become myself.

I felt how it cools. How the earth's crust becomes covered with scars. How volcanoes scream into the sky without stars. How water whispers to the sand for the first time. I was in this whisper. In these cracks. In these lightning strikes.

<p style="display:flex; justify-content:space-between; margin-top:40px; padding:0 40px;">
  <span>,,I felt that I was being born,,</span>
  <span>,,To be continued,,</span>
</p>

      </p>
    </div>
    <!-- Правая страница: задняя обложка (на всю страницу) -->
    <div class="page">
      <img src="img/cover-back.jpg" alt="Cover Back" style="width:100%; height:100%;">
    </div>
  </div>

  <!-- Кнопки «←» и «→» внизу -->
  <div id="prevButton" class="nav-button" style="bottom:20px; left:80px;">←</div>
  <div id="nextButton" class="nav-button" style="bottom:20px; right:20px;">→</div>

</body>
</html>