user UI Done

HTML UI/.idea/.gitignore

@@ -0,0 +1,5 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/

HTML UI/.idea/HTML UI.iml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

HTML UI/.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/HTML UI.iml" filepath="$PROJECT_DIR$/.idea/HTML UI.iml" />
+    </modules>
+  </component>
+</project>

HTML UI/.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$/.." vcs="Git" />
+  </component>
+</project>

HTML UI/USER/css/change_department.css

@@ -0,0 +1,97 @@
+body, html {
+    height: 100%;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+
+    font-family: "Roboto", sans-serif;
+    font-weight: 500;
+    font-style: normal;
+
+    background-image: url('../assets/background.png');
+    background-size: cover;
+    background-repeat: no-repeat;
+
+}
+
+.container {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+    align-items: center;
+    min-height: 100vh;
+}
+
+.signup-form {
+    background-color: #535C91;
+    opacity: 71;
+    padding: 8vh 3vh 5vh;
+    border-radius: 1rem;
+    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.9);
+    width: 25%;
+}
+
+.signup-form-title{
+    margin-bottom: 5vh;
+    color: #FFFFFF;
+    text-align: center;
+}
+
+.signup-form-title h2 {
+    color: #FFFFFF;
+    margin: 0;
+    padding: 0;
+    font-size: 5vh;
+}
+
+.signup-form-title hr{
+    width: 65%;
+}
+
+.signup-form-content{
+    display: flex;
+    margin-left: 2rem;
+    flex-direction: column;
+    align-items: start;
+    font-size: 1.5rem;
+    color: white;
+    font-weight: bold;
+}
+
+.signup-form-content input{
+    margin: 0.7rem;
+}
+
+.signup-form-footer{
+    margin-top: 7vh;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-content: center;
+    align-items: center;
+}
+
+button {
+    font-weight: bold;
+    width: 35%;
+    font-size: 1rem;
+    padding: 10px;
+    border: none;
+    border-radius: 5px;
+    margin-top: 5px;
+    cursor: pointer;
+}
+
+button:hover{
+    filter: brightness(85%);
+}
+
+.signup-form button[name="continue"] {
+    background-color: #F44336;
+    color: white;
+}
+
+.signup-form button[name="back"] {
+    background-color: #23BDEE;
+    color: white;
+}

HTML UI/USER/css/login.css

@@ -0,0 +1,102 @@
+body, html {
+    height: 100%;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+
+    font-family: "Roboto", sans-serif;
+    font-weight: 500;
+    font-style: normal;
+
+    background-image: url('../assets/background.png');
+    background-size: cover;
+    background-repeat: no-repeat;
+
+}
+
+.container {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+    align-items: center;
+    min-height: 100vh;
+}
+
+.header{
+    color: #1B1A55;
+    font-size: 4vh;
+    text-transform: uppercase;
+    line-height: 2.5rem;
+    margin-bottom: 10rem;
+}
+
+.signup-form {
+    background-color: #535C91;
+    opacity: 71;
+    padding: 9vh 3vh 5vh;
+    border-radius: 1rem;
+    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.9);
+    width: 25%;
+}
+
+.signup-form-title{
+    margin: 0 0 5vh 0;
+    text-align: center;
+}
+
+.signup-form-title h2{
+    color: #FFFFFF;
+    font-size: 5vh;
+    margin: 0;
+    padding: 0;
+}
+
+.signup-form hr{
+    width: 40%;
+}
+
+.signup-form-content{
+    display: flex;
+    flex-direction: column;
+    align-content: center;
+    flex-wrap: wrap;
+}
+
+.signup-form input {
+    text-align: center;
+    color: white;
+    font-weight: bold;
+    font-size: 1.2rem;
+    width: 70%;
+    padding: 1rem;
+    margin: 0.7rem;
+    background-color: #1B1A55;
+    border-radius: 10px;
+}
+
+button {
+    font-weight: bold;
+    width: 40%;
+    font-size: 1rem;
+    padding: 10px;
+    border: none;
+    border-radius: 5px;
+    margin-top: 1rem;
+    cursor: pointer;
+}
+
+button:hover{
+    filter: brightness(85%);
+}
+
+.signup-form-footer{
+    margin-top: 3vh;
+    display: flex;
+    align-content: center;
+    justify-content: center;
+}
+
+.signup-form button[name="submit"] {
+    background-color: #F44336;
+    color: white;
+}

HTML UI/USER/css/main_menu.css

@@ -0,0 +1,128 @@
+body, html {
+    height: 100%;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+
+    font-family: "Roboto", sans-serif;
+    font-weight: 500;
+    font-style: normal;
+
+    background-image: url('../assets/background.png');
+    background-size: cover;
+    background-repeat: no-repeat;
+
+}
+
+.container {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+    align-items: center;
+    min-height: 100vh;
+    text-align: center;
+}
+
+.left_block{
+    display: flex;
+    flex-direction: column;
+    background-color: #535C91;
+    opacity: 71;
+    padding: 2rem;
+    border-radius: 1rem;
+    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.9);
+    color: white;
+}
+
+.left_block_top{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    text-align: left;
+}
+
+.left_block_top h1{
+    padding: 0;
+    margin: 0;
+}
+
+.left_block_top img{
+    margin: 0 3vw 0 5vw;
+    width: 8vw;
+    height: 8vw;
+}
+
+.left_block_content{
+    margin: 2rem 0 2rem 0;
+}
+
+.left_block_buttons{
+    display: flex;
+    flex-direction: row;
+    align-content: center;
+    align-items: center;
+    justify-content: center;
+}
+
+button{
+    margin: 0 1rem 0 1rem;
+    width: 15vw;
+    height: 10vh;
+
+    border: none;
+    border-radius: 10px;
+
+    color: white;
+    font-size: 1rem;
+    font-weight: bold;
+
+    text-transform: uppercase;
+    cursor: pointer;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    outline: none;
+    transition: background-color 0.3s ease;
+}
+
+button:hover{
+    filter: brightness(85%);
+}
+
+.left_block_footer{
+    display: flex;
+    align-items: center;
+    justify-content: end;
+}
+
+.right_block{
+    display: flex;
+    flex-direction: column;
+    background-color: #535C91;
+    opacity: 71;
+    padding: 2rem;
+    border-radius: 1rem;
+    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.9);
+    color: white;
+}
+
+button[name="logout"]{
+    margin: 0;
+    padding: 0;
+    width: 10vw;
+    height: 5vh;
+    background-color: #F44336;
+}
+
+button[name="alert"]{
+    margin: 0.7rem;
+    background-color: #F44336;
+}
+
+button[name="notification"]{
+    margin: 0.7rem;
+    background-color: #23BDEE;
+}
+
+button[name="menu_button"]{
+    margin: 0.7rem;
+    background-color: #1B1A55;
+}

HTML UI/USER/css/profile.css

@@ -0,0 +1,105 @@
+body, html {
+    height: 100%;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+
+    font-family: "Roboto", sans-serif;
+    font-weight: 500;
+    font-style: normal;
+
+    background-image: url('../assets/background.png');
+    background-size: cover;
+    background-repeat: no-repeat;
+
+}
+
+.container {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+    align-items: center;
+    min-height: 100vh;
+    text-align: center; /* Center the text for all child elements */
+}
+
+.header{
+    color: #1B1A55;
+    font-size: 4vh;
+    text-transform: uppercase;
+    line-height: 2.5rem;
+    margin-bottom: 10rem;
+}
+
+.signup-form {
+    background-color: #535C91;
+    opacity: 71;
+    padding: 13vh 3vh 5vh;
+    border-radius: 1rem;
+    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.9);
+    width: 25%;
+}
+
+.signup-form-title{
+    margin-bottom: 5vh;
+}
+
+.signup-form-title h2 {
+    color: #FFFFFF;
+    margin: 0;
+    padding: 0;
+    text-align: center;
+    font-size: 5vh;
+}
+
+.signup-form button {
+    width: 100%;
+    padding: 10px;
+    border: none;
+    border-radius: 5px;
+    margin-top: 5px;
+    cursor: pointer;
+}
+
+.signup-form-footer{
+    margin-top: 7vh;
+    display: flex;
+    flex-direction: row;
+}
+
+.signup-form button{
+    font-weight: bold;
+    width: 40%;
+    font-size: 1rem;
+}
+
+.signup-form button:hover{
+    filter: brightness(85%);
+}
+
+.signup-form hr{
+    width: 40%;
+}
+
+.signup-form button[name="login"] {
+    background-color: #2196F3;
+    color: white;
+    margin-right: 5rem;
+}
+
+.signup-form input {
+    text-align: center;
+    color: white;
+    font-weight: bold;
+    font-size: 1.2rem;
+    width: 70%;
+    padding: 1rem;
+    margin: 0.7rem;
+    background-color: #1B1A55;
+    border-radius: 10px;
+}
+
+.signup-form button[name="submit"] {
+    background-color: #F44336;
+    color: white;
+}

HTML UI/USER/css/sending_file_confirmation.css

@@ -0,0 +1,37 @@
+body, html {
+    height: 100%;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+
+    font-family: "Roboto", sans-serif;
+    font-weight: 500;
+    font-style: normal;
+
+    background-image: url('../assets/background.png');
+    background-size: cover;
+    background-repeat: no-repeat;
+
+}
+
+.container {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+    align-items: center;
+    min-height: 100vh;
+    text-align: center; /* Center the text for all child elements */
+}
+
+.header{
+    color: #1B1A55;
+    font-size: 4vh;
+    text-transform: uppercase;
+    line-height: 2.5rem;
+    margin-bottom: 10rem;
+}
+
+img{
+    width:20%;
+    height: 20%;
+}

HTML UI/USER/css/set_departments.css

@@ -0,0 +1,105 @@
+body, html {
+    height: 100%;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+
+    font-family: "Roboto", sans-serif;
+    font-weight: 500;
+    font-style: normal;
+
+    background-image: url('../assets/background.png');
+    background-size: cover;
+    background-repeat: no-repeat;
+
+}
+
+.container {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+    align-items: center;
+    min-height: 100vh;
+    text-align: center;
+}
+
+.header{
+    color: #1B1A55;
+    font-size: 4vh;
+    text-transform: uppercase;
+    line-height: 2.5rem;
+    margin-bottom: 10rem;
+}
+
+.signup-form {
+    background-color: #535C91;
+    opacity: 71;
+    padding: 8vh 3vh 5vh;
+    border-radius: 1rem;
+    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.9);
+    width: 25%;
+}
+
+.signup-form-title{
+    margin-bottom: 5vh;
+}
+
+.signup-form-title h2 {
+    color: #FFFFFF;
+    margin: 0;
+    padding: 0;
+    text-align: center;
+    font-size: 5vh;
+}
+
+.signup-form hr{
+    width: 65%;
+}
+
+input{
+    margin: 0 0 1rem 0;
+}
+
+.signup-form-content{
+    display: flex;
+    margin-left: 2rem;
+    flex-direction: column;
+    align-items: start;
+    font-size: 1.5rem;
+    color: white;
+    font-weight: bold;
+}
+
+.signup-form-footer{
+    margin-top: 5vh;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    align-content: space-between;
+}
+
+button {
+    font-weight: bold;
+    width: 40%;
+    font-size: 1rem;
+    padding: 10px;
+    border: none;
+    border-radius: 5px;
+    margin-top: 5px;
+    cursor: pointer;
+}
+
+button:hover{
+    filter: brightness(85%);
+}
+
+button[name="continue"] {
+    background-color: #F44336;
+    color: white;
+}
+
+button[name="back"] {
+    background-color: #23BDEE;
+    color: white;
+}

HTML UI/USER/css/share_file.css

@@ -0,0 +1,185 @@
+body, html {
+    height: 100%;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+
+    font-family: "Roboto", sans-serif;
+    font-weight: 500;
+    font-style: normal;
+
+    background-image: url('../assets/background.png');
+    background-size: cover;
+    background-repeat: no-repeat;
+
+}
+
+.container {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+    align-items: center;
+    min-height: 100vh;
+    text-align: center;
+}
+
+h1, h2{
+    padding: 0;
+    margin: 0;
+}
+
+.left_block{
+    display: flex;
+    flex-direction: column;
+    background-color: #535C91;
+    opacity: 71;
+    padding: 2rem;
+    border-radius: 1rem;
+    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.9);
+    color: white;
+}
+
+.left_block_top{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+.left_block_top_left{
+    display: flex;
+    flex-direction: column;
+    justify-content: start;
+    text-align: left;
+}
+
+.left_block_top_left hr{
+    margin: 0 0 1rem 0;
+    width: 45%;
+}
+
+.left_block_top_right{
+    width: 10vw;
+
+    display: flex;
+    flex-wrap: wrap;
+    align-content: center;
+    justify-content: center;
+
+    padding: 0 2vh 0 2vh;
+    background-color: #1B1A55;
+    margin: 0 0 0 5vw;
+    border-radius: 1rem;
+}
+
+.left_block_content{
+    display: flex;
+    justify-content: start;
+    align-items: center;
+    margin: 2rem 0 2rem 0;
+}
+
+.left_block_buttons{
+    display: flex;
+    flex-direction: row;
+    align-content: center;
+    align-items: center;
+    justify-content: center;
+}
+
+button{
+    margin: 0 1rem 0 1rem;
+    width: 10vw;
+    height: 5vh;
+
+    border: none;
+    border-radius: 10px;
+
+    color: white;
+    font-size: 1rem;
+    font-weight: bold;
+
+    text-transform: uppercase;
+    cursor: pointer;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    outline: none;
+    transition: background-color 0.3s ease;
+}
+
+button:hover{
+    filter: brightness(85%);
+}
+
+.left_block_footer{
+    display: flex;
+    align-items: center;
+    justify-content: end;
+}
+
+.right_block{
+    display: flex;
+    flex-direction: column;
+    background-color: #535C91;
+    opacity: 71;
+    padding: 2rem;
+    border-radius: 1rem;
+    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.9);
+    color: white;
+}
+
+.choose_user_form_title{
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column;
+    justify-content: left;
+    align-content: start;
+}
+
+.choose_user_form_title hr{
+    width: 40%;
+}
+
+.choose_user_form_content{
+    display: flex;
+    margin: 1rem 7rem 2rem 0.5rem;
+    flex-direction: column;
+    align-items: start;
+
+    height: 20vh; /* Fixed height */
+    width: 100%; /* Full width */
+    overflow: auto; /* Enable scrolling */
+
+    font-size: 1.2rem;
+    color: white;
+    font-weight: bold;
+}
+
+.choose_user_form_content::-webkit-scrollbar {
+    width: 10px; /* Reduced width of the scrollbar by 2px */
+}
+
+.choose_user_form_content::-webkit-scrollbar-track {
+    background: #1B1A55; /* Updated track color */
+}
+
+.choose_user_form_content::-webkit-scrollbar-thumb {
+    background: #535C91; /* Updated handle color */
+    border: 2px solid #1B1A55; /* Adding a border to effectively reduce the thumb size */
+}
+
+.choose_user_form_content::-webkit-scrollbar-thumb:hover {
+    background: #555; /* Updated handle color on hover */
+}
+
+button[name="back"]{
+    background-color: #23BDEE;
+}
+
+button[name="submit"]{
+    background-color: #F44336;
+}
+
+button[name="select_file"]{
+    margin: 0;
+    width: 8vw;
+    background-color: #1B1A55;
+}

HTML UI/USER/css/sign_up_confirmation.css

@@ -0,0 +1,32 @@
+body, html {
+    height: 100%;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+
+    font-family: "Roboto", sans-serif;
+    font-weight: 500;
+    font-style: normal;
+
+    background-image: url('../assets/background.png');
+    background-size: cover;
+    background-repeat: no-repeat;
+
+}
+
+.container {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+    align-items: center;
+    min-height: 100vh;
+    text-align: center; /* Center the text for all child elements */
+}
+
+.header{
+    color: #1B1A55;
+    font-size: 4vh;
+    text-transform: uppercase;
+    line-height: 2.5rem;
+    margin-bottom: 10rem;
+}

HTML UI/USER/css/sign_up_start.css

@@ -0,0 +1,104 @@
+body, html {
+    height: 100%;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+
+    font-family: "Roboto", sans-serif;
+    font-weight: 500;
+    font-style: normal;
+
+    background-image: url('../assets/background.png');
+    background-size: cover;
+    background-repeat: no-repeat;
+
+}
+
+.container {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+    align-items: center;
+    min-height: 100vh;
+    text-align: center;
+}
+
+.header{
+    color: #1B1A55;
+    font-size: 4vh;
+    text-transform: uppercase;
+    line-height: 2.5rem;
+    margin-bottom: 10rem;
+}
+
+.signup-form {
+    background-color: #535C91;
+    opacity: 71;
+    padding: 13vh 3vh 5vh;
+    border-radius: 1rem;
+    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.9);
+    width: 25%;
+}
+
+.signup-form-title{
+    margin-bottom: 5vh;
+}
+
+.signup-form-title h2 {
+    color: #FFFFFF;
+    margin: 0;
+    padding: 0;
+    text-align: center;
+    font-size: 5vh;
+}
+
+.signup-form hr{
+    width: 40%;
+}
+
+input {
+    text-align: center;
+    color: white;
+    font-weight: bold;
+    font-size: 1.2rem;
+    width: 70%;
+    padding: 1rem;
+    margin: 0.7rem;
+    background-color: #1B1A55;
+    border-radius: 10px;
+}
+
+.signup-form-footer{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-content: center;
+    align-items: center;
+    margin-top: 7vh;
+}
+
+button {
+    font-weight: bold;
+    width: 35%;
+    font-size: 1rem;
+    padding: 10px;
+    border: none;
+    border-radius: 5px;
+    margin-top: 5px;
+    cursor: pointer;
+}
+
+button:hover{
+    filter: brightness(85%);
+}
+
+button[name="login"] {
+    background-color: #2196F3;
+    color: white;
+}
+
+button[name="submit"] {
+    background-color: #F44336;
+    color: white;
+}

HTML UI/USER/html/change_department.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" href="../assets/hard-disk.ico" type="image/x-icon">
+    <title>Department Selection</title>
+    <link rel="stylesheet" href="../css/change_department.css">
+</head>
+<body>
+<div class="container">
+    <div class="signup-form">
+        <form action="/signup" method="post">
+            <div class="signup-form-title">
+                <h2>Choose your department</h2>
+                <hr>
+            </div>
+            <div class="signup-form-content">
+                <label><input type="radio" name="dept" value="accounting">Contabilitate</label>
+                <label><input type="radio" name="dept" value="developer"> Programator</label>
+                <label><input type="radio" name="dept" value="designer"> Designer</label>
+            </div>
+            <div class="signup-form-footer">
+                <button type="button" name="back">Back</button>
+                <button type="submit" name="continue">Continue</button>
+            </div>
+        </form>
+    </div>
+</div>
+</body>
+</html>

HTML UI/USER/html/login.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" href="../assets/hard-disk.ico" type="image/x-icon">
+    <title>Login</title>
+    <link rel="stylesheet" href="../css/login.css">
+</head>
+<body>
+<div class="container">
+    <div class="header">
+        <h1>DO WE KNOW</h1>
+        <h1>EACH OTHER?</h1>
+    </div>
+    <div class="signup-form">
+        <form action="/signup" method="post">
+            <div class="signup-form-title">
+                <h2>Login</h2>
+                <hr>
+            </div>
+            <div class="signup-form-content">
+                <input type="email" name="email" placeholder="Email">
+                <input type="password" name="password" placeholder="Password">
+            </div>
+            <div class="signup-form-footer">
+                <button type="submit" name="submit">Submit</button>
+            </div>
+        </form>
+    </div>
+</div>
+</body>
+</html>

HTML UI/USER/html/main_menu.html

@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" href="../assets/hard-disk.ico" type="image/x-icon">
+    <title>Main Page</title>
+    <link rel="stylesheet" href="../css/main_menu.css">
+</head>
+<body>
+<div class="container">
+    <div class="left_block">
+        <div class="left_block_top">
+            <div>
+                <h1>WELCOME BACK,</h1>
+                <h1>'username'!</h1>
+                <h2>Hope you have a productive day!</h2>
+            </div>
+            <img src="../assets/user_1144760.png" alt="">
+        </div>
+        <div class="left_block_content">
+            <div class="left_block_buttons">
+                <button name="menu_button">Change backup directory location</button>
+                <button name="menu_button">Change work department</button>
+            </div>
+            <div class="left_block_buttons">
+                <button name="menu_button">Change your info</button>
+                <button name="menu_button">Share a file</button>
+            </div>
+            <div class="left_block_buttons">
+                <button name="menu_button">Decrypt files</button>
+            </div>
+        </div>
+        <div class="left_block_footer">
+            <button name="logout">Logout</button>
+        </div>
+    </div>
+    <div class="right_block">
+        <div>
+            <h1>NOTIFICATIONS</h1>
+            <hr>
+        </div>
+        <div>
+            <div>
+                <button name="alert">Set your backup directory!</button>
+            </div>
+            <div>
+                <button name="notification">You received a file from 'username'!</button>
+            </div>
+            <div>
+                <button name="notification">Decrypt complete!</button>
+            </div>
+        </div>
+    </div>
+</div>
+</body>
+</html>

HTML UI/USER/html/profile.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" href="../assets/hard-disk.ico" type="image/x-icon">
+    <title>Signup</title>
+    <link rel="stylesheet" href="../css/profile.css">
+</head>
+<body>
+<div class="container">
+    <div class="signup-form">
+        <form action="/signup" method="post">
+            <div class="signup-form-title">
+                <h2>Profile</h2>
+                <hr>
+            </div>
+            <div>
+                <input type="email" name="email" placeholder="Email">
+                <input type="text" name="username" placeholder="Username">
+                <input type="password" name="password" placeholder="Password">
+            </div>
+            <div class="signup-form-footer">
+                <button type="button" name="login">Back</button>
+                <button type="submit" name="submit">Submit</button>
+            </div>
+        </form>
+    </div>
+</div>
+</body>
+</html>

HTML UI/USER/html/sending_file_confirmation.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" href="../assets/hard-disk.ico" type="image/x-icon">
+    <title>Setup Completion</title>
+    <link rel="stylesheet" href="../css/sending_file_confirmation.css">
+</head>
+<body>
+<div class="container">
+    <div class="header">
+        <h1>SENDING THE FILE!</h1>
+        <h2>PlEASE WAIT</h2>
+        <img src="../assets/loading.gif" alt="Description of GIF">
+
+    </div>
+</div>
+</body>
+</html>

HTML UI/USER/html/share_file.html

@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" href="../assets/hard-disk.ico" type="image/x-icon">
+    <title>Share File</title>
+    <link rel="stylesheet" href="../css/share_file.css">
+</head>
+<body>
+<div class="container">
+    <div class="left_block">
+        <div class="left_block_top">
+            <div class="left_block_top_left">
+                <h1>SHARE A FILE</h1>
+                <hr>
+                <h2>First select the file you want to share</h2>
+                <h2>(can be whatever resource from the system)</h2>
+            </div>
+            <div class="left_block_top_right">
+                <h2>No file chosen</h2>
+            </div>
+        </div>
+        <div class="left_block_content">
+            <button type="button" name="select_file">Select</button>
+        </div>
+        <div class="left_block_footer">
+            <button type="button" name="back">Back</button>
+            <button type="submit" name="submit">Submit</button>
+        </div>
+    </div>
+    <div class="right_block">
+        <form action="/signup" method="post">
+            <div class="choose_user_form_title">
+                <h2>USERS</h2>
+                <hr>
+            </div>
+            <div class="choose_user_form_content">
+                <label><input type="radio" name="dept" value="accounting">user1</label>
+                <label><input type="radio" name="dept" value="developer">user2</label>
+                <label><input type="radio" name="dept" value="designer">user3</label>
+                <label><input type="radio" name="dept" value="accounting">Contabilitate</label>
+                <label><input type="radio" name="dept" value="developer">Programator</label>
+                <label><input type="radio" name="dept" value="designer">Designer</label>
+                <label><input type="radio" name="dept" value="accounting">Contabilitate</label>
+                <label><input type="radio" name="dept" value="developer">Programator</label>
+                <label><input type="radio" name="dept" value="designer">Designer</label>
+            </div>
+        </form>
+    </div>
+</div>
+</body>
+</html>

HTML UI/USER/html/sign_up_confirmation.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" href="../assets/hard-disk.ico" type="image/x-icon">
+    <title>Setup Completion</title>
+    <link rel="stylesheet" href="../css/sign_up_confirmation.css">
+</head>
+<body>
+<div class="container">
+    <div class="header">
+        <h1>ALL THE SETUP IS DONE!</h1>
+        <h2>LET’S PROCEED TO THE</h2>
+        <h2>MAIN PAGE</h2>
+    </div>
+</div>
+</body>
+</html>

HTML UI/USER/html/sign_up_profile.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" href="../assets/hard-disk.ico" type="image/x-icon">
+    <title>Signup</title>
+    <link rel="stylesheet" href="../css/sign_up_start.css">
+</head>
+<body>
+<div class="container">
+    <div class="header">
+        <h1>LET US MEET</h1>
+        <h1>EACH OTHER</h1>
+    </div>
+    <div class="signup-form">
+        <form action="/signup" method="post">
+            <div class="signup-form-title">
+                <h2>Sign Up</h2>
+                <hr>
+            </div>
+            <div>
+                <input type="email" name="email" placeholder="Email">
+                <input type="text" name="username" placeholder="Username">
+                <input type="password" name="password" placeholder="Password">
+            </div>
+            <div class="signup-form-footer">
+                <button type="button" name="login">Login</button>
+                <button type="submit" name="submit">Submit</button>
+            </div>
+        </form>
+    </div>
+</div>
+</body>
+</html>

HTML UI/USER/html/sing_up_departments.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" href="../assets/hard-disk.ico" type="image/x-icon">
+    <title>Department Selection</title>
+    <link rel="stylesheet" href="../css/set_departments.css">
+</head>
+<body>
+<div class="container">
+    <div class="header">
+        <h1>TELL ME MORE</h1>
+        <h1>ABOUT</h1>
+        <h1>YOUR WORK</h1>
+    </div>
+    <div class="signup-form">
+        <form action="/signup" method="post">
+            <div class="signup-form-title">
+                <h2>Choose your department</h2>
+                <hr>
+            </div>
+            <div class="signup-form-content">
+                <label><input type="radio" name="dept" value="accounting">Contabilitate</label>
+                <label><input type="radio" name="dept" value="developer"> Programator</label>
+                <label><input type="radio" name="dept" value="designer"> Designer</label>
+            </div>
+            <div class="signup-form-footer">
+                <button type="submit" name="continue">Continue</button>
+            </div>
+        </form>
+    </div>
+</div>
+</body>
+</html>

UC/src/models/usersRegisterModel.js

@@ -3,7 +3,8 @@ const Joi = require('joi');
 const usersRegisterModel = Joi.object({
     name: Joi.string().required(),
     email: Joi.string().email().required(),
-    password: Joi.string().min(8).max(20).required()
+    password: Joi.string().min(8).max(20).required(),
+    department: Joi.string().required()
 });
 
 module.exports = usersRegisterModel;

UC/src/routes/users.js

@@ -42,7 +42,7 @@ router.post('/register', validateRegisterBody, async (req, res) => {
         const usersData = fs.readFileSync(usersFilePath, 'utf8');
         const usersJson = JSON.parse(usersData);
 
-        const { name, email, password } = req.jsonModel;
+        const { name, email, password, department} = req.jsonModel;
 
         const existingUser = usersJson.find(user => user.email === email);
         if (existingUser) {
@@ -56,7 +56,8 @@ router.post('/register', validateRegisterBody, async (req, res) => {
             id: userId,
             name: name,
             email: email,
-            password: hashedPassword
+            password: hashedPassword,
+            department: department
         };
 
         usersJson.push(newUser);