added grid

multiverseweb · Apr 1, 2024 · 84e07f3 · 84e07f3
1 parent 52bfb1a
commit 84e07f3
Show file tree

Hide file tree

Showing 3 changed files with 111 additions and 55 deletions.
diff --git a/index.html b/index.html
@@ -26,6 +26,8 @@
         </ul>
         <div class="cover" id="cover"></div>
     </nav>
+    <button id="top" onclick="topFunction()">△</button>
+    <div class="graph"></div>
     <!--<iframe src="README.md" frameborder="0" markdown=1 class="readme"></iframe>-->
     <script src="script.js"></script>
 </body>

diff --git a/script.js b/script.js
@@ -1,57 +1,80 @@
-var l1=document.getElementById("l1");
-var l2=document.getElementById("l2");
-var l3=document.getElementById("l3");
-var hide_btn=document.getElementById("hide");
-var show_btn=document.getElementById("show");
-var tabs=document.getElementById("tabs");
-var cover=document.getElementById("cover");
-var glow=document.getElementById("glow");
-var sun=document.getElementById("sun");
-var navbar=document.getElementById("navbar");
-var logo=document.getElementById("logo");
+var l1 = document.getElementById("l1");
+var l2 = document.getElementById("l2");
+var l3 = document.getElementById("l3");
+var hide_btn = document.getElementById("hide");
+var show_btn = document.getElementById("show");
+var tabs = document.getElementById("tabs");
+var cover = document.getElementById("cover");
+var glow = document.getElementById("glow");
+var sun = document.getElementById("sun");
+var navbar = document.getElementById("navbar");
+var logo = document.getElementById("logo");
 
-function show(){
-    l1.style.transform="rotate(45deg)";
-    l2.style.opacity=0;
-    l3.style.transform="rotate(-45deg)";
-    hide_btn.style.display="flex";
-    tabs.style.marginLeft="70vw";
-    cover.style.width="calc(100vw - 20px - 6vh)";
+function show() {
+    l1.style.transform = "rotate(45deg)";
+    l2.style.opacity = 0;
+    l3.style.transform = "rotate(-45deg)";
+    hide_btn.style.display = "flex";
+    tabs.style.marginLeft = "70vw";
+    cover.style.width = "calc(100vw - 20px - 6vh)";
+    document.getElementById("top").style.opacity = 0;
 }
-function hide(){
-    l1.style.transform="rotate(0deg)";
-    l2.style.opacity=1;
-    l3.style.transform="rotate(0deg)";
-    hide_btn.style.display="none";
-    tabs.style.marginLeft="110vw";
-    cover.style.width="0vw";
+function hide() {
+    l1.style.transform = "rotate(0deg)";
+    l2.style.opacity = 1;
+    l3.style.transform = "rotate(0deg)";
+    hide_btn.style.display = "none";
+    tabs.style.marginLeft = "110vw";
+    cover.style.width = "0vw";
+    document.getElementById("top").style.opacity = 1;
 }
-var light = function theme(){
-    glow.style.border="2px dotted white";
-    glow.style.padding="2px";
-    sun.style.height="2vh";
-    sun.style.width="2vh";
-    sun.style.opacity=1;
-    glow.style.boxShadow="0px 0px 10px #00000000";
-    document.getElementById("body").style.backgroundColor="rgba(0,0,0, 0.2)";
-    document.getElementById("body").style.filter="invert(1)";
-    document.getElementById( "theme" ).setAttribute( "onClick", "javascript: dark();" );
-    navbar.style.backgroundColor="rgba(149, 149, 149, 0.738)";
-    logo.style.filter="invert(1)";
-    cover.style.backgroundColor="rgba(149, 149, 149, 0.538)";
+var light = function theme() {
+    glow.style.border = "2px dotted white";
+    glow.style.padding = "2px";
+    sun.style.height = "2vh";
+    sun.style.width = "2vh";
+    sun.style.opacity = 1;
+    glow.style.boxShadow = "0px 0px 10px #00000000";
+    document.getElementById("body").style.backgroundColor = "rgba(0,0,0, 0.2)";
+    document.getElementById("body").style.filter = "invert(1)";
+    document.getElementById("theme").setAttribute("onClick", "javascript: dark();");
+    navbar.style.backgroundColor = "rgba(149, 149, 149, 0.738)";
+    logo.style.filter = "invert(1)";
+    cover.style.backgroundColor = "rgba(149, 149, 149, 0.538)";
 }
 
-var dark = function theme2(){
-    glow.style.border="1px solid white";
-    glow.style.padding=0;
-    sun.style.height="2.6vh";
-    sun.style.width="2.6vh";
-    sun.style.opacity=0;
-    glow.style.boxShadow="0px 0px 10px white";
-    document.getElementById("body").style.backgroundColor="black";
-    document.getElementById("body").style.filter="invert(0)";
-    document.getElementById( "theme" ).setAttribute( "onClick", "javascript: light();" );
-    navbar.style.backgroundColor="rgba(149, 149, 149, 0.138)";
-    logo.style.filter="invert(0)";
-    cover.style.backgroundColor="rgba(149, 149, 149, 0.138)";
+var dark = function theme2() {
+    glow.style.border = "1px solid white";
+    glow.style.padding = 0;
+    sun.style.height = "2.6vh";
+    sun.style.width = "2.6vh";
+    sun.style.opacity = 0;
+    glow.style.boxShadow = "0px 0px 10px white";
+    document.getElementById("body").style.backgroundColor = "black";
+    document.getElementById("body").style.filter = "invert(0)";
+    document.getElementById("theme").setAttribute("onClick", "javascript: light();");
+    navbar.style.backgroundColor = "rgba(149, 149, 149, 0.138)";
+    logo.style.filter = "invert(0)";
+    cover.style.backgroundColor = "rgba(149, 149, 149, 0.138)";
+}
+
+function topFunction() {
+    document.body.scrollTop = 0; // For Safari
+    document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
+}
+
+window.onscroll = function () {
+    scrollFunction()
+};
+
+function scrollFunction() {
+    if (document.body.scrollTop > 10 ||
+        document.documentElement.scrollTop > 10) {
+        navbar.style.backgroundColor="rgba(149, 149, 149, 0.138)";
+        document.getElementById("top").style.opacity = 1;
+    }
+    else{
+        navbar.style.backgroundColor="rgba(149, 149, 149, 0)";
+        document.getElementById("top").style.opacity = 0;
+    }
 }
diff --git a/style.css b/style.css
@@ -5,14 +5,24 @@
 body{
     background-color: black;
     font-size: 2.4vh;
-    overflow: hidden;
+    overflow-x: hidden;
     transition-duration: 0.4s;
+    background-image: linear-gradient(to right, transparent 4vh, rgba(65, 65, 65, 0.181) 1px),linear-gradient(to bottom, transparent 4vh, rgba(65, 65, 65, 0.181) 1px);
+    background-size: calc(4vh + 1px) calc(4vh + 1px);
+    background-attachment: fixed;
+}
+
+::-webkit-scrollbar{
+    display: none;
 }
 nav{
-    background-color: rgba(149, 149, 149, 0.138);
+    background-color: rgba(149, 149, 149, 0);
     backdrop-filter: blur(10px);
     border-bottom: 1px solid rgba(255, 255, 255, 0.025);
     height: calc(5vh + 20px);
+    transition-duration: 0.4s;
+    position:sticky;
+    top:0;
 }
 .logo{
     height: 5vh;
@@ -87,15 +97,36 @@ nav{
     height: 2.6vh;
     width:2.6vh;
     border-radius: 50%;
-    border:1px solid white;
+    border:1px solid rgb(255, 255, 255);
     transition-duration: 0.7s;
 }
 .glow{
     height: fit-content;
     width: fit-content;
     padding: 0px;
-    border: 1px solid white;
+    border: 0px solid rgba(255, 255, 255, 0);
     border-radius: 50%;
     transition-duration: 0.7s;
     box-shadow: 0px 0px 10px white;
 }
+
+#top{
+    position:fixed;
+    background-color: rgba(149, 149, 149, 0.138);
+    border: 1px solid rgba(255, 255, 255, 0.025);
+    color:white;
+    right:20px;
+    bottom: 20px;
+    font-size: 3.5vh;
+    padding: 5px;
+    border-radius: 1px;
+    opacity: 0;
+    transition-duration: 0.4s;
+    backdrop-filter: blur(10px);
+}
+
+.graph{
+    height: 200vh;
+    width: 10vw;
+    background-color: rgba(240, 248, 255, 0);
+}