New styling

crypto-tools-inc · Dec 1, 2024 · 40d3b22 · 40d3b22
1 parent 8f052cd
commit 40d3b22
Show file tree

Hide file tree

Showing 9 changed files with 87 additions and 45 deletions.
diff --git a/css/style.css b/css/style.css
@@ -1,17 +1,24 @@
 :root {
-  --primary-font: "Chakra Petch", sans-serif;
+  --primary-font: "Inter", sans-serif;
   --secondary-font: "JetBrains Mono", monospace;
 
-  --primary-bg: #f2f2f2;
+  --primary-bg: #151722;
   --primary-color: #ff5a00;
-  --text-primary-color: #000000;
+  --text-primary-color: #fff;
+  --text-secondary-color: #d0d0dc;
+
+  --accent-purple: #9a45ff;
+  --accent-pink: #f087fe;
 }
 
 body {
   height: 100vh;
   font-family: var(--primary-font);
-  background-image: url("../img/bg-pattern.png");
-  background-color: var(--primary-bg);
+  /* background-color: var(--primary-bg); */
+  background: rgb(65, 36, 99);
+  background-image: url("../img/bg-pattern.png"), radial-gradient(at top right, rgba(65, 36, 99, 1) 0%, rgba(21, 23, 34, 1) 40%);
+  background-size: 100px, auto;
+  color: var(--text-primary-color);
 }
 
 .font-primary {
@@ -20,37 +27,48 @@ body {
 .font-secondary {
   font-family: var(--secondary-font);
 }
+.text-secondary-color {
+  color: var(--text-secondary-color);
+}
+.text-gradient-purple {
+  background: -webkit-linear-gradient(0deg, rgba(240, 135, 254, 1), rgba(136, 52, 216, 1), rgba(240, 135, 254, 1));
+  background-size: 200% auto;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  animation: move-bg 1s infinite linear;
+}
+@keyframes move-bg {
+  to {
+    background-position: 200% center;
+  }
+}
+.small {
+  font-size: 0.75rem;
+}
 .bg-accent {
-  background-color: var(--primary-color);
+  background-color: var(--accent-purple);
+}
+
+.navbar {
+  backdrop-filter: blur(12px);
+}
+.nav-link {
+  color: var(--text-primary-color);
+}
+.nav-link:hover {
+  color: var(--accent-pink);
 }
 
 .btn-primary {
-  background-color: var(--primary-color);
+  background: rgb(240, 135, 254);
+  background: linear-gradient(90deg, rgba(240, 135, 254, 1) 0%, rgba(136, 52, 216, 1) 100%);
   color: #fff;
   border: none;
   border-radius: 0px;
 }
 
-.progress {
-  height: 8px;
-}
-.progress-bar {
-  background: -webkit-linear-gradient(left, #ff5a00 30%, #ff9f6b 50%, #ff5a00 100%) repeat;
-  -webkit-background-size: 50% 100%;
-  -webkit-animation-name: moving-gradient;
-  -webkit-animation-duration: 1s;
-  -webkit-animation-iteration-count: infinite;
-  -webkit-animation-timing-function: linear;
-  border-radius: 50px;
-}
-@-webkit-keyframes moving-gradient {
-  0% {
-    background-position: right bottom;
-  }
-
-  100% {
-    background-position: left bottom;
-  }
+.btn-link {
+  color: var(--accent-pink);
 }
 
 #messagesContainer {

diff --git a/img/bg-pattern.png b/img/bg-pattern.png
diff --git a/img/logo.svg b/img/logo.svg
diff --git a/img/slide-1-dark.png b/img/slide-1-dark.png
diff --git a/img/slide-2-dark.png b/img/slide-2-dark.png
diff --git a/img/slide-3-dark.png b/img/slide-3-dark.png
diff --git a/img/solana-logo.svg b/img/solana-logo.svg
diff --git a/index.html b/index.html
@@ -7,7 +7,7 @@
 
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link href="https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@700&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,700;1,14..32,700&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap" rel="stylesheet" />
 
     <link rel="stylesheet" href="vendors/bootstrap-5.3.2/css/bootstrap.min.css" />
     <link rel="stylesheet" href="css/style.css" />
@@ -18,27 +18,35 @@
         <a class="navbar-brand" href="#">
           <img src="img/logo.svg" alt="" height="40" />
         </a>
+        <ul class="navbar-nav">
+          <li class="nav-item">
+            <a class="nav-link" href="#">Docs</a>
+          </li>
+        </ul>
       </div>
     </nav>
     <div class="container h-100 d-flex align-items-center">
       <div class="row">
         <div class="col-md-7 d-flex align-items-center">
           <div>
             <h1 class="font-primary">Master the game of Chicken</h1>
-            <p class="font-secondary mb-5">
+            <p class="font-secondary text-secondary-color mb-3">
               Track flows of token liquidity on Solana using CHKN spidermaps.<br />
               Chase down bundlers, ruggers, and cabals who outrun ordinary bundle bots and holder-based bubblemaps.
             </p>
-            <div class="mb-3">
-              <div class="d-flex justify-content-between align-items-center mb-2">
-                <p class="font-secondary mb-0 text-muted">Limited spots available</p>
-                <span class="font-secondary mb-0 badge bg-accent">90/100</span>
-              </div>
-              <div class="progress bg-dark-subtle" role="progressbar" aria-label="Basic example" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">
-                <div class="progress-bar" style="width: 90%"></div>
-              </div>
+            <div class="d-flex align-items-center mb-4">
+              <p class="font-secondary text-gradient-purple mb-0 text-uppercase me-3">Limited spots available</p>
+              <span class="font-secondary mb-0 badge bg-accent">90/100</span>
             </div>
-            <a href="" class="btn btn-primary btn-lg text-uppercase font-secondary">subscribe</a>
+            <a href="" class="btn btn-primary btn-lg text-uppercase font-secondary" data-text="heloo">
+              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M22.4393 4.62171L19.2705 19.5655C19.0315 20.6201 18.408 20.8826 17.5221 20.3858L12.694 16.828L10.3643 19.0686C10.1065 19.3264 9.89084 19.542 9.39396 19.542L9.74084 14.6248L18.6893 6.5389C19.0783 6.19202 18.6049 5.99983 18.0846 6.34671L7.02209 13.3123L2.25959 11.8217C1.22365 11.4983 1.2049 10.7858 2.47521 10.2889L21.1033 3.11233C21.9658 2.7889 22.7205 3.30452 22.4393 4.62171Z" fill="#FFE2D2" />
+              </svg>
+              Launch on telegram
+            </a>
+            <a href="" class="btn btn-link btn-lg text-uppercase font-secondary">read the docs</a>
+            <p class="font-secondary small text-secondary-color text-uppercase mb-0 mt-2">available on</p>
+            <img src="img/solana-logo.svg" alt="" height="20" />
           </div>
         </div>
         <div class="col-md-5">

diff --git a/js/index.js b/js/index.js
@@ -1,5 +1,5 @@
 // Array of image URLs (replace with your actual image paths)
-const messageImages = ["img/slide-1.png", "img/slide-2.png", "img/slide-3.png"];
+const messageImages = ["img/slide-1-dark.png", "img/slide-2-dark.png", "img/slide-3-dark.png"];
 
 const messagesContainer = document.getElementById("messagesContainer");
 let currentImageIndex = 0;