new web

1 files changed, 607 insertions, 0 deletions

diff --git a/web/static/main.css b/web/static/main.css
new file mode 100644
index 0000000..cf1821f
--- /dev/null
+++ b/web/static/main.css
@@ -0,0 +1,607 @@
+:root {
+  --back: #888;
+  --front: #E76969;
+  --green: #69E769;
+  --site-font: JPN16;
+  --gradient: linear-gradient(90deg,rgba(255, 100, 255, 1) 0%, rgba(0, 255, 255, 1) 100%); 
+}
+
+@font-face {
+  font-family: Terminal;
+  src: url( /static/fonts/Web437_IBM_PGC.woff )
+}
+
+@font-face {
+  font-family: JPN12;
+  src: url( /static/fonts/Web437_DOS-V_re_JPN12.woff )
+}
+
+@font-face {
+  font-family: JPN16;
+  src: url( /static/fonts/Web437_DOS-V_re_JPN16.woff )
+}
+
+
+@font-face {
+  font-family: JPN19;
+  src: url( /static/fonts/Web437_DOS-V_re_JPN19.woff )
+}
+
+@font-face {
+  font-family: JPN24;
+  src: url( /static/fonts/Web437_DOS-V_re_JPN24.woff )
+}
+
+@font-face {
+  font-family: JPN30;
+  src: url( /static/fonts/Web437_DOS-V_re_JPN30.woff )
+}
+
+#moneyjsx-root {
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  margin: 0;
+}
+input[type="radio"] {
+  appearance: none;
+  background-color: var( --back );
+  margin: 0;
+  font: inherit;
+  color: #888;
+  width: 1em;
+  height: 1em;
+  border: 0.15em solid currentColor;
+  border-radius: 50%;
+  display: grid;
+  place-content: center;
+}
+
+input[type="radio"]::before {
+  content: "";
+  width: 0.75em;
+  height: 0.75em;
+  border-radius: 50%;
+  transform: scale(0);
+  transition: 120ms transform ease-in-out;
+  box-shadow: inset 1em 1em var(--front);
+}
+
+input[type="radio"]:checked::before {
+  transform: scale(1);
+}
+
+.border-wrapper {
+  justify-content: center;
+  flex-direction: row;
+  align-self: center;
+  position: relative;
+  display: flex;
+  width: 100%;
+  background: var(--gradient);
+  padding: 1px 1px 1px 1px;
+  margin: 0px;
+}
+
+.header {
+  width: calc(100% - 2px);
+  background: var(--back);
+  font-family: JPN24;
+  font-size: 26px;
+  height: 38px;
+  display: flex;
+  flex-direction: row;
+}
+
+code {
+  font-family: Code;
+  font-size: 12px;
+  white-space: pre-wrap;
+}
+
+html, body {
+  height: 100%;
+  overflow: auto;
+}
+
+input {
+  background-color: #222;
+  border: 1px solid var(--front);
+  color: #888;
+  font-family: Code;
+}
+
+button {
+  cursor: pointer;
+  border: 1px solid var(--front);
+  background-color: #222;
+  color: #fff;
+  font-size: 16px;
+  font-family: var( --site-font );
+}
+
+textarea {
+  border: 1px solid var( --front );
+  background-color: #222;
+  color: white;
+}
+
+hr {
+  border-top: 1px solid #aaa;
+  background: #ccc;
+  height: 1px;
+  width: calc( 100% - 2px );
+}
+
+a {
+  text-decoration: none;
+  background: var( --gradient );
+  background-clip: border-box;
+  text-decoration: underline;
+  -webkit-text-fill-color: transparent;
+  -webkit-background-clip: text;
+  color: #c6a6ff;
+}
+
+
+a:hover {
+  cursor: pointer;
+  color: #fff;
+  background: var( --gradient );
+  background-clip: border-box;
+  text-decoration: underline;
+  -webkit-text-fill-color: transparent;
+  -webkit-background-clip: text;
+  text-decoration: underline;
+}
+
+.gradient {
+  background: var( --gradient );
+  background-clip: border-box;
+  -webkit-text-fill-color: transparent;
+  -webkit-background-clip: text;
+}
+
+.nogradient {
+  -webkit-text-fill-color: white;
+  -webkit-background-clip: text;
+  background: none;
+}
+
+a.nogradient {
+  margin-bottom: 0px;
+  text-decoration: none;
+}
+
+a.nogradient:hover {
+  text-decoration: underline;
+}
+
+a.nogradient::after {
+   content:'.';
+  -webkit-text-fill-color: transparent;
+  color: transparent;
+   width:calc( 100% - 7px );
+  display:inline-block;
+  z-index: 2;
+   height: 1px;
+  margin-top: -2px;
+   background: #30e8bf;
+  padding: 0;
+   background: var( --gradient );
+}
+
+a.nogradient:hover::after {
+  background: none;
+}
+
+
+body {
+  background-color: var( --back );
+  background-image: url( "/static/networkheaven.png" );
+  font-family: var( --site-font );
+  font-smooth: never !important;
+  background-position: center;
+  background-size: cover;
+  flex-direction: column;
+  display: flex;
+  color: #fff;
+  margin: 0;
+}
+
+
+#page-main {
+  flex-direction: row;
+  justify-content: center;
+  align-items: initial;
+  text-align: center;
+  padding: 30px 0 0;
+  overflow-x: clip;
+  display: flex;
+  width: 100%;
+  z-index: 0;
+  margin: 0;
+  margin-bottom: 30px;
+}
+
+#page-main-content {
+  width: 800px;
+  min-width: 600px;
+  background: var( --back );
+  border-left: 1px solid #ccc;
+  border-top: 1px solid #fff;
+  border-right: 1px solid #888;
+  border-bottom: 1px solid #222;
+}
+
+
+.red { color: #e96969; }
+.black { color: #212325; }
+.green { color: #10bb10; }
+.btn_close { background: #ccc; }
+
+
+
+#sidebar {
+  width: 230px;
+  height: 100%;
+  margin-right: 20px;
+  text-align: left;
+  background: var( --back );
+  border-left: 1px solid #ccc;
+  border-top: 1px solid #fff;
+  border-right: 1px solid #888;
+  border-bottom: 1px solid #222;
+}
+
+#sidebar h3 {
+  margin-top: 8px;
+  margin-bottom: 8px;
+  background: var( --gradient );
+  background-clip: border-box;
+  text-decoration: none;
+  -webkit-text-fill-color: transparent;
+  -webkit-background-clip: text;
+  width: fit-content;
+  font-family: JPN24;
+  font-size: 24px;
+  margin-left: 4px;
+}
+
+#sidebar h4 {
+  margin-top: 0px;
+  margin-bottom: 0px;
+  width: fit-content;
+  font-family: JPN16;
+  font-size: 17px;
+  margin-left: 4px;
+}
+
+
+.sidebar-row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding-right: 4px;
+}
+
+.page-title {
+  display: flex;
+  justify-content: center
+}
+
+.page-title h3 {
+  margin-top: 15px;
+  margin-bottom: 6px;
+}
+
+@media( max-width: 1100px ) {
+  #page-main-content {
+    width: calc( 100% - 20px ) !important;
+    min-width: unset !important;
+    margin-right: 20px !important;
+    margin-left: 0 !important;
+  };
+
+  #sidebar {
+    margin-left: 20px;
+  }
+
+  .page-title h3 {
+    margin-top: 8px;
+    margin-bottom: 0px;
+  }
+
+  .page-title {
+    height: 35px;
+  }
+
+  #sidebar h3 {
+    margin-top: 8px;
+    margin-bottom: 8px;
+    background: var( --gradient );
+    background-clip: border-box;
+    text-decoration: none;
+    -webkit-text-fill-color: transparent;
+    -webkit-background-clip: text;
+    width: fit-content;
+    font-family: JPN24;
+    font-size: 24px;
+    margin-left: 4px;
+  }
+
+  #sidebar h4 {
+    font-family: JPN12 !important;
+    font-size: 13px !important;
+  }
+
+  .sidebar-row {
+    margin-bottom: 6px;
+  }
+
+  #ascii-art {
+    font-size: 7px !important;
+  }
+}
+
+@media( max-width: 740px ) {
+  #sidebar {
+    width: 200px !important;
+  }
+
+  #sidebar h4 {
+    font-size: 10px !important;
+  }
+
+  #sidebar h3 {
+    font-size: 20px !important;
+  }
+
+  .sidebar-row {
+    margin-bottom: 10px !important;
+  }
+
+  #ascii-art {
+    font-size: 6px !important;
+  }
+}
+
+#ascii-art {
+  white-space: pre-wrap;
+  font-family: Code;
+  font-size: 12px;
+  overflow:clip;
+  padding-top: 5px;
+}
+
+#ascii-art span {
+  padding: 0;
+  margin: 0;
+}
+
+.groupbox {
+  border: 1px solid var( --front );
+  background-color: var( --back );
+  justify-content: flex-start;
+  align-items: flex-start;
+  flex-direction: column;
+  height: fit-content;
+  min-height: 25px;
+  min-width: 333px; /* may need to change this for mobile */
+  max-width: 600px;
+  display: flex;
+  margin: 5px;
+  z-index: 1;
+  flex: 1;
+}
+.groupbox > .grouptitle {
+  background-color: var( --back );
+  font-family: inherit;
+  position: relative;
+  margin: 0 0 -15px; /* stupid hardcode, but its: ( title font height - 4 ) * -1 */
+  padding: 0px 5px;
+  font-size: 18px;
+  z-index: 2;
+  top: -9px;
+  left: 5px;
+}
+.groupbody {
+  width: calc( 100% - 5px );
+  height: calc( 100% - 5px );
+  text-align: left;
+  margin: 5px;
+}
+
+#popup-msgbox {
+  display: none;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  left: 50%;
+  min-width: 250px;
+  border: 1px solid var( --front );
+  background: var( --back );
+  min-height: 120px;
+  top: 45vh;
+  transform: translate( -50%, -50% );
+}
+
+
+.dropdown {
+  background-color: var( --back );
+  border-color: var( --front );
+  text-align: center;
+  color: #888;
+  height: 24px;
+  color: #fff;
+}
+
+.dropdown-wrapper {
+  border: 2px inset var( --front );
+  background-color: var( --back );
+  justify-content: space-evenly;
+  flex-direction: column;
+  align-items: center;
+  position: absolute;
+  width: 256px;
+  z-index: 10;
+  margin-left: 10px;
+}
+
+.dropdown-inner {
+  height: 30px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-evenly;
+  border-bottom: 1px solid #333;
+  cursor: pointer;
+}
+
+.rolldownlist {
+  height: fit-content;
+  position: relative;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+}
+
+.rolldown {
+  transition: background-color 0.3s ease-in-out;
+  border-bottom: 1px solid #E76969;
+  justify-content: space-between;
+  flex-direction: column;
+  display: flex;
+  height: auto;
+  width: 100%;
+}
+
+.rolldown:nth-of-type( 1 ) { margin-top: -5px; }
+.rolldown:nth-last-of-type( 1 ) { border-bottom: none; }
+.rolldown:hover { cursor: pointer; }
+
+.rolldown-collapsed-container {
+  overflow: hidden;
+  padding: 10px;
+  display: flex;
+  height: auto;
+  width: 100%;
+}
+
+.rolldown-collapsed {
+  float: left;
+  padding: 0;
+}
+
+.rolldown-expanded-container {
+  text-align: center;
+  overflow: hidden;
+  transition: max-height 0.3s linear;
+  max-height: 0px;
+  margin: 0;
+  padding: 0;
+}
+
+.rolldown-expanded-container.active {
+  display: flex !important;
+  max-height: 200px;
+  height: auto;
+}
+
+.rolldown-expanded {
+  margin: 20px;
+}
+
+.rolldown-expanded a { color: white; }
+
+.rolldown-icon-container {
+  margin-right: 15px;
+  position: relative;
+  float: left;
+  height: fit-content;
+}
+
+.rolldown.active .rolldown-icon-container {
+  transform: rotate( 90deg );
+}
+
+.popup {
+  border: 1px solid var( --front );
+  background-color: var( --back );
+  box-shadow: 1px 1px 2px black;
+  justify-content: center;
+  align-items: center;
+  align-self: center;
+  flex-direction: column;
+  position: absolute;
+  max-height: 888px;
+  max-width: 600px;
+  min-width: 300px;
+  display: flex;
+  padding: 20px;
+  z-index: 5;
+  width: 85%;
+  top: 50%;
+  left: 50%;
+  transform: translate( -50%, -50% );
+}
+
+.popup-msg {
+  border: 1px solid var( --front );
+  background-color: var( --back );
+  box-shadow: 1px 1px 2px black;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 1000;
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+}
+
+.column {
+  display: flex;
+  flex-direction: column;
+}
+
+#background-toggle {
+  position: absolute;
+
+  bottom: 0px;
+  right: 0px;
+  background: #888;
+  border-left: 1px solid #ccc;
+  border-top: 1px solid #fff;
+  border-right: 1px solid #888;
+  border-bottom: 1px solid #222;
+}
+
+#package-entries {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+}
+
+#package-entries table {
+  text-align: right;
+}
+
+#package-entries table tr td:first-child {
+  text-align: left !important;
+}
+
+.package-entry {
+  display: flex;
+  width: 80%;
+
+  justify-content: space-between;
+}
+
+.package-entry-date,
+.package-entry-time {
+  padding: 0 10px;
+}