Skip to content

  • Projects
  • Groups
  • Snippets
  • Help
    • Loading...
    • Help
    • Contribute to GitLab
  • Sign in
H
Homework83_M11
  • Project
    • Project
    • Details
    • Activity
    • Cycle Analytics
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
    • Charts
  • Issues 0
    • Issues 0
    • List
    • Board
    • Labels
    • Milestones
  • Merge Requests 0
    • Merge Requests 0
  • CI / CD
    • CI / CD
    • Pipelines
    • Jobs
    • Schedules
    • Charts
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Members
    • Members
  • Collapse sidebar
  • Activity
  • Graph
  • Charts
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
  • Ли Джен Сеп
  • Homework83_M11
  • Issues
  • #3

Closed
Open
Opened Dec 18, 2024 by bekzat kapan@bekzatkapan
  • Report abuse
  • New issue
Report abuse New issue

Frontend: Шаблон и стилизация

Конечный результат

Пользовательский интерфейс веб-приложения Шифратора-дешифратора, без логики.

План решения

  1. Создать шаблон Next приложения прописав: "npx create-next-app@latest --ts".

  2. Удалить лишние файлы такие как globe.svg, globals.css, и т.д.

  3. Редактировать "page.tsx" и "layout.tsx" в директории "app", оставив один главный компонент.

  4. Установить библиотеку для упрощения стилизации Material Design, прописав команду "npm install @mui/material @emotion/react @emotion/styled".

  5. Установить библиотеку иконок от Material для стрелки вниз и вверх, прописав команду "npm install @mui/icons-material"

  6. Написать компоненту формы для шифратора, дешифратора, пароля.

  7. В главной компоненте добавить 2 кнопки с Material Design с готовой стилизацией и компоненты полей, стилизуя через Grid и добавить прочие мелочи как название приложения и т.д.

  8. Достилизовать все компоненты, чтобы выглядело все "user-friendly".

Мотивация

Написание фронтенда приложения которое можно будет использовать для шифрования и дешифрования по методу шифрования Вегнера. Повторение компонентов React, освоение Material design и практика работы в команде с помощью веток в gitlab.

Критерии приёмки

Пользовательский интерфейс не ломается при разных разрешениях экрана, пользователю при первом взгляде понятно как шифровать и расшифровывать текст.
Edited Dec 19, 2024 by bekzat kapan
Assignee
Assign to
None
Milestone
None
Assign milestone
Time tracking
Dec 20, 2024
Due date
Dec 20, 2024
2
Labels
Задача Нужно сделать
Assign labels
  • View project labels
Reference: leedjensep/homework83_m11#3