parallel-worlds/index.html at main · agent-axiom/parallel-worlds · 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
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
<!doctype html>
<html lang="ru" data-theme="light">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Интерактивная академическая шкала обществ, археологических культур и традиций от 20 000 года до н. э. до 1600 года н. э.">
  <meta name="theme-color" content="#f1eadb">
  <title>Параллельные миры — сравнительная шкала истории</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <a class="skip-link" href="#timeline" data-i18n="skipTimeline">К шкале времени</a>

  <header class="hero hero-compact">
    <nav class="topbar" aria-label="Основная навигация" data-i18n-aria="mainNav">
      <a class="brand" href="./" aria-label="Параллельные миры — главная" data-i18n-aria="brandAria">
        <span class="brand-mark" aria-hidden="true">PW</span>
        <span data-i18n="siteName">Параллельные миры</span>
      </a>
      <div class="topbar-actions">
        <label class="language-control">
          <span class="sr-only" data-i18n="languageTitle">Переключить язык</span>
          <select id="language-select" aria-label="Переключить язык" data-i18n-aria="languageTitle">
            <option value="ru">RU</option>
            <option value="en">EN</option>
            <option value="zh">中文</option>
          </select>
        </label>
        <button class="icon-button" id="share-button" type="button" title="Скопировать ссылку" data-i18n="share" data-i18n-title="shareTitle">Ссылка</button>
        <button class="icon-button" id="theme-button" type="button" title="Сменить тему" aria-label="Сменить тему" data-i18n-title="themeTitle" data-i18n-aria="themeTitle">◐</button>
      </div>
    </nav>

    <div class="hero-grid">
      <div class="hero-copy">
        <p class="eyebrow" data-i18n="heroEyebrow">Сравнительная хронология · 20 000 до н. э. — 1600 н. э.</p>
        <h1><span data-i18n="heroTitleLead">История происходила</span> <em data-i18n="heroTitleEm">одновременно</em></h1>
        <p class="hero-lede" data-i18n="heroLede">Сопоставьте Шумер и Египет, Византию и Китай, майя, ацтеков и инков — вместе с религиозными и философскими традициями, которые пересекали границы государств.</p>
      </div>
      <div class="hero-stats" aria-label="Статистика набора данных" data-i18n-aria="statsAria">
        <div><strong id="track-count">62</strong><span data-i18n="statTracks">исторических линий</span></div>
        <div><strong id="period-count">217</strong><span data-i18n="statPeriods">периодов</span></div>
        <div><strong id="event-count">161</strong><span data-i18n="statEvents">ориентиров</span></div>
      </div>
    </div>
  </header>

  <main>
    <section id="edition-companion" class="edition-companion" aria-labelledby="edition-companion-title" hidden>
      <div id="edition-companion-content"></div>
    </section>

    <section class="controls-shell" aria-label="Управление шкалой" data-i18n-aria="controlsAria">
      <button id="filter-toggle" class="mobile-filter-toggle" type="button" aria-controls="filters-content" aria-expanded="false">
        <span data-i18n="showFilters">Показать поиск и фильтры</span><span aria-hidden="true">⌄</span>
      </button>
      <div id="filters-content" class="filters-content">
      <div class="controls-primary">
        <label class="search-field">
          <span class="sr-only" data-i18n="searchLabel">Поиск</span>
          <span aria-hidden="true">⌕</span>
          <input id="search-input" type="search" placeholder="Найти цивилизацию, период или событие…" data-i18n-placeholder="searchPlaceholder" autocomplete="off">
        </label>
        <label>
          <span data-i18n="region">Регион</span>
          <select id="region-select"></select>
        </label>
        <label>
          <span data-i18n="trackType">Тип линии</span>
          <select id="type-select">
            <option value="all" data-i18n="allTypes">Все типы</option>
            <option value="reviewed" data-i18n="reviewedRecords">Только проверенные</option>
            <option value="society" data-i18n="societies">Общества и археологические данные</option>
            <option value="archaeological-culture" data-i18n="archaeologicalCulture">Археологические культуры</option>
            <option value="site" data-i18n="siteType">Памятники и поселения</option>
            <option value="polity" data-i18n="polityType">Государства и политии</option>
            <option value="regional-sequence" data-i18n="regionalSequence">Региональные последовательности</option>
            <option value="network" data-i18n="networkType">Сети и миграции</option>
            <option value="tradition" data-i18n="religionsTraditions">Религии и традиции</option>
            <option value="legacy" data-i18n="legacyRecords">Наследуемые записи</option>
          </select>
        </label>
        <label class="zoom-field">
          <span><span data-i18n="zoom">Масштаб</span> <output id="zoom-output">100%</output></span>
          <input id="zoom-input" type="range" min="75" max="240" step="5" value="100">
        </label>
      </div>

      <div class="scale-toolbar">
        <span data-i18n="timeScale">Шкала времени</span>
        <div id="scale-mode" class="scale-mode" role="group" aria-label="Режим масштаба времени" data-i18n-aria="scaleModeAria">
          <button type="button" data-scale="overview" aria-pressed="true" data-i18n="scaleOverview">Обзор</button>
          <button type="button" data-scale="deep" aria-pressed="false" data-i18n="scaleDeep">Глубокое время</button>
          <button type="button" data-scale="historical" aria-pressed="false" data-i18n="scaleHistorical">Историческое время</button>
        </div>
        <p data-i18n="scaleExplanation">Обзор сжимает 20 000–3500 годы до н. э.; подробная историческая часть начинается после видимого разрыва масштаба.</p>
      </div>

      <div class="presets-row">
        <span data-i18n="quickRange">Быстрый диапазон</span>
        <div id="preset-buttons" class="preset-buttons"></div>
        <button class="text-button" id="export-button" type="button" data-i18n="exportCsv">Экспорт CSV ↓</button>
      </div>

      <div class="range-row">
        <label><span data-i18n="from">От</span> <input id="range-start" type="number" min="-20000" max="1599" step="1"></label>
        <div class="range-rule" aria-hidden="true"></div>
        <label><span data-i18n="to">До</span> <input id="range-end" type="number" min="-19999" max="1600" step="1"></label>
      </div>
      </div>
    </section>

    <section id="explorer" class="explorer" aria-labelledby="explorer-heading">
      <div class="explorer-heading">
        <div>
          <p class="kicker" data-i18n="explorerKicker">Исследователь мира</p>
          <h2 id="explorer-heading" tabindex="-1" data-i18n="explorerHeading">Мир в один момент</h2>
        </div>
        <div class="view-switch" role="tablist" aria-label="Режим исследователя" data-i18n-aria="viewSwitchAria">
          <button id="view-map-button" class="view-button active" type="button" role="tab" aria-selected="true" aria-controls="atlas-view" data-view="map" data-i18n="viewMap">Карта</button>
          <button id="view-chronology-button" class="view-button" type="button" role="tab" aria-selected="false" aria-controls="chronology-view" data-view="chronology" data-i18n="viewChronology">Хронология</button>
        </div>
      </div>

      <section class="journey-launch" aria-labelledby="journey-launch-title">
        <div>
          <p class="kicker" data-i18n="journeyKicker">Режиссёрские маршруты</p>
          <h3 id="journey-launch-title" data-i18n="journeyLaunchTitle">Пройдите историю как путешествие</h3>
          <p data-i18n="journeyLaunchText">Карта проведёт по семи проверенным остановкам, а исследование всегда останется под вашим контролем.</p>
        </div>
        <button id="journey-open" class="journey-open" type="button">
          <span aria-hidden="true">▶</span>
          <span data-i18n="journeyOpen">Начать путешествие · 2 минуты</span>
        </button>
      </section>

      <div class="explorer-shell">
        <section id="atlas-view" class="explorer-view atlas-view" role="tabpanel" aria-labelledby="view-map-button">
          <div class="atlas-workspace">
            <div id="atlas-map" class="atlas-map" aria-label="Карта активных исторических регионов" data-i18n-aria="atlasAria">
              <div class="atlas-map-title">
                <span data-i18n="atlasYearLabel">Мир в выбранном году</span>
                <strong id="atlas-year-output">500 до н. э.</strong>
                <small id="atlas-map-summary" data-i18n="atlasHint">Выберите светящуюся область, чтобы раскрыть её историю.</small>
              </div>
              <div class="atlas-geography">
                <div id="atlas-world" class="atlas-world-layer"></div>
                <div id="atlas-regions" class="atlas-regions"></div>
              </div>
              <div class="atlas-playback">
                <button id="atlas-play-button" type="button" aria-pressed="false" data-i18n-aria="playTime"><span aria-hidden="true">▶</span><span data-i18n="playTime">Запустить время</span></button>
                <label>
                  <span class="sr-only" data-i18n="selectYear">Выбрать год</span>
                  <input id="atlas-year-input" type="range" min="0" max="1000" step="1" value="730">
                </label>
              </div>
            </div>
            <aside id="atlas-panel" class="atlas-panel" aria-live="polite">
              <p class="atlas-panel-kicker" data-i18n="insightKicker">Одновременно</p>
              <h3 data-i18n="statsFallbackTitle">Обзор мира</h3>
              <p data-i18n="atlasPanelLoading">Исторический срез готовится…</p>
              <div id="atlas-region-list"></div>
            </aside>
          </div>
        </section>

        <section id="chronology-view" class="explorer-view chronology-view" role="tabpanel" aria-labelledby="view-chronology-button" hidden>
          <div class="section-heading chronology-heading">
            <div>
              <p class="kicker" data-i18n="timelineKicker">Слои времени</p>
              <h2 id="timeline-heading" data-i18n="timelineHeading">Кто жил в одно время?</h2>
            </div>
            <p><span class="legend-swatch civilization"></span> <span data-i18n="legendSocieties">общества и археологические записи</span> <span class="legend-swatch tradition"></span> <span data-i18n="legendTraditions">традиции</span></p>
          </div>

          <div class="year-explorer">
            <div class="year-readout">
              <span data-i18n="selectedYear">Выбранный год</span>
              <strong id="year-output">500 до н. э.</strong>
            </div>
            <label class="year-slider">
              <span class="sr-only" data-i18n="selectYear">Выбрать год</span>
              <input id="year-input" type="range" min="0" max="1000" step="1" value="730">
            </label>
            <p id="contemporary-summary" data-i18n="yearHint">Перемещайте ползунок, чтобы увидеть современников.</p>
          </div>

          <div class="timeline-frame">
            <div class="timeline-scroll" tabindex="0" aria-label="Горизонтальная сравнительная шкала" data-i18n-aria="timelineAria">
              <div id="timeline" class="timeline" role="list"></div>
            </div>
            <div id="empty-state" class="empty-state" hidden>
              <strong data-i18n="emptyTitle">Ничего не найдено</strong>
              <span data-i18n="emptyText">Измените запрос или сбросьте фильтры.</span>
              <button id="reset-button" type="button" data-i18n="resetFilters">Сбросить фильтры</button>
            </div>
          </div>
        </section>
      </div>
    </section>

    <section class="contemporaries" aria-labelledby="contemporaries-heading">
      <div>
        <p class="kicker" data-i18n="contemporariesKicker">Срез одного года</p>
        <h2 id="contemporaries-heading" data-i18n="contemporariesHeading">На сцене одновременно</h2>
        <p data-i18n="contemporariesText">Линии, в которых выбранный год попадает хотя бы в один период.</p>
      </div>
      <div id="contemporary-list" class="contemporary-list" aria-live="polite"></div>
    </section>

    <section class="method-note" aria-labelledby="method-heading">
      <p class="kicker" data-i18n="methodKicker">Как читать шкалу</p>
      <h2 id="method-heading" data-i18n="methodHeading">Даты — ориентиры, а не стены</h2>
      <p data-i18n="methodText">Границы периодов условны: культурные практики не прекращаются в один год, а традиции развиваются неодинаково в разных регионах. Шкала предназначена для сравнения крупных хронологических рамок; спорные и традиционные датировки подписаны в карточках.</p>
      <p class="evidence-note" data-i18n="earliestShownNote">Самая ранняя видимая дата не означает «первую цивилизацию»: керамика, оседлость, земледелие, города, письменность и государства возникали как разные процессы.</p>
      <a href="academic-audit.json" class="audit-link" target="_blank" rel="noreferrer" data-i18n="academicAudit">Открыть академический аудит данных ↗</a>
      <div id="source-links" class="source-links"></div>
    </section>
  </main>

  <footer>
    <span data-i18n="footer">Параллельные миры · открытая сравнительная хронология</span>
    <a href="https://github.com/agent-axiom/parallel-worlds" data-i18n="sourceCode">Исходный код</a>
  </footer>

  <div id="period-tooltip" class="period-tooltip" role="tooltip" hidden></div>

  <dialog id="detail-dialog" aria-labelledby="dialog-title">
    <div class="dialog-topline">
      <span id="dialog-meta"></span>
      <button id="dialog-close" type="button" aria-label="Закрыть" data-i18n-aria="close">×</button>
    </div>
    <h2 id="dialog-title"></h2>
    <p id="dialog-summary" class="dialog-summary"></p>
    <div class="dialog-columns">
      <section>
        <h3 data-i18n="detailsPeriods">Периоды</h3>
        <ol id="dialog-periods" class="detail-list"></ol>
      </section>
      <section>
        <h3 data-i18n="detailsEvents">Ориентиры</h3>
        <ol id="dialog-events" class="detail-list events"></ol>
      </section>
    </div>
    <div id="dialog-sources" class="dialog-sources"></div>
  </dialog>

  <dialog id="journey-dialog" class="journey-dialog" aria-labelledby="journey-dialog-title">
    <div class="journey-shell">
      <header class="journey-topbar">
        <a class="journey-brand" href="./" data-i18n="siteName">Параллельные миры</a>
        <h2 id="journey-dialog-title" class="sr-only" data-i18n="journeyDialogTitle">Путешествия во времени</h2>
        <button id="journey-exit" type="button" data-i18n="journeyExit">Выйти</button>
      </header>
      <p id="journey-announcement" class="sr-only" aria-live="polite" aria-atomic="true"></p>
      <div id="journey-content" class="journey-content"></div>
    </div>
  </dialog>

  <div id="toast" class="toast" role="status" aria-live="polite"></div>

  <script src="chronology.js"></script>
  <script src="academic-data.js"></script>
  <script src="data.js"></script>
  <script src="data-quality.js"></script>
  <script src="i18n.js"></script>
  <script src="timeline.js"></script>
  <script src="atlas-data.js"></script>
  <script src="world-map-data.js"></script>
  <script src="insights.js"></script>
  <script src="atlas.js"></script>
  <script src="explorer-state.js"></script>
  <script src="atlas-view.js"></script>
  <script src="journeys-data.js"></script>
  <script src="journey.js"></script>
  <script src="journey-view.js"></script>
  <script src="edition-data.js"></script>
  <script src="edition.js"></script>
  <script src="media-data.js"></script>
  <script src="media-registry.js"></script>
  <script src="edition-view.js"></script>
  <script src="app.js"></script>
</body>
</html>