From 590870b9ec56f22cd7d7b785b6464ff1b6c46b9d Mon Sep 17 00:00:00 2001 From: cbdev Date: Thu, 15 Jul 2021 00:14:33 +0200 Subject: Initial skeleton --- assets/cargohold.css | 134 +++++++++++++++++++++++++++++++++++++++++++++++++++ listing.htm | 54 +++++++++++++++++++++ 2 files changed, 188 insertions(+) create mode 100644 assets/cargohold.css create mode 100644 listing.htm 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 @@ + + + + + + cargohold + + + + + +
+
+ + + + + + +
+
+
+ File Name + File Size +
+
+ File Name + File Size +
+
+
+
+
+
+ + + +
+
+
+ Storage space left: 2GB / 2GB
+ 70 % +
+
+
+
+ + + -- cgit v1.2.3