wip

kasperlegarth · Mar 30, 2023 · bd0c130 · bd0c130
1 parent 94da811
commit bd0c130
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 4 deletions.
diff --git a/public/index.html b/public/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 
 
     <meta name="full-screen" content="yes">
     <meta name="apple-mobile-web-app-capable" content="yes">

diff --git a/src/App.vue b/src/App.vue
@@ -222,6 +222,8 @@ export default {
     margin: 0;
     height: 100%;
     font-size: 16px;
+    background-color: $color--chalky;
+    overflow: hidden;
   }
 
   h1 {

diff --git a/src/router/index.js b/src/router/index.js
@@ -5,7 +5,14 @@ const routes = [
   {
     path: '/',
     name: 'guide',
-    component: WelcomeView
+    component: WelcomeView,
+    meta: { transition: 'fade'}
+  },
+  {
+    path: '/ice',
+    name: 'ice',
+    component: () => import('../views/Step1.vue'),
+    meta: { transition: 'fade'}
   },
   {
     path: '/dashboard',

diff --git a/src/views/Guide.vue b/src/views/Guide.vue
@@ -37,7 +37,7 @@
     </transition>
   </div>
   <div class="controls">
-    <button class="main">🌿 Let the good times begin 🍸</button>
+    <button @click="$router.push('/ice')" class="main">🌿 Let the good times begin 🍸</button>
     <button class="speed">🏎️</button>
   </div>
 </template>
@@ -96,9 +96,10 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
   body {
     background-color: $color--chalky;
+    overflow: hidden;
   }
   
   .figure {

diff --git a/src/views/Step1.vue b/src/views/Step1.vue
@@ -0,0 +1,27 @@
+<template>
+    <div class="ice"></div>
+    <div class="text">
+        <h2>Step1</h2>
+        <h1>ICE, ICE and more ICE</h1>
+    </div>
+    <div class="hugger">
+    <svg viewBox="0 0 437 336" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M147.25 319.574C39.7771 260.44 38.7299 177.906 63.6984 120.223C90.9719 57.216 149.778 1.90817 218.283 2.27673C344.225 2.95536 410.028 129.185 381.631 231.119C365.655 288.474 228.966 364.527 147.25 319.568V319.574Z" fill="#4CA886" stroke="black" stroke-width="4" stroke-miterlimit="10"/>
+        <path d="M236.506 169.382C226.777 179.479 210.707 179.784 200.609 170.061" stroke="black" stroke-width="4" stroke-miterlimit="10" stroke-linecap="round"/>
+        <path d="M385.587 154.681L355.369 166.127L345.249 147.612L379.874 128.877L385.587 154.681Z" fill="#4CA886"/>
+        <path d="M380.53 117.54C380.53 117.54 407.095 102.335 408.533 101.51C409.971 100.685 414.314 100.101 415.873 103.503C417.771 107.656 413.468 110.123 413.468 110.123L395.516 120.4C395.516 120.4 414.901 109.305 417.058 108.068C419.215 106.831 423.576 105.294 425.831 109.242C428.092 113.189 424.401 116.733 424.401 116.733L401.462 129.796L424.401 116.733C424.401 116.733 429.597 114.509 431.74 118.725C433.884 122.947 430.206 125.326 430.206 125.326L406.924 138.653C406.924 138.653 420.566 130.844 422.004 130.019C423.442 129.194 426.322 128.978 428.11 132.096C429.897 135.213 425.964 137.762 425.964 137.762L406.657 148.817C401.051 152.026 394.832 154.006 388.403 154.608C382.877 155.122 375.636 156.285 369.301 158.87L355.741 166.633" fill="#4CA886"/>
+        <path d="M380.53 117.54C380.53 117.54 407.095 102.335 408.533 101.51C409.971 100.685 414.314 100.101 415.873 103.503C417.771 107.656 413.468 110.123 413.468 110.123L395.516 120.4C395.516 120.4 414.901 109.305 417.058 108.068C419.215 106.831 423.576 105.294 425.831 109.242C428.092 113.189 424.401 116.733 424.401 116.733L401.462 129.796L424.401 116.733C424.401 116.733 429.597 114.509 431.74 118.725C433.884 122.947 430.206 125.326 430.206 125.326L406.924 138.653C406.924 138.653 420.566 130.844 422.004 130.019C423.442 129.194 426.322 128.978 428.11 132.096C429.897 135.213 425.964 137.762 425.964 137.762L406.657 148.817C401.051 152.026 394.832 154.006 388.403 154.608C382.877 155.122 375.636 156.285 369.301 158.87L355.741 166.633" stroke="black" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+        <path d="M380.083 132.572C385.157 127.285 380.535 117.54 380.535 117.54C380.535 117.54 386.326 105.168 378.161 101.737C369.997 98.3064 364.69 128.993 364.69 128.993C364.69 128.993 363.98 136.077 359.206 140.233L344.845 148.455" fill="#4CA886"/>
+        <path d="M380.083 132.572C385.157 127.285 380.535 117.54 380.535 117.54C380.535 117.54 386.326 105.168 378.161 101.737C369.997 98.3064 364.69 128.993 364.69 128.993C364.69 128.993 363.98 136.077 359.206 140.233L344.845 148.455" stroke="black" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+        <path d="M51.8249 154.559L81.4735 167.408L92.4499 149.387L58.7414 129.051L51.8249 154.559Z" fill="#4CA886"/>
+        <path d="M58.6154 117.696C58.6154 117.696 32.7916 101.263 31.3936 100.372C29.9957 99.4805 25.6851 98.6935 23.9688 102.018C21.8776 106.078 26.0609 108.744 26.0609 108.744L43.5113 119.851C43.5113 119.851 24.6677 107.86 22.5708 106.523C20.4739 105.186 16.1905 103.447 13.7527 107.285C11.3091 111.122 14.8303 114.834 14.8303 114.834L37.1323 128.957L14.8303 114.834C14.8303 114.834 9.74346 112.369 7.40543 116.481C5.06638 120.597 8.6287 123.147 8.6287 123.147L31.2613 137.549C31.2613 137.549 17.9999 129.109 16.602 128.218C15.2041 127.327 12.337 126.976 10.4057 130.006C8.47435 133.037 12.2837 135.767 12.2837 135.767L31.0519 147.715C36.5004 151.183 42.6206 153.452 49.0141 154.355C54.5098 155.127 61.688 156.628 67.8955 159.506L81.0766 167.896" fill="#4CA886"/>
+        <path d="M58.6154 117.696C58.6154 117.696 32.7916 101.263 31.3936 100.372C29.9957 99.4805 25.6851 98.6935 23.9688 102.018C21.8776 106.078 26.0609 108.744 26.0609 108.744L43.5113 119.851C43.5113 119.851 24.6677 107.86 22.5708 106.523C20.4739 105.186 16.1905 103.447 13.7527 107.285C11.3091 111.122 14.8303 114.834 14.8303 114.834L37.1323 128.957L14.8303 114.834C14.8303 114.834 9.74346 112.369 7.40543 116.481C5.06638 120.597 8.6287 123.147 8.6287 123.147L31.2613 137.549C31.2613 137.549 17.9999 129.109 16.602 128.218C15.2041 127.327 12.337 126.976 10.4057 130.006C8.47435 133.037 12.2837 135.767 12.2837 135.767L31.0519 147.715C36.5004 151.183 42.6206 153.452 49.0141 154.355C54.5098 155.127 61.688 156.628 67.8955 159.506L81.0766 167.896" stroke="black" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+        <path d="M58.3637 132.734C53.5426 127.214 58.6163 117.696 58.6163 117.696C58.6163 117.696 53.4119 105.067 61.7279 102.022C70.0383 98.9769 73.9076 129.879 73.9076 129.879C73.9076 129.879 74.2852 136.989 78.8587 141.365L92.8191 150.25" fill="#4CA886"/>
+        <path d="M58.3637 132.734C53.5426 127.214 58.6163 117.696 58.6163 117.696C58.6163 117.696 53.4119 105.067 61.7279 102.022C70.0383 98.9769 73.9076 129.879 73.9076 129.879C73.9076 129.879 74.2852 136.989 78.8587 141.365L92.8191 150.25" stroke="black" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+        <path d="M230.387 116.49C239.536 123.271 252.454 121.352 259.234 112.202" stroke="black" stroke-width="4" stroke-miterlimit="10" stroke-linecap="round"/>
+        <path d="M169.224 116.479C176.41 125.313 189.4 126.652 198.235 119.465" stroke="black" stroke-width="4" stroke-miterlimit="10" stroke-linecap="round"/>
+    </svg>
+    <div class="shadow"></div>
+    </div>
+    <div class="next-step-button">Next Step</div>
+</template>