From 0188280ce1e9213d2489ff91c5a09d759df65217 Mon Sep 17 00:00:00 2001
From: samerbam <samerbam@users.noreply.github.com>
Date: Tue, 29 Aug 2023 19:47:14 -0400
Subject: [PATCH] optimize for production according to tailwindcss

---
 application/static/index.html     | 269 +-----------------------------
 application/static/styles.css     | 201 +---------------------
 application/static/styles_raw.css | 204 ++++++++++++++++++++++
 package.json                      |  16 ++
 tailwind.config.js                |   9 +
 5 files changed, 235 insertions(+), 464 deletions(-)
 create mode 100644 application/static/styles_raw.css
 create mode 100644 package.json
 create mode 100644 tailwind.config.js

diff --git a/application/static/index.html b/application/static/index.html
index 579f418..70caa42 100644
--- a/application/static/index.html
+++ b/application/static/index.html
@@ -5,8 +5,8 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=0"/>
     <title>Test</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css" />
+    <!-- <script src="https://cdn.tailwindcss.com"></script> -->
+    <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css" /> -->
     <link rel="stylesheet" type="text/css" href="styles.css">
 </head>
 
@@ -263,38 +263,7 @@
 	        animation: 150
 	    });
     </script>
-    <!-- jsDelivr :: Swiper :: Latest (https://www.jsdelivr.com/package/npm/swiper) -->
-    <!-- 	<script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
-	<script type="text/javascript">
-		var defaults = {
-		  pagination: '.swiper-pagination',
-		  slidesPerView: 3,
-		  freeMode: true,
-		  freeModeSticky: false,
-		  freeModeMomentumRatio: 0.25,
-		  freeModeVelocityRatio: 0.25,
-		  freeModeMinimumVelocity: 0.1,
-		  mousewheelControl: true,
-		  mousewheelSensitivity: 0.5,
-		  loop: false,
-		  loopAdditionalSlides: 5,
-		  direction: 'vertical',
-		  slideToClickedSlide: true,
-		  centeredSlides: true
-		};
 
-		new Swiper(
-		  '.swiper-container.hours', 
-		  Object.assign({}, defaults, { initialSlide: 13})
-		);
-
-		new Swiper(
-		  '.swiper-container.minutes',
-		  Object.assign({}, defaults, { initialSlide: 37})
-		);
-
-		new Swiper('.swiper-container.seconds', defaults);
-	</script> -->
     <!-- jsDelivr :: Day.js :: Latest (https://www.jsdelivr.com/package/npm/dayjs) -->
     <script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/dayjs@1/plugin/customParseFormat.js"></script>
@@ -305,241 +274,13 @@
 	    document.getElementById("startTimeLabel").innerHTML = now.format("h:mm a")
 	    document.getElementById("endTimeLabel").innerHTML = now.add(1, 'h').format("h:mm a")
 	    document.getElementById("timeInput").value = dayjs().format("HH:mm")
-
-
-	    // console.log(dayjs().format("HH:mm"))
-	    // console.log(dayjs().add(1, 'h').format("HH:mm"))
     </script>
 
-
+    <!-- Auth0 for login prompt -->
     <script src="https://cdn.auth0.com/js/auth0-spa-js/2.0/auth0-spa-js.production.js"></script>
-    <script>
-        
-    // $('#getTokenPopup').click(async () => {
-    //   const token = await auth0.getTokenWithPopup({
-    //     authorizationParams: {
-    //       audience: 'https://mydomain/api/',
-    //       scope: 'read:rules'
-    //     }
-    //   });
-    // });
-        // import { createAuth0Client } from '@auth0/auth0-spa-js';
-        // let jToken = ""
-
-        // function loginAction(e) {
-        //     auth0.createAuth0Client({
-        //       domain: 'dev-kazsp1tz0e7t5d07.us.auth0.com',
-        //       clientId: 'Pw2MvNmIAJUA4THZzsZTEeqkXnCTHYr3'
-        //     }).then(a0 => {
-        //         const token = a0.getTokenWithPopup({
-        //             authorizationParams: {
-        //               audience: 'https://RecieptTodos.imsam.ca',
-        //               scope: 'todos:all'
-        //             }
-        //         });
-        //         token.then(t => {
-        //             // document.getElementById("loginPanel").classList.add("hidden")
-        //             // console.log(t)
-        //             jToken = t
-        //             getTodosFromAPI()
-
-        //             // document.getElementById("testToken").innerHTML = t
-
-        //             // fetch('/api/todos/get?' + new URLSearchParams({
-        //             //         date: dayjs().format("YYYY-MM-DD"),
-        //             // }), {
-        //             //     method: 'GET',
-        //             //     withCredentials: true,
-        //             //     credentials: 'include',
-        //             //     headers: {
-        //             //         'Authorization': "Bearer " + t,
-        //             //     }
-        //             // }).then(re => {
-        //             //     re.json().then(jso => {
-        //             //         console.log(jso)
-        //             //         for (let todo of jso.todos) {
-        //             //             console.log(todo)
-        //             //             // function addTask(defaultTimeRange="", defaultTaskText="New Task", editable=true) {
-        //             //             addTask(defaultTimeRange=todo.time, defaultTaskText=todo.text, editable=false)
-        //             //         }
-        //             //     })
-        //             //     // var items = JSON.parse(re.json())
-        //             //     // console.log(items.json)
-        //             // })
-
-        //             //TODO: Make call with token to backend to load all current todos
-        //         })
-        //     });
-
-            
-        // };
-
-
-        // function getTodosFromAPI() {
-        //     document.getElementById("loginPanel").classList.add("hidden")
-        //     console.log(jToken)
-        //     // console.log(t)
-        //     // jToken = t
-
-        //     // document.getElementById("testToken").innerHTML = t
-
-        //     fetch('/api/todos/get?' + new URLSearchParams({
-        //             date: dayjs().format("YYYY-MM-DD"),
-        //     }), {
-        //         method: 'GET',
-        //         withCredentials: true,
-        //         credentials: 'include',
-        //         headers: {
-        //             'Authorization': "Bearer " + jToken,
-        //         }
-        //     }).then(re => {
-        //         re.json().then(jso => {
-        //             console.log(jso)
-        //             for (let todo of jso.todos) {
-        //                 console.log(todo)
-        //                 // function addTask(defaultTimeRange="", defaultTaskText="New Task", editable=true) {
-        //                 addTask(defaultTimeRange=todo.time, defaultTaskText=todo.text, editable=false)
-        //             }
-        //         })
-        //         // var items = JSON.parse(re.json())
-        //         // console.log(items.json)
-        //     })
-
-        //             //TODO: Make call with token to backend to load all current todos
-        // }
-
-        // document.getElementById("loginButton").addEventListener('click', loginAction)
-        // document.getElementById("loginButton").addEventListener('click', (e) => {
-        //     auth0.createAuth0Client({
-        //       domain: 'dev-kazsp1tz0e7t5d07.us.auth0.com',
-        //       clientId: 'Pw2MvNmIAJUA4THZzsZTEeqkXnCTHYr3'
-        //     }).then(a0 => {
-        //         const token = a0.getTokenWithPopup({
-        //             authorizationParams: {
-        //               audience: 'https://RecieptTodos.imsam.ca',
-        //               scope: 'todos:all'
-        //             }
-        //         });
-        //         token.then(t => {
-        //             document.getElementById("loginPanel").classList.add("hidden")
-        //             console.log(t)
-        //             jToken = t
-
-        //             // document.getElementById("testToken").innerHTML = t
-
-        //             fetch('/api/todos/get?' + new URLSearchParams({
-        //                     date: dayjs().format("YYYY-MM-DD"),
-        //             }), {
-        //                 method: 'GET',
-        //                 withCredentials: true,
-        //                 credentials: 'include',
-        //                 headers: {
-        //                     'Authorization': "Bearer " + t,
-        //                 }
-        //             }).then(re => {
-        //                 re.json().then(jso => {
-        //                     console.log(jso)
-        //                     for (let todo of jso.todos) {
-        //                         console.log(todo)
-        //                         // function addTask(defaultTimeRange="", defaultTaskText="New Task", editable=true) {
-        //                         addTask(defaultTimeRange=todo.time, defaultTaskText=todo.text, editable=false)
-        //                     }
-        //                 })
-        //                 // var items = JSON.parse(re.json())
-        //                 // console.log(items.json)
-        //             })
-
-        //             //TODO: Make call with token to backend to load all current todos
-        //         })
-        //     });
 
-            
-        // });
-
-    </script>
-
-    <!-- Google auth for calendar access on first launch-->
-    <script src="https://accounts.google.com/gsi/client"></script>
-    <script type="text/javascript">
-
-        // let first_run = null
-        // let test = 
-        // console.log(test)
-
-        // let client = null
-
-        // async function mainAsync() {
-        //     console.log('huh')
-        //     async function check_first_run() {
-        //         let res = await fetch("/api/first_run")
-        //         let resJ = await res.json()
-        //         return resJ
-        //     // return fetch("/api/first_run").then(r => {
-        //     //     return r.json().then(j => {
-        //     //         first_run = j
-        //     //         console.log(j)
-        //     //         return j
-        //     //     })
-        //     // })
-        //     }
-
-        //     let first_run_status = await check_first_run()
-        //     if (first_run_status["status"] === "First Run") {
-        //         document.getElementById("googleAuthModel").classList.remove("hidden")
-        //         let code_receiver_uri = "/api/google/update"
-
-        //         client = google.accounts.oauth2.initCodeClient({
-        //           client_id: '186960779149-ejtu6hh3kdatlouau80h2pivt4tv3hd0.apps.googleusercontent.com',
-        //           scope: 'https://www.googleapis.com/auth/calendar.readonly',
-        //           ux_mode: 'popup',
-        //           callback: (response) => {
-        //             const xhr = new XMLHttpRequest();
-        //             xhr.open('POST', code_receiver_uri, true);
-        //             xhr.setRequestHeader('Content-Type', 'application/json');
-        //             xhr.setRequestHeader('Authorization', 'Bearer ' + jToken);
-        //             // Set custom header for CRSF
-        //             xhr.setRequestHeader('X-Requested-With', 'XmlHttpRequest');
-        //             xhr.onload = function() {
-        //               console.log('Auth code response: ' + xhr.responseText);
-        //               document.getElementById("googleAuthModel").classList.add("hidden")
-        //             };
-        //             xhr.send(JSON.stringify({"code": response.code}));
-        //             console.log(xhr)
-        //             console.log(response.code)
-        //           },
-        //         });
-
-
-
-        //     }
-
-        //     // console.log(test)
-
-        //     // console.log(first_run)
-
-
-        //     // function check_first_run() {
-        //     // let first_run = ""
-        //     // const req = new XMLHttpRequest();
-        //     // // req.addEventListener("load", reqListener);
-        //     // req.open("GET", "/api/first_run", false);
-        //     // req.onload = function() {
-        //     //     first_run = req.responseText
-        //     // //     console.log(first_run)
-        //     // }
-        //     // req.send();
-        //         // return first_run
-        //     // console.log(first_run)
-        //     // }
-
-        //     // console.log(check_first_run())
-            
-            
-            
-        // }
-
-        // mainAsync()
-    </script>
+    <!-- Google auth for calendar access on first launch -->
+    <script src="https://accounts.google.com/gsi/client" defer></script>
 
     <script src="scripts.js"></script>
 </body>
diff --git a/application/static/styles.css b/application/static/styles.css
index 03768ae..3f33269 100644
--- a/application/static/styles.css
+++ b/application/static/styles.css
@@ -1,200 +1 @@
-body {
-  touch-action: manipulation;
-}
-
-#radios {
-  position: relative;
-  background-color:rgba(239,239,240,1);
-  z-index:5;
-  width: 245.5px;
-  border-radius: 10px;
-  margin-top: 15px;
-}
-
-input[type="radio"] {
-  display: none;
-}
-
-#bckgrnd,
-.labels {
-  width: 120px;
-  height: 66px;
-  text-align: center;
-  display: inline-block;
-  margin-right: -3px;
-  z-index: 2;
-  cursor: pointer;
-}
-
-.labels {
-	padding-top: 7.5px;
-}
-
-#bckgrnd {
-  width: 115px;
-  height: 55px;
-  background-color: white;
-  border: .5px solid rgba(0,0,0,0.04);
-  box-shadow: 0 3px 8px 0 rgba(0,0,0,0.12), 0 3px 1px 0 rgba(0,0,0,0.04);
-
-  position: absolute;
-  left: 5px;
-  top: 5px;
-  border-radius: 7px;
-  z-index: -1;
-}
-
-#rad1:checked ~ #bckgrnd {
-  transform: translateX(0);
-  transition: transform 0.3s ease-in-out;
-}
-
-#rad2:checked ~ #bckgrnd {
-  transform: translateX(120px);
-  transition: transform 0.3s ease-in-out;
-}
-
-.picker {
-  position: relative;
-  width: 300px;
-  overflow: hidden;
-  margin: 1rem auto 0;
-  outline: 1px solid #ccc;
-  padding: 0 30px;
-}
-
-.swiper-container {
-  width: 80px;
-  height: 210px;
-  float: left;
-}
-
-.swiper-slide {
-  text-align: center;
-  font-size: 2rem;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  user-select: none;
-  opacity: 0.25;
-  transition: opacity 0.3s ease;
-  cursor: default;
-  font-weight: bold;
-  -webkit-tap-highlight-color: transparent;
-}
-
-.swiper-slide-prev,
-.swiper-slide-next {
-  cursor: pointer;
-}
-
-.swiper-slide-active {
-  opacity: 1;
-}
-
-.vizor {
-  border-top: 1px solid #ccc;
-  border-bottom: 1px solid #ccc;
-  height: 70px;
-  position: absolute;
-  top: 50%;
-  left: 1rem;
-  right: 1rem;
-  transform: translateY(-50%);
-  font-size: 2rem;
-  line-height: 62px;
-}
-
-.vizor:before,
-.vizor:after {
-  content: ':';
-  display: inline-block;
-  line-height: inherit;
-  height: 100%;
-  position:absolute;
-  top: 0;
-  transform: translateX(-50%);
-}
-
-.vizor:before {
-  left: 95px;
-}
-
-.vizor:after {
-  left: 175px;
-}
-
-.arrows .swiper-container:after,
-.arrows .swiper-container:before {
-  content: "";
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
-
-  width: 0;
-  height: 0;
-  border-style: solid;
-  border-width: 4px;
-  border-color: transparent;
-  opacity: 0.5;
-}
-
-.arrows .swiper-container:before {
-  top: 0.5rem;
-  border-top-width: 0;
-  border-bottom-color: currentColor;
-}
-
-.arrows .swiper-container:after {
-  bottom: 0.5rem;
-  border-bottom-width: 0;
-  border-top-color: currentColor;
-}
-
-
-
-
-
-/*.donate-now {*/
-/*  list-style-type: none;*/
-/*  margin: 25px 0 0 0;*/
-/*  padding: 0;*/
-/*}*/
-
-/*.donate-now li {
-  float: left;
-  margin: 0 5px 0 0;
-  width: 100px;
-  height: 40px;
-  position: relative;
-}*/
-
-/*.donate-now label,
-.donate-now input {
-  display: block;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}*/
-
-/*.donate-now input[type="radio"] {
-  opacity: 0.01;
-  z-index: 100;
-}*/
-
-.donate-now input[type="radio"]:checked+label { /*, .Checked+label  */
-  border-color: rgb(79 70 229);
-}
-
-/*.donate-now label {
-  padding: 5px;
-  border: 1px solid #CCC;
-  cursor: pointer;
-  z-index: 90;
-}
-
-.donate-now label:hover {
-  background: #DDD;
-}
\ No newline at end of file
+/*! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:initial;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:initial}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,::backdrop,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }body{touch-action:manipulation}#radios{position:relative;background-color:#efeff0;z-index:5;width:245.5px;border-radius:10px;margin-top:15px}input[type=radio]{display:none}#bckgrnd,.labels{width:120px;height:66px;text-align:center;display:inline-block;margin-right:-3px;z-index:2;cursor:pointer}.labels{padding-top:7.5px}#bckgrnd{width:115px;height:55px;background-color:#fff;border:.5px solid #0000000a;box-shadow:0 3px 8px 0 #0000001f,0 3px 1px 0 #0000000a;position:absolute;left:5px;top:5px;border-radius:7px;z-index:-1}#rad1:checked~#bckgrnd{transform:translateX(0);transition:transform .3s ease-in-out}#rad2:checked~#bckgrnd{transform:translateX(120px);transition:transform .3s ease-in-out}.picker{position:relative;width:300px;overflow:hidden;margin:1rem auto 0;outline:1px solid #ccc;padding:0 30px}.swiper-container{width:80px;height:210px;float:left}.swiper-slide{text-align:center;font-size:2rem;display:flex;justify-content:center;align-items:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:.25;transition:opacity .3s ease;cursor:default;font-weight:700;-webkit-tap-highlight-color:transparent}.swiper-slide-next,.swiper-slide-prev{cursor:pointer}.swiper-slide-active{opacity:1}.vizor{border-top:1px solid #ccc;border-bottom:1px solid #ccc;height:70px;position:absolute;top:50%;left:1rem;right:1rem;transform:translateY(-50%);font-size:2rem;line-height:62px}.vizor:after,.vizor:before{content:":";display:inline-block;line-height:inherit;height:100%;position:absolute;top:0;transform:translateX(-50%)}.vizor:before{left:95px}.vizor:after{left:175px}.arrows .swiper-container:after,.arrows .swiper-container:before{content:"";position:absolute;left:50%;transform:translateX(-50%);width:0;height:0;border:4px solid #0000;opacity:.5}.arrows .swiper-container:before{top:.5rem;border-top-width:0;border-bottom-color:initial}.arrows .swiper-container:after{bottom:.5rem;border-bottom-width:0;border-top-color:initial}.donate-now input[type=radio]:checked+label{border-color:#4f46e5}
\ No newline at end of file
diff --git a/application/static/styles_raw.css b/application/static/styles_raw.css
new file mode 100644
index 0000000..8107e95
--- /dev/null
+++ b/application/static/styles_raw.css
@@ -0,0 +1,204 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+  touch-action: manipulation;
+}
+
+#radios {
+  position: relative;
+  background-color:rgba(239,239,240,1);
+  z-index:5;
+  width: 245.5px;
+  border-radius: 10px;
+  margin-top: 15px;
+}
+
+input[type="radio"] {
+  display: none;
+}
+
+#bckgrnd,
+.labels {
+  width: 120px;
+  height: 66px;
+  text-align: center;
+  display: inline-block;
+  margin-right: -3px;
+  z-index: 2;
+  cursor: pointer;
+}
+
+.labels {
+	padding-top: 7.5px;
+}
+
+#bckgrnd {
+  width: 115px;
+  height: 55px;
+  background-color: white;
+  border: .5px solid rgba(0,0,0,0.04);
+  box-shadow: 0 3px 8px 0 rgba(0,0,0,0.12), 0 3px 1px 0 rgba(0,0,0,0.04);
+
+  position: absolute;
+  left: 5px;
+  top: 5px;
+  border-radius: 7px;
+  z-index: -1;
+}
+
+#rad1:checked ~ #bckgrnd {
+  transform: translateX(0);
+  transition: transform 0.3s ease-in-out;
+}
+
+#rad2:checked ~ #bckgrnd {
+  transform: translateX(120px);
+  transition: transform 0.3s ease-in-out;
+}
+
+.picker {
+  position: relative;
+  width: 300px;
+  overflow: hidden;
+  margin: 1rem auto 0;
+  outline: 1px solid #ccc;
+  padding: 0 30px;
+}
+
+.swiper-container {
+  width: 80px;
+  height: 210px;
+  float: left;
+}
+
+.swiper-slide {
+  text-align: center;
+  font-size: 2rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  user-select: none;
+  opacity: 0.25;
+  transition: opacity 0.3s ease;
+  cursor: default;
+  font-weight: bold;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.swiper-slide-prev,
+.swiper-slide-next {
+  cursor: pointer;
+}
+
+.swiper-slide-active {
+  opacity: 1;
+}
+
+.vizor {
+  border-top: 1px solid #ccc;
+  border-bottom: 1px solid #ccc;
+  height: 70px;
+  position: absolute;
+  top: 50%;
+  left: 1rem;
+  right: 1rem;
+  transform: translateY(-50%);
+  font-size: 2rem;
+  line-height: 62px;
+}
+
+.vizor:before,
+.vizor:after {
+  content: ':';
+  display: inline-block;
+  line-height: inherit;
+  height: 100%;
+  position:absolute;
+  top: 0;
+  transform: translateX(-50%);
+}
+
+.vizor:before {
+  left: 95px;
+}
+
+.vizor:after {
+  left: 175px;
+}
+
+.arrows .swiper-container:after,
+.arrows .swiper-container:before {
+  content: "";
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 4px;
+  border-color: transparent;
+  opacity: 0.5;
+}
+
+.arrows .swiper-container:before {
+  top: 0.5rem;
+  border-top-width: 0;
+  border-bottom-color: currentColor;
+}
+
+.arrows .swiper-container:after {
+  bottom: 0.5rem;
+  border-bottom-width: 0;
+  border-top-color: currentColor;
+}
+
+
+
+
+
+/*.donate-now {*/
+/*  list-style-type: none;*/
+/*  margin: 25px 0 0 0;*/
+/*  padding: 0;*/
+/*}*/
+
+/*.donate-now li {
+  float: left;
+  margin: 0 5px 0 0;
+  width: 100px;
+  height: 40px;
+  position: relative;
+}*/
+
+/*.donate-now label,
+.donate-now input {
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}*/
+
+/*.donate-now input[type="radio"] {
+  opacity: 0.01;
+  z-index: 100;
+}*/
+
+.donate-now input[type="radio"]:checked+label { /*, .Checked+label  */
+  border-color: rgb(79 70 229);
+}
+
+/*.donate-now label {
+  padding: 5px;
+  border: 1px solid #CCC;
+  cursor: pointer;
+  z-index: 90;
+}
+
+.donate-now label:hover {
+  background: #DDD;
+} */
\ No newline at end of file
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..d9915f5
--- /dev/null
+++ b/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "thermaltodos",
+  "version": "1.0.0",
+  "description": "Prints out your daily google calander events using a thermal printer.",
+  "scripts": {
+    "build": "npx tailwindcss -i ./application/static/styles_raw.css -o ./application/static/styles.css --minify",
+    "auto_build": "npx tailwindcss -i ./application/static/styles_raw.css -o ./application/static/styles.css --watch",
+    "test": "uvicorn application.main:app --host 127.0.0.1 --port 8000 --reload"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://git.imsam.ca/sam/ThermalTodos.git"
+  },
+  "author": "Sam",
+  "license": ""
+}
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..4ad504b
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,9 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['/application/static/*.{html,js}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+