diff options
| -rw-r--r-- | assets/cargohold.css | 134 | ||||
| -rw-r--r-- | listing.htm | 54 |
2 files changed, 188 insertions, 0 deletions
diff --git a/assets/cargohold.css b/assets/cargohold.css new file mode 100644 index 0000000..1e56769 --- /dev/null +++ b/assets/cargohold.css @@ -0,0 +1,134 @@ +html, body { + margin: 0; + padding: 0; + text-align: center; + color: #ccd; +} + +html { + background-color: #425; +} + +#selector-label { + background-color: #333; + border-radius: 1em; + padding: 2em; + cursor: pointer; + display: inline-block; + min-width: 30%; + margin: 1em; + position: relative; +} + +#dirlisting { + padding: 2em; +} + +#storage { + margin: 2em; +} + +#storage > progress { + width: 30%; +} + +#upload { + width: 50%; + margin: 0 auto; + padding: 2em; +} + +#files { + /*display: none;*/ + position: absolute; + left: 0; + opacity: 0; + top: 0; + bottom: 0; + width: 100%; +} + +#file-submit { + background-color: #333; + border-radius: 1em; + padding: 2em; + display: inline-block; + min-width: 30%; + border: none; + color: #ccd; + margin: 1em; +} + +#header { + background-color: #728; + padding: 0.5em; + text-align: left; + font-size: 120%; + font-weight: bold; + font-family: sans; +} + +#container { + display: inline-block; + width: 85%; +} + +.tab-wrap > input { + display: none; +} + +.tab-wrap { + justify-content: center; + display: flex; + flex-wrap: wrap; + position: relative; + list-style: none; + padding: 2rem 1rem; +} + +.tab:checked:nth-of-type(1) ~ .tab-content:nth-of-type(1), .tab:checked:nth-of-type(2) ~ .tab-content:nth-of-type(2) { + opacity: 1; + transition: 0.5s opacity ease-in, 0.8s transform ease; + position: relative; + top: 0; + z-index: 100; + margin-top: 3rem; +} + +.tab:checked + label { + color: #23cb97; + background-color: #246; + border-bottom: 2px solid #23cb97; +} + +.tab + label { + max-width: 20%; + background-color: #333; + font-weight: normal; + font-size: 150%; + line-height: 1.4rem; + font-weight: 800; + color: white; + cursor: pointer; + display: block; + text-decoration: none; + flex-grow: 2; + text-align: center; + user-select: none; + transition: 0.3s background-color ease, 0.3s box-shadow ease; + height: 2rem; + padding: 0.5rem 1.5rem; + border-bottom: 2px solid rgba(255, 255, 255, 0.25); + margin-left: 1em; + margin-right: 1em; +} + +.tab-content { + z-index: -1; + position: absolute; + display: block; + width: 100%; + opacity: 0; + border-radius: 1em; + background-color: #8885; +} diff --git a/listing.htm b/listing.htm new file mode 100644 index 0000000..0421eec --- /dev/null +++ b/listing.htm @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <meta name="viewport" content="width=device-width, initial-scale=1" /> + <title>cargohold</title> + <link rel="stylesheet" href="assets/cargohold.css" /> + <link rel="icon" href="assets/cargohold.ico" /> + </head> + <body> + <div id="header"> + cargohold + </div> + <div id="container"> + <div class="tab-wrap"> + <input type="radio" id="tab-view" name="tabs" class="tab" checked> + <label for="tab-view">View</label> + + <input type="radio" id="tab-upload" name="tabs" class="tab"> + <label for="tab-upload">Upload</label> + + <div class="tab-content"> + <div id="dirlisting"> + <div> + <span class="name">File Name</span> + <span class="name">File Size</span> + </div> + <div> + <span class="name">File Name</span> + <span class="name">File Size</span> + </div> + </div> + </div> + <div class="tab-content"> + <div id="upload"> + <form action="upload" method="post" enctype="multipart/form-data"> + <label for="files" id="selector-label"> + △ Select files to upload + <input type="file" id="files" name="files" multiple> + </label> + <input type="submit" value="Start upload" name="submit" id="file-submit"> + + </form> + </div> + <div id="storage"> + Storage space left: 2GB / 2GB <br/> + <progress value="70" max="100">70 %</progress> + </div> + </div> + </div> + </div> + <script src="assets/cargohold.js"></script> + </body> +</html> |