diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 00000000..cdc89fb9 Binary files /dev/null and b/.DS_Store differ diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..40b878db --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +node_modules/ \ No newline at end of file diff --git a/basePath.php b/basePath.php new file mode 100644 index 00000000..0dcf2076 --- /dev/null +++ b/basePath.php @@ -0,0 +1,3 @@ + + + + diff --git a/dirManege/create.php b/dirManege/create.php new file mode 100644 index 00000000..a12f16f7 --- /dev/null +++ b/dirManege/create.php @@ -0,0 +1,10 @@ +"; + echo " + + "; + echo nl2br("\n $item\n"); + echo ""; + echo ""; + }else{ + $id=rand(1,10000); + echo "
"; + echo " + + "; + echo nl2br("\n $item\n"); + echo ""; + echo "
"; + + }; + } + } + + diff --git a/index.php b/index.php new file mode 100644 index 00000000..e3e0401f --- /dev/null +++ b/index.php @@ -0,0 +1,3 @@ +=0.4.0" + } + }, + "node_modules/bootstrap": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.0.1.tgz", + "integrity": "sha512-Fl79+wsLOZKoiU345KeEaWD0ik8WKRI5zm0YSPj2oF1Qr+BO7z0fco6GbUtqjoG1h4VI89PeKJnMsMMVQdKKTw==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/bootstrap" + }, + "peerDependencies": { + "@popperjs/core": "^2.9.2" + } + }, + "node_modules/jquery": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz", + "integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw==" + }, + "node_modules/underscore": { + "version": "1.13.1", + "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.13.1.tgz", + "integrity": "sha512-hzSoAVtJF+3ZtiFX0VgfFPHEDRm7Y/QPjGyNo4TVdnDTdft3tr8hEkD25a1jC+TjTuE7tkHGKkhwCgs9dgBB2g==" + } + }, + "dependencies": { + "@popperjs/core": { + "version": "2.9.2", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.9.2.tgz", + "integrity": "sha512-VZMYa7+fXHdwIq1TDhSXoVmSPEGM/aa+6Aiq3nVVJ9bXr24zScr+NlKFKC3iPljA7ho/GAZr+d2jOf5GIRC30Q==", + "peer": true + }, + "ajax": { + "version": "0.0.4", + "resolved": "https://registry.npmjs.org/ajax/-/ajax-0.0.4.tgz", + "integrity": "sha1-tvTOi9WQ9fS6Lc/eEd54nyCfJCM=", + "requires": { + "underscore": "" + } + }, + "bootstrap": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.0.1.tgz", + "integrity": "sha512-Fl79+wsLOZKoiU345KeEaWD0ik8WKRI5zm0YSPj2oF1Qr+BO7z0fco6GbUtqjoG1h4VI89PeKJnMsMMVQdKKTw==", + "requires": {} + }, + "jquery": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz", + "integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw==" + }, + "underscore": { + "version": "1.13.1", + "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.13.1.tgz", + "integrity": "sha512-hzSoAVtJF+3ZtiFX0VgfFPHEDRm7Y/QPjGyNo4TVdnDTdft3tr8hEkD25a1jC+TjTuE7tkHGKkhwCgs9dgBB2g==" + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 00000000..1747dcbd --- /dev/null +++ b/package.json @@ -0,0 +1,7 @@ +{ + "dependencies": { + "ajax": "^0.0.4", + "bootstrap": "^5.0.1", + "jquery": "^3.6.0" + } +} diff --git a/root.php b/root.php new file mode 100644 index 00000000..84fd6b8c --- /dev/null +++ b/root.php @@ -0,0 +1,80 @@ + + + + + + + + + + + + Document + + + + +
+
+ +
+ +
+
+ +
+
    +
    • +
    • +
+
+
+
+ + +
+ +
+
+ +
+
+
+ + +
+ +
+ + + + diff --git a/script.js b/script.js new file mode 100644 index 00000000..a2dfd239 --- /dev/null +++ b/script.js @@ -0,0 +1,99 @@ +document.oncontextmenu = function () { + return false; +} +$(".optionsMenu").hide(); +$(".newFolderForm").hide(); +$(".closeDiv").hide(); + +function basePath(ajax_response){ + let path = $.ajax({ + url:"./basePath.php", + type:"post", + async:false, + success:function(response){ + console.log(response); + ajax_response(response); + }, + }) + return path.responseText; +} + let path=basePath((path)=>path); + console.log(path); + +$(".newFolderButon").on("click",()=>{ + $(".optionsMenu").show(); + $(".closeDiv").show(); + } +) + +$("#showNewFolderForm").on("click",()=>{ + $(".newFolderForm").show(); + $(".closeDiv").show(); + } +) +function rightButton(){ + $(".folder").contextmenu((event)=>{ + console.log(event.target.id) + $("#"+`${event.target.id}`+" "+".deleteEditOp").show(); + $(".sureToRemove a").attr("href",`./dirManege/delete.php?path=.${path}/${event.target.getAttribute("data")}`) + $(".closeDiv").show(); + } + ) +} +rightButton(); +function editModal(){ + + $("#edit button").on("click",(event)=>{ + console.log(event.target.getAttribute("data")) + $("body").prepend("
"+event.target.getAttribute("data")+"
"); + $(".editFoldername").append("
"); + $(".editFoldername form").append("
"); + $(".form-floating").append(""); + $(".form-floating").append(""); + $(".editFoldername form").append(" "); + + } + ) +} +editModal(); +$(".closeDiv").on("click",()=>{ + $(".editFoldername").remove(); + $(".optionsMenu").hide(); + $(".newFolderForm").hide(); + $(".deleteEditOp").hide(); + $(".sureToRemove").hide(); + $(".closeDiv").hide(); + } +) +function showSureToRemove(){ + $("#delete button").on("click", ()=>{ + $(".sureToRemove").show(); + $(".closeDiv").show(); + }) +} +showSureToRemove(); + +function dubleClick(){ + $(".folder").on("dblclick",(e)=>{ + $(".folder").hide(); + let prevPth=path; + path = path+"/"+e.target.getAttribute("data"); + localStorage.setItem("path",path); + $(".newFolderForm form").attr("action",`./dirManege/create.php?path=${path}`) + + $.ajax({ + url: "./dirContent.php", + type:"post", + data:{ + "path":path, + "prevPath":prevPth, + }, + success: function(response) + {$(".folders").append(response)} + }) + }) +} + +dubleClick(); + + diff --git a/style.css b/style.css new file mode 100644 index 00000000..44e29eae --- /dev/null +++ b/style.css @@ -0,0 +1,191 @@ +/*_________________*/ +body { + background-color: #fafafa; + font-family: "Ubuntu", sans-serif; + margin: 0; + padding: 0; +} + +button { + border: none; + background-color: none; +} + +.closeDiv { + position: absolute; + width: 100%; + height: 100%; + z-index: 0; +} + +.navBarContain { + background-color: #cce8f8; + width: 100%; + min-height: 50px; + padding: 10px 50px; +} + +.navbar { + background-color: #cce8f8 !important; +} + +.folders { + background-color: #f7f2ec; + min-height: 500px; + margin-top: 20px; + display: grid; + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr 1fr; + column-gap: 20px; + row-gap: 30px; + justify-content: left; + align-content: flex-start; +} + +svg { + pointer-events: none; +} + +.deleteEditOp { + position: absolute; + z-index: 100; + background-color: #f8f5f1; + list-style: none; + width: 10%; + border-radius: 10px; + animation-name: displayList2; + animation-duration: 0.5s; + animation-timing-function: ease-out; + font-size: 20px; +} + +.OpEditDel { + margin: 20px; +} + +.editFoldername { + position: absolute; + padding: 20px; + z-index: 200; + border-radius: 20px; + width: 40%; + min-height: 100px; + left: 30%; + top: 10%; + background-color: white; +} + +.aside { + background-color: #cce8f8; + min-width: 300px; +} + +.newFolderButon { + border-radius: 50%; + border: 1px solid #dbdbdb; + height: 40px; + width: 40px; + justify-content: center; + align-items: center; + background-color: "red"; + margin-top: "100px"; + margin-left: 50px; +} + +.optionsMenu { + position: relative; +} + +.options { + position: absolute; + z-index: 1; + background-color: whitesmoke; + list-style: none; + width: 40%; + border-radius: 10px; + animation-name: displayList; + animation-duration: 0.2s; + animation-timing-function: ease-out; + font-size: 20px; + left: 120px; + top: -30px; +} + +.newFolderForm { + position: absolute; + z-index: 1; + left: 350px; + top: -30px; + padding: 50px; + background-color: whitesmoke; + border-radius: 10px; + animation-name: displayList; + animation-duration: 0.2s; + animation-timing-function: ease-out; + min-width: 300px; +} + +.options button { + border: none; + background-color: whitesmoke; + cursor: pointer; + padding: 20px; +} + +.Option { + border-top: 1px solid #c0bfbf; + border-bottom: 1px solid #c0bfbf; +} + +main { + display: grid; + grid-template-columns: 1fr 3fr; + column-gap: 20px; + justify-content: left; + align-content: flex-start; +} + +.sureToRemove { + position: absolute; + padding: 100px; + z-index: 200; + border-radius: 20px; + min-width: 500px; + min-height: 250px; + left: 30%; + top: 50px; + background-color: whitesmoke; +} + +@keyframes displayList { + 0% { + width: 2%; + font-size: 2px; + color: whitesmoke; + } + 40% { + color: whitesmoke; + } + 100% { + width: 40%; + font-size: 20px; + color: black; + } +} +@keyframes displayList2 { + 0% { + width: 2%; + font-size: 2px; + color: whitesmoke; + } + 40% { + color: whitesmoke; + } + 100% { + width: 10%; + font-size: 20px; + color: black; + } +} + +/*# sourceMappingURL=style.css.map */ diff --git a/style.css.map b/style.css.map new file mode 100644 index 00000000..a53fbdd5 --- /dev/null +++ b/style.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["styles/_global.scss","styles/_navbar.scss","styles/_folders.scss","styles/_aside.scss","styles/_myMain.scss","styles/_animations.scss"],"names":[],"mappings":"AAQA;AAwEA;EACE,kBAhFY;EAiFZ,aAlFK;EA2BH;EACA;;;AA0DJ;EACE;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AC7FF;EACI;EACA;EACD;EACA;;;AAEH;EACI;;;ACPJ;EACI;EACA;EACA;EACA;EFaF;EACA;EACA,YEd4C;EFe5C,SEfiD;EFgBjD;EACA;;;AEbF;EACI;;;AAEJ;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAMJ;EACA;;;AAGA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AC1CJ;EACI;EACA;;;AAGJ;EH2BE;EACA,QA5BW;EA6BX;EACA;EACA;EACA;EACA,kBGhCuB;EHiCvB,YGjC8B;EHkC9B;;;AGhCF;EACE;;;AAGF;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEJ;EAEI;EACA;EACA;EACA;;;AAGJ;EAEI;EACA;;;ACjDJ;EJQE;EACA;EACA,YIRgC;EJShC;EACA;;;AIPF;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AChBJ;EACI;IACI;IACA;IACA;;EAEJ;IACI;;EAEJ;IACI;IACA;IACA;;;AAGR;EACI;IACI;IACA;IACA;;EAEJ;IACI;;EAEJ;IACI;IACA;IACA","file":"style.css"} \ No newline at end of file diff --git a/styles/_animations.scss b/styles/_animations.scss new file mode 100644 index 00000000..74573e2c --- /dev/null +++ b/styles/_animations.scss @@ -0,0 +1,30 @@ +@keyframes displayList { + 0%{ + width: 2%; + font-size: 2px; + color: rgb(245, 245, 245); + }; + 40%{ + color: rgb(245, 245, 245); + }; + 100%{ + width: 40%; + font-size: 20px; + color:black; + }; +} +@keyframes displayList2 { + 0%{ + width: 2%; + font-size: 2px; + color: rgb(245, 245, 245); + }; + 40%{ + color: rgb(245, 245, 245); + }; + 100%{ + width: 10%; + font-size: 20px; + color:black; + }; +} \ No newline at end of file diff --git a/styles/_aside.scss b/styles/_aside.scss new file mode 100644 index 00000000..1910c027 --- /dev/null +++ b/styles/_aside.scss @@ -0,0 +1,66 @@ +@use "./global" as global; +.aside{ + background-color: rgb(204, 232, 248); + min-width: 300px; + +} +.newFolderButon{ + @include global.inputs("red", "100px"); +} +.optionsMenu{ + position: relative; + +} +.options{ + position: absolute; + z-index: 1; + background-color: rgb(245, 245, 245); + list-style: none; + width: 40%; + border-radius: 10px; + animation-name: displayList; + animation-duration: 0.2s; + animation-timing-function: ease-out; + font-size: 20px; + left: 120px; + top:-30px; +} +.newFolderForm{ + position: absolute; + z-index: 1; + left: 350px; + top:-30px; + padding: 50px; + background-color: rgb(245, 245, 245); + border-radius: 10px; + animation-name: displayList; + animation-duration: 0.2s; + animation-timing-function: ease-out; + min-width: 300px; +} +.options button{ + + border:none; + background-color: rgb(245, 245, 245);; + cursor: pointer; + padding: 20px; + +} +.Option{ + + border-top: 1px solid rgb(192, 191, 191); + border-bottom: 1px solid rgb(192, 191, 191); +} +// .uploadItemForm{ +// position: absolute; +// z-index: 1; +// left: 550px; +// top:-30px; +// padding: 50px; +// background-color: rgb(245, 245, 245); +// border-radius: 10px; +// animation-name: displayList; +// animation-duration: 0.2s; +// animation-timing-function: ease-out; +// min-width: 300px; +// } \ No newline at end of file diff --git a/styles/_folders.scss b/styles/_folders.scss new file mode 100644 index 00000000..1c8b88ff --- /dev/null +++ b/styles/_folders.scss @@ -0,0 +1,45 @@ +@use "./global" as global; +.folders{ + background-color: rgb(247, 242, 236); + min-height: 500px; + margin-top: 20px; + display: grid; + @include global.grid5(1fr,1fr,1fr,1fr,1fr,20px,30px); + + +} +svg{ + pointer-events: none; +} +.deleteEditOp{ + + position: absolute; + z-index: 100; + background-color:rgb(248, 245, 241); + list-style: none; + width: 10%; + border-radius: 10px; + animation-name: displayList2; + animation-duration: 0.5s; + animation-timing-function: ease-out; + font-size: 20px; + + + +} + +.OpEditDel{ +margin:20px; +} + +.editFoldername{ + position: absolute; + padding: 20px; + z-index: 200; + border-radius: 20px; + width: 40%; + min-height: 100px; + left:30%; + top:10%; + background-color:rgb(255, 255, 255); +} \ No newline at end of file diff --git a/styles/_global.scss b/styles/_global.scss new file mode 100644 index 00000000..7c3bd670 --- /dev/null +++ b/styles/_global.scss @@ -0,0 +1,96 @@ +$font: "Ubuntu", sans-serif; +$backgroundC: #fafafa; +$boxColor: #ffffff; +$textPostColor: #262626; +$postColor: #404040; +$flexbox:flex; +$borderColor:1px solid #dbdbdb; +$anchor:100%; +/*_________________*/ +@mixin grid2($col1,$col2,$gap) { + display: grid; + grid-template-columns: $col1 $col2; + column-gap: $gap; + justify-content: left; + align-content: flex-start; +} + +@mixin grid5($col1,$col2,$col3,$col4,$col5,$gapX,$gapY) { + display: grid; + grid-template-columns: $col1 $col2 $col3 $col4 $col5; + column-gap: $gapX; + row-gap: $gapY; + justify-content: left; + align-content: flex-start; +} + +@mixin resetMarginPadding { + margin: 0; + padding: 0; +} + +@mixin inputs($color,$top){ + + border-radius: 50%; + border: $borderColor; + height: 40px; + width: 40px; + justify-content: center; + align-items: center; + background-color: $color; + margin-top: $top; + margin-left: 50px; + +} + +@mixin image ($ejeZ){ + position: absolute; + z-index: $ejeZ; + width: 50%; +} + +@mixin backimag ($ejeX,$ejeY,$bordeR,$url){ + height: $ejeX; + width: $ejeY; + border-radius: $bordeR; + margin: 5px; + background-image: url($url); + background-size: cover; + background-position: center; +} + +@mixin flex ($direction,$xPos,$ypos,$anchor){ + display: $flexbox; + flex-direction: $direction; + justify-content: $xPos; + align-items: $ypos; + width: $anchor; + +} + +@mixin aHref ($color,$fonts){ + text-decoration: none; + color: $color; + font-weight: 700; + font-family: $fonts; + justify-self: center; + align-self: center; + +} + +body { + background-color: $backgroundC; + font-family: $font; + @include resetMarginPadding; + +} +button{ + border: none; + background-color: none; +} +.closeDiv{ + position:absolute; + width: 100%; + height: 100%; + z-index: 0; +} \ No newline at end of file diff --git a/styles/_myMain.scss b/styles/_myMain.scss new file mode 100644 index 00000000..6fff7e54 --- /dev/null +++ b/styles/_myMain.scss @@ -0,0 +1,18 @@ +@use "./global" as global; + +main{ + + @include global.grid2(1fr,3fr,20px); + +} +.sureToRemove{ + position: absolute; + padding: 100px; + z-index: 200; + border-radius: 20px; + min-width: 500px; + min-height: 250px; + left:30%; + top:50px; + background-color:rgb(245, 245, 245); +} diff --git a/styles/_navbar.scss b/styles/_navbar.scss new file mode 100644 index 00000000..6453c5a9 --- /dev/null +++ b/styles/_navbar.scss @@ -0,0 +1,10 @@ +@use "./global" as global; +.navBarContain{ + background-color: rgb(204, 232, 248); + width: 100%; + min-height: 50px; + padding: 10px 50px; +} +.navbar{ + background-color: rgb(204, 232, 248) !important; +} \ No newline at end of file diff --git a/styles/main.scss b/styles/main.scss new file mode 100644 index 00000000..41870cb1 --- /dev/null +++ b/styles/main.scss @@ -0,0 +1,6 @@ +@use "./global"; +@use "./navbar"; +@use "./folders"; +@use "./aside"; +@use "./myMain"; +@use "./animations"; diff --git a/wireframe/Wireframe.pdf b/wireframe/Wireframe.pdf new file mode 100644 index 00000000..660de3ad Binary files /dev/null and b/wireframe/Wireframe.pdf differ