diff --git a/.gitignore b/.gitignore
new file mode 100644
index 00000000..25c8fdba
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+package-lock.json
\ No newline at end of file
diff --git a/doc/Proyecto_Drive_Jonathan_Erick.png b/doc/Proyecto_Drive_Jonathan_Erick.png
new file mode 100644
index 00000000..8526350d
Binary files /dev/null and b/doc/Proyecto_Drive_Jonathan_Erick.png differ
diff --git a/doc/github_projects.png b/doc/github_projects.png
new file mode 100644
index 00000000..707a32b5
Binary files /dev/null and b/doc/github_projects.png differ
diff --git a/doc/img/28792.png b/doc/img/28792.png
new file mode 100644
index 00000000..61675d49
Binary files /dev/null and b/doc/img/28792.png differ
diff --git a/doc/img/28814.png b/doc/img/28814.png
new file mode 100644
index 00000000..eac209b4
Binary files /dev/null and b/doc/img/28814.png differ
diff --git a/doc/img/29080.png b/doc/img/29080.png
new file mode 100644
index 00000000..e8ef48c6
Binary files /dev/null and b/doc/img/29080.png differ
diff --git a/doc/img/29122.png b/doc/img/29122.png
new file mode 100644
index 00000000..c195f307
Binary files /dev/null and b/doc/img/29122.png differ
diff --git a/doc/img/29146.png b/doc/img/29146.png
new file mode 100644
index 00000000..c8d1e41c
Binary files /dev/null and b/doc/img/29146.png differ
diff --git a/doc/img/592965.png b/doc/img/592965.png
new file mode 100644
index 00000000..6c00916b
Binary files /dev/null and b/doc/img/592965.png differ
diff --git a/doc/img/JonathanAndErick_logo.png b/doc/img/JonathanAndErick_logo.png
new file mode 100644
index 00000000..21145df9
Binary files /dev/null and b/doc/img/JonathanAndErick_logo.png differ
diff --git a/doc/img/RPC-JP_Logo.png b/doc/img/RPC-JP_Logo.png
new file mode 100644
index 00000000..adf0e7ce
Binary files /dev/null and b/doc/img/RPC-JP_Logo.png differ
diff --git a/doc/img/csv.png b/doc/img/csv.png
new file mode 100644
index 00000000..7d01f4f4
Binary files /dev/null and b/doc/img/csv.png differ
diff --git a/doc/img/descargar.png b/doc/img/descargar.png
new file mode 100644
index 00000000..1724568d
Binary files /dev/null and b/doc/img/descargar.png differ
diff --git a/doc/img/exe-icon.png b/doc/img/exe-icon.png
new file mode 100644
index 00000000..fc7bb741
Binary files /dev/null and b/doc/img/exe-icon.png differ
diff --git a/doc/img/folder-invoices--v1.png b/doc/img/folder-invoices--v1.png
new file mode 100644
index 00000000..1c6fb65d
Binary files /dev/null and b/doc/img/folder-invoices--v1.png differ
diff --git a/doc/img/folder.png b/doc/img/folder.png
new file mode 100644
index 00000000..9bbd15a3
Binary files /dev/null and b/doc/img/folder.png differ
diff --git a/doc/img/icon_extensions/001-3ds.png b/doc/img/icon_extensions/001-3ds.png
new file mode 100644
index 00000000..0e8688fb
Binary files /dev/null and b/doc/img/icon_extensions/001-3ds.png differ
diff --git a/doc/img/icon_extensions/002-ai file.png b/doc/img/icon_extensions/002-ai file.png
new file mode 100644
index 00000000..69413324
Binary files /dev/null and b/doc/img/icon_extensions/002-ai file.png differ
diff --git a/doc/img/icon_extensions/003-app.png b/doc/img/icon_extensions/003-app.png
new file mode 100644
index 00000000..cc2bf909
Binary files /dev/null and b/doc/img/icon_extensions/003-app.png differ
diff --git a/doc/img/icon_extensions/004-asp.png b/doc/img/icon_extensions/004-asp.png
new file mode 100644
index 00000000..29128e32
Binary files /dev/null and b/doc/img/icon_extensions/004-asp.png differ
diff --git a/doc/img/icon_extensions/005-bat.png b/doc/img/icon_extensions/005-bat.png
new file mode 100644
index 00000000..83c17421
Binary files /dev/null and b/doc/img/icon_extensions/005-bat.png differ
diff --git a/doc/img/icon_extensions/006-c++.png b/doc/img/icon_extensions/006-c++.png
new file mode 100644
index 00000000..9d166a5a
Binary files /dev/null and b/doc/img/icon_extensions/006-c++.png differ
diff --git a/doc/img/icon_extensions/007-c sharp.png b/doc/img/icon_extensions/007-c sharp.png
new file mode 100644
index 00000000..7a164dde
Binary files /dev/null and b/doc/img/icon_extensions/007-c sharp.png differ
diff --git a/doc/img/icon_extensions/008-css.png b/doc/img/icon_extensions/008-css.png
new file mode 100644
index 00000000..8744b3e3
Binary files /dev/null and b/doc/img/icon_extensions/008-css.png differ
diff --git a/doc/img/icon_extensions/009-csv.png b/doc/img/icon_extensions/009-csv.png
new file mode 100644
index 00000000..2cede7a3
Binary files /dev/null and b/doc/img/icon_extensions/009-csv.png differ
diff --git a/doc/img/icon_extensions/010-dat format.png b/doc/img/icon_extensions/010-dat format.png
new file mode 100644
index 00000000..d5ec10fb
Binary files /dev/null and b/doc/img/icon_extensions/010-dat format.png differ
diff --git a/doc/img/icon_extensions/011-dll.png b/doc/img/icon_extensions/011-dll.png
new file mode 100644
index 00000000..3034ef0a
Binary files /dev/null and b/doc/img/icon_extensions/011-dll.png differ
diff --git a/doc/img/icon_extensions/012-doc.png b/doc/img/icon_extensions/012-doc.png
new file mode 100644
index 00000000..cdf9af0c
Binary files /dev/null and b/doc/img/icon_extensions/012-doc.png differ
diff --git a/doc/img/icon_extensions/013-docx.png b/doc/img/icon_extensions/013-docx.png
new file mode 100644
index 00000000..509bda13
Binary files /dev/null and b/doc/img/icon_extensions/013-docx.png differ
diff --git a/doc/img/icon_extensions/014-dwg.png b/doc/img/icon_extensions/014-dwg.png
new file mode 100644
index 00000000..7af364af
Binary files /dev/null and b/doc/img/icon_extensions/014-dwg.png differ
diff --git a/doc/img/icon_extensions/015-eml.png b/doc/img/icon_extensions/015-eml.png
new file mode 100644
index 00000000..948cee0b
Binary files /dev/null and b/doc/img/icon_extensions/015-eml.png differ
diff --git a/doc/img/icon_extensions/016-eps.png b/doc/img/icon_extensions/016-eps.png
new file mode 100644
index 00000000..a76939a8
Binary files /dev/null and b/doc/img/icon_extensions/016-eps.png differ
diff --git a/doc/img/icon_extensions/017-exe.png b/doc/img/icon_extensions/017-exe.png
new file mode 100644
index 00000000..225aae8d
Binary files /dev/null and b/doc/img/icon_extensions/017-exe.png differ
diff --git a/doc/img/icon_extensions/018-flv.png b/doc/img/icon_extensions/018-flv.png
new file mode 100644
index 00000000..e23570c5
Binary files /dev/null and b/doc/img/icon_extensions/018-flv.png differ
diff --git a/doc/img/icon_extensions/019-gif.png b/doc/img/icon_extensions/019-gif.png
new file mode 100644
index 00000000..7d823386
Binary files /dev/null and b/doc/img/icon_extensions/019-gif.png differ
diff --git a/doc/img/icon_extensions/020-html.png b/doc/img/icon_extensions/020-html.png
new file mode 100644
index 00000000..4839a0db
Binary files /dev/null and b/doc/img/icon_extensions/020-html.png differ
diff --git a/doc/img/icon_extensions/021-ics format.png b/doc/img/icon_extensions/021-ics format.png
new file mode 100644
index 00000000..62e50c8b
Binary files /dev/null and b/doc/img/icon_extensions/021-ics format.png differ
diff --git a/doc/img/icon_extensions/022-iso.png b/doc/img/icon_extensions/022-iso.png
new file mode 100644
index 00000000..f0765569
Binary files /dev/null and b/doc/img/icon_extensions/022-iso.png differ
diff --git a/doc/img/icon_extensions/023-jar.png b/doc/img/icon_extensions/023-jar.png
new file mode 100644
index 00000000..a50c7df8
Binary files /dev/null and b/doc/img/icon_extensions/023-jar.png differ
diff --git a/doc/img/icon_extensions/024-jpeg.png b/doc/img/icon_extensions/024-jpeg.png
new file mode 100644
index 00000000..d6c9fdbe
Binary files /dev/null and b/doc/img/icon_extensions/024-jpeg.png differ
diff --git a/doc/img/icon_extensions/025-jpg.png b/doc/img/icon_extensions/025-jpg.png
new file mode 100644
index 00000000..2492dc79
Binary files /dev/null and b/doc/img/icon_extensions/025-jpg.png differ
diff --git a/doc/img/icon_extensions/026-js format.png b/doc/img/icon_extensions/026-js format.png
new file mode 100644
index 00000000..a54a9db1
Binary files /dev/null and b/doc/img/icon_extensions/026-js format.png differ
diff --git a/doc/img/icon_extensions/027-log format.png b/doc/img/icon_extensions/027-log format.png
new file mode 100644
index 00000000..3455c422
Binary files /dev/null and b/doc/img/icon_extensions/027-log format.png differ
diff --git a/doc/img/icon_extensions/028-mdb.png b/doc/img/icon_extensions/028-mdb.png
new file mode 100644
index 00000000..5f6f3ed5
Binary files /dev/null and b/doc/img/icon_extensions/028-mdb.png differ
diff --git a/doc/img/icon_extensions/029-mov.png b/doc/img/icon_extensions/029-mov.png
new file mode 100644
index 00000000..248c9d0a
Binary files /dev/null and b/doc/img/icon_extensions/029-mov.png differ
diff --git a/doc/img/icon_extensions/030-mp3.png b/doc/img/icon_extensions/030-mp3.png
new file mode 100644
index 00000000..08748ce5
Binary files /dev/null and b/doc/img/icon_extensions/030-mp3.png differ
diff --git a/doc/img/icon_extensions/031-mp4.png b/doc/img/icon_extensions/031-mp4.png
new file mode 100644
index 00000000..0e376b46
Binary files /dev/null and b/doc/img/icon_extensions/031-mp4.png differ
diff --git a/doc/img/icon_extensions/032-pdf.png b/doc/img/icon_extensions/032-pdf.png
new file mode 100644
index 00000000..0217c3d6
Binary files /dev/null and b/doc/img/icon_extensions/032-pdf.png differ
diff --git a/doc/img/icon_extensions/033-obj.png b/doc/img/icon_extensions/033-obj.png
new file mode 100644
index 00000000..de126a95
Binary files /dev/null and b/doc/img/icon_extensions/033-obj.png differ
diff --git a/doc/img/icon_extensions/034-otf.png b/doc/img/icon_extensions/034-otf.png
new file mode 100644
index 00000000..98c522b1
Binary files /dev/null and b/doc/img/icon_extensions/034-otf.png differ
diff --git a/doc/img/icon_extensions/035-php.png b/doc/img/icon_extensions/035-php.png
new file mode 100644
index 00000000..1562e28e
Binary files /dev/null and b/doc/img/icon_extensions/035-php.png differ
diff --git a/doc/img/icon_extensions/036-png.png b/doc/img/icon_extensions/036-png.png
new file mode 100644
index 00000000..04bbc028
Binary files /dev/null and b/doc/img/icon_extensions/036-png.png differ
diff --git a/doc/img/icon_extensions/037-ppt.png b/doc/img/icon_extensions/037-ppt.png
new file mode 100644
index 00000000..3839b02f
Binary files /dev/null and b/doc/img/icon_extensions/037-ppt.png differ
diff --git a/doc/img/icon_extensions/038-psd.png b/doc/img/icon_extensions/038-psd.png
new file mode 100644
index 00000000..a18321f3
Binary files /dev/null and b/doc/img/icon_extensions/038-psd.png differ
diff --git a/doc/img/icon_extensions/039-pub.png b/doc/img/icon_extensions/039-pub.png
new file mode 100644
index 00000000..9bf73729
Binary files /dev/null and b/doc/img/icon_extensions/039-pub.png differ
diff --git a/doc/img/icon_extensions/040-rar.png b/doc/img/icon_extensions/040-rar.png
new file mode 100644
index 00000000..60092de2
Binary files /dev/null and b/doc/img/icon_extensions/040-rar.png differ
diff --git a/doc/img/icon_extensions/041-sql.png b/doc/img/icon_extensions/041-sql.png
new file mode 100644
index 00000000..74207dda
Binary files /dev/null and b/doc/img/icon_extensions/041-sql.png differ
diff --git a/doc/img/icon_extensions/042-srt.png b/doc/img/icon_extensions/042-srt.png
new file mode 100644
index 00000000..450e24e1
Binary files /dev/null and b/doc/img/icon_extensions/042-srt.png differ
diff --git a/doc/img/icon_extensions/043-svg.png b/doc/img/icon_extensions/043-svg.png
new file mode 100644
index 00000000..cd2d2daa
Binary files /dev/null and b/doc/img/icon_extensions/043-svg.png differ
diff --git a/doc/img/icon_extensions/044-ttf.png b/doc/img/icon_extensions/044-ttf.png
new file mode 100644
index 00000000..68ed8ba9
Binary files /dev/null and b/doc/img/icon_extensions/044-ttf.png differ
diff --git a/doc/img/icon_extensions/045-txt.png b/doc/img/icon_extensions/045-txt.png
new file mode 100644
index 00000000..9bf2a4a4
Binary files /dev/null and b/doc/img/icon_extensions/045-txt.png differ
diff --git a/doc/img/icon_extensions/046-wav format.png b/doc/img/icon_extensions/046-wav format.png
new file mode 100644
index 00000000..34024049
Binary files /dev/null and b/doc/img/icon_extensions/046-wav format.png differ
diff --git a/doc/img/icon_extensions/047-xls.png b/doc/img/icon_extensions/047-xls.png
new file mode 100644
index 00000000..f7a8ddf7
Binary files /dev/null and b/doc/img/icon_extensions/047-xls.png differ
diff --git a/doc/img/icon_extensions/048-xlsx.png b/doc/img/icon_extensions/048-xlsx.png
new file mode 100644
index 00000000..d101c847
Binary files /dev/null and b/doc/img/icon_extensions/048-xlsx.png differ
diff --git a/doc/img/icon_extensions/049-xml.png b/doc/img/icon_extensions/049-xml.png
new file mode 100644
index 00000000..af45dc13
Binary files /dev/null and b/doc/img/icon_extensions/049-xml.png differ
diff --git a/doc/img/icon_extensions/050-zip.png b/doc/img/icon_extensions/050-zip.png
new file mode 100644
index 00000000..b9963451
Binary files /dev/null and b/doc/img/icon_extensions/050-zip.png differ
diff --git a/doc/img/jpg.png b/doc/img/jpg.png
new file mode 100644
index 00000000..45bb5204
Binary files /dev/null and b/doc/img/jpg.png differ
diff --git a/doc/img/png-clipart-pdf-computer-icons-document-file-format-pdf-miscellaneous-text.png b/doc/img/png-clipart-pdf-computer-icons-document-file-format-pdf-miscellaneous-text.png
new file mode 100644
index 00000000..7234254c
Binary files /dev/null and b/doc/img/png-clipart-pdf-computer-icons-document-file-format-pdf-miscellaneous-text.png differ
diff --git a/doc/img/png.png b/doc/img/png.png
new file mode 100644
index 00000000..695e8789
Binary files /dev/null and b/doc/img/png.png differ
diff --git a/doc/img/powerpoint-icon-png-20.jpg b/doc/img/powerpoint-icon-png-20.jpg
new file mode 100644
index 00000000..5c912446
Binary files /dev/null and b/doc/img/powerpoint-icon-png-20.jpg differ
diff --git a/doc/img/usecase.jpg b/doc/img/usecase.jpg
new file mode 100644
index 00000000..6731acd6
Binary files /dev/null and b/doc/img/usecase.jpg differ
diff --git a/doc/img/video-folder.png b/doc/img/video-folder.png
new file mode 100644
index 00000000..3f8d729c
Binary files /dev/null and b/doc/img/video-folder.png differ
diff --git a/doc/login-page.png b/doc/login-page.png
new file mode 100644
index 00000000..3a651b95
Binary files /dev/null and b/doc/login-page.png differ
diff --git a/doc/login-page_final.png b/doc/login-page_final.png
new file mode 100644
index 00000000..de1badf1
Binary files /dev/null and b/doc/login-page_final.png differ
diff --git a/doc/main-page.png b/doc/main-page.png
new file mode 100644
index 00000000..104e158e
Binary files /dev/null and b/doc/main-page.png differ
diff --git a/doc/main-page_final.png b/doc/main-page_final.png
new file mode 100644
index 00000000..27f57a98
Binary files /dev/null and b/doc/main-page_final.png differ
diff --git a/doc/usecase.jpg b/doc/usecase.jpg
new file mode 100644
index 00000000..6731acd6
Binary files /dev/null and b/doc/usecase.jpg differ
diff --git a/doc/user_pictures/20200129_165746.jpg b/doc/user_pictures/20200129_165746.jpg
new file mode 100644
index 00000000..3a9af840
Binary files /dev/null and b/doc/user_pictures/20200129_165746.jpg differ
diff --git a/doc/user_pictures/User_Circle.png b/doc/user_pictures/User_Circle.png
new file mode 100644
index 00000000..8971be0e
Binary files /dev/null and b/doc/user_pictures/User_Circle.png differ
diff --git a/doc/user_pictures/user.png b/doc/user_pictures/user.png
new file mode 100644
index 00000000..73c9ed52
Binary files /dev/null and b/doc/user_pictures/user.png differ
diff --git a/package.json b/package.json
new file mode 100644
index 00000000..5f2c9158
--- /dev/null
+++ b/package.json
@@ -0,0 +1,29 @@
+{
+ "name": "filesystem-explorer",
+ "version": "1.0.0",
+ "description": "`#html` `#css` `#js` `#php` `#master-in-software-engineering`",
+ "main": "index.js",
+ "scripts": {
+ "test": "echo \"Error: no test specified\" && exit 1",
+ "scss": "sass -watch ./src/pages/ -o css"
+ },
+ "repository": {
+ "type": "git",
+ "url": "git+https://github.com/jonathancede/filesystem-explorer.git"
+ },
+ "author": "",
+ "license": "ISC",
+ "bugs": {
+ "url": "https://github.com/jonathancede/filesystem-explorer/issues"
+ },
+ "homepage": "https://github.com/jonathancede/filesystem-explorer#readme",
+ "dependencies": {
+ "bootstrap": "^5.0.1",
+ "node-sass": "^6.0.0",
+ "sass": "^1.35.1"
+ },
+ "devDependencies": {
+ "@prettier/plugin-php": "^0.17.1",
+ "prettier": "^2.3.1"
+ }
+}
diff --git a/root/erick/Archivo ppt.pptx b/root/erick/Archivo ppt.pptx
new file mode 100644
index 00000000..971d5beb
Binary files /dev/null and b/root/erick/Archivo ppt.pptx differ
diff --git a/root/erick/Archivo_pdf.pdf b/root/erick/Archivo_pdf.pdf
new file mode 100644
index 00000000..170d7875
Binary files /dev/null and b/root/erick/Archivo_pdf.pdf differ
diff --git a/root/erick/Carpeta dentro de root/Este es mi archivo ODT.odt b/root/erick/Carpeta dentro de root/Este es mi archivo ODT.odt
new file mode 100644
index 00000000..5ceceda2
Binary files /dev/null and b/root/erick/Carpeta dentro de root/Este es mi archivo ODT.odt differ
diff --git a/root/erick/Carpeta dentro de root/Mi archivoooo en zip.zip b/root/erick/Carpeta dentro de root/Mi archivoooo en zip.zip
new file mode 100644
index 00000000..dc4a6180
Binary files /dev/null and b/root/erick/Carpeta dentro de root/Mi archivoooo en zip.zip differ
diff --git a/root/erick/Carpeta dentro de root/Mi archivoooo.txt b/root/erick/Carpeta dentro de root/Mi archivoooo.txt
new file mode 100644
index 00000000..1c349b24
--- /dev/null
+++ b/root/erick/Carpeta dentro de root/Mi archivoooo.txt
@@ -0,0 +1 @@
+hola locotron
\ No newline at end of file
diff --git a/root/erick/Carpeta dentro de root/erick-file.txt b/root/erick/Carpeta dentro de root/erick-file.txt
new file mode 100644
index 00000000..ddd3f836
--- /dev/null
+++ b/root/erick/Carpeta dentro de root/erick-file.txt
@@ -0,0 +1 @@
+This is an example
\ No newline at end of file
diff --git a/root/erick/Carpeta dentro de root/otro archivoo en rar.rar b/root/erick/Carpeta dentro de root/otro archivoo en rar.rar
new file mode 100644
index 00000000..09362da1
Binary files /dev/null and b/root/erick/Carpeta dentro de root/otro archivoo en rar.rar differ
diff --git a/root/erick/DS4Updater.exe b/root/erick/DS4Updater.exe
new file mode 100644
index 00000000..a24a05b1
Binary files /dev/null and b/root/erick/DS4Updater.exe differ
diff --git a/root/erick/Este es mi archivo ODT.odt b/root/erick/Este es mi archivo ODT.odt
new file mode 100644
index 00000000..5ceceda2
Binary files /dev/null and b/root/erick/Este es mi archivo ODT.odt differ
diff --git a/root/erick/Mi archivoooo en zip.zip b/root/erick/Mi archivoooo en zip.zip
new file mode 100644
index 00000000..dc4a6180
Binary files /dev/null and b/root/erick/Mi archivoooo en zip.zip differ
diff --git a/root/erick/Mi archivoooo.txt b/root/erick/Mi archivoooo.txt
new file mode 100644
index 00000000..1c349b24
--- /dev/null
+++ b/root/erick/Mi archivoooo.txt
@@ -0,0 +1 @@
+hola locotron
\ No newline at end of file
diff --git a/root/erick/Nombre bonito/erick-file-folder.txt b/root/erick/Nombre bonito/erick-file-folder.txt
new file mode 100644
index 00000000..212ee1da
--- /dev/null
+++ b/root/erick/Nombre bonito/erick-file-folder.txt
@@ -0,0 +1 @@
+This is an example inside a folder
\ No newline at end of file
diff --git a/root/erick/Tama Gucci Lower My Shades.mp3 b/root/erick/Tama Gucci Lower My Shades.mp3
new file mode 100644
index 00000000..fab3dd6f
Binary files /dev/null and b/root/erick/Tama Gucci Lower My Shades.mp3 differ
diff --git a/root/erick/The Animals The House Of The Rising Sun 1964 High Quality.mp4 b/root/erick/The Animals The House Of The Rising Sun 1964 High Quality.mp4
new file mode 100644
index 00000000..a4418d14
Binary files /dev/null and b/root/erick/The Animals The House Of The Rising Sun 1964 High Quality.mp4 differ
diff --git a/root/erick/archivo_csv - Sheet1.csv b/root/erick/archivo_csv - Sheet1.csv
new file mode 100644
index 00000000..82d80ca6
--- /dev/null
+++ b/root/erick/archivo_csv - Sheet1.csv
@@ -0,0 +1,4 @@
+maria,maria@correo,1234567,20
+alberto,alberto@correo,241535,40
+erick,erick@correo,324342,20
+jonathanº,jonathan@correo,3243,30
\ No newline at end of file
diff --git a/root/erick/archivo_jpg.jpg b/root/erick/archivo_jpg.jpg
new file mode 100644
index 00000000..de0f7ed8
Binary files /dev/null and b/root/erick/archivo_jpg.jpg differ
diff --git a/root/erick/archivo_png.png b/root/erick/archivo_png.png
new file mode 100644
index 00000000..a4067e21
Binary files /dev/null and b/root/erick/archivo_png.png differ
diff --git a/root/erick/archivo_svg.svg b/root/erick/archivo_svg.svg
new file mode 100644
index 00000000..e84af5a9
--- /dev/null
+++ b/root/erick/archivo_svg.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/root/erick/carpeta no se/Mi archivoooo.txt b/root/erick/carpeta no se/Mi archivoooo.txt
new file mode 100644
index 00000000..1c349b24
--- /dev/null
+++ b/root/erick/carpeta no se/Mi archivoooo.txt
@@ -0,0 +1 @@
+hola locotron
\ No newline at end of file
diff --git a/root/erick/carpeta no se/Tama Gucci Lower My Shades.mp3 b/root/erick/carpeta no se/Tama Gucci Lower My Shades.mp3
new file mode 100644
index 00000000..fab3dd6f
Binary files /dev/null and b/root/erick/carpeta no se/Tama Gucci Lower My Shades.mp3 differ
diff --git a/root/erick/carpeta no se/The Animals The House Of The Rising Sun 1964 High Quality.mp4 b/root/erick/carpeta no se/The Animals The House Of The Rising Sun 1964 High Quality.mp4
new file mode 100644
index 00000000..a4418d14
Binary files /dev/null and b/root/erick/carpeta no se/The Animals The House Of The Rising Sun 1964 High Quality.mp4 differ
diff --git a/root/erick/carpeta no se/carpeta dentro de carpeta/Archivo ppt.pptx b/root/erick/carpeta no se/carpeta dentro de carpeta/Archivo ppt.pptx
new file mode 100644
index 00000000..971d5beb
Binary files /dev/null and b/root/erick/carpeta no se/carpeta dentro de carpeta/Archivo ppt.pptx differ
diff --git a/root/erick/carpeta no se/carpeta dentro de carpeta/Archivo_pdf.pdf b/root/erick/carpeta no se/carpeta dentro de carpeta/Archivo_pdf.pdf
new file mode 100644
index 00000000..170d7875
Binary files /dev/null and b/root/erick/carpeta no se/carpeta dentro de carpeta/Archivo_pdf.pdf differ
diff --git a/root/erick/carpeta no se/carpeta dentro de carpeta/archivo_csv - Sheet1.csv b/root/erick/carpeta no se/carpeta dentro de carpeta/archivo_csv - Sheet1.csv
new file mode 100644
index 00000000..82d80ca6
--- /dev/null
+++ b/root/erick/carpeta no se/carpeta dentro de carpeta/archivo_csv - Sheet1.csv
@@ -0,0 +1,4 @@
+maria,maria@correo,1234567,20
+alberto,alberto@correo,241535,40
+erick,erick@correo,324342,20
+jonathanº,jonathan@correo,3243,30
\ No newline at end of file
diff --git a/root/erick/carpeta no se/carpeta dentro de carpeta/archivo_jpg.jpg b/root/erick/carpeta no se/carpeta dentro de carpeta/archivo_jpg.jpg
new file mode 100644
index 00000000..de0f7ed8
Binary files /dev/null and b/root/erick/carpeta no se/carpeta dentro de carpeta/archivo_jpg.jpg differ
diff --git a/root/erick/carpeta no se/carpeta dentro de carpeta/archivo_png.png b/root/erick/carpeta no se/carpeta dentro de carpeta/archivo_png.png
new file mode 100644
index 00000000..a4067e21
Binary files /dev/null and b/root/erick/carpeta no se/carpeta dentro de carpeta/archivo_png.png differ
diff --git a/root/erick/carpeta no se/carpeta dentro de carpeta/hasta donde llegara.txt b/root/erick/carpeta no se/carpeta dentro de carpeta/hasta donde llegara.txt
new file mode 100644
index 00000000..e69de29b
diff --git a/root/erick/carpeta no se/erick-file-folder.txt b/root/erick/carpeta no se/erick-file-folder.txt
new file mode 100644
index 00000000..212ee1da
--- /dev/null
+++ b/root/erick/carpeta no se/erick-file-folder.txt
@@ -0,0 +1 @@
+This is an example inside a folder
\ No newline at end of file
diff --git a/root/erick/carpeta no se/otro archivoo en rar.rar b/root/erick/carpeta no se/otro archivoo en rar.rar
new file mode 100644
index 00000000..09362da1
Binary files /dev/null and b/root/erick/carpeta no se/otro archivoo en rar.rar differ
diff --git a/root/erick/erick-file.txt b/root/erick/erick-file.txt
new file mode 100644
index 00000000..ddd3f836
--- /dev/null
+++ b/root/erick/erick-file.txt
@@ -0,0 +1 @@
+This is an example
\ No newline at end of file
diff --git a/root/erick/otro archivoo en rar.rar b/root/erick/otro archivoo en rar.rar
new file mode 100644
index 00000000..09362da1
Binary files /dev/null and b/root/erick/otro archivoo en rar.rar differ
diff --git a/root/erick_trash/trash-file.txt b/root/erick_trash/trash-file.txt
new file mode 100644
index 00000000..f544e040
--- /dev/null
+++ b/root/erick_trash/trash-file.txt
@@ -0,0 +1 @@
+Hola, este es un documento del trash.
\ No newline at end of file
diff --git a/root/jonathan/first folder/jonathan-file-folder.txt b/root/jonathan/first folder/jonathan-file-folder.txt
new file mode 100644
index 00000000..212ee1da
--- /dev/null
+++ b/root/jonathan/first folder/jonathan-file-folder.txt
@@ -0,0 +1 @@
+This is an example inside a folder
\ No newline at end of file
diff --git "a/root/jonathan/first folder/ohter name/hoeg/Jonathan Cede\303\261o - Pill Postman.json" "b/root/jonathan/first folder/ohter name/hoeg/Jonathan Cede\303\261o - Pill Postman.json"
new file mode 100644
index 00000000..a5882d0f
--- /dev/null
+++ "b/root/jonathan/first folder/ohter name/hoeg/Jonathan Cede\303\261o - Pill Postman.json"
@@ -0,0 +1,306 @@
+{
+ "info": {
+ "_postman_id": "e324e440-a0f0-4787-bd7e-25270d6b1cc1",
+ "name": "Pill Postman",
+ "schema": "https://schema.getpostman.com/json/collection/v2.1.0/collection.json"
+ },
+ "item": [
+ {
+ "name": "Dummy Rest API",
+ "item": [
+ {
+ "name": "Get All Employees",
+ "request": {
+ "method": "GET",
+ "header": [],
+ "url": {
+ "raw": "http://dummy.restapiexample.com/api/v1/employees",
+ "protocol": "http",
+ "host": [
+ "dummy",
+ "restapiexample",
+ "com"
+ ],
+ "path": [
+ "api",
+ "v1",
+ "employees"
+ ]
+ }
+ },
+ "response": []
+ },
+ {
+ "name": "Get Employee 4",
+ "request": {
+ "method": "GET",
+ "header": [],
+ "url": {
+ "raw": "http://dummy.restapiexample.com/api/v1/employee/4",
+ "protocol": "http",
+ "host": [
+ "dummy",
+ "restapiexample",
+ "com"
+ ],
+ "path": [
+ "api",
+ "v1",
+ "employee",
+ "4"
+ ]
+ }
+ },
+ "response": []
+ },
+ {
+ "name": "Create Employee",
+ "request": {
+ "method": "POST",
+ "header": [],
+ "body": {
+ "mode": "raw",
+ "raw": "{\r\n \"name\":\"test\",\r\n \"salary\":\"123\",\r\n \"age\":\"19\"\r\n}",
+ "options": {
+ "raw": {
+ "language": "json"
+ }
+ }
+ },
+ "url": {
+ "raw": "http://dummy.restapiexample.com/api/v1/create",
+ "protocol": "http",
+ "host": [
+ "dummy",
+ "restapiexample",
+ "com"
+ ],
+ "path": [
+ "api",
+ "v1",
+ "create"
+ ]
+ }
+ },
+ "response": []
+ },
+ {
+ "name": "Update Employee 5",
+ "request": {
+ "method": "PUT",
+ "header": [],
+ "body": {
+ "mode": "raw",
+ "raw": "{\r\n \"name\":\"test\",\r\n \"salary\":\"123\",\r\n \"age\":\"19\"\r\n}",
+ "options": {
+ "raw": {
+ "language": "json"
+ }
+ }
+ },
+ "url": {
+ "raw": "http://dummy.restapiexample.com/api/v1/update/5",
+ "protocol": "http",
+ "host": [
+ "dummy",
+ "restapiexample",
+ "com"
+ ],
+ "path": [
+ "api",
+ "v1",
+ "update",
+ "5"
+ ]
+ }
+ },
+ "response": []
+ },
+ {
+ "name": "Delete Employee 10",
+ "request": {
+ "method": "DELETE",
+ "header": [],
+ "url": {
+ "raw": "http://dummy.restapiexample.com/api/v1/delete/10",
+ "protocol": "http",
+ "host": [
+ "dummy",
+ "restapiexample",
+ "com"
+ ],
+ "path": [
+ "api",
+ "v1",
+ "delete",
+ "10"
+ ]
+ }
+ },
+ "response": []
+ }
+ ]
+ },
+ {
+ "name": "JSONPlaceholder",
+ "item": [
+ {
+ "name": "Get All Posts",
+ "request": {
+ "method": "GET",
+ "header": [],
+ "url": {
+ "raw": "https://jsonplaceholder.typicode.com/posts",
+ "protocol": "https",
+ "host": [
+ "jsonplaceholder",
+ "typicode",
+ "com"
+ ],
+ "path": [
+ "posts"
+ ]
+ }
+ },
+ "response": []
+ },
+ {
+ "name": "Get Post with userId 2",
+ "request": {
+ "method": "GET",
+ "header": [],
+ "url": {
+ "raw": "https://jsonplaceholder.typicode.com/posts?userId=2",
+ "protocol": "https",
+ "host": [
+ "jsonplaceholder",
+ "typicode",
+ "com"
+ ],
+ "path": [
+ "posts"
+ ],
+ "query": [
+ {
+ "key": "userId",
+ "value": "2"
+ }
+ ]
+ }
+ },
+ "response": []
+ },
+ {
+ "name": "Create Post",
+ "request": {
+ "method": "POST",
+ "header": [],
+ "body": {
+ "mode": "raw",
+ "raw": "{\r\n \"title\": \"foo\",\r\n \"body\": \"bar\",\r\n \"userId\": 1\r\n}",
+ "options": {
+ "raw": {
+ "language": "json"
+ }
+ }
+ },
+ "url": {
+ "raw": "https://jsonplaceholder.typicode.com/posts",
+ "protocol": "https",
+ "host": [
+ "jsonplaceholder",
+ "typicode",
+ "com"
+ ],
+ "path": [
+ "posts"
+ ]
+ }
+ },
+ "response": []
+ },
+ {
+ "name": "Update Post with ID 4",
+ "request": {
+ "method": "PUT",
+ "header": [],
+ "body": {
+ "mode": "raw",
+ "raw": "{\r\n \"id\": 1,\r\n \"title\": \"foo\",\r\n \"body\": \"bar\",\r\n \"userId\": 1\r\n}",
+ "options": {
+ "raw": {
+ "language": "json"
+ }
+ }
+ },
+ "url": {
+ "raw": "https://jsonplaceholder.typicode.com/posts/4",
+ "protocol": "https",
+ "host": [
+ "jsonplaceholder",
+ "typicode",
+ "com"
+ ],
+ "path": [
+ "posts",
+ "4"
+ ]
+ }
+ },
+ "response": []
+ },
+ {
+ "name": "Update Post with ID 8",
+ "request": {
+ "method": "PATCH",
+ "header": [],
+ "body": {
+ "mode": "raw",
+ "raw": "{\r\n \"title\": \"foo\",\r\n \"body\": \"bar\"\r\n}",
+ "options": {
+ "raw": {
+ "language": "json"
+ }
+ }
+ },
+ "url": {
+ "raw": "https://jsonplaceholder.typicode.com/posts/8",
+ "protocol": "https",
+ "host": [
+ "jsonplaceholder",
+ "typicode",
+ "com"
+ ],
+ "path": [
+ "posts",
+ "8"
+ ]
+ }
+ },
+ "response": []
+ },
+ {
+ "name": "Delete Post with ID 2",
+ "request": {
+ "method": "DELETE",
+ "header": [],
+ "url": {
+ "raw": "https://jsonplaceholder.typicode.com/posts/2",
+ "protocol": "https",
+ "host": [
+ "jsonplaceholder",
+ "typicode",
+ "com"
+ ],
+ "path": [
+ "posts",
+ "2"
+ ]
+ }
+ },
+ "response": []
+ }
+ ]
+ }
+ ]
+}
\ No newline at end of file
diff --git a/root/jonathan/jonathan-file.txt b/root/jonathan/jonathan-file.txt
new file mode 100644
index 00000000..ddd3f836
--- /dev/null
+++ b/root/jonathan/jonathan-file.txt
@@ -0,0 +1 @@
+This is an example
\ No newline at end of file
diff --git a/root/jonathan/third folder/another file.txt b/root/jonathan/third folder/another file.txt
new file mode 100644
index 00000000..e69de29b
diff --git a/root/jonathan/third folder/inside folder/inside file.txt b/root/jonathan/third folder/inside folder/inside file.txt
new file mode 100644
index 00000000..e69de29b
diff --git a/root/jonathan__trash/trash-file.txt b/root/jonathan__trash/trash-file.txt
new file mode 100644
index 00000000..f544e040
--- /dev/null
+++ b/root/jonathan__trash/trash-file.txt
@@ -0,0 +1 @@
+Hola, este es un documento del trash.
\ No newline at end of file
diff --git a/src/index.php b/src/index.php
new file mode 100644
index 00000000..480b8b92
--- /dev/null
+++ b/src/index.php
@@ -0,0 +1,18 @@
+
+
+
+
+
+
+
+
+
+ FileSystem Explorer
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/javascript/context-menu-handler.js b/src/javascript/context-menu-handler.js
new file mode 100644
index 00000000..899cff2e
--- /dev/null
+++ b/src/javascript/context-menu-handler.js
@@ -0,0 +1,153 @@
+let folderIdSelectedContext;
+
+// Show the context menu.
+for (let i = 0; i < document.getElementsByClassName("item-contextmenu").length; i++) {
+ document.getElementsByClassName("item-contextmenu")[i].addEventListener("contextmenu", function (event) {
+ event.preventDefault();
+
+ folderIdSelectedContext = this.getAttribute("value");
+
+ let menu = document.getElementById("context-menu");
+ let menuState = menu.style.display;
+ let back = document.getElementById("back-context");
+
+ if (menuState == "none") {
+ menu.style.display = "block";
+ back.style.display = "block";
+
+ let clickPosX = event.pageX;
+ let clickPosY = event.pageY;
+
+ let menuWidth = menu.offsetWidth + 5;
+ let menuHeight = menu.offsetHeight + 5;
+ let windowWidth = window.innerWidth;
+ let windowHeight = window.innerHeight;
+
+ if (windowWidth - clickPosX < menuWidth) menu.style.left = windowWidth - menuWidth + "px";
+ else menu.style.left = clickPosX + "px";
+
+ if (windowHeight - clickPosY < menuHeight) menu.style.top = windowHeight - menuHeight + "px";
+ else menu.style.top = clickPosY + "px";
+ }
+ else {
+ menu.style.display = "none";
+ back.style.display = "none";
+ }
+ });
+}
+
+// Hide the context menu.
+document.getElementById("back-context").addEventListener("mousedown", function () {
+ document.getElementById("context-menu").style.display = "none";
+ document.getElementById("back-context").style.display = "none";
+});
+
+// Modal of the creation of folder context menu.
+document.getElementById("new-folder-context").addEventListener("click", function () {
+ document.getElementById("context-menu").style.display = "none";
+ document.getElementById("back-context").style.display = "none";
+
+ let myModalSection = document.getElementById("section_modal");
+ const templateContent = document.getElementById("modalTemplate-create-folder").content;
+ let templateClone = document.importNode(templateContent, true);
+ myModalSection.style.display = "block";
+ myModalSection.append(templateClone);
+
+ let btnCloseModal = document.getElementById("btnCloseModal");
+ btnCloseModal.addEventListener("click", function(){
+ let myModalSection = document.getElementById("section_modal");
+ let myChilds = myModalSection.querySelector("div");
+ myModalSection.style.display = "none";
+ myModalSection.removeChild(myChilds);
+ });
+
+ document.getElementById("new-folder-context-form").addEventListener("submit", function(event){
+ event.preventDefault();
+
+ let newNameInput = document.querySelector("#new-folder-context-form input").value;
+
+ $.ajax({
+ url: "../../php/local_files/new_folder_context.php",
+ type: "post",
+ data: {
+ "folder-id": folderIdSelectedContext,
+ "new-folder-name": newNameInput
+ }
+ });
+
+ window.location = `${window.location.pathname}?folder-id=${folderIdSelectedContext}`;
+ });
+});
+
+// Modal of the rename folder context menu.
+document.getElementById("rename-folder-context").addEventListener("click", function () {
+ document.getElementById("context-menu").style.display = "none";
+ document.getElementById("back-context").style.display = "none";
+
+ let myModalSection = document.getElementById("section_modal");
+ const templateContent = document.getElementById("modalTemplate-rename-folder").content;
+ let templateClone = document.importNode(templateContent, true);
+ myModalSection.style.display = "block";
+ myModalSection.append(templateClone);
+
+ let btnCloseModal = document.getElementById("btnCloseModal");
+ btnCloseModal.addEventListener("click", function(){
+ let myModalSection = document.getElementById("section_modal");
+ let myChilds = myModalSection.querySelector("div");
+ myModalSection.style.display = "none";
+ myModalSection.removeChild(myChilds);
+ });
+
+ document.getElementById("rename-folder-context-form").addEventListener("submit", function(event){
+ event.preventDefault();
+
+ let newNameInput = document.querySelector("#rename-folder-context-form input").value;
+
+ $.ajax({
+ url: "../../php/local_files/rename_folder_context.php",
+ type: "post",
+ data: {
+ "folder-id": folderIdSelectedContext,
+ "new-folder-name": newNameInput
+ },
+ });
+
+ location.reload();
+ });
+});
+
+// Modal of the delete folder context menu.
+document.getElementById("delete-folder-context").addEventListener("click", function () {
+ document.getElementById("context-menu").style.display = "none";
+ document.getElementById("back-context").style.display = "none";
+
+ let myModalSection = document.getElementById("section_modal");
+ const templateContent = document.getElementById("modalTemplate-delete-folder").content;
+ let templateClone = document.importNode(templateContent, true);
+ myModalSection.style.display = "block";
+ myModalSection.append(templateClone);
+
+ let btnCloseModal = document.getElementById("btnCloseModal");
+ btnCloseModal.addEventListener("click", function(){
+ let myModalSection = document.getElementById("section_modal");
+ let myChilds = myModalSection.querySelector("div");
+ myModalSection.style.display = "none";
+ myModalSection.removeChild(myChilds);
+ });
+
+ document.getElementById("confirm-delete-btn").addEventListener("click", function(){
+ let folderIdReload;
+
+ $.ajax({
+ url: "../../php/local_files/delete_folder_context.php",
+ type: "post",
+ data: {
+ "folder-id": folderIdSelectedContext
+ },
+ success: function(res){
+ folderIdReload = res;
+ window.location = `${window.location.pathname}?folder-id=${folderIdReload}`;
+ }
+ });
+ });
+});
\ No newline at end of file
diff --git a/src/javascript/modal-play.js b/src/javascript/modal-play.js
new file mode 100644
index 00000000..b86b766d
--- /dev/null
+++ b/src/javascript/modal-play.js
@@ -0,0 +1,74 @@
+let myFilesContainerListening = document.getElementById("file_container");
+let myFilesListening =
+ myFilesContainerListening.querySelectorAll(".open_modal");
+
+myFilesListening.forEach((element) => {
+ element.addEventListener("dblclick", openModal);
+});
+
+function openModal() {
+ let mySource = this.dataset.source;
+
+ const file_mp4 = ".mp4";
+ const file_mp3 = ".mp3";
+ const file_image_png = ".png";
+ const file_img_jpg = ".jpg";
+
+ if(mySource.includes(file_mp4)){
+
+ let myModalSection = document.getElementById("section_modal");
+ const templateContent = document.getElementById("modalTemplate_video").content;
+ let templateClone = document.importNode(templateContent, true);
+ myModalSection.style.display = "block";
+ myModalSection.append(templateClone);
+ let btnCloseModal = document.getElementById("btnCloseModal");
+ btnCloseModal.addEventListener("click", closeModal);
+
+ let my_source_container = document.getElementById("video_source");
+ my_source_container.setAttribute("src", mySource);
+
+ } else if (mySource.includes(file_mp3)){
+
+ let myModalSection = document.getElementById("section_modal");
+ const templateContent = document.getElementById("modalTemplate_sound").content;
+ let templateClone = document.importNode(templateContent, true);
+ myModalSection.style.display = "block";
+ myModalSection.append(templateClone);
+ let btnCloseModal = document.getElementById("btnCloseModal");
+ btnCloseModal.addEventListener("click", closeModal);
+
+ let my_source_container = document.getElementById("sound_source");
+ my_source_container.setAttribute("src", mySource);
+
+ } else if(mySource.includes(file_image_png) || mySource.includes(file_img_jpg)){
+
+ let myModalSection = document.getElementById("section_modal");
+ const templateContent = document.getElementById("modalTemplate_img").content;
+ let templateClone = document.importNode(templateContent, true);
+ myModalSection.style.display = "block";
+ myModalSection.append(templateClone);
+ let btnCloseModal = document.getElementById("btnCloseModal");
+ btnCloseModal.addEventListener("click", closeModal);
+
+ let my_source_container = document.getElementById("img_source");
+ my_source_container.setAttribute("src", mySource);
+
+ } else {
+
+ let myModalSection = document.getElementById("section_modal");
+ const templateContent = document.getElementById("modalTemplate").content;
+ let templateClone = document.importNode(templateContent, true);
+ myModalSection.style.display = "block";
+ myModalSection.append(templateClone);
+ let btnCloseModal = document.getElementById("btnCloseModal");
+ btnCloseModal.addEventListener("click", closeModal);
+
+ }
+}
+
+function closeModal() {
+ let myModalSection = document.getElementById("section_modal");
+ let myChilds = myModalSection.querySelector("div");
+ myModalSection.style.display = "none";
+ myModalSection.removeChild(myChilds);
+}
\ No newline at end of file
diff --git a/src/javascript/navbar_information.js b/src/javascript/navbar_information.js
new file mode 100644
index 00000000..711ee30d
--- /dev/null
+++ b/src/javascript/navbar_information.js
@@ -0,0 +1,58 @@
+window.onload = function() {
+
+ let file_information = document.getElementById("file_container");
+
+ let myFilesListening_information =
+ file_information.querySelectorAll(".get_info_file");
+
+
+ myFilesListening_information.forEach((element) => {
+ element.addEventListener("click", read_file_information);
+ });
+
+ function read_file_information() {
+ let myContainer_info = document.getElementById("my_info--container");
+ let myId_info = event.target;
+ let mySource_info = myId_info.dataset.relativesource;
+
+ myContainer_info.style.opacity = "1";
+ myContainer_info.style.display = "inline-block";
+
+ // we create the coockie
+ createCookie("gfg", mySource_info, "1");
+
+ // funcion para pedir, mediante un POST ajax, una respuesta del archivo especificado.
+ $.ajax({
+ url: '../../php/navbar_file_information/file_info.php',
+ type: 'post',
+ data: "callFunc1",
+ success: function(response) {
+ myContainer_info.innerHTML = response;
+ let myBtnClose = document.getElementById("btn__close--file--Information");
+ myBtnClose.addEventListener("click", close_navbar_information);
+ }
+ });
+ }
+
+ // Function to create the cookie
+ function createCookie(name, value, days) {
+ var expires;
+
+ if (days) {
+ var date = new Date();
+ date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
+ expires = "; expires=" + date.toGMTString();
+ } else {
+ expires = "";
+ }
+
+ document.cookie = escape(name) + "=" +
+ escape(value) + expires + "; path=/";
+ }
+
+ function close_navbar_information() {
+ let myContainer_info = document.getElementById("my_info--container");
+ myContainer_info.style.display = "none";
+ myContainer_info.style.opacity = "0";
+ }
+};
\ No newline at end of file
diff --git a/src/javascript/new-folder-handler.js b/src/javascript/new-folder-handler.js
new file mode 100644
index 00000000..a13b3a20
--- /dev/null
+++ b/src/javascript/new-folder-handler.js
@@ -0,0 +1,9 @@
+// Creation of new folder handler.
+function createFolderHandler() {
+ let formNewFolder = document.getElementById("form-new-folder");
+ let state = formNewFolder.style.display;
+ if (state == "none") formNewFolder.style.display = "flex";
+ else formNewFolder.style.display = "none";
+}
+document.getElementById("create-folder-btn").addEventListener("click", createFolderHandler);
+document.getElementById("cancel-form-new-folder").addEventListener("click", createFolderHandler);
\ No newline at end of file
diff --git a/src/javascript/show-files.js b/src/javascript/show-files.js
new file mode 100644
index 00000000..34d8e89f
--- /dev/null
+++ b/src/javascript/show-files.js
@@ -0,0 +1,20 @@
+// Show files according to the folder selected in tree.
+for (let i = 0; i < document.getElementsByClassName("item-showfiles").length; i++) {
+ document.getElementsByClassName("item-showfiles")[i].addEventListener("click", function () {
+ let folderId = this.getAttribute("value");
+ window.location = `${window.location.pathname}?folder-id=${folderId}`;
+ });
+}
+
+// Show files according to the folder selected in main.
+for (let i = 0; i < document.getElementsByClassName("item-folder").length; i++) {
+ document.getElementsByClassName("item-folder")[i].addEventListener("dblclick", function () {
+ let folderId = this.getAttribute("value");
+ window.location = `${window.location.pathname}?folder-id=${folderId}`;
+ });
+}
+
+// Show files in the trash.
+document.getElementById("trash-id").addEventListener("click", function () {
+ window.location = `${window.location.pathname}?trash=true`;
+});
\ No newline at end of file
diff --git a/src/javascript/upload-file-handler.js b/src/javascript/upload-file-handler.js
new file mode 100644
index 00000000..fa5cb45d
--- /dev/null
+++ b/src/javascript/upload-file-handler.js
@@ -0,0 +1,27 @@
+//Upload file handler
+document.getElementById("upload-file-input").addEventListener("change", function() {
+ let input = document.getElementById("upload-file-input");
+ let file = input.files[0];
+ let folderId = input.getAttribute("data-folder");
+
+ if(file != undefined){
+ var formData = new FormData();
+ formData.append("file", file);
+ formData.append("folder-id", folderId);
+
+ $.ajax({
+ url: "../../php/local_files/upload_file.php",
+ type: "post",
+ data: formData,
+ processData: false,
+ contentType: false,
+ success: function(succes){
+ if(succes == 1){
+ location.reload();
+ } else {
+ alert("File exceeds the limit of 42MB");
+ }
+ }
+ });
+ }
+});
\ No newline at end of file
diff --git a/src/pages/login/login.css b/src/pages/login/login.css
new file mode 100644
index 00000000..426d4e2c
--- /dev/null
+++ b/src/pages/login/login.css
@@ -0,0 +1,102 @@
+@import url(https://fonts.googleapis.com/css2?family=Poppins&display=swap);
+
+* {
+ box-sizing: border-box;
+ margin: 0 0 0 0;
+ padding: 0 0 0 0;
+ font-family: 'Poppins', sans-serif;
+}
+
+*::-webkit-scrollbar{
+ width: 10px;
+ background-color: rgb(122, 122, 122);
+}
+*::-webkit-scrollbar-thumb{
+ width: 10px;
+ background-color: rgb(0, 0, 0);
+ border-radius: 5px;
+}
+
+p, h1, h2, h3, h4, h5, h6{
+ margin: 0 0 0 0 ;
+ padding: 0 0 0 0;
+}
+
+textarea:focus,
+input:focus {
+ outline: none;
+}
+
+*:focus {
+ outline: none;
+}
+
+.logo__wrapper {
+ width: 190px;
+ width: 100%;
+ overflow: hidden;
+}
+
+.logo__app {
+ width: 50%;
+ object-fit: cover;
+}
+.logo__app:hover {
+ filter: saturate(200%) sepia(100%) drop-shadow(5px 5px 40px rgb(221, 221, 221));
+}
+.logo__app img {
+ width: 100%;
+}
+
+.main__container {
+ display: flex;
+ min-height: 90vh;
+ height: 100%;
+ justify-content: center;
+ align-items: center;
+}
+
+.search__component {
+ background-color: rgb(255, 255, 255);
+ border-radius: 10px;
+ min-width: 500px;
+ padding: 0px 20px;
+}
+.search__component input {
+ background-color: rgba(255, 255, 255, 0);
+ border: 0;
+}
+.search__component input {
+ outline: none;
+}
+.search__component input:focus {
+ outline: none;
+ border-color: inherit;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+.search__component div i {
+ color: rgb(99, 99, 99);
+ cursor: pointer;
+}
+.search__component div {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+}
+
+.text__password--forgot p:hover {
+ cursor: pointer;
+ text-decoration: underline;
+}
+
+.advise__login{
+ min-height: 50px;
+ margin-bottom: 80px;
+ font-weight: bold;
+}
+
+.emoticon__advise{
+ font-size: 35px;
+}
diff --git a/src/pages/login/login.php b/src/pages/login/login.php
new file mode 100644
index 00000000..2b4d9c5a
--- /dev/null
+++ b/src/pages/login/login.php
@@ -0,0 +1,78 @@
+
+
+
+
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/pages/login/login.scss b/src/pages/login/login.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/pages/main/main.css b/src/pages/main/main.css
new file mode 100644
index 00000000..514dcc47
--- /dev/null
+++ b/src/pages/main/main.css
@@ -0,0 +1,360 @@
+@import url(https://fonts.googleapis.com/css2?family=Poppins&display=swap);
+
+* {
+ box-sizing: border-box;
+ margin: 0 0 0 0;
+ padding: 0 0 0 0;
+ font-family: 'Poppins', sans-serif;
+}
+
+*::-webkit-scrollbar {
+ width: 10px;
+ background-color: rgb(255, 255, 255);
+}
+*::-webkit-scrollbar-thumb {
+ width: 10px;
+ background-color: rgb(161, 161, 161);
+}
+
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ margin: 0 0 0 0;
+ padding: 0 0 0 0;
+}
+
+textarea:focus,
+input:focus {
+ outline: none;
+}
+
+*:focus {
+ outline: none;
+}
+
+.main_layout {
+ display: grid;
+ grid-template-columns: 1fr;
+ grid-template-rows: 80px 1fr;
+ max-height: 100vh;
+ max-width: 100vw;
+ height: 100vh;
+ width: 100vw;
+ padding: 0;
+ margin: 0;
+ overflow-x: hidden;
+}
+
+.main__container {
+ display: grid;
+ grid-template-columns: 300px 1fr;
+ grid-template-rows: 1fr;
+ height: 100%;
+ width: 100vw;
+ max-height: 100vh;
+ max-width: 100vw;
+ padding: 0;
+ margin: 0;
+ overflow: hidden;
+}
+
+.logo__wrapper {
+ max-width: 200px;
+ width: 190px;
+ overflow: hidden;
+}
+
+.profile_picture {
+ max-width: 50px;
+ width: 50px;
+ height: 50px;
+ overflow: hidden;
+ background-color: rgb(255, 255, 255);
+ border-radius: 50px;
+ object-fit: cover;
+}
+
+.profile_picture img {
+ height: 100%;
+ width: 100%;
+}
+
+.logout__wrapper {
+ width: fit-content;
+ min-width: 350px;
+ padding-right: 2%;
+}
+
+.trash__wrapper {
+ height: 70px;
+}
+
+.trash__select {
+ padding-left: 10px;
+ height: 30px;
+ cursor: pointer;
+}
+
+.trash__select:hover {
+ background-color: rgb(240, 240, 240);
+ border-radius: 50px;
+}
+
+.edit__buttons--wrapper {
+ min-height: 50px;
+ padding: 0px 16px;
+}
+
+.main__files--wrapper {
+ border-left: solid 1px rgb(161, 161, 161);
+ height: 100%;
+ overflow-y: scroll;
+}
+
+.files__wrapper {
+ height: 100%;
+}
+
+.files__wrapper h6{
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+#menu {
+ height: 73vh;
+}
+#menu * {
+ list-style: none;
+}
+#menu ul {
+ margin: 0;
+}
+#menu input[name="list"] {
+ display: none;
+}
+#menu label {
+ padding-left: 10px;
+ padding-right: 10px;
+ width: fit-content;
+ height: 30px;
+ cursor: pointer;
+}
+#menu label:before {
+ content: "\025b8";
+ margin-right: 4px;
+}
+#menu label:hover {
+ background-color: rgb(240, 240, 240);
+ border-radius: 50px;
+}
+.folder-active {
+ background-color: rgb(240, 240, 240);
+ border-radius: 50px;
+}
+#menu .folder-name {
+ white-space: nowrap;
+ overflow: hidden;
+}
+#menu input:checked ~ label:before {
+ content: "\025be";
+}
+#menu .interior {
+ display: none;
+}
+#menu input:checked ~ ul {
+ display: block;
+}
+
+.logo__app {
+ height: 100%;
+ object-fit: cover;
+ padding-left: 20px;
+ padding-bottom: 5px;
+ padding-top: 5px;
+}
+.logo__app img {
+ height: 100%;
+}
+.logo__app img:hover {
+ filter: saturate(200%) sepia(100%) drop-shadow(10px 10px 40px rgb(221, 221, 221));
+}
+
+.main__header {
+ border: solid 1px rgb(161, 161, 161);
+ z-index: 1000;
+}
+
+.file__item--wrapper {
+ overflow: hidden;
+ filter: grayscale(50%) hue-rotate(200deg) contrast(0%) drop-shadow(5px 5px 20px rgb(221, 221, 221));
+
+}
+.file__item--wrapper div h6{
+ padding-top: 10px;
+}
+
+.file__item--wrapper:hover {
+ background-color: rgb(230, 230, 230);
+ filter: grayscale(0%) hue-rotate(0deg) contrast(100%) drop-shadow(5px 5px 0px rgb(221, 221, 221));
+}
+
+.file__item--wrapper img {
+ width: 50%;
+ object-fit: cover;
+}
+
+.search__component {
+ background-color: rgb(255, 255, 255);
+ border-radius: 10px;
+ min-width: 500px;
+ padding: 0px 20px;
+}
+.search__component input {
+ background-color: rgba(255, 255, 255, 0);
+ border: 0;
+}
+.search__component input {
+ outline: none;
+}
+.search__component input:focus {
+ outline: none;
+ border-color: inherit;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+.search__component div i {
+ color: rgb(99, 99, 99);
+ cursor: pointer;
+}
+.search__component div {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+}
+
+.folder_container {
+ padding-bottom: 20px;
+ border-bottom: 3px solid rgb(216, 216, 216);
+}
+
+.file_container {
+ padding-top: 20px;
+}
+
+.section_modal {
+ background-color: rgba(0, 0, 0, 0.37);
+ height: 100vh;
+ width: 100vw;
+ position: fixed;
+ top: 0;
+ left: 0;
+ z-index: 1000;
+ display: none;
+}
+
+.open_modal {
+ cursor: pointer;
+}
+
+.item-folder {
+ cursor: pointer;
+}
+
+#context-menu {
+ background-color: white;
+ position: absolute;
+ border: 1px black solid;
+ border-radius: 3px;
+ z-index: 10;
+}
+#context-menu * {
+ list-style: none;
+}
+#back-context{
+ position: absolute;
+ width: 100vw;
+ height: 100vh;
+ z-index: 5;
+}
+#context-menu li:hover {
+ background-color: rgb(240, 240, 240);
+ border-radius: 5px;
+ cursor: pointer;
+}
+
+.btn__close--file--Information {
+ margin: 0;
+ padding: 0;
+ width: 30px;
+ height: 20px;
+}
+
+.my_info--container {
+ opacity: 0;
+}
+
+.search__bar--main--container {
+ background-color: rgb(255, 255, 255);
+ transform: translateY(50px);
+ position: absolute;
+ width: 500px;
+ height: fit-content;
+ max-height: 70vh;
+ border-bottom: 1px solid #6c757d;
+ border-left: 1px solid #6c757d;
+ border-right: 1px solid #6c757d;
+ border-radius: 0px 0px 10px 10px;
+ padding: 0px;
+ display: none;
+ overflow: hidden;
+}
+
+.text__inside--input {
+ padding: 30px;
+ overflow-y: scroll;
+ height: fit-content;
+ max-height: 70vh;
+ cursor: pointer;
+}
+
+.input__search--folders {
+ color: rgb(0, 0, 0);
+ font-weight: bold;
+ cursor: pointer;
+ padding-left: 5px;
+ border-bottom: 3px solid rgb(80, 80, 80);
+}
+.input__search--files {
+ color: rgb(73, 73, 73);
+ cursor: pointer;
+ padding-left: 20px;
+}
+
+.input__search--files:hover {
+ background-color: rgb(133, 133, 133);
+ border-radius: 2px;
+}
+
+.btn__toolbar{
+ min-width: 430px;
+ min-height: 45px;
+}
+
+.btn__toolbar--create--folder{
+ min-width: 280px;
+ min-height: 45px;
+}
+
+.btn__toolbar--form{
+ min-width: 430px;
+ min-height: 45px;
+}
+#form-new-folder {
+ transform: translateY(5px);
+}
diff --git a/src/pages/main/main.php b/src/pages/main/main.php
new file mode 100644
index 00000000..c1968dc8
--- /dev/null
+++ b/src/pages/main/main.php
@@ -0,0 +1,287 @@
+
+
+
+
+
+
+
+
+
+
+ File System Explorer
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

+
+
+
+
+
+
Welcome = $_SESSION["username"] ?>
+
+
+
+

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
![foto]()
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
This file cannot be displayed
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Are you sure you want to delete this folder?
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/php/local_files/delete_folder_context.php b/src/php/local_files/delete_folder_context.php
new file mode 100644
index 00000000..cdc37e53
--- /dev/null
+++ b/src/php/local_files/delete_folder_context.php
@@ -0,0 +1,18 @@
+";
+ if ($_SESSION["folders_unfold"][0] == "false") {
+ echo "";
+ } else {
+ echo "";
+ }
+ if (isset($_GET["folder-id"]) && $_GET["folder-id"] == 0) {
+ echo "