Finish home page revamps

shiloholotu · Jun 25, 2024 · 782f68d · 782f68d
1 parent 2378b41
commit 782f68d
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 10 deletions.
diff --git a/static/assets/svg/star.png b/static/assets/svg/star.png
diff --git a/static/assets/svg/up.png b/static/assets/svg/up.png
diff --git a/static/scripts/scroll.js b/static/scripts/scroll.js
@@ -21,8 +21,8 @@ window.addEventListener('scroll', function() {
     var scrollPosition = window.scrollY;
 
     if(scrollPosition >= 2651){
-        scrollButton.innerHTML = "<img src='static/assets/svg/down.png' style='width:17px;opacity:.6;transform:translate(0,2px)'>";
+        scrollButton.innerHTML = "<img src='static/assets/svg/up.png' style='transform:translate(0,0)'>";
     } else {
-        scrollButton.innerHTML = "<img src='static/assets/svg/down.png' style='width:17px;opacity:.6;transform:translate(0,2px)'>";
+        scrollButton.innerHTML = "<img src='static/assets/svg/down.png'>";
     }
 })
diff --git a/static/styles/main.css b/static/styles/main.css
@@ -76,12 +76,18 @@ p .purpText{
     height: 50px;
     background-color: var(--background-color);
     color: var(--font-color);
-    border: 3px solid var(--transparent-border-color);
+    border: 3px solid black;
     border-radius: 50%;
     font-size: 24px;
     cursor: pointer;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-    transition: background-color 0.3s;
+    opacity: .5;
+    transition: .3s;
+}
+
+.scroll-button img{
+    width:17px;
+    opacity:.6;
+    transform:translate(0,2px);
 }
 
 .scroll-button:hover {
@@ -431,8 +437,20 @@ p .purpText{
     margin-right: 10px;
     background:var(--font-color);
     color:white;
+    border: 2px solid transparent;
+    transition: .5s;
+    cursor: pointer;
 }
 
+
+
+#pricingOptions div:hover{
+    transform: translate(0,-10px);
+    border: 2px solid rgb(255,255,255,0.65);
+}
+
+
+
 #pricingOptions h2{
     font-family: 'Kanit';
     text-align: center;
@@ -455,26 +473,43 @@ p .purpText{
 #mostPopular{
     padding: 6px;
     padding-left: 20px;
-    padding-right: 20px;
+    padding-right: 10px;
     width: fit-content;
     margin: auto;
     color: #e4ffdf;
     /* font-weight: 600; */
     border-radius: 10px;
     font-size: 18px;
-    transform: translate(80px, -30px);
+    transform: translate(70px, -30px);
     border: 2px solid rgb(255, 255, 255, 0.4);
     background: white;
     color: var(--font-color);
     font-weight: 600;
 }
 
+#mostPopular img{
+    width: 22px;
+    vertical-align: middle;
+    margin-top:-3px;
+    margin-left: 5px;
+    animation: spin 6s linear infinite;
+}
+
+@keyframes spin{
+    100%{
+        transform:rotate(360deg); 
+    }
+}
+
 
 #proOption{
     transform:translate(0px,-30px);
-    border: 2px solid rgb(255,255,255,0.65);
+    border: 2px solid rgb(255,255,255,0.65) !important;
     box-shadow: 0 0 350px rgb(255,255,255,0.2);
 }
+#proOption:hover{
+    transform: translate(0,-40px) !important;
+}
 #proOption h2{margin-top:10px;}
 
 

diff --git a/templates/index.html b/templates/index.html
@@ -134,15 +134,15 @@ <h2>Hobbyist</h2>
                 </div>
 
                 <div id="proOption">
-                    <p id="mostPopular">Most popular</p>
+                    <p id="mostPopular">Most popular <img src="static/assets/svg/star.png"></p>
                     <h2>Professional</h2>
                     <p class="price">$10<span> / month</span></p>
                     <p>• Full access to the Singularity Text-Generation Service</p>
                     <p>• Full access to the Singularity Code-Generation Service</p>
                     <p>• Limited access to the Singularity Image-Generation Service (10 prompts/hour)</p>
                 </div>
 
-                <div>
+                <div style="z-index:0">
                     <h2>Enterprise</h2>
                     <p class="price">$30<span> / month</span></p>
                     <p>• Full access to the Singularity Text-Generation Service</p>