diff options
| author | ache <ache@ache.one> | 2019-03-03 06:44:05 +0100 |
|---|---|---|
| committer | ache <ache@ache.one> | 2019-03-03 06:44:05 +0100 |
| commit | c1d82121bef766bcd6bd8c1ed00a928265ef1766 (patch) | |
| tree | 03267a9d1937fac8f54b21900d70c6c865c35428 /dir.html | |
| parent | Fill button (diff) | |
Kawaii power
Diffstat (limited to 'dir.html')
| -rw-r--r-- | dir.html | 101 |
1 files changed, 76 insertions, 25 deletions
@@ -4,8 +4,9 @@ {{if .Name}}<title>{{ .Name }}</title>{{end}} </head> <body> -<h1>π¦ Index of {{ .Name }} π</h1><br> -<section id="main"> +<div class="header"></div> +<div class="main"> +<section id="navFile"> <table> <tbody> {{range .ListFiles}} @@ -14,8 +15,8 @@ </tbody> </table> </section> -<section id="nav"> - <h2>List of directories</h2> +<section id="navDir"> + <h2>Directories</h2> <table> <tbody> {{range .ListCols}} @@ -23,12 +24,13 @@ {{end}} </table> </section> -<section id="dav"> +<section id="davS"> <div class="uploadDiv"> <label for="fileinput">Envoyer un fichier : </label><br/> <input id="fileinput" type="file"> </div> - <hr/> +</section> +<section id="dav"> <div class="moveDiv"> <label for="file_move1">DΓ©plaΓ§er : </label><br/> <input id="file_move1" type="input"> <br/> @@ -45,9 +47,9 @@ RΓ©ponse du server : <div id="bodyServResponse"><div> </div> - </section> -<div id="footer">Create with love π bye <a href="https//ache.one">ache</a></div> +<div id="footer">Create with love π by <a href="https//ache.one">ache</a></div> +</div> <script language="javascript"> const input = document.getElementById('fileinput'); @@ -152,40 +154,87 @@ window.addEventListener('load', onPageLoad, false); </script> <style> body { + background: url(pink.svg); + + padding-left: 10%; + padding-right: 10%; +} + +.main { + background-color: white; + border-radius: 25px; + margin-top: -8px; + padding-top: 20px; + padding-bottom: 20px; + width: 100%; + display: grid; grid-template-columns: calc(100% / 5) calc(100% / 2.5 + 100% / 5 ) calc(100%/5); - grid-template-areas: "h h h" - "nav main dav" - "nav f f"; -} + grid-template-areas: "navDir navFile dav" + "navDir navFile dav" + "navDir davS davS" + "navDir f f"; -h1 { - grid-area: h; } -#nav { - grid-area: nav; +@media screen and (max-width: 900px) { + body { + padding-left: 5%; + padding-right: 5%; + } + .main { + grid-template-columns: 100%; + grid-template-areas: "navDir" + "navFile" + "dav" + "davS" + "f" + } +} +.header { + padding: 15%; + margin-top: -17px; + background: url(test.svg); + background-size: contain; + background-repeat: no-repeat; +} +#navDir { + grid-area: navDir; background-color: #ffa0fc; - margin: 1%; + margin: 3%; + padding: 5%; +} +#davS { + grid-area: davS; + background-color: #0ff0af; + margin-top: 0%; + margin-left: 3%; + margin-right: 3%; + padding: 5%; } -#nav table { +#navDir table { margin: 20px; } -#main { - grid-area: main; +#navFile { + grid-area: navFile; background-color: #00ff64; - margin: 1%; + margin: 1.7%; + padding: 5%; } -#main table { +#navFile table { margin: 20px; } #dav { grid-area: dav; background-color: #33CCDD; - margin: 1%; + margin: 3%; + padding: 5%; } -#dav .uploadDiv, .mkdirDiv, .moveDiv, .repDiv { - margin: 20px; +#dav .mkdirDiv, .moveDiv, .repDiv { + margin: 2%; +} +#dav input { + width: 80%; } #bodyServResponse { text-indent: 5%; @@ -195,6 +244,8 @@ h1 { #footer { grid-area: f; background-color: #fcffa0; + margin-left:3%; + margin-right:3%; } .delete { color: red; |