From 95011f6467076e0d77ef501f6d86b44f1c2bf566 Mon Sep 17 00:00:00 2001 From: M VINAY KUMAR <110302635+vinay8605@users.noreply.github.com> Date: Tue, 2 Jan 2024 11:54:44 +0530 Subject: [PATCH] Add files via upload --- static/indexstyle.css | 212 ++++++++++++++++++++++++++++++++++++++++ static/landingstyle.css | 62 ++++++++++++ static/script1.js | 120 +++++++++++++++++++++++ static/script2.js | 20 ++++ static/script3.js | 120 +++++++++++++++++++++++ 5 files changed, 534 insertions(+) create mode 100644 static/indexstyle.css create mode 100644 static/landingstyle.css create mode 100644 static/script1.js create mode 100644 static/script2.js create mode 100644 static/script3.js diff --git a/static/indexstyle.css b/static/indexstyle.css new file mode 100644 index 0000000..6160fb4 --- /dev/null +++ b/static/indexstyle.css @@ -0,0 +1,212 @@ +body { + margin: 0; + display: flex; + align-items: center; + justify-content: center; + height: 100vh; + background-color: #000; + transition: background-color 0.5s ease; + } + + .container { + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + #screen2 { + color: #fff; + } + + #openHealthText { + font-size: 250px; + opacity: 0; + transition: opacity 0.5s ease; + background: -webkit-linear-gradient(red, #b055de,#12c2e9); + background-clip: border-box; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + } + + #clickableButton { + cursor: pointer; + max-width: 100%; + height: auto; + transition: transform 0.5s ease; + } + + .hidden { + display: none; + } + + + + .star-1 { + position: absolute; + top: 20%; + left: 20%; + width: 25px; + height: auto; + filter: drop-shadow(0 0 0 #0ef); + z-index: -5; + transition: all 0.8s cubic-bezier(0.05, 0.83, 0.43, 0.96); + } + + .star-2 { + position: absolute; + top: 45%; + left: 45%; + width: 15px; + height: auto; + filter: drop-shadow(0 0 0 #0ef); + z-index: -5; + transition: all 0.8s cubic-bezier(0, 0.4, 0, 1.01); + } + + .star-3 { + position: absolute; + top: 40%; + left: 40%; + width: 5px; + height: auto; + filter: drop-shadow(0 0 0 #0ef); + z-index: -5; + transition: all 0.8s cubic-bezier(0, 0.4, 0, 1.01); + } + + .star-4 { + position: absolute; + top: 20%; + left: 40%; + width: 8px; + height: auto; + filter: drop-shadow(0 0 0 #0ef); + z-index: -5; + transition: all 0.8s cubic-bezier(0, 0.4, 0, 1.01); + } + + .star-5 { + position: absolute; + top: 25%; + left: 45%; + width: 15px; + height: auto; + filter: drop-shadow(0 0 0 #0ef); + z-index: -5; + transition: all 0.8s cubic-bezier(0, 0.4, 0, 1.01); + } + + .star-6 { + position: absolute; + top: 5%; + left: 50%; + width: 5px; + height: auto; + filter: drop-shadow(0 0 0 #0ef); + z-index: -5; + transition: all 0.8s cubic-bezier(0, 0.4, 0, 1.01); + } + + button:hover { + background: #000000; + color: #0ef; + box-shadow: 0 0 80px #0ef; + } + + button:hover .star-1 { + position: absolute; + top: -20%; + left: -25%; + width: 30px; + height: auto; + filter: drop-shadow(0 0 10px #0ef); + z-index: 2; + } + + button:hover .star-2 { + position: absolute; + top: 35%; + left: -25%; + width: 20px; + height: auto; + filter: drop-shadow(0 0 10px #0ef); + z-index: 2; + } + + button:hover .star-3 { + position: absolute; + top: 80%; + left: -10%; + width: 12px; + height: auto; + filter: drop-shadow(0 0 10px #0ef); + z-index: 2; + } + + button:hover .star-4 { + position: absolute; + top: -25%; + left: 105%; + width: 30px; + height: auto; + filter: drop-shadow(0 0 10px #0ef); + z-index: 2; + } + + button:hover .star-5 { + position: absolute; + top: 30%; + left: 115%; + width: 20px; + height: auto; + filter: drop-shadow(0 0 10px #0ef); + z-index: 2; + } + + button:hover .star-6 { + position: absolute; + top: 80%; + left: 105%; + width: 12px; + height: auto; + filter: drop-shadow(0 0 10px #0ef); + z-index: 2; + } + + .fil0 { + fill: #0ef; + } + + #particles-js { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: -1; + } + + .glow-button { + position: relative; + padding: 22px 35px; + background: #0ef; + font-size: 17px; + font-weight: bolder; + color: #181818; + border: 3px solid #0ef; + border-radius: 40px; + box-shadow: 0 0 0 #0ef; + transition: all 0.3s ease-in-out; + animation: glow 2s infinite alternate; + } + + @keyframes glow { + 0% { + box-shadow: 0 0 10px #0ef; + } + 100% { + box-shadow: 0 0 25px #0ef; + } + } \ No newline at end of file diff --git a/static/landingstyle.css b/static/landingstyle.css new file mode 100644 index 0000000..7c27e42 --- /dev/null +++ b/static/landingstyle.css @@ -0,0 +1,62 @@ +body { + margin: 0; + padding: 0; + overflow: hidden; + background-color: black; + } + canvas { + display: block; + } + .topnav { + overflow: hidden; + background-color: #333; + } + + .topnav a { + float: left; + display: block; + color: #f2f2f2; + text-align: center; + padding: 14px 16px; + text-decoration: none; + font-size: 17px; + } + + .topnav a:hover { + background-color: #ddd; + color: black; + } + + .topnav a.active { + background-color: #04AA6D; + color: white; + } + + .topnav .icon { + display: none; + } + + @media screen and (max-width: 600px) { + .topnav a:not(:first-child) {display: none;} + .topnav a.icon { + float: right; + display: block; + } + } + + @media screen and (max-width: 600px) { + .topnav.responsive {position: relative;} + .topnav.responsive .icon { + position: absolute; + right: 0; + top: 0; + } + .topnav.responsive a { + float: none; + display: block; + text-align: left; + } + } + #bars{ + color: #0ef; + } \ No newline at end of file diff --git a/static/script1.js b/static/script1.js new file mode 100644 index 0000000..14e225f --- /dev/null +++ b/static/script1.js @@ -0,0 +1,120 @@ +particlesJS( + "particles-js", + + { + particles: { + number: { + value: 80, + density: { + enable: true, + value_area: 600, + }, + }, + color: { + value: "#0ef", + }, + shape: { + type: "circle", + stroke: { + width: 0, + color: "#0ef", + }, + polygon: { + nb_sides: 2, + }, + image: { + src: "img/github.svg", + width: 100, + height: 100, + }, + }, + opacity: { + value: 0.3, + random: false, + anim: { + enable: false, + speed: 1, + opacity_min: 0.1, + sync: false, + }, + }, + size: { + value: 5, + random: true, + anim: { + enable: false, + speed: 40, + size_min: 0.1, + sync: false, + }, + }, + line_linked: { + enable: true, + distance: 200, + color: "#0ef", + opacity: 0.4, + width: 1, + }, + move: { + enable: true, + speed: 6, + direction: "none", + random: false, + straight: false, + out_mode: "out", + attract: { + enable: false, + rotateX: 600, + rotateY: 1200, + }, + }, + }, + interactivity: { + detect_on: "canvas", + events: { + onhover: { + enable: true, + mode: "repulse", + }, + onclick: { + enable: true, + mode: "push", + }, + resize: true, + }, + modes: { + grab: { + distance: 400, + line_linked: { + opacity: 1, + }, + }, + bubble: { + distance: 400, + size: 40, + duration: 2, + opacity: 8, + speed: 3, + }, + repulse: { + distance: 200, + }, + push: { + particles_nb: 4, + }, + remove: { + particles_nb: 2, + }, + }, + }, + retina_detect: true, + config_demo: { + hide_card: false, + background_color: "#000", + background_image: "", + background_position: "50% 50%", + background_repeat: "no-repeat", + background_size: "cover", + }, + } + ); \ No newline at end of file diff --git a/static/script2.js b/static/script2.js new file mode 100644 index 0000000..8a93fa9 --- /dev/null +++ b/static/script2.js @@ -0,0 +1,20 @@ +document + .getElementById("clickableButton") + .addEventListener("click", function () { + document.body.style.backgroundColor = "#000"; + document.getElementById("initialScreen").classList.add("hidden"); + + setTimeout(function () { + document.getElementById("initialScreen").style.display = "none"; + document.getElementById("screen2").classList.remove("hidden"); + + setTimeout(function () { + document.getElementById("screen2").style.opacity = "1"; + document.getElementById("openHealthText").style.opacity = "1"; + }, 100); + }, 400); + + setTimeout(function () { + window.location.href = "landing1.html"; + }, 4000); + }); \ No newline at end of file diff --git a/static/script3.js b/static/script3.js new file mode 100644 index 0000000..9c93b55 --- /dev/null +++ b/static/script3.js @@ -0,0 +1,120 @@ +particlesJS('particles-js', + + { + "particles": { + "number": { + "value": 80, + "density": { + "enable": true, + "value_area": 600 + } + }, + "color": { + "value": "#0ef" + }, + "shape": { + "type": "circle", + "stroke": { + "width": 0, + "color": "#0ef" + }, + "polygon": { + "nb_sides": 5 + }, + "image": { + "src": "img/github.svg", + "width": 100, + "height": 100 + } + }, + "opacity": { + "value": 0.5, + "random": false, + "anim": { + "enable": false, + "speed": 1, + "opacity_min": 0.1, + "sync": false + } + }, + "size": { + "value": 5, + "random": true, + "anim": { + "enable": false, + "speed": 40, + "size_min": 0.1, + "sync": false + } + }, + "line_linked": { + "enable": true, + "distance": 200, + "color": "#0ef", + "opacity": 0.8, + "width": 1 + }, + "move": { + "enable": true, + "speed": 6, + "direction": "none", + "random": false, + "straight": false, + "out_mode": "out", + "attract": { + "enable": false, + "rotateX": 600, + "rotateY": 1200 + } + } + }, + "interactivity": { + "detect_on": "canvas", + "events": { + "onhover": { + "enable": true, + "mode": "repulse" + }, + "onclick": { + "enable": true, + "mode": "push" + }, + "resize": true + }, + "modes": { + "grab": { + "distance": 400, + "line_linked": { + "opacity": 1 + } + }, + "bubble": { + "distance": 400, + "size": 40, + "duration": 2, + "opacity": 8, + "speed": 3 + }, + "repulse": { + "distance": 200 + }, + "push": { + "particles_nb": 4 + }, + "remove": { + "particles_nb": 2 + } + } + }, + "retina_detect": true, + "config_demo": { + "hide_card": false, + "background_color": "#000", + "background_image": "", + "background_position": "50% 50%", + "background_repeat": "no-repeat", + "background_size": "cover" + } + } + +); \ No newline at end of file