Initial commit

2024-07-14 12:33:50 -04:00
commit 290e01e967
5 changed files with 383 additions and 0 deletions
--- a/templates/index.html
+++ b/templates/index.html
@ -0,0 +1,180 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>DWS</title>
+  <style>
+@font-face { 
+    font-family: 'MyFont'; 
+    src: 
+        url('{{ url_for('static', filename=fontp) }}')
+        format('opentype'); 
+    font-weight: normal; 
+    font-style: normal; 
+} 
+
+html, body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  font-family: MyFont;
+}
+.bgimage {
+  background-image: url('{{ url_for('static', filename=imgp) }}');
+  background-color: #cccccc;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  position: fixed;
+  left: 0;
+  right: 0;
+  z-index: 1;
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  animation: dimBackground 1s ease-in-out forwards;
+}
+
+.content {
+  position: fixed;
+  left: 0;
+  right: 0;
+  z-index: 2;
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  display: grid;
+  grid:
+    "header header header" auto
+    "leftSide body rightSide" 1fr
+    "footer footer footer" auto
+    / auto 1fr auto;
+  gap: 8px;
+  mix-blend-mode: difference;
+}
+
+a {
+  color: #ffffff;
+  text-decoration: none;
+  padding-left: .25rem;
+  padding-right: .25rem;
+}
+
+.header { 
+  grid-area: header; 
+  margin: auto;
+  padding: 1rem;
+  color: #ffffff;
+  font-size: 1.25rem;
+}
+.leftSide { grid-area: leftSide; }
+
+.body { 
+  grid-area: body; 
+  padding: 1rem;
+  font-size: 4rem;
+  z-index: 2;
+  mix-blend-mode: difference;
+}
+
+p {
+  margin: 0;
+  padding: 0.1rem;
+}
+
+.title {
+  font-size: 6rem;
+  color: #ffffff00;
+  animation: textIn 2s ease-in-out forwards;
+  animation-delay: .75s;
+}
+
+.subtitle {
+  font-size: 3rem;
+  overflow: hidden;
+  color: #ffffff;
+}
+
+.rightSide { grid-area: rightSide; }
+
+.footer {
+  grid-area: footer; 
+  padding: 0.5rem;
+  font-size: 1rem;
+}
+
+
+@keyframes textIn {
+  0% {
+    color: #ffffff00;
+  }
+
+  100% {
+    color: #ffffffff;
+  }
+}
+
+@keyframes dimBackground {
+  0% {
+    -webkit-filter: blur(0px) brightness(100%) saturate(100%);
+  }
+  100% {
+    -webkit-filter: blur(2px) brightness(40%) saturate(30%);
+  }
+}
+    </style>
+</head>
+
+<body>
+  <div class="bgimage">
+  </div>
+  <div class="content">
+    <div class="header">
+        <a href='#'>Home</a> |
+        <a href='#'>Services</a> |
+        <a href='#'>About</a> |
+        <a href='#'>Contact</a>
+    </div>
+    <div class="leftSide"></div>
+    <div class="body">
+        <p class="title">DWS</p>
+        <p class="subtitle" id="subtitle"></p>
+      </div>
+    <div class="rightSide"></div>
+    <div class="footer">
+        © DWS 2024, Tanishq Dubey 2024
+    </div>
+  </div>
+
+  <script>
+    var txt = ['It\'s your internet.', 'Take it back.'];
+    var speed = 62;
+    var listDelay = 400;
+
+    async function typeWriter() {
+      console.log("hi");
+      console.log(txt.length);
+      for (let j = 0; j < txt.length; j++) {
+        var ctxt = txt[j];
+        var i = 0;
+        while (i < ctxt.length) {
+          document.getElementById("subtitle").innerHTML += ctxt.charAt(i);
+          i++;
+          await new Promise(r => setTimeout(r, speed));
+        }
+        await new Promise(r => setTimeout(r, listDelay));
+        document.getElementById("subtitle").innerHTML += " ";
+      }
+    }
+
+    window.onload = function() {       
+      setTimeout(function(){
+        typeWriter()
+      },2000); 
+    }
+  </script>
+</body>
+
+</html>