Solution: Tam, Salvador, Jaime, Gonzalo

README.md

@@ -1,72 +1,38 @@
-`#html` `#css` `#js` `#php` `#master-in-software-engineering`
+# PHP Local FileSystem explorer
 
-# PHP Local FileSystem explorer <!-- omit in toc -->
+The main objective of this project is to replicate a system file explorer that allows the user to navigate, create directories and upload files in the same way as he would in his usual operating system. In order to get access to the dashboard, users need to be authenticated. Each user can only navigate through his/her personal directory which is located in root.
 
-<p>
-  <img alt="Version" src="https://img.shields.io/badge/version-1.0-blue.svg?cacheSeconds=2592000" />
-</p>
+## Index
 
->In this project you will have to create a system file explorer that allows the user to navigate, create directories and upload files in the same way as he would in his usual operating system. 
-
->The file explorer is a tool that allows you to directly view and manipulate the files and directories associated with a path, so you must take into account from which path the user starts and which path they can access.
-
-
-## Index <!-- omit in toc -->
-
-- [Requirements](#requirements)
-- [Repository](#repository)
+- [Table of Contents](#table-of-contents)
 - [Technologies used](#technologies-used)
-- [Project delivery](#project-delivery)
+- [Author](#author)
 - [Resources](#resources)
 
-## Requirements
-
-- You cannot use file third-party libraries
-- You will not be able to use global variables in PHP.
-- You must use GIT
-- You must use the PHP > v7
-- Create a clear and orderly directory structure
-- Both the code and the comments must be written in English
-- Use the camelCase code style to define variables and functions
-- In the case of using HTML, never use inline styles
-- In the case of using different programming languages ​​always define the implementation in separate terms
-- Remember that it is important to divide the tasks into several sub-tasks so that in this way you can associate each particular step of the construction with a specific commit
-- You should try as much as possible that the commits and the planned tasks are the same
-Delete files that are not used or are not necessary to evaluate the project
-
-## Repository
-
-First of all you must fork this project into your GitHub account.
+## Table of Contents
 
-To create a fork on GitHub is as easy as clicking the “fork” button on the repository page.
-
-<img src="https://docs.github.com/assets/images/help/repository/fork_button.jpg" alt="Fork on GitHub" width='450'>
+| File / Folder       | Description                                                |
+| ------------------- | ---------------------------------------------------------- |
+| `assets`            | CSS, Javascript, images, data, icons                       |
+| `config`            | Application configuration                                  |
+| `inc`               | Snippets to share among pages                              |
+| `public`            | Files that can be directly accessed via HTTP/HTTPS         |
+| `package.json`      | List the packages the project depends on                   |
+| `package-lock.json` | Keep track of the exact version of every package installed |
 
 ## Technologies used
 
-\* HTML
-
-\* CSS
-
-\* JS
-
-\* PHP
-
-## Project delivery
-
-To deliver this project you must follow the steps indicated in the document:
-
-- [Submitting a solution](https://www.notion.so/Submitting-a-solution-524dab1a71dd4b96903f26385e24cdb6)
+- PHP
+- Javascript
+- HTML
+- CSS
 
-- You must include the project documentation in PDF format.
-- You must include a presentation in PDF format explaining:
-  - Comparison of the original design (Wireframe) with the final result of the project
-  - Comparison of the use case diagram with the actions that the user can finally perform
-  - Comparison of the original use case diagram with the final user actions
-  - What lessons you’ve learned during this project
-  - What problems have you encountered when developing this project?
-  - How you have organized and distributed the tasks
+## Author
 
+- [@Gonzalo](https://github.com/gonzalogarahuetes)
+- [@Jaime](https://github.com/jaimealcalde)
+- [@Salvador](https://github.com/SalvaBandicoot)
+- [@tam](https://github.com/tamtran2885)
 
 ## Resources
 

assets/css/editing-modal.css

@@ -0,0 +1,106 @@
+/*---------------------------------EDITING MODAL-------------------------------------*/
+
+.editing__modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+  background: rgba(0, 0, 0, 0.8);
+  cursor: pointer;
+  visibility: hidden;
+  opacity: 0;
+  transition: all 0.35s ease-in;
+}
+.editing__modal.is-visible {
+  visibility: visible;
+  opacity: 1;
+}
+
+.modal-dialog {
+  position: relative;
+  max-width: 800px;
+  max-height: 80vh;
+  border-radius: 5px;
+  background: white;
+  overflow: auto;
+  cursor: default;
+}
+
+.modal-dialog > * {
+  padding: 1rem;
+}
+
+.modal-footer {
+  background: lightblue;
+  text-align: center;
+}
+
+.modal__title {
+  color: rgba(0, 136, 169, 1);
+  margin-left: 1rem;
+}
+
+.modal-header {
+  background: lightblue;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 1.25rem;
+}
+
+[data-animation="slideInOutLeft"] .modal-dialog {
+  opacity: 0;
+  transform: translateX(-100%);
+  transition: all 0.5s var(--bounceEasing);
+}
+
+[data-animation="slideInOutLeft"].is-visible .modal-dialog {
+  opacity: 1;
+  transform: none;
+  transition-delay: 0.2s;
+}
+
+.close-modal {
+  padding: 0.5rem;
+  border-radius: 50%;
+  border: none;
+  color: white;
+  background-color: rgba(0, 136, 169, 1);
+  font-size: 0.5rem;
+}
+
+.close-modal:hover {
+  background-color: rgba(0, 136, 169, 0.7);
+  cursor: pointer;
+}
+
+.modal__input {
+  padding: 1rem;
+  font-size: 1.5;
+  border: 2px solid rgba(0, 136, 169, 1);
+  border-radius: 0.3rem;
+  margin: 0.5rem 0.5rem 0 0;
+}
+
+.modal__input:focus {
+  background-color: lightblue;
+}
+
+.modal__btn {
+  color: white;
+  padding: 1rem;
+  border-radius: 0.3rem;
+  border: none;
+  background-color: rgba(0, 136, 169, 1);
+  margin: 0.5rem 0.5rem;
+  cursor: pointer;
+}
+
+.modal__btn:hover {
+  background-color: rgba(0, 136, 169, 0.7);
+}

assets/css/header.css

@@ -0,0 +1,46 @@
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 20px;
+  background: lightblue;
+}
+
+.header__logout {
+  background-color: white;
+  border-radius: 1rem;
+  border: 1.5px solid rgba(0, 136, 169, 1);
+  margin-right: 1rem;
+  padding: 0.5rem 1rem;
+  text-decoration: none;
+  color: rgba(0, 136, 169, 1);
+}
+
+.header__logout:hover {
+  background-color: rgba(0, 136, 169, 1);
+  border: 1.5px solid white;
+  color: white;
+  box-shadow: 5px 10px 18px rgba(0, 136, 169, 0.5);
+}
+
+.header__search {
+  font-size: 16px;
+  padding: 0.5em 1rem;
+  background-color: #fff;
+  border: 1px solid rgba(0, 136, 169, 1);
+  border-radius: 1rem;
+  width: 200px;
+  margin: 15px 0;
+}
+
+.header__search::placeholder {
+  color: rgba(0, 136, 169, 1);
+}
+
+.header__search:focus {
+  outline: none;
+  background-color: rgba(0, 136, 169, 1);
+  border: 1.5px solid white;
+  color: white;
+  box-shadow: 5px 10px 18px rgba(0, 136, 169, 0.5);
+}

assets/css/login.css

@@ -0,0 +1,129 @@
+/*----------------------------------------LOGIN---------------------------------------*/
+
+.darkbg {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  text-align: center;
+  height: 100vh;
+  width: 100vw;
+  background-image: url("../img/dark-background-images-5561-5821-hd-wallpapers.jpg");
+  background-repeat: no-repeat;
+  padding: 3rem;
+}
+
+.login__div {
+  background-color: white;
+  margin: auto;
+  width: 35%;
+  padding: 2rem;
+  border-radius: 0.3rem;
+  border: 1.5px solid rgba(0, 136, 169, 1);
+  box-shadow: 5px 10px 18px rgba(0, 136, 169, 0.5);
+}
+
+.login {
+  display: flex;
+  flex-direction: column;
+  gap: 1.3rem;
+  text-align: center;
+}
+
+.login__input {
+  outline: none;
+  padding: 0.5rem;
+  border-radius: 0.3rem;
+  background-color: lightblue;
+  color: black;
+  font-size: 1.2rem;
+}
+
+.login__input:focus {
+  background-color: rgba(0, 136, 169, 1);
+  color: white;
+}
+
+.login__input::placeholder {
+  color: rgba(0, 136, 169, 1);
+}
+
+.login__btn {
+  cursor: pointer;
+  padding: 0.5rem;
+  border-radius: 0.3rem;
+  font-size: 1.5rem;
+  background-color: rgba(0, 136, 169, 1);
+  color: white;
+}
+
+.login__btn:hover {
+  background-color: rgba(0, 136, 169, 0.6);
+}
+
+.login__title {
+  color: white;
+  font-size: 4rem;
+  margin: auto;
+  text-shadow: 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff,
+    0 0 42px rgba(0, 136, 169, 1), 0 0 82px rgba(0, 136, 169, 1),
+    0 0 92px rgba(0, 136, 169, 1), 0 0 102px rgba(0, 136, 169, 1),
+    0 0 151px rgba(0, 136, 169, 1);
+}
+
+.login__subtitle {
+  color: white;
+  font-size: 2rem;
+}
+
+.login__notlogged {
+  color: white;
+  font-size: 1.5rem;
+}
+
+.signup {
+  text-decoration: none;
+  color: lightblue;
+}
+
+.signup:hover {
+  text-shadow: 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff,
+    0 0 42px rgba(0, 136, 169, 1), 0 0 82px rgba(0, 136, 169, 1),
+    0 0 92px rgba(0, 136, 169, 1), 0 0 102px rgba(0, 136, 169, 1),
+    0 0 151px rgba(0, 136, 169, 1);
+}
+
+.login__error {
+  margin: auto;
+  padding: 0.75rem;
+  width: 35%;
+  border: 1px solid rgba(241, 6, 6, 0.81);
+  background-color: rgba(220, 17, 1, 0.16);
+  box-shadow: 0px 0px 2px #ff0303;
+  color: #ff0303;
+  text-shadow: 2px 1px #00040a;
+  transition: 0.5s;
+  font-size: 1.2rem;
+}
+
+.login__error:hover {
+  background-color: rgba(220, 17, 1, 0.33);
+  transition: 0.5s;
+}
+
+.login__info {
+  margin: auto;
+  padding: 0.75rem;
+  width: 35%;
+  font-size: 1.2rem;
+  border: 1px solid rgba(36, 241, 6, 0.46);
+  background-color: rgba(7, 149, 66, 0.12156862745098039);
+  box-shadow: 0px 0px 2px #259c08;
+  color: #0ad406;
+  text-shadow: 2px 1px #00040a;
+  transition: 0.5s;
+}
+
+.login__info:hover {
+  background-color: rgba(7, 149, 66, 0.35);
+  transition: 0.5s;
+}