Upload files

e108b1df · Pavel Moiseenko · e108b1df · e108b1df · e108b1df · e108b1df
Commit e108b1df authored Jun 15, 2022 by Pavel Moiseenko
7 changed files
--- a/.gitignore
+++ b/.gitignore
+.DS_Store
--- a/LICENSE
+++ b/LICENSE
+MIT License
+
+Copyright (c) 2022 Pavel Moiseenko
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
--- a/README.md
+++ b/README.md
+# student-helper
+
+Schedule, assignments, grades, etc. for a student of HSPU
--- a/css/style.css
+++ b/css/style.css
+@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap");
+
+body {
+    margin: 0;
+    width: 100%;
+    font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+
+.btn {
+    all: unset;
+    cursor: pointer;
+    background-color: rgb(240, 240, 240);
+    text-align: center;
+    border-radius: 13px;
+    user-select: none;
+    transition: background-color 0.4s;
+}
+
+.btn:focus {
+    outline: rgb(200, 200, 200) 5px auto;
+}
+
+.btn:hover {
+    background-color: rgb(200, 200, 200);
+}
+
+.app {
+    display: flex;
+    height: 100vh;
+}
+
+.start-page {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+}
+
+.start-page-title {
+    padding: 50px;
+    text-align: center;
+    font-size: 50px;
+    font-weight: bold;
+}
+
+.start-page-group {
+    padding: 25px;
+}
+
+#group-selector {
+    font-size: 17px;
+}
+
+.start-page-full-name {
+    padding: 35px;
+}
+
+#full_name_input {
+    width: 310px;
+    font-size: 17px;
+    text-transform: capitalize;
+}
+
+.start-page-ready-button {
+    padding: 20px 0;
+    margin: 25px 0;
+    width: 200px;
+}
+
+.tabs {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 30vw;
+    min-width: 150px;
+}
+
+.tabs * {
+    padding: 20px 0;
+    margin: 15px 0;
+    width: 70%;
+}
+
+.tabs > .active {
+    background-color: rgb(200, 200, 200);
+}
+
+.tabs *:hover {
+    background-color: rgb(200, 200, 200);
+}
+
+.content {
+    display: flex;
+    width: 100%;
+}
+
+.timetable {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    width: 100%;
+}
+
+.calendar {
+    padding: 5%;
+}
+
+.calendar > .form-control {
+    width: 98%;
+}
+
+.shortcut-buttons-flatpickr-wrapper {
+    display: flex;
+    justify-content: center;
+}
+
+.lessons-list {
+    justify-content: center;
+}
+
+.lessons-list * {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    width: max-content;
+    padding: 5px 0;
+}
+
+.time {
+    display: flex;
+    flex-direction: column;
+    padding: 15px 50px;
+}
+
+.start-time,
+.time-divider,
+.end-time {
+    padding: 1px 0;
+    text-align: center;
+}
+
+.about-subject {
+    display: flex;
+    padding: 10px;
+    width: max-content;
+    flex-direction: column;
+}
+
+.about-subject * {
+    padding: 8px;
+}
+
+.subject-name {
+    flex-basis: min-content;
+    font-weight: bold;
+    align-self: start;
+}
+
+.subject-type-and-teacher {
+    display: flex;
+    padding: 0;
+    align-self: start;
+    width: 100%;
+    font-size: 14px;
+}
+
+.subject-type {
+    min-width: 120px;
+
+}
+
+.address-or-distance {
+    align-self: start;
+    font-size: 14px;
+}
+
+.grade {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    width: 100%;
+}
+
+.semester-list-wrapper {
+    padding: 5% 0 5% 5%;
+}
+
+.semester-list {
+    font-size: 17px;
+}
+
+.grade-list {
+    padding: 5%;
+    width: 100%;
+}
+
+.grade-card {
+    display: flex;
+    padding: 15px 10px;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.grade-subject-title {
+    font-weight: bold;
+    padding: 10px 30px;
+}
+
+.grade-date {
+    font-size: 14px;
+    padding: 10px 30px;
+    margin-left: auto;
+}
+
+.grade-mark {
+    padding: 10px 30px;
+    max-width: 80px;
+    min-width: 80px;
+}
+
+.grade-mark.five-or-credited {
+    color: rgb(94, 156, 32);
+}
+
+.grade-mark.four {
+    color: rgb(230, 194, 18);
+}
+
+.grade-mark.three {
+    color: rgb(238, 137, 37);
+}
+
+.grade-mark.two-or-uncredited {
+    color: rgb(238, 34, 3);
+}
+
+.settings {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    padding-left: 10%;
+}
+
+.reset-button {
+    padding: 20px 0;
+    margin: 15px 0;
+    width: 90%;
+}
+
+/* mobile */
+
+@media (max-width: 480px) {
+    .tabs {
+        position: fixed;
+        bottom: 0;
+        width: 100%;
+        height: 60px;
+        flex-direction: row;
+    }
+
+    .tabs * {
+        min-width: initial;
+        border-radius: 0;
+        width: 100%;
+        margin: 0;
+    }
+
+    .content {
+        width: 100%;
+        justify-content: center;
+    }
+
+    .timetable {
+        flex-direction: column;
+    }
+
+    .lessons-list {
+        width: 80%;
+    }
+
+    .lessons-list > div {
+        height: unset;
+        width: 100%;
+        margin: 2px 5px;
+    }
+
+    .time {
+        padding: 10px 2px;
+    }
+
+    .about-subject {
+        height: unset; 
+        align-items: stretch;
+        flex-direction: column;
+        width: 100%;
+    }
+
+    .about-subject * {
+        padding: 6px 8px;
+    }
+
+    .subject-name {
+        max-width: 70%;
+    }
+
+    .grade {
+        flex-direction: column;
+        justify-content: unset;
+    }
+
+    .semester-list-wrapper {
+        margin-top: 10%;
+    }
+
+    .settings {
+        padding-left: 0;
+    }
+
+    .settings-list {
+        display: flex;
+        justify-content: center;
+    }
+}
--- a/data/timetable.json
+++ b/data/timetable.json
+{
+  "2022-06-07": [
+    {
+      "startTime": "9:40",
+      "endTime": "11:10",
+      "subjectName": "Информационные технологии и системы бизнес-аналитики",
+      "type": "Лабораторная",
+      "teacher": "Атаян Ануш Михайловна",
+      "distanceLearning": true,
+      "address": "Мойка 48, корп. 1, ауд. 308"
+    },
+    {
+      "startTime": "13:30",
+      "endTime": "15:00",
+      "subjectName": "Физическая культура и спорт (элективная дисциплина)",
+      "type": "Зачёт",
+      "teacher": "Головко Андрей Александрович",
+      "distanceLearning": true,
+      "address": "Мойка 48, корп. 4, ауд. 1"
+    },
+    {
+      "startTime": "15:10",
+      "endTime": "16:40",
+      "subjectName": "Визуализация данных и инфографика",
+      "type": "Лабораторная",
+      "teacher": "Иванова Екатерина Алексеевна",
+      "distanceLearning": true,
+      "address": "Мойка 48, корп. 1, ауд. 309"
+    }
+  ],
+  "2022-06-08": [
+    {
+      "startTime": "9:40",
+      "endTime": "11:10",
+      "subjectName": "Информационные технологии и системы бизнес-аналитики",
+      "type": "Лабораторная",
+      "teacher": "Атаян Ануш Михайловна",
+      "distanceLearning": true,
+      "address": "Мойка 48, корп. 1, ауд. 308"
+    },
+    {
+      "startTime": "13:30",
+      "endTime": "15:00",
+      "subjectName": "Физическая культура и спорт (элективная дисциплина)",
+      "type": "Зачёт",
+      "teacher": "Головко Андрей Александрович",
+      "distanceLearning": true,
+      "address": "Мойка 48, корп. 4, ауд. 1"
+    },
+    {
+      "startTime": "15:10",
+      "endTime": "16:40",
+      "subjectName": "Визуализация данных и инфографика",
+      "type": "Лабораторная",
+      "teacher": "Иванова Екатерина Алексеевна",
+      "distanceLearning": true,
+      "address": "Мойка 48, корп. 1, ауд. 309"
+    }
+  ]
+}
--- a/index.html
+++ b/index.html
+<!DOCTYPE html>
+<html lang="ru">
+
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Помощник студента</title>
+
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/shortcut-buttons-flatpickr@0.1.0/dist/themes/light.min.css">
+
+  <link rel="stylesheet" href="css/style.css">
+</head>
+
+<body>
+  <div class="app">
+
+    <div class="start-page">
+      <div class="start-page-title">
+        Выберите группу и введите ваше ФИО
+      </div>
+      <div class="start-page-group">
+        <select id="group-selector" name="start-page-group-selector">
+          <option value="ob_ivt18">Очный, бакалавриат, ИВТ, 2018 г. п.</option>
+          <option value="zb_ivt19">Заочный, бакалавриат, ИВТ, 2019 г. п.</option>
+          <option value="ob_icst20">Очный, бакалавриат, ИСиТ, 2020 г. п.</option>
+        </select>
+      </div>
+      <div class="start-page-full-name">
+        <input required type="text" id="full_name_input" name="full_name_input" placeholder="Фамилия Имя Отчество">
+      </div>
+      <button class="start-page-ready-button btn">
+        Готово
+      </button>
+    </div>
+
+    <div class="tabs">
+      <button class="timetable-tab btn">
+        Расписание
+      </button>
+      <button class="grade-tab btn">
+        Оценки
+      </button>
+      <button class="settings-tab btn">
+        Настройки
+      </button>
+    </div>
+
+    <div class="content">
+
+      <div class="timetable">
+        <div class="calendar">
+          <input id="calendar-picker" placeholder="Выберите дату" type="date">
+        </div>
+        <div class="lessons-list">
+
+        </div>
+      </div>
+
+      <div class="grade">
+        <div class="semester-list-wrapper">
+          <select id="semester-picker" class="semester-list" name="semester-list">
+            <option value="first-semester">1 семестр</option>
+            <option value="second-semester">2 семестр</option>
+            <option value="third-semester" selected="selected">3 семестр</option>
+          </select>
+        </div>
+        <div class="grade-list">
+
+        </div>
+      </div>
+
+      <div class="settings">
+        <div class="settings-list">
+          <button class="reset-button btn">
+            Сбросить группу и ФИО ученика
+          </button>
+        </div>
+      </div>
+
+    </div>
+
+  </div>
+
+  <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
+  <script src="https://npmcdn.com/flatpickr/dist/l10n/ru.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/shortcut-buttons-flatpickr@0.1.0/dist/shortcut-buttons-flatpickr.min.js"></script>
+
+  <script src="js/script.js"></script>
+</body>
+
+</html>
--- a/js/script.js
+++ b/js/script.js