<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Non-Euclidian Sequencer | Chapter Terminal</title>
<style>
:root {
--bg-color: #050505;
--text-color: #ffb000;
--text-dim: #cc8d00;
--text-dimmer: #996a00;
--text-dimmest: #664700;
--gradient-start: #ffb000;
--gradient-end: #ff5500;
--font-main: 'Bookman Old Style', 'Georgia', serif;
--font-ja: 'Yu Mincho', 'Hiragino Mincho Pro', 'MS PMincho', serif;
--font-ar: 'Traditional Arabic', 'Arabic Typesetting', serif;
--line-height: 1.6;
--spacing-two-lines: 2.8rem;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
cursor: text;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
font-family: var(--font-main);
line-height: var(--line-height);
overflow-x: hidden;
width: 100vw;
min-height: 100vh;
padding: 20px;
position: relative;
}
/* CRT Effect */
body::before {
content: " ";
display: block;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
z-index: 100;
background-size: 100% 2px, 3px 100%;
pointer-events: none;
}
/* Main Title */
.main-title-container {
text-align: center;
margin-bottom: 30px;
padding-top: 20px;
position: sticky;
top: 0;
background: var(--bg-color);
z-index: 50;
padding-bottom: 10px;
}
.main-title {
font-size: 2rem;
font-weight: bold;
color: var(--text-color);
text-transform: uppercase;
letter-spacing: 6px;
display: inline-block;
}
.title-sequence {
font-size: 1.2rem;
color: var(--text-dim);
letter-spacing: 3px;
margin-left: 10px;
}
/* Header */
header {
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
margin-bottom: 30px;
padding-top: 20px;
border-bottom: 2px solid var(--text-dim);
padding-bottom: 20px;
position: relative;
z-index: 10;
flex-wrap: wrap;
}
.binary-digit {
font-size: 3rem;
font-weight: bold;
color: var(--text-dim);
transition: color 0.1s;
user-select: none;
position: relative;
cursor: pointer;
}
.binary-digit:hover {
color: var(--text-color);
text-shadow: 0 0 10px var(--text-color);
}
.binary-digit:active {
transform: scale(0.95);
}
.binary-digit.glitch-active {
animation: glitch-anim 0.3s infinite;
color: #ff0000;
}
.binary-digit.active {
color: var(--text-color);
text-shadow: 0 0 15px var(--text-color);
}
/* Digit 2 - Special Crazy Glitch */
.digit-2 {
color: #ff0066;
}
.digit-2:hover {
color: #ff00ff;
text-shadow: 0 0 20px #ff00ff, 0 0 40px #ff0066;
}
.digit-2.glitch-active {
animation: crazy-glitch 0.15s infinite;
color: #00ffff;
text-shadow: 2px 0 #ff00ff, -2px 0 #00ffff, 0 2px #ffff00, 0 -2px #ff0066;
}
/* Language Toggles */
.lang-switch {
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
}
.lang-btn {
background: transparent;
border: 2px solid var(--text-dim);
color: var(--text-dim);
padding: 6px 12px;
font-family: var(--font-main);
font-size: 0.9rem;
cursor: pointer;
transition: all 0.3s;
text-transform: uppercase;
}
.lang-btn:hover {
border-color: var(--text-color);
color: var(--text-color);
box-shadow: 0 0 10px var(--text-color);
}
.lang-btn.active {
background: var(--text-color);
color: var(--bg-color);
border-color: var(--text-color);
}
.lang-btn.glitch-active {
animation: glitch-anim 0.3s infinite;
background: #ff0000;
border-color: #ff0000;
color: #000;
}
/* Terminal Container */
#terminal {
max-width: 1200px;
margin: 0 auto;
position: relative;
z-index: 10;
font-size: 1.1rem;
padding-bottom: 100px;
}
/* Content Area - Hidden Initially */
#content-area {
opacity: 0;
transition: opacity 0.5s ease;
}
#content-area.visible {
opacity: 1;
}
/* Typography */
h1 {
font-size: 2.5rem;
margin-bottom: 30px;
text-transform: uppercase;
letter-spacing: 2px;
text-align: center;
}
.paragraph-block {
margin-bottom: 25px;
position: relative;
padding: 10px 0;
}
.line-lang {
display: block;
text-align: justify;
transition: opacity 0.3s ease;
}
.line-lang.hidden {
display: none;
}
.line-ru { color: var(--text-color); }
.line-en { color: var(--text-dim); margin-top: var(--spacing-two-lines); }
.line-ar {
color: var(--text-dimmer);
margin-top: var(--spacing-two-lines);
font-family: var(--font-ar);
font-size: 1.3rem;
direction: rtl;
text-align: right;
}
.line-ja {
color: var(--text-dimmest);
margin-top: var(--spacing-two-lines);
font-family: var(--font-ja);
line-height: 2;
}
.spacer {
height: 3rem;
display: block;
}
.gradient-text {
background: linear-gradient(90deg, var(--gradient-start), var(--gradient-end));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: bold;
display: inline-block;
position: relative;
transition: all 0.2s;
}
.gradient-text:hover {
animation: glitch-anim 0.2s;
filter: brightness(1.3);
}
.italic-text {
font-style: italic;
color: var(--text-dim);
}
/* Interactive Typo Style - Gradient Highlight */
.typo-char {
background: linear-gradient(90deg, #ff0066, #ff5500);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: bold;
cursor: pointer;
transition: all 0.3s;
display: inline-block;
animation: typo-pulse 1.5s ease-in-out infinite;
}
.typo-char:hover {
filter: brightness(1.5);
transform: scale(1.1);
text-shadow: 0 0 20px rgba(255, 85, 0, 0.5);
}
.typo-char.corrected {
animation: correct-flash 0.4s ease;
background: linear-gradient(90deg, #00ff88, #00ffcc);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
@keyframes typo-pulse {
0%, 100% { filter: brightness(1); }
50% { filter: brightness(1.3); }
}
@keyframes correct-flash {
0% { transform: scale(1.2); filter: brightness(2); }
50% { transform: scale(1); }
100% { transform: scale(1); filter: brightness(1); }
}
/* Cursor */
.cursor {
display: inline-block;
width: 10px;
height: 1.2rem;
background-color: var(--text-color);
animation: blink 1s step-end infinite;
vertical-align: middle;
margin-left: 5px;
}
.cursor.hidden {
display: none;
}
/* Scroll to Top Button */
.scroll-top {
position: fixed;
bottom: 30px;
right: 30px;
background: var(--bg-color);
border: 2px solid var(--text-color);
color: var(--text-color);
padding: 10px 20px;
font-family: var(--font-main);
font-size: 0.9rem;
cursor: pointer;
z-index: 100;
opacity: 0;
pointer-events: none;
transition: all 0.3s ease;
text-transform: uppercase;
}
.scroll-top.visible {
opacity: 1;
pointer-events: all;
}
.scroll-top:hover {
background: var(--text-color);
color: var(--bg-color);
box-shadow: 0 0 20px var(--text-color);
}
/* Progress Indicator */
.progress-container {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 3px;
background: var(--bg-color);
z-index: 100;
}
.progress-bar {
height: 100%;
background: linear-gradient(90deg, var(--gradient-start), var(--gradient-end));
width: 0%;
transition: width 0.3s ease;
}
/* Animations */
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
@keyframes glitch-anim {
0% { transform: translate(0) }
20% { transform: translate(-2px, 2px) }
40% { transform: translate(-2px, -2px) }
60% { transform: translate(2px, 2px) }
80% { transform: translate(2px, -2px) }
100% { transform: translate(0) }
}
@keyframes crazy-glitch {
0% { transform: translate(0) scale(1); filter: hue-rotate(0deg); }
10% { transform: translate(-5px, 5px) scale(1.1); filter: hue-rotate(90deg); }
20% { transform: translate(5px, -5px) scale(0.9); filter: hue-rotate(180deg); }
30% { transform: translate(-5px, -5px) scale(1.2); filter: hue-rotate(270deg); }
40% { transform: translate(5px, 5px) scale(0.8); filter: hue-rotate(0deg); }
50% { transform: translate(-3px, 3px) scale(1.1); filter: hue-rotate(120deg); }
60% { transform: translate(3px, -3px) scale(0.9); filter: hue-rotate(240deg); }
70% { transform: translate(-3px, -3px) scale(1.2); filter: hue-rotate(60deg); }
80% { transform: translate(3px, 3px) scale(0.8); filter: hue-rotate(300deg); }
90% { transform: translate(-2px, 2px) scale(1.05); filter: hue-rotate(150deg); }
100% { transform: translate(0) scale(1); filter: hue-rotate(0deg); }
}
/* Screen Glitch Overlay */
.screen-glitch {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
pointer-events: none;
z-index: 1000;
background: linear-gradient(90deg,
rgba(255,0,0,0.1) 0%,
transparent 20%,
rgba(0,255,0,0.1) 40%,
transparent 60%,
rgba(0,0,255,0.1) 80%,
transparent 100%);
opacity: 0;
transition: opacity 0.1s;
}
.screen-glitch.active {
opacity: 1;
animation: screen-glitch-anim 0.2s infinite;
}
@keyframes screen-glitch-anim {
0% { transform: translateX(-10px); }
50% { transform: translateX(10px); }
100% { transform: translateX(-10px); }
}
/* Start Prompt */
.start-prompt {
text-align: center;
padding: 50px 20px;
color: var(--text-dim);
font-size: 1.1rem;
letter-spacing: 2px;
animation: blink 2s step-end infinite;
}
/* Responsive */
@media (max-width: 768px) {
.main-title { font-size: 1.3rem; }
.title-sequence { font-size: 1rem; }
.binary-digit { font-size: 2rem; }
#terminal { font-size: 0.9rem; padding: 0 5px; }
h1 { font-size: 1.5rem; }
header { gap: 8px; }
.lang-btn { padding: 5px 10px; font-size: 0.8rem; }
.line-ar, .line-en, .line-ja { margin-top: 1.8rem; }
.line-ar { font-size: 1.1rem; }
.scroll-top { bottom: 20px; right: 20px; padding: 8px 15px; font-size: 0.8rem; }
}
@media (max-width: 480px) {
.main-title { font-size: 1rem; letter-spacing: 2px; }
.title-sequence { display: block; margin-left: 0; margin-top: 5px; }
.binary-digit { font-size: 1.5rem; }
.lang-switch { justify-content: center; }
.line-lang { text-align: left; }
.line-ar { text-align: right; }
}
</style>
</head>
<body>
<div class="main-title-container">
<div class="main-title" id="main-title">Non-Euclidian Sequencer</div>
<span class="title-sequence" id="title-sequence"></span>
</div>
<header>
<div class="binary-digit" id="digit-0" onclick="triggerDigitGlitch(this, 0)">0</div>
<div class="binary-digit" id="digit-1" onclick="triggerDigitGlitch(this, 1)">1</div>
<div class="binary-digit digit-2" id="digit-2" onclick="triggerDigitGlitch(this, 2)">2</div>
<div class="lang-switch">
<button class="lang-btn" id="btn-ru" onclick="selectLang('ru')">RU</button>
<button class="lang-btn" id="btn-en" onclick="selectLang('en')">EN</button>
<button class="lang-btn" id="btn-ar" onclick="selectLang('ar')">AR</button>
<button class="lang-btn" id="btn-ja" onclick="selectLang('ja')">JA</button>
</div>
</header>
<div class="screen-glitch" id="screen-glitch"></div>
<div id="terminal">
<div class="start-prompt" id="start-prompt">[ SELECT LANGUAGE TO INITIALIZE ]</div>
<div id="content-area"></div>
<span class="cursor hidden" id="cursor"></span>
</div>
<button class="scroll-top" id="scroll-top" onclick="scrollToTop()">; Scroll to Top</button>
<div class="progress-container">
<div class="progress-bar" id="progress-bar"></div>
</div>
<script>
// Content Data - EXACT text from KB Original Documents
const contentData = [
{
type: 'h1',
ru: "И Зажглось Солнце",
en: "And The Sun Ignited",
ar: ";;;;;; ;;;;;",
ja: ";;;;;;;;;;"
},
{ type: 'spacer' },
{
type: 'p',
ru: "Утро прожигает полигоны реальности: дым вьётся пляской стихии сигары - поддаётся потокам, и солнце увязает - лучами неспешности, в сюжетах элементарных частиц, сквозь линзу фотоувеличителя, танцем кончиков пальцев на печатной машинке.",
en: "Morning burns proving grounds of reality: smoke curls in elemental dance of cigar - yields to currents, and sun entangles - with rays of unhurriedness, in plots of elementary particles, through lens of photo-magnifier, dance of fingertips on typewriter.",
ar: ";;;;;; ;;;; ;;;;; ;;;;;;: ;;;;;; ;;;;;; ;; ;;;; ;;;; ;;;;;;; - ;;;;;; ;;;;;;;;; ;;;;;; ;;;;;; - ;;;;; ;; ;;;;;;; ;; ;;;;;; ;;;;;;;; ;;;;;;;; ;;; ;;;; ;;;;;; ;;;;;;; ;;;; ;;;;; ;;;;;;; ;;; ;;;;; ;;;;;;;.",
ja: ";;;;;;;;;;;;;;;;;;;;;;;;;;;; - ;;;;;;;;;;;;; - ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"
},
{
type: 'p',
ru: "1 1 0 1 1 0 0 - клавиатура делится на две стороны: левая - усыпана сотней клавиш-нулей, правая - одни единицы. Лучшее решение мира вне трансдуализма.",
en: "1 1 0 1 1 0 0 - keyboard divides into two sides: left - strewn with hundred zero-keys, right - ones only. Finest solution of world beyond transdualism.",
ar: "1 1 0 1 1 0 0 - ;;;; ;;;;;;;; ;;;;; ;;; ;;;;;;: ;;;;;; - ;;;; ;;;; ;;;;; ;;;; ;;;;;; - ;;;; ;;;. ;;;; ;; ;;;;;; ;;;; ;;;;;;;; ;;;;;;;;;.",
ja: "1 1 0 1 1 0 0 - ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; Ones ;;;;;;;;;;;;;;;;;;;;;;;;;;"
},
{
type: 'p',
ru: "На стойке препаратора, фотолинза увеличивает травинку: поры хлоропластов отдаются ласкам светила и взгляду печатника.",
en: "On stand of preparator, photo-lens magnifies blade of grass: pores of chloroplasts surrender to caresses of luminary and gaze of typesetter.",
ar: ";;; ;;;; ;;;;;;; ;;;;;; ;;;;;;; ;;;; ;;; ;;;;;: ;;;; ;;;;;;;;;;; ;;;;;;; ;;;;;; ;;;;;;; ;;;;;; ;;;; ;;;;;;.",
ja: ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"
},
{
type: 'p',
ru: "Зум: щетинки атомов пляшут танцем информации.",
en: "Zoom: bristles of atoms dance dance of information.",
ar: ";;;;;: ;;;;; ;;;;;; ;;;; ;;;; ;;;;;;;;;.",
ja: ";;;;;;;;;;;;;;;;;;;"
},
{
type: 'p',
ru: "Отдаление: паучки-нанороботы маршируют по квадратам: паутинки нерушимы.",
en: "Distance: nano-weavers march across squares: webs unbreakable.",
ar: ";;;;;: ;;;;;; ;;;;;; ;;;; ;;; ;;;;;;;;: ;;;;;;; ;;; ;;;;; ;;;;;.",
ja: ";;;;;;;;;;;;;;;;;;;;;;;;;;;"
},
{
type: 'p',
ru: "Зум на исходный код предмета:",
en: "Zoom to source code of object:",
ar: ";;;;; ;;; ;;;;; ;;;;;;; ;;;;;;:",
ja: ";;;;;;;;;;;;;;;;;;"
},
{ type: 'spacer' },
{
type: 'p',
segments: [
{ ru: "Цифра - ", en: "Digit - ", ar: ";;; - ", ja: ";; - ", style: "normal" },
{ ru: "1", en: "1", ar: "1", ja: "1", style: "gradient" },
{ ru: "- щёлк: рука вжимает правую клавишу.", en: "- click: hand presses right key.", ar: "- ;;;;: ;;;; ;;;; ;;;;;;; ;;;;;;.", ja: "- ;;;;;;;;;;;;;;;", style: "normal" }
]
},
{
type: 'p',
segments: [
{ ru: "Цифра - ", en: "Digit - ", ar: ";;; - ", ja: ";; - ", style: "normal" },
{ ru: "0", en: "0", ar: "0", ja: "0", style: "gradient" },
{ ru: "- щёлк: рука скользит по ландшафту левых клавиш.", en: "- click: hand glides across landscape of left keys.", ar: "- ;;;;: ;;;; ;;;;; ;;; ;;;;; ;;;;;;;; ;;;;;;.", ja: "- ;;;;;;;;;;;;;;;;;", style: "normal" }
]
},
{
type: 'p',
segments: [
{ ru: "Цифра - ", en: "Digit - ", ar: ";;; - ", ja: ";; - ", style: "normal" },
{ ru: "0", en: "0", ar: "0", ja: "0", style: "gradient" },
{ ru: "- щёлк: рука обращает равнины в холмы.", en: "- click: hand turns plains into hills.", ar: "- ;;;;: ;;;; ;;;; ;;;;;; ;;; ;;;;.", ja: "- ;;;;;;;;;;;;;;;;", style: "normal" }
]
},
{
type: 'p',
segments: [
{ ru: "Цифра - ", en: "Digit - ", ar: ";;; - ", ja: ";; - ", style: "normal" },
{ ru: "1", en: "1", ar: "1", ja: "1", style: "gradient" },
{ ru: "- щёлк: рука скользит к вершине мира.", en: "- click: hand glides to summit of world.", ar: "- ;;;;: ;;;; ;;;;; ;;; ;;; ;;;;;;.", ja: "- ;;;;;;;;;;;;;;;;", style: "normal" }
]
},
{
type: 'p',
segments: [
{ ru: "Цифра - ", en: "Digit - ", ar: ";;; - ", ja: ";; - ", style: "normal" },
{ ru: "0", en: "0", ar: "0", ja: "0", style: "gradient" },
{ ru: "- щёлк: рука утопает в океане.", en: "- click: hand drowns in ocean.", ar: "- ;;;;: ;;;; ;;;; ;; ;;;;;;.", ja: "- ;;;;;;;;;;;;;", style: "normal" }
]
},
{
type: 'p',
segments: [
{ ru: "Цифра - ", en: "Digit - ", ar: ";;; - ", ja: ";; - ", style: "normal" },
{ ru: "0", en: "0", ar: "0", ja: "0", style: "gradient" },
{ ru: "- щёлк: рука ласкает дно сладчайшей из впадин.", en: "- click: hand caresses bottom of sweetest abyss.", ar: "- ;;;;: ;;;; ;;;;; ;;; ;;;; ;;;;;;;;.", ja: "- ;;;;;;;;;;;;;;;;;;;;;", style: "normal" }
]
},
{
type: 'p',
segments: [
{ ru: "Цифра - ", en: "Digit - ", ar: ";;; - ", ja: ";; - ", style: "normal" },
{ ru: "1", en: "1", ar: "1", ja: "1", style: "gradient" },
{ ru: "- щёлк: рука приветствует вселенную.", en: "- click: hand greets universe.", ar: "- ;;;;: ;;;; ;;;; ;;;;;.", ja: "- ;;;;;;;;;;;;;;;", style: "normal" }
]
},
{ type: 'spacer' },
{
type: 'p',
ru: "Травинка оцифрована - дефрагментация: под линзу фотоувеличителя в страсти солнца - травинка теряет цвет, темнеет, выпускает стебель огня - и расщепляется в атомы пепла.",
en: "Blade of grass digitized - defragmentation: under lens of photo-magnifier in passion of sun - blade loses color, darkens, releases stem of fire - and shatters into atoms of ash.",
ar: ";;; ;;;;; ;;;; - ;;;;; ;;;;;;;: ;;; ;;;; ;;;;;; ;;;;;; ;; ;;; ;;;;; - ;;;;; ;;;; ;;;;;; ;;;;; ;;;; ;;; ;;;;; - ;;;;;; ;;; ;;;; ;; ;;;;;;.",
ja: ";;;;;;;;; - ;;;;;;;;;;;;;;;;;;;;;;;;; - ;;;;;;;;;;;;;;;;;;; - ;;;;;;;;;;;"
},
{
type: 'p',
ru: "Мулатка за машинкой отпила из чаши-лотоса: кофе оседает теплотой, сладостью и горечью, - триптихом по тоннелю пищевода. Массирует переносицу, поднимает заушники очков-овалов и проводит микрофиброй по обе стороны линз. Берет лист из машинки - и складывает в стопку подобных: автограф - Amanda - вечным пером внизу страницы нулей, единиц и нулей.",
en: "Woman behind machine drank from lotus-chalice: coffee settles with warmth, sweetness and bitterness, - triptych through tunnel of esophagus. Massages bridge of nose, lifts earpieces of oval-glasses and runs microfiber across both sides of lenses. Takes sheet from machine - and folds into stack of similar: autograph - Amanda - with eternal pen at bottom of page of zeros, ones and zeros.",
ar: ";;;;;; ;;; ;;;;; ;;;; ;; ;;; ;;;;;;: ;;;;;; ;;;;; ;;;;;; ;;;;;;;; ;;;;;;;; - ;;;;;; ;;; ;;; ;;;;;;. ;;;; ;;; ;;;;;; ;;;; ;;;;;; ;;;;;;;; ;;;;;;;;; ;;;;; ;;;;;;; ;;;;;;; ;;; ;;;;; ;;;;;;;. ;;;; ;;;;;; ;; ;;;;; - ;;;;;;; ;; ;;;; ;; ;;;;;;;: ;;;;; ;;;; - ;;;;;; - ;;;; ;;;; ;; ;;;; ;;;; ;;;;;;; ;;;;;;; ;;;;;;;;.",
ja: ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; - - ;;;;;;;;;;;;;;;;;; - ;;;; - ;;;;;;;;;;;;;;;;;;;;;;;"
},
{
type: 'p',
ru: "Камешек - от пары странников пустыни - в препаратор.",
en: "Pebble - from pair of wanderers of desert - into preparator.",
ar: ";;;; - ;; ;;; ;; ;;;;;; ;;;;;;; - ;;; ;;;;;;.",
ja: ";; - ;;;;;;;;;;; - ;;;;;"
},
{
type: 'p',
ru: "Зум на исходный код предмета:",
en: "Zoom to source code of object:",
ar: ";;;;; ;;; ;;;;; ;;;;;;; ;;;;;;:",
ja: ";;;;;;;;;;;;;;;;;;"
},
{
type: 'p',
segments: [
{ ru: "Цифра - ", en: "Digit - ", ar: ";;; - ", ja: ";; - ", style: "normal" },
{ ru: "3", en: "3", ar: "3", ja: "3", style: "gradient" },
{ ru: "- \"Нет такой клавиши. Глитч?\"", en: "- \"No such key. Glitch?\"", ar: "- \";; ;;;; ;;; ;;; ;;;;;;;. ;;;;\"", ja: "- ;;;;;;;;;;;;;;;;;;", style: "italic" }
]
},
{
type: 'p',
ru: "Аманда окунула пальчик себе в ротик, провела по язычку - воздух ютит нектаром лета: температура тела продолжает пространство. Тепло вникает булавкой в кончики пальцев: Экстаз - электричеством сквозь кости - смыкает спинной и головной, мозг.",
en: "Amanda dipped finger into mouth, ran across tongue - air shelters with nectar of summer: body temperature extends space. Heat pierces like pin into fingertips: Ecstasy - electricity through bones - fuses spinal and cranial, brain.",
ar: ";;;;;; ;;;; ;;;;;; ;; ;;;;; ;;;; ;;; ;;;;;; - ;;;;;; ;;;; ;;;;; ;;;;;: ;;;;; ;;;;; ;;; ;;;;;;. ;;;;;;; ;;;;; ;;; ;;;;;; ;; ;;;;; ;;;;;;;: ;;;; - ;;;;;;;; ;;; ;;;;;; - ;;;; ;;;;;; ;;;;;;;;; ;;;;;;.",
ja: ";;;;;;;;;;;;;;;;;; - ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; - ;;;;;; - ;;;;;;;;;;;;;"
},
{ type: 'spacer' },
{ type: 'p', ru: "~", en: "~", ar: "~", ja: "~", style: 'center' }
];
// Language visibility state - Independent toggles for parallel selection
const langState = {
ru: false,
en: false,
ar: false,
ja: false
};
let contentStarted = false;
let isTyping = false;
let charCount = 0;
let totalChars = 0;
let sequenceInterval = null;
let typos = [];
const contentArea = document.getElementById('content-area');
const cursor = document.getElementById('cursor');
const startPrompt = document.getElementById('start-prompt');
const digit0 = document.getElementById('digit-0');
const digit1 = document.getElementById('digit-1');
const digit2 = document.getElementById('digit-2');
const titleSequence = document.getElementById('title-sequence');
const screenGlitch = document.getElementById('screen-glitch');
const scrollTopBtn = document.getElementById('scroll-top');
const progressBar = document.getElementById('progress-bar');
// ============================================
// TITLE SEQUENCE ANIMATION
// ============================================
function animateTitleSequence() {
let seq = '';
let count = 0;
sequenceInterval = setInterval(() => {
const chars = '01';
seq += chars[Math.floor(Math.random() * chars.length)];
if (seq.length > 4) seq = seq.slice(1);
titleSequence.textContent = ' ' + seq;
count++;
if (count > 20) {
clearInterval(sequenceInterval);
titleSequence.textContent = ' 0001';
}
}, 150);
}
// ============================================
// GLITCH SYSTEM - Digit Interactions
// ============================================
function triggerDigitGlitch(element, digit) {
element.classList.add('glitch-active');
setTimeout(() => {
element.classList.remove('glitch-active');
}, digit === 2 ? 800 : 300);
if (digit === 0 || digit === 1) {
const paragraphs = document.querySelectorAll('.line-lang');
if(paragraphs.length > 0) {
const randomP = paragraphs[Math.floor(Math.random() * paragraphs.length)];
randomP.style.textShadow = "2px 0 red, -2px 0 blue";
setTimeout(() => {
randomP.style.textShadow = "none";
}, 200);
}
document.body.style.filter = "brightness(1.2)";
setTimeout(() => {
document.body.style.filter = "brightness(1)";
}, 100);
}
if (digit === 2) {
screenGlitch.classList.add('active');
setTimeout(() => {
screenGlitch.classList.remove('active');
}, 800);
const allText = document.querySelectorAll('.line-lang, h1, .main-title');
allText.forEach(el => {
el.style.textShadow = "3px 0 #ff00ff, -3px 0 #00ffff, 0 3px #ffff00, 0 -3px #ff0066";
el.style.transform = `translate(${Math.random() * 4 - 2}px, ${Math.random() * 4 - 2}px)`;
});
setTimeout(() => {
allText.forEach(el => {
el.style.textShadow = "none";
el.style.transform = "translate(0, 0)";
});
}, 800);
document.body.style.filter = "hue-rotate(90deg) brightness(1.3)";
setTimeout(() => {
document.body.style.filter = "hue-rotate(0deg) brightness(1)";
}, 800);
const allBtns = document.querySelectorAll('.lang-btn');
allBtns.forEach(btn => {
btn.classList.add('glitch-active');
setTimeout(() => btn.classList.remove('glitch-active'), 800);
});
}
}
// ============================================
// SCROLL TO TOP FUNCTION
// ============================================
function scrollToTop() {
window.scrollTo({ top: 0, behavior: 'smooth' });
}
window.addEventListener('scroll', () => {
if (window.scrollY > 300) {
scrollTopBtn.classList.add('visible');
} else {
scrollTopBtn.classList.remove('visible');
}
const scrollTop = window.scrollY;
const docHeight = document.body.scrollHeight - window.innerHeight;
const scrollPercent = (scrollTop / docHeight) * 100;
progressBar.style.width = scrollPercent + '%';
});
// ============================================
// LANGUAGE SELECTION
// ============================================
function selectLang(lang) {
digit0.classList.add('active');
digit1.classList.add('active');
digit2.classList.add('active');
langState[lang] = !langState[lang];
const btn = document.getElementById(`btn-${lang}`);
btn.classList.toggle('active');
btn.classList.add('glitch-active');
setTimeout(() => btn.classList.remove('glitch-active'), 300);
if (!contentStarted) {
contentStarted = true;
startPrompt.style.display = 'none';
cursor.classList.remove('hidden');
contentArea.classList.add('visible');
contentData.forEach(block => {
if (block.ru) totalChars += block.ru.length;
if (block.en) totalChars += block.en.length;
if (block.ar) totalChars += block.ar.length;
if (block.ja) totalChars += block.ja.length;
if (block.segments) {
block.segments.forEach(seg => {
if (seg.ru) totalChars += seg.ru.length;
if (seg.en) totalChars += seg.en.length;
if (seg.ar) totalChars += seg.ar.length;
if (seg.ja) totalChars += seg.ja.length;
});
}
});
renderContent();
} else {
const langLines = document.querySelectorAll(`.line-${lang}`);
langLines.forEach(line => {
if (langState[lang]) {
line.classList.remove('hidden');
} else {
line.classList.add('hidden');
}
});
}
}
// ============================================
// TYPING SYSTEM
// ============================================
const sleep = (ms) => new Promise(r => setTimeout(r, ms));
const getRandomDelay = () => {
const baseDelay = Math.floor((Math.floor(Math.random() * 30) + 15) * 1.34);
const microPause = Math.random() < 0.1 ? Math.floor((Math.floor(Math.random() * 80) + 50) * 1.34) : 0;
const thoughtPause = Math.random() < 0.05 ? Math.floor((Math.floor(Math.random() * 150) + 100) * 1.34) : 0;
const rhythmVar = Math.random() < 0.15 ? Math.floor((Math.floor(Math.random() * 40)) * 1.34) : 0;
return baseDelay + microPause + thoughtPause + rhythmVar;
};
const getTypoChance = () => Math.random() < 0.003;
const getWrongChar = (char, lang) => {
const charSets = {
ru: "абвгдеёжзийклмнопрстуфхцчшщъыьэюя",
en: "abcdefghijklmnopqrstuvwxyz",
ar: ";;;;;;;;;;;;;;;;;;;;;;;;;;;;",
ja: ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"
};
const nums = "0123456789";
const pool = charSets[lang] || charSets.en;
const all = pool + nums;
return all[Math.floor(Math.random() * all.length)];
}
function createTypoElement(wrongChar, correctChar, lang) {
const span = document.createElement('span');
span.className = 'typo-char gradient-text';
span.textContent = wrongChar;
span.onclick = function() {
this.textContent = correctChar;
this.classList.remove('typo-char');
this.classList.add('corrected');
setTimeout(() => {
this.classList.remove('corrected');
}, 400);
};
return span;
}
async function typeChar(element, char, lang) {
if (getTypoChance() && char.trim() !== "" && char !== " " && char !== "\n" && char !== "-" && char !== ":" && char !== ".") {
const wrongChar = getWrongChar(char, lang);
const typoEl = createTypoElement(wrongChar, char, lang);
element.appendChild(typoEl);
typos.push(typoEl);
await sleep(Math.floor((Math.floor(Math.random() * 40) + 20) * 1.34));
await sleep(Math.floor((Math.floor(Math.random() * 30) + 15) * 1.34));
}
const textNode = document.createTextNode(char);
element.appendChild(textNode);
await sleep(getRandomDelay());
charCount++;
const progressPercent = Math.min((charCount / totalChars) * 100, 100);
progressBar.style.width = progressPercent + '%';
if (charCount % 200 === 0 && Math.random() < 0.3) {
document.body.style.textShadow = "1px 0 red, -1px 0 blue";
setTimeout(() => {
document.body.style.textShadow = "none";
}, 100);
}
}
async function typeSegment(blockContainer, segment) {
const spans = {};
['ru', 'en', 'ar', 'ja'].forEach(lang => {
if (langState[lang]) {
const span = document.createElement('span');
if (segment.style === 'gradient') span.className = 'gradient-text';
if (segment.style === 'italic') span.className = 'italic-text';
blockContainer[lang].appendChild(span);
spans[lang] = span;
}
});
const maxLen = Math.max(
segment.ru?.length || 0,
segment.en?.length || 0,
segment.ar?.length || 0,
segment.ja?.length || 0
);
for (let i = 0; i < maxLen; i++) {
['ru', 'en', 'ar', 'ja'].forEach(lang => {
if (langState[lang] && segment[lang] && i < segment[lang].length) {
typeChar(spans[lang], segment[lang][i], lang);
}
});
await sleep(Math.floor((Math.floor(Math.random() * 25) + 10) * 1.34));
}
}
async function typeBlock(block) {
const blockDiv = document.createElement('div');
blockDiv.className = 'paragraph-block';
const lines = {};
['ru', 'en', 'ar', 'ja'].forEach(lang => {
if (langState[lang]) {
const line = document.createElement('div');
line.className = `line-lang line-${lang}`;
if (block.style === 'center') line.style.textAlign = 'center';
blockDiv.appendChild(line);
lines[lang] = line;
}
});
contentArea.appendChild(blockDiv);
if (block.segments) {
for (let segment of block.segments) {
await typeSegment(lines, segment);
}
} else if (block.ru) {
const maxLen = Math.max(
block.ru?.length || 0,
block.en?.length || 0,
block.ar?.length || 0,
block.ja?.length || 0
);
for (let i = 0; i < maxLen; i++) {
['ru', 'en', 'ar', 'ja'].forEach(lang => {
if (langState[lang] && block[lang] && i < block[lang].length) {
typeChar(lines[lang], block[lang][i], lang);
}
});
await sleep(Math.floor((Math.floor(Math.random() * 25) + 10) * 1.34));
}
}
await sleep(Math.floor((Math.floor(Math.random() * 200) + 150) * 1.34));
}
async function renderContent() {
contentArea.innerHTML = '';
for (let block of contentData) {
if (block.type === 'h1') {
const h1 = document.createElement('h1');
h1.className = 'gradient-text';
contentArea.appendChild(h1);
const maxLen = Math.max(
block.ru?.length || 0,
block.en?.length || 0,
block.ar?.length || 0,
block.ja?.length || 0
);
for (let i = 0; i < maxLen; i++) {
['ru', 'en', 'ar', 'ja'].forEach(lang => {
if (langState[lang] && block[lang] && i < block[lang].length) {
h1.appendChild(document.createTextNode(block[lang][i]));
}
});
await sleep(getRandomDelay());
}
await sleep(Math.floor((Math.floor(Math.random() * 300) + 200) * 1.34));
} else if (block.type === 'spacer') {
const spacer = document.createElement('div');
spacer.className = 'spacer';
contentArea.appendChild(spacer);
await sleep(Math.floor((Math.floor(Math.random() * 200) + 100) * 1.34));
} else if (block.type === 'p') {
await typeBlock(block);
}
}
setTimeout(() => {
scrollTopBtn.classList.add('visible');
cursor.classList.add('hidden');
}, 1000);
}
window.addEventListener('load', () => {
animateTitleSequence();
});
</script>
</body>
</html>
Не-Евклидов Секвенсор - 0001
© Copyright: Миролюбивый Странник, 2026
Свидетельство о публикации №226030401904
Свидетельство о публикации №226030401904
Рецензии