Design-updates

server.js

@@ -48,7 +48,7 @@ passport.use(new LocalStrategy(User.authenticate()));
 // use static serialize and deserialize of model for passport session support
 passport.serializeUser(User.serializeUser());
 passport.deserializeUser(User.deserializeUser());
-
+app.use("/images", express.static(path.join(__dirname, "public/images")));
 app.use("/dist", express.static(path.join(__dirname, "public/dist")));
 app.use("/", loginApi);
 app.use("/api/", updateApi);

src/components/GeneratePage.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="container">
-    <h2>What to buy?</h2>
+    <router-link to="/" class="header-link">
+      <h1 class="top-banner">knowit</h1>
+    </router-link>
+    <h1>Loddgenerator</h1>
+    <p>Velg hvilke farger du vil ha, fyll inn antall lodd og klikk 'generer'</p>
+    <div class="input-line">
       <input
         type="number"
         placeholder="Antall lodd"
@@ -8,19 +13,18 @@
         v-model="numberOfBallots"
       />
       <button @click="generateColors">Generer</button>
-    <div class="colors-text">
+    </div>
+    <!--<div class="colors-text">
       <p>Blå: {{ blue }}</p>
       <p>Rød: {{ red }}</p>
       <p>Grønn: {{ green }}</p>
       <p>Gul: {{ yellow }}</p>
-    </div>
+    </div>-->
     <div class="colors">
-      <div
+      <div v-for="color in colors" :class="getColorClass(color)" class="color-box"></div>
-        v-for="color in colors"
-        :class="getColorClass(color)"
-        class="color-box"
-      ></div>
     </div>
+
+    <img src="/images/vipps.png" class="vipps-image" />
   </div>
 </template>
 
@@ -92,17 +96,57 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-h2 {
+.header-link {
+  color: #333333;
+  text-decoration: none;
+}
+h1 {
   text-align: center;
 }
+h1 {
+  width: 100vw;
+  text-align: center;
+  font-family: sans-serif;
+}
+
+p {
+  text-align: center;
+  margin-bottom: 35px;
+  margin-top: 0px;
+}
+
+.input-line {
+  margin: auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 15px;
+}
+
+.top-banner {
+  margin-top: 0px;
+  padding: 20px 0;
+  background-color: #dbeede;
+  box-shadow: 0 0 10px 0px #0000003a;
+}
+
+.vipps-image {
+  width: 250px;
+  margin: auto;
+  display: block;
+  margin-top: 30px;
+}
 input,
 button {
-  margin: 10px;
   font-size: 1.5rem;
 }
+
+input {
+  font-size: 1.5rem;
+  padding: 8px;
+}
 .container {
   font-family: sans-serif;
-  width: 80vw;
   margin: auto;
   display: flex;
   flex-direction: column;
@@ -121,11 +165,13 @@ button {
 
 button {
   border: none;
-  background: orange;
+  background: #b7debd;
-  color: white;
+  color: #333333;
-  padding: 10px;
+  padding: 10px 30px;
   width: fit-content;
   margin: auto;
+  font-size: 1.3rem;
+  height: 48px;
 }
 
 .colors-text {
@@ -148,4 +194,10 @@ button {
 .blue {
   background-color: #4bcffa;
 }
+
+@media only screen and (max-width: 768px) {
+  input {
+    border: 1px solid #333333;
+  }
+}
 </style>

src/components/VinlottisPage.vue

@@ -1,17 +1,22 @@
 <template>
   <div class="outer">
+    <h1 class="top-banner">knowit</h1>
     <div class="container">
-      <h1>Knowit Vinlottis</h1>
+      <h1>Vinlotteri</h1>
-      <router-link to="generate" class="generate-link">Klarer du ikke velge lodd-farger?</router-link>
+      <router-link to="generate" class="generate-link">
+        Klarer du ikke velge lodd-farger?
+        <span class="generator-link">Prøv loddgeneratoren</span>
+      </router-link>
       <div class="chart-container">
         <PurchaseGraph class="purchase" />
         <WinGraph class="win" />
       </div>
       <TotalBought />
-      <div class="wine-and-highscore-container">
+      <img src="/images/vipps.png" class="vipps-image" />
+      <!--<div class="wine-and-highscore-container">
         <Highscore />
         <Wines />
-      </div>
+      </div>-->
     </div>
   </div>
 </template>
@@ -33,13 +38,18 @@ export default {
   }
 };
 </script>
-
+<style lang="scss">
+body {
+  margin: 0;
+  color: #333333;
+  font-family: sans-serif;
+}
+</style>
 <style lang="scss" scoped>
 .outer {
   height: 100vh;
   width: 100vw;
   display: flex;
-  justify-content: center;
   align-items: center;
   flex-direction: column;
 }
@@ -49,16 +59,32 @@ h1 {
   font-family: sans-serif;
 }
 
+.top-banner {
+  margin-top: 0px;
+  padding: 20px 0;
+  background-color: #dbeede;
+  box-shadow: 0 0 10px 0px #0000003a;
+}
+
 .generate-link {
-  color: white;
+  color: #333333;
-  text-align: center;
-  font-size: 1.2rem;
-  padding: 5px;
-  margin: auto;
-  width: fit-content;
-  display: block;
   text-decoration: none;
-  background: orange;
+  display: block;
+  width: 100vw;
+  text-align: center;
+  margin-bottom: 0px;
+}
+
+.vipps-image {
+  width: 250px;
+  margin: auto;
+  display: block;
+  margin-top: 30px;
+}
+
+.generator-link {
+  font-weight: bold;
+  border-bottom: 1px solid #ff5fff;
 }
 
 .win,
@@ -89,6 +115,10 @@ h1 {
     width: 100vw;
   }
 
+  .generate-link {
+    margin-bottom: 30px;
+  }
+
   .chart-container {
     display: flex;
     flex-direction: column;