From db824e067d17eba3469a49dffb04566aed3449b2 Mon Sep 17 00:00:00 2001 From: Nate Buttke Date: Thu, 27 Jul 2023 17:29:36 -0700 Subject: add frontend components with my fixes. still messy. --- frontend/index.html | 132 +++++++++++++++++++++++++++++++++++++++++++++++++ frontend/jsmain.js | 0 frontend/style.css | 138 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 270 insertions(+) create mode 100644 frontend/index.html create mode 100644 frontend/jsmain.js create mode 100644 frontend/style.css (limited to 'frontend') diff --git a/frontend/index.html b/frontend/index.html new file mode 100644 index 0000000..47060ab --- /dev/null +++ b/frontend/index.html @@ -0,0 +1,132 @@ + + + + + + + + + + + + + + + + + + + + talktoANYcode + + +
+
+
+
Querying...
+
+

+

+

+
+ +
+
+ + + +
+
+
+
+ +
+ +
+ + + + diff --git a/frontend/jsmain.js b/frontend/jsmain.js new file mode 100644 index 0000000..e69de29 diff --git a/frontend/style.css b/frontend/style.css new file mode 100644 index 0000000..8417106 --- /dev/null +++ b/frontend/style.css @@ -0,0 +1,138 @@ +html { + font-size: 16px; +} + +#main-content { + text-align: center; + min-height: 100vh; +} + + +#jumbo-title { + font-weight: 900; + font-size: 10rem; + font-family: 'Inter' !important; + color: #2d3436; +} + +#top-bar { + padding: 1rem 2rem 1rem 2rem; + border-bottom: #eee 1px solid; + margin-bottom: 2rem; +} + +.top-xs { + align-content: start !important; +} + + +.normal-font { + font-size: 1rem !important; + color: #fff !important; + font-family: 'Inter' !important; +} + +.normal-font-light { + font-size: 1rem !important; + color: #2d3436 !important; + font-family: 'Inter' !important; +} + +.fat-font { + font-weight: 900; +} + +code { + background-color: #2a3b4d; + border-radius: 2px; + padding: 1px; +} + +.ui.button { + /* padding: 0.5rem !important; */ + font-size: 1rem !important; + margin-left: 0.5rem !important; +} + +.footie{ + border-radius: 5px; + background: #2d3436; + padding: 2rem; +} + +#transcription-result{ + border-radius: 5px; + border: 1px solid #ddd; + min-height: 10rem; + margin: 1rem 0.5rem 1rem 0.5rem; + padding: 1rem; + text-align: left; +} + +#spinny { + position: absolute; + z-index: 10; + width: 100%; + height: 100%; + display: none; +} + +#transcription-title { + text-align: center; + text-transform: uppercase; + letter-spacing: 1rem; + font-weight: 900; +} + +.divider{ + color: #fff !important; +} + +#all-inputs{ + padding: 1rem; + border: 1px solid #2d3436;; + border-radius: 5px; + background: #2d3436;; +} + +audio{ + border: 1px solid #424e51; + border-radius: 5px; +} + +#blinker { + color: #db2828; + margin: 1rem; + display: none; +} + +.blink { + animation: blinker 1s infinite alternate; +} + +.code, .summary{ + text-align: left; + min-height: 500px; + width: 100%; + display: inline-block; + background: #282c34; + padding: 20px; + color: #fff; + margin: 5px; + border-radius: 5px; + font-size: 16px;; +} + +#main-title{ + background-color: #eee; + color: red; + font-size: 25px !important; + padding: 10px; + margin: 10px; + border-radius: 5px;; +} + +@keyframes blinker { +from { opacity: 1; } +to { opacity: 0; } +} \ No newline at end of file -- cgit v1.2.3