📚 Synchronized translations, completed docs

worthant · Sep 14, 2023 · efc5a1d · efc5a1d
1 parent 43a5f02
commit efc5a1d
Show file tree

Hide file tree

Showing 2 changed files with 140 additions and 121 deletions.
diff --git a/README.md b/README.md
@@ -25,31 +25,34 @@
 <details open>
    <summary><b>Table of Contents</b></summary>
 
-   - [Introduction](#intro)
-   - [Requirements for Laboratory Work](#requirements)
-   - [Preparation Topics](#preparation)
-   - [How to get everything working?](#setup)
-   - [User Manual](#manual)
-   - [Theoretical materials](#theory)
+- [Introduction](#intro)
+- [Requirements for Laboratory Work](#requirements)
+- [Preparation Topics](#preparation)
+- [How to get everything working?](#setup)
+- [User Manual](#manual)
+- [Theoretical materials](#theory)
+
 </details>
 
 <a id="intro"></a>
-<details open>  
-   <summary><h2><b> Introduction </b></h2></summary>
 
-   Welcome to this laboratory project, a blend of essential web technologies. Here, I've developed a tool that combines `PHP`, `HTML`, `CSS`, and `JavaScript` to determine a point's position on a coordinate plane. Users can seamlessly input data through an **interactive HTML interface**, which then utilizes `PHP for backend computations`. With `JavaScript in play`, the tool ensures data integrity by `validating` user input. Dive in to explore how these technologies come together for a functional, user-friendly experience.
-</details>
-
+## Introduction
 
-<a id="requirements"></a>
-<details>  
-   <summary><h2><b> Requirements for variant 1204 </b></h2></summary>
+> Welcome to this laboratory project, a blend of essential web technologies. Here, I've developed a tool that combines `PHP`, `HTML`, `CSS`, and `JavaScript` to determine a point's position on a coordinate plane :smiley:
+>
+> - Users can seamlessly input data through an **interactive HTML interface**,  
+> which then utilizes `PHP for backend computations`.  
+> - With `JavaScript in play`, the tool ensures data integrity by `validating` user input.  
+>
+> Dive in to explore how these technologies come together for a functional, user-friendly experience :computer:
+
+## Requirements for variant 1204
 
    |![изображение](https://github.com/worthant/simple-one-page-website/assets/43885024/4e3bc97e-313b-4592-9476-2a8cd112fe10)|
    |:-:|
-   
-   1. [ ] 1. Develop a `PHP script` that determines whether a point on the coordinate plane falls within a specified area.
-   
+
+   1. [x] 1. Develop a `PHP script` that determines whether a point on the coordinate plane falls within a specified area.
+
       ```python
       •  The R parameter and the coordinates of the point should be passed to the script via an `HTTP request`.
       •  The script should:
@@ -59,9 +62,9 @@
                └ *i.e., the fact of the point falling or not falling into the area*
       •  Previous results should be preserved between requests and displayed in the table.
       •  The response should include data on the current time and the script execution time.
-   
-   2. [ ] 2. Create an HTML page that generates data for submission for processing by the PHP script.
-   
+
+   2. [x] 2. Create an HTML page that generates data for submission for processing by the PHP script.
+
        ```python
        •  `Block layout` should be used for positioning text and graphic elements.
        •  Form data should be sent for processing via a `GET request`.
@@ -76,29 +79,25 @@
           └ font size
        •  Input element margins should be specified in `percentages`.
        ```
-   
-   3. [ ] 3. In working with CSS, the use of the following should be demonstrated:
-      - [ ] ID selectors
-      - [ ] Pseudo-class selectors
-      - [ ] Attribute selectors
-      - [ ] Pseudo-element selectors
-   
-   4. [ ] 4. As well as such CSS style properties as:
-      - [ ] inheritance
-      - [ ] cascading
-   
-   5. [ ] 5. The page should contain a script in JavaScript
-   
+
+   3. [x] 3. In working with CSS, the use of the following should be demonstrated:
+      - [x] ID selectors
+      - [x] Pseudo-class selectors
+      - [x] Attribute selectors
+      - [x] Pseudo-element selectors
+
+   4. [x] 4. As well as such CSS style properties as:
+      - [x] inheritance
+      - [x] cascading
+
+   5. [x] 5. The page should contain a script in JavaScript
+
        ```python
        •  The script should validate values entered by the user in form fields
        •  Any incorrect values (letters in point coordinates / negative radius / ... ) should be blocked.
        ```
-</details> 
-
 
-<a id="preparation"></a>
-<details>  
-   <summary><h2><b> Preparation Topics </b></h2></summary>
+## Preparation Topics
 
    ```python
    1. HTTP protocol. Structure of requests and responses, request methods, server response codes, request and response headers.
@@ -116,70 +115,53 @@
    13. FastCGI - features of the technology, advantages and disadvantages relative to CGI.
    14. PHP language - syntax, data types, embedding in web pages, rules for handling HTTP requests. Features of the implementation of OOP principles in PHP.
    ```
-</details>
 
-<a id="setup"></a>
-<details>  
-   <summary><h2><b> How to get everything working? </b></h2></summary>
+## How to get everything working?
 
    1. Open the terminal and navigate to the directory where you want to clone the repository:
-   
+
       ```bash
       cd path/to/your/workspace
       ```
-   
+
    2. Clone the repository:
-   
+
       ```bash
-      SSH(recommended): git@github.com:worthant/web-programming.git
-      HTTPS: https://github.com/worthant/web-programming.git
+      SSH(recommended): git@github.com:worthant/simple-one-page-website.git
+      HTTPS: https://github.com/worthant/simple-one-page-website.git
       ```
-   
+
    3. Navigate to the project directory:
-   
+
       ```bash
       cd <your_repo>
       ```
-
-   4. Initialize the project using the package manager `yarn`:
-
-      ```bash
-      yarn init
-      ```
-
-      - for now, you can skip all questions by pressing "enter"
-
-   5. Install `http-server` - a simple static server:
-
+
+   4. Initialize the project using the package manager `yarn` (should be installed using `npm`):
+
       ```bash
-      yarn add http-server
+      yarn install
       ```
-   
-   6. Start the server:
-   
+
+   5. Compiles and hot-reloads for development
+
       ```bash
-      yarn http-server
+      yarn dev
       ```
-
-      - by default, the **http-server** package will start the server on port 8080
-      - to change the port: `yarn http-server -p 3000`
-   7. Open your browser and navigate to `http://localhost:8080`
-</details>
 
-<a id="manual"></a>
-<details>  
-   <summary><h2><b> User Manual </b></h2></summary>
+   6. Open your browser and navigate to `http://localhost:3000/`
+
+   7. Change `deploy.sh` for your needs and deploy changes to server using `yarn deploy`
+
+## User Manual
 
    1. Fill in the form fields on the main page: enter the point coordinates and radius
-   2. Click the "Submit" button to send the data for processing by the PHP script
+   2. Click the "Check" button to send the data for processing by the PHP script
    3. The processing results will be displayed in the table on the main page
-
-   - Demonstration in the [youtube tutorial video](https://youtu.be/dQw4w9WgXcQ?t=90)
-</details>
 
-<a id="theory"></a>
-<details>  
-   <summary><h2><b> Theoretical materials </b></h2></summary>
+## Theoretical materials </b></h2></summary>
 
-   1. **URI** - **URL** - **URN** : https://wiki.merionet.ru/articles/url-i-uri-v-chem-razlichie/
-</details>
+   1. **URI** - **URL** - **URN** : <https://wiki.merionet.ru/articles/url-i-uri-v-chem-razlichie/>
+   2. **Web docs 1** : <https://www.w3schools.com/css/css3_borders.asp>
+   3. **Web docs 2** : <https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th>
+   4. **Pretty good guide for se.ifmo questions** : [guide](https://docs.google.com/document/u/0/d/13eAoOwDXg1enr3eFeawcM76AAhufZljDA4XYcNYAyDg/mobilebasic)
diff --git a/README_RU.md b/README_RU.md
@@ -1,15 +1,54 @@
-# Лабораторная работа 1 ![Build Status](https://github.com/worthant/web-programming/actions/workflows/build/badge.svg)
-
-- [Лабораторная работа 1 ](#лабораторная-работа-1-)
-  - [Требования для выполнения лабораторной работы №1 варианта `1`](#требования-для-выполнения-лабораторной-работы-1-варианта-1)
-  - [Темы для подготовки к защите лабораторной работы](#темы-для-подготовки-к-защите-лабораторной-работы)
-  - [Как запустить чтобы всё работало?](#как-запустить-чтобы-всё-работало)
-  - [Руководство по эксплуатации](#руководство-по-эксплуатации)
-  - [Теоретические материалы](#теоретические-материалы)
-
-## Требования для выполнения лабораторной работы №1 варианта `1`
-
-1. [ ] 1. Разработать `PHP-скрипт`, определяющий попадание точки на координатной плоскости в заданную область
+<p align="center">
+  <a href="https://ibb.co/Sv4F0Yq">
+    <picture>
+      <img src="https://i.ibb.co/nkNxfdh/html.png" height="110">
+    </picture>
+    <h1 align="center">Простой одностраничный сайтик</h1>
+  </a>
+</p>
+
+<p align="center">
+  <a aria-label="Размер репозитория" href="https://github.com/worthant/simple-one-page-website">
+    <img alt="" src="https://img.shields.io/github/repo-size/worthant/simple-one-page-website?style=for-the-badge&logo=github">
+  </a>
+  <a aria-label="Английская версия" href="./README_RU.md">
+    <img alt="" src="https://img.shields.io/badge/translation-RU-red?style=for-the-badge">
+  </a>
+  <a aria-label="Сборка" href="https://github.com/worthant/simple-one-page-website/actions">
+    <img alt="" src="https://img.shields.io/github/actions/workflow/status/worthant/simple-one-page-website/php.yaml?branch=main&style=for-the-badge&logo=github-actions">
+  </a>
+  <a aria-label="Лицензия" href="./LICENSE">
+    <img alt="" src="https://img.shields.io/github/license/worthant/simple-one-page-website?style=for-the-badge">
+  </a>
+</p>
+
+<details open>
+   <summary><b>Оглавление</b></summary>
+
+- [Введение](#введение)
+- [Требования для выполнения варианта `1204`](#требования)
+- [Темы для подготовки к защите лабораторной работы](#защита)
+- [Как запустить чтобы всё работало?](#как-запустить-чтобы-всё-работало)
+- [Руководство по эксплуатации](#руководство-по-эксплуатации)
+- [Теоретические материалы](#теоретические-материалы)
+
+</details>
+
+## Введение
+
+> Добро пожаловать в этот лабораторный проектик - совокупность ключевых веб-технологий. Здесь я создал ресурс, разработка которого включает `PHP`, `HTML`, `CSS`, и `JavaScript`. А назначение сайта - небольшая игра. Попал ты точкой в координатную плоскость или промахнулся :smiley:
+>
+> - Пользователи могут легко вводить данные через **интерактивный HTML-интерфейс**,
+> который затем использует `PHP для вычислений на серверной стороне`.
+> - С `JavaScript` я обеспечиваю целостность данных, проводя `валидацию` ввода пользователя.
+>
+> Погрузитесь в изучение, чтобы исследовать, как эти технологии совмещаются для создания функционального, удобного для пользователя веб-сайта :computer:
+
+<a id="требования"></a>
+
+## Требования для выполнения варианта `1204`
+
+1. [x] 1. Разработать `PHP-скрипт`, определяющий попадание точки на координатной плоскости в заданную область
 
    ```python
    •  Параметр R и координаты точки должны передаваться скрипту посредством `HTTP-запроса`. 
@@ -22,7 +61,7 @@
    •  Ответ должен содержать данные о текущем времени и времени работы скрипта.
    ```
 
-2. [ ] 2. Создать `HTML-страницу`, которая формирует данные для отправки их на обработку php-скрипту.
+2. [x] 2. Создать `HTML-страницу`, которая формирует данные для отправки их на обработку php-скрипту.
 
    ```python
    •  Для расположения текстовых и графических элементов необходимо использовать `блочную верстку`.
@@ -40,21 +79,23 @@
    ```
 
 3. При работе с CSS должно быть продемонстрировано использование:  
-   - [ ] `селекторов идентификаторов`
-   - [ ] `селекторов псевдоклассов`
-   - [ ] `селекторов потомств`
-   - [ ] `селекторов атрибутов`
+   - [x] `селекторов идентификаторов`
+   - [x] `селекторов псевдоклассов`
+   - [x] `селекторов потомств`
+   - [x] `селекторов атрибутов`
 4. А также такие свойства стилей CSS, как
-   - [ ] `наследование`  
-   - [ ] `каскадирование`  
+   - [x] `наследование`  
+   - [x] `каскадирование`  
 
-5. [ ] 5. Страница должна содержать сценарий на языке `JavaScript`
+5. [x] 5. Страница должна содержать сценарий на языке `JavaScript`
 
 ```python
 •  Сценарий должен осуществлять валидацию значений, вводимых пользователем в поля формы
 •  Любые некорректные значения (буквы в координатах точки / отрицательный радиус / ... ) должны блокироваться.
 ```
 
+<a id="защита"></a>
+
 ## Темы для подготовки к защите лабораторной работы
 
 ```python
@@ -85,8 +126,8 @@
 2. Cклонируйте репозиторий:
 
    ```bash
-   SSH(recommended): [email protected]:worthant/web-programming.git
-   HTTPS: https://github.com/worthant/web-programming.git
+   SSH(recommended): [email protected]:worthant/simple-one-page-website.git
+   HTTPS: https://github.com/worthant/simple-one-page-website.git
    ```
 
 3. Перейдите в директорию проекта:
@@ -95,38 +136,34 @@
    cd <your_repo>
    ```
 
-4. Инициализируйте проект с помощью пакетного менеджера `yarn`:
+4. Инициализируйте проект с помощью пакетного менеджера `yarn` (должен быть установлен с помощью `npm`):
 
    ```bash
-   yarn init
+   yarn install
    ```
 
-   - пока можно проскипать все вопросы на "enter"
-
-5. Ставим `http-server` - простой статический сервер:
+5. Запускаем режим разработки с автообновлением страницы
 
    ```bash
-   yarn add http-server
+   yarn dev
    ```
 
-6. Запускаем сервер:
-
-   ```bash
-   yarn http-server
-   ```
+6. Откройте браузер и перейдите на `http://localhost:3000/`
 
-   - по умолчанию пакет **http-server** запустит сервер на порте 8080
-   - чтобы поменять порт: `yarn http-server -p 3000`
-7. Откройте браузер и перейдите на `http://localhost:8080`
+7. Поменяйте `deploy.sh` для ваших собственных нужд и сделайте деплой готового проекта на сервер с помощью `yarn deploy`
 
 ## Руководство по эксплуатации
 
 1. Заполните поля формы на главной странице: введите координаты точки и радиус
 2. Нажмите кнопку "Отправить", чтобы отправить данные на обработку PHP-скрипту
 3. Результаты обработки будут отображаться в таблице на главной странице
 
-- Демонстрация работы в [разборе на youtube](https://youtu.be/dQw4w9WgXcQ?t=90)
-
 ## Теоретические материалы
 
-1. **URI** - **URL** - **URN** : https://wiki.merionet.ru/articles/url-i-uri-v-chem-razlichie/
+1. **URI** - **URL** - **URN** : <https://wiki.merionet.ru/articles/url-i-uri-v-chem-razlichie/>
+
+2. **Web docs 1** : <https://www.w3schools.com/css/css3_borders.asp>
+
+3. **Web docs 2** : <https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th>
+
+4. **Достойный гайд на вопросы с se.ifmo** : [guide](https://docs.google.com/document/u/0/d/13eAoOwDXg1enr3eFeawcM76AAhufZljDA4XYcNYAyDg/mobilebasic)