update home page

korilium · May 9, 2024 · ce9ad65 · ce9ad65
1 parent 647e35e
commit ce9ad65
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 39 deletions.
diff --git a/website/public/css/styles_home.css b/website/public/css/styles_home.css
@@ -70,39 +70,73 @@ body{
 }
 
 .step {
-    background-color: #02271f;
-    border: 2px solid;
-    margin-left: 100px;
-    height: 140px;
-    float: left;
-    width: 140px; /* Equal width and height for a perfect circle */
-    border-radius: 50%; /* Sets border radius to 50% of the width, making it a circle */
-    z-index: 1;
-    position: relative;
+    --b: 3px;   /* border thickness */
+    --s: .45em; /* size of the corner */
+    --color: #9abbb3; /* color of the button */
+
+    /* Padding for the button */
+    padding: calc(.5em + var(--s)) calc(.9em + var(--s));
+    width: 130px;
+    /* Color of the text within the button */
+    color: var(--color);
+
+    /* Set the corner size */
+    --_p: var(--s);
+
+    /* Background style using a conic gradient */
+    background:
+        conic-gradient(from 90deg at var(--b) var(--b), #0000 90deg, var(--color) 0)
+        var(--_p) var(--_p)/calc(100% - var(--b) - 2 * var(--_p)) calc(100% - var(--b) - 2 * var(--_p));
+
+    /* Define transition effects */
+    transition: .3s linear, color 0s, background-color 0s;
+
+    /* Define an outline around the button */
+    outline: var(--b) solid #0000;
+
+    /* Set font size and text alignment */
+    font-size: 16px;
     text-align: center;
-    font-size: 24px; 
     font-weight: bold;
-    font-family: 'Roboto', sans-serif;
-    padding: 57px;
-    margin-top: 50px; 
-    cursor: pointer; /* Change cursor to pointer to indicate clickable element */
+
+    /* Remove border */
+    border: 0;
+
+
+    /* Disable text selection and specify touch behavior */
+    -webkit-user-select: none;
+    touch-action: manipulation;
+}
+
+/* Styles for hover and focus-visible states */
+.step:hover,
+.step:focus-visible {
+    /* Reduce corner size and change outline color */
+    --_p: 0px;
+    outline-color: var(--color);
+    outline-offset: .05em;
 }
 
+/* Styles for active state (when clicked) */
+.step:active {
+    background: #02271f; /* Change background color */
+    color: #fff; /* Change text color */
+}
+
+
 
 
 
 .corners {
     background-color: #02271f;
-    border: 2px solid ;
+    border: 3px solid ;
     margin-left: 0px;
     text-align: center;
     height: 140px;
     float: left;
     width: 450px;
-    border-radius: 20px;
     z-index: 3;
     padding: 60px 0;
-    margin-top: 50px;
 }
 
 
@@ -114,7 +148,6 @@ body{
     flex: 0 0 32%;
     display: flex;
     align-items: center;
-    margin-top: 50px;
     width: 200px;
 }
 
@@ -172,17 +205,17 @@ body{
 
 .description {
     background-color: #02271f;
-    border-radius: 20px;
-    border: 2px solid ;
+    border: 3px solid ;
     margin-left: 0px;
     text-align: center;
     height: 140px;
     width: 1200px;
-    border-top: 2px solid #9abbb3;
     z-index: 2;
     margin-bottom: 10px;
     padding: 55px 0;
     text-align: center;
+    font-size: 16px;
+    font-weight: bold;
 }
 
 

diff --git a/website/public/journey.html b/website/public/journey.html
@@ -18,7 +18,7 @@
             <li> <a href="welcome.html"> Home</a></li>
             <li><a href="profile.html">Profile </a></li>
             <li><a href="journey.html">Journey</a></li>
-            <li><a href="community.html"> Community </a></li>
+            <li><a href="models.html"> Models </a></li>
             <li><a href="products.html">Products</a></li>
             <li> <a href="about.html"> About</a></li>
         </ul>

diff --git a/website/public/js/background.js b/website/public/js/background.js
@@ -13,7 +13,7 @@ function createRandomDots() {
 }
 
 function fadeInOut(dot) {
-    const duration = Math.random() * 20000 + 15000; // Random duration between 5 and 13 seconds
+    const duration = Math.random() * 20000 +15000; // Random duration between 5 and 13 seconds
     const delay = Math.random() * 10000; // Random delay up to 10 seconds
     const fadeOutStart = duration - 1000; // Start fading out 1 second before the end
 

diff --git a/website/public/community.html → website/public/models.html b/website/public/community.html → website/public/models.html
diff --git a/website/public/welcome.html b/website/public/welcome.html
@@ -18,7 +18,7 @@
             <li> <a href="welcome.html"> Home</a></li>
             <li><a href="profile.html">Profile </a></li>
             <li><a href="journey.html">Journey</a></li>
-            <li><a href="community.html"> Community </a></li>
+            <li><a href="models.html"> Models </a></li>
             <li><a href="products.html">Products</a></li>
             <li> <a href="about.html"> About</a></li>
         </ul>
@@ -31,7 +31,7 @@
                 <div class="connector">
                 </div>
 
-                <button class ="step" onclick="toggleElements('elements1')"> 1
+                <button class ="step" onclick="toggleElements('elements1')"> Understand
                 </button>
 
                     <div class="connector1">
@@ -51,25 +51,23 @@
                 <div class="connector"></div>
 
 
-                <button class="step" onclick="toggleElements('group2')"> 2
+                <button class="step" onclick="toggleElements('group2')"> Plan
                 </button>
-                <div id="group2" class="hidden-group">
-                    <div class="connector1">
-                    </div>
-                    <div class="corners"> <b>model investment decisions</b>
-                    </div>
-                    <div class="connector2">
-                    </div>
-                    <div class="connector3">
-                        <hr class="Vline">
-                    </div>
-                    <div class="description"> Get access to financial planning tools through tokens </div>
+                <div class="connector1">
+                </div>
+                <div class="corners"> <b>model investment decisions</b>
                 </div>
+                <div class="connector2">
+                </div>
+                <div class="connector3">
+                    <hr class="Vline">
+                </div>
+                <div class="description"> Get access to financial planning tools through tokens </div>
                 <div class="connector"></div>
 
 
-                <div class="step"> 3
-                </div>
+                <button class="step" onclick="toggleElements('group2')"> Decide
+                </button>
                 <div class="connector1">
                 </div>
                 <div class="corners"> <b>use community driven investment products</b>