covid-19/sim/index.html

268 lines
7.8 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/sim.css" />
<link rel="stylesheet" type="text/css" href="css/simplebar.css" />
</head>
<body>
<div id="sandbox">
<div id="controls">
<div id="hide_on_first_playthrough">
<div id="section_dynamics">
В <i>среднем</i>,
каждый <icon i></icon>...
<br><br>
<div id="label_transmission">
Заражает 1 <icon s></icon> каждые <span id="label_p_transmission">N</span> дней
<br>
<span id="label_transmission_caveat">
(в начале эпидемии)<br>
</span>
<input class="sim_input" type="range" id="p_transmission" min="1" max="30" step="1" value="4">
</div>
<div id="label_c_exposed">
<input class="sim_checkbox" type="checkbox" id="c_exposed">
Требуется <span id="label_p_exposed">N</span> дней от <icon e></icon> к <icon i></icon>
<br>
<input class="sim_input" type="range" id="p_exposed" min="1" max="30" step="1" value="3">
</div>
<div id="label_c_recovery">
<input class="sim_checkbox" type="checkbox" id="c_recovery">
Требуется <span id="label_p_recovery">N</span> дней от <icon i></icon> к <icon r></icon>
<br>
<input class="sim_input" type="range" id="p_recovery" min="1" max="30" step="1" value="10">
</div>
<div id="label_c_waning">
<input class="sim_checkbox" type="checkbox" id="c_waning">
Ослабляет иммунитет <icon s></icon> за <span id="label_p_waning">N</span> месяцев
<br>
<input class="sim_input" type="range" id="p_waning" min="1" max="60" step="1" value="12">
</div>
<hr>
</div>
<div id="section_r">
R<sub>0</sub> <span id="label_p_r0" toFixed="2"></span>
<canvas class="r_canvas" id="canvas_r0"></canvas>
<!--input class="sim_input" type="range" id="p_r0" min="0" max="6" step="0.01" disabled-->
<br>
<span id="label_s">
% людей кто <i>НЕ</i> <icon s></icon>
<input class="sim_input" type="range" id="p_s" min="0" max="1" step="0.001" value="0" disabled>
<div class="herd"></div>
<br>
</span>
<span id="int_block_0">
Повышенная гигиена
<br>
<input class="sim_input recordable" type="range" id="p_hygiene" min="0" max="1" step="0.001" value="0">
<br>
</span>
<span id="int_block_1">
Физическое дистанцирование
<br>
<input class="sim_input recordable" type="range" id="p_distancing" min="0" max="1" step="0.001" value="0">
<br>
</span>
<span id="int_block_2">
Случаи изоляции
<br>
<input class="sim_input recordable" type="range" id="p_isolate" min="0" max="1" step="0.001" value="0">
<br>
Карантийные контакты
<br>
<input class="sim_input recordable" type="range" id="p_quarantine" min="0" max="1" step="0.001" value="0">
<br>
</span>
<span id="int_block_3">
Маски
<br>
<input class="sim_input recordable" type="range" id="p_masks" min="0" max="1" step="0.001" value="0">
<br>
</span>
<span id="int_block_4">
Сила лета
<br>
<input class="sim_input recordable" type="range" id="p_summer" min="0" max="1" step="0.001" value="0">
<br>
</span>
<span id="int_block_5">
Вакцинация
<br>
<input class="sim_input recordable" type="range" id="p_vaccines" min="0" max="1" step="0.001" value="0">
<br>
</span>
<span id="label_re">
R сейчас <span id="label_p_re" toFixed="2"></span>
<canvas class="r_canvas" id="canvas_re"></canvas>
<!--<input class="sim_input" type="range" id="p_re" min="0" max="6" step="0.01" disabled>-->
</span>
<span id="hospital_capacity">
Вместимость ОРИТ <span id="label_p_hospital">N</span>%
<br>
<input class="sim_input recordable" type="range" id="p_hospital" min="100" max="1000" step="1" value="333">
</span>
<hr id="divider">
</div>
<div id="section_meta">
Симулировать <span id="label_p_years" toFixed="1">N</span> лет
<span id="section_meta_years">
<br>
<input class="sim_input" type="range" id="p_years" min="0.5" max="10" step="0.5" value="2">
<br>
</span>
за <span id="label_p_speed">N</span> секунд
<br>
<input class="sim_input" type="range" id="p_speed" min="1" max="60" step="1" value="30">
</div>
</div>
<div id="sim_controls">
<div class="big_button">
<div id="bb_start">
<div class='control_icon' start></div>
Старт
</div>
<div id="bb_pause">
<div class='control_icon' pause></div>
Пауза
</div>
<div id="bb_continue" style="font-size: 0.9em">
<div class='control_icon' continue></div>
Продолжить
</div>
<div id="bb_reset">
<div class='control_icon' reset></div>
Сброс
</div>
</div>
<!--div id="sb_stop">
Stop
</div-->
<div id="sb_reset">
Сбросить всё
</div>
<div id="sb_replay">
Перезапустить
</div>
</div>
</div>
<div id="graph">
<canvas id="graphCanvas"></canvas>
<div id="month_ticks">
<!--
<div><span>2020</span></div>
<div><span>2021</span></div>
-->
</div>
<div id="legend">
<span id="label_susceptible" class="lines">
<icon s></icon> Восприимчивые<span id="show_percent_s"></span>
<br>
</span>
<span id="label_exposed" class="lines">
<icon e></icon> Незащищённые<span id="show_percent_e"></span>
<br>
</span>
<span id="label_infectious" class="lines">
<icon i></icon> Заражённые<span id="show_percent_i"></span>
<br>
</span>
<span id="label_removed" class="lines">
<icon r></icon> Выздоровевшие<span id="show_percent_r"></span>
</span>
<br class="lines">
<span id="label_herd_immunity">
- - - Коллективный иммунитет
</span>
<br class="lines">
<span id="label_capacity">
Вместимость ОРИТ
</span>
</div>
</div>
<div id="pointer">
<div id="hand_container">
<div id="hand"></div>
</div>
<div id="pointer_words">
<span id="pointer_params">
Попробуй перезапустить симуляцию
с другими числами!
<span id="pointer_params_2">
<b>(заметка: ты можешь изменять числа <i>в процессе</i> симуляции)</b>
</span>
</span>
<span id="pointer_scroll">
Как только закончишь играть,
прокрути вниз, чтобы продолжить чтение!
</span>
<span id="pointer_replay">
Эта симуляция имеет "записанный сценарий"!
<br>
Кликни "Старт" чтобы просмотреть запись
<i>прежде</i> чем изменять любые числа
</span>
</div>
</div>
</div>
<span id="month_names">
<span>янв</span>
<span>фев</span>
<span>мар</span>
<span>апр</span>
<span>май</span>
<span>июн</span>
<span>июл</span>
<span>авг</span>
<span>сен</span>
<span>окт</span>
<span>ноя</span>
<span>дек</span>
</span>
</body>
<script src="js/helpers.js"></script>
<script src="js/Model.js"></script>
<script src="js/Controls.js"></script>
<script src="js/Stages.js"></script>
<script src="js/Params.js"></script>
<script src="js/main.js"></script>
<script src="js/simplebar.min.js"></script>