diff options
Diffstat (limited to 'quantorium-presentation-2024-2025.html')
| -rw-r--r-- | quantorium-presentation-2024-2025.html | 204 |
1 files changed, 204 insertions, 0 deletions
diff --git a/quantorium-presentation-2024-2025.html b/quantorium-presentation-2024-2025.html new file mode 100644 index 0000000..f58d142 --- /dev/null +++ b/quantorium-presentation-2024-2025.html @@ -0,0 +1,204 @@ +<!DOCTYPE html> +<html> + <head> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> + <title>Презентация «Мой личный веб-сайт»</title> + <link href="/css/main.css" rel="stylesheet" /> + <link href="/css/theme.css" rel="stylesheet" /> + <link href="/css/third-party.css" rel="stylesheet" /> + <link href="/css/responsivity.css" rel="stylesheet" /> + + <style> + iframe.website { + width: 400px; + height: 250px; + transition: 0.5s; + + /* https://stackoverflow.com/a/3131624 */ + /*-ms-zoom: 0.25; + -moz-transform: scale(0.25); + -moz-transform-origin: 0 0; + -o-transform: scale(0.25); + -o-transform-origin: 0 0; + -webkit-transform: scale(0.25); + -webkit-transform-origin: 0 0;*/ + + border-width: 0px; + border-color: var(--theme-color); + border-style: solid; + border-radius: 5px; + box-shadow: 0px 0px 8px 7px #000000; + } + + iframe.website:hover { + transform: rotateZ(360deg) translateY(-100px); + transition: 0.5s; + width: 1000px; + height: 840px; + } + + div.frame_wrapper { + margin: 5%; + + height: 100%; + width: 100%; + } + + body { + font-size: 29pt; + } + + div.inner_page { + margin: 0; + width: 100%; + } + + div.content_section_text p::first-letter, div.content::first-letter { + font-size: 33pt !important; + } + + div.table_of_contents { + position: fixed; + right: 0; + bottom: 0; + + /*font-size: 11pt;*/ + + border-width: 0px; + border-color: var(--theme-color); + border-style: solid; + border-radius: 5px; + box-shadow: 0px 0px 8px 7px #000000; + } + + #theme-switch:checked ~ #page { + --text-color: var(--dark-text); + --bg-color: var(--dark-bg); + --theme-color: var(--dark-theme); + --gray-color: var(--dark-gray); + } + + :root { + --light-text: #222430; + --light-bg: #f5f6f7; + --light-theme: #e0b472; + --light-gray: #dcdfe6; + + --dark-text: #f7f7f7; + --dark-bg: #222430; + --dark-theme: #bd93f9; + --dark-gray: #838383; + + --text-color: var(--light-text); + --bg-color: var(--light-bg); + --theme-color: var(--light-theme); + --gray-color: var(--light-gray); + } + </style> + </head> + <body> + <input type="checkbox" id="theme-switch"> + <div id="page"> + <div class="inner_page"> + <div class="page_header floating_element"> + <h1 class="floating_element">Мой личный веб-сайт</h1> + </div> + <div class="floating_element"> + <h3>Выполнил Иван Давыдов из группы И1</h3> + <label id="switch-label" for="theme-switch"></label> + </div> + + <div class="content_section floating_element" style="display:inline-flex;"> + <div style="display:initial;"> + <div class="section_header"> + <div id="about"></div> + О проекте + </div> + <div class="content_section_text" style="display:inline-flex;"> + <div class="frame_wrapper"> + <iframe class="website" src="https://www.lotigara.ru" title="Главная страница"></iframe> + </div> + <div style="display:initial;width:100%;"> + <p> + «Веб-сайт самохостера Lotigara» - это мой личный веб-сайт, + на котором есть краткое описание сервера и установленного ПО, задач + и блог. + </p> + + <p>Технологии, которые были использованы:</p> + <ul> + <li>HTML 5</li> + <li>CSS 3</li> + </ul> + + <p>Ресурсы, которые были использованы:</p> + <ul> + <li>MDN</li> + <li>W3Schools</li> + <li>LandChad</li> + </ul> + </div> + </div> + <div class="section_header"> + <div id="reasons-n-causes"></div> + Причины и поводы + </div> + <div class="content_section_text" style="display:inline-flex;"> + <div class="frame_wrapper"> + <iframe class="website" src="https://www.lotigara.ru/status.php" title="Состояние"></iframe> + </div> + <div style="display:initial;width:100%;"> + <p>Причины:</p> + <ol> + <li>Интересно изучать, как работает Web, ОС типа Unix.</li> + </ol> + + <p>Поводы:</p> + <ol> + <li>Появление мощной ЭВМ, у которой хватает мощности выполнять полный набор серверного ПО.</li> + </ol> + </div> + </div> + + <div class="section_header"> + <div id="plans"></div> + Планы на будущее + </div> + <div class="content_section_text" style="display:inline-flex;"> + <ul style="display:initial;"> + <li>Присоединение блога к децентрализованной соц. сети XMPP и добавление комментариев через XMPP</li> + <li>Больше публикаций в журнале</li> + <li>Настройка внешнего вида Git-сервера</li> + <li>Присоединить веб-сайт к системе управления версиями Git</li> + </ul> + <div class="frame_wrapper"> + <iframe class="website" src="https://www.lotigara.ru/blog" title="Журнал"></iframe> + </div> + </div> + + <div class="section_header"> + <div id="drawbacks"></div> + Недостатки + </div> + <div class="content_section_text" style="display:inline-flex;"> + <div class="frame_wrapper"> + <iframe class="website" src="https://git.lotigara.ru" title="Блог"></iframe> + </div> + <ul style="display:initial;"> + <li>Так как я из принципа не использую JavaScript, мой вебсайт <i>может</i> выглядеть и ощущаться не таким «живым», как другие веб-сайты.</li> + </ul> + </div> + </div> + <div class="table_of_contents floating_element"> + <ul> + <li><a href="#about">Общая информация</a></li> + <li><a href="#reasons-n-causes">Причины и поводы</a></li> + <li><a href="#plans">Планы</a></li> + <li><a href="#drawbacks">Недостатки</a></li> + </ul> + </div> + </div> + </div> + </div> + </body> +</html> |