-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathhome.html
143 lines (139 loc) · 14 KB
/
home.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="output.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script type="module" src="home.js"></script>
<script type="module" src="new.js"></script>
<link rel="stylesheet" href="home.css">
</head>
<body class="font-mono">
<div class="lg:w-[100vw] lg:h-[100vh]">
<div class="w-[100vw] h-[100vh] lg:hidden absolute">
<img class="absolute" src="./homescreennew.png" alt="">
</div>
<div class="hidden lg:block">
<img id="relimg" class="hidden lg:block lg:w-[100vw] lg:h-[100vh] lg:absolute" src="./homescreen.png" alt=""></div>
<div class="lg:h-20 lg:border-b-2 lg:border-green-400 relative lg:w-full lg:h-20 lg:border-b-2 lg:border-green-400 lg:relative ">
<div class="">
<div class="relative lg:hidden flex flex-row flex-wrap justify-between border-b-2 border-green-400 h-20">
<div class="text-green-700 relative text-2xl p-3 pt-6 ">SteadyStride</div>
<div class="mt-2"><a class="text-[10vw] pr-5 pt-4 mt-4"' href="#">≡</a></div>
</div>
<ul class="lg:flex lg:flex-row lg:justify-center lg:justify-evenly lg:flex lg:flex-row lg:justify-center lg:justify-evenly hidden">
<li class="p-7 font-semibold text-green-800"><a class="hover:bg-green-900 hover:text-green-400 hover:rounded-xl p-3 transition-colors duration-[0.4s] transition-all" href="home.html">Home</a></li>
<li class="p-7 font-semibold text-green-800"><a class="hover:bg-green-900 hover:text-green-400 hover:rounded-xl p-3 transition-colors duration-[0.4s] transition-all" href="about.html">About Us</a></li>
<li class="p-7 font-semibold text-green-800"><a class="hover:bg-green-900 hover:text-green-400 hover:rounded-xl p-3 transition-colors duration-[0.4s] transition-all" href="#">Tremor Prediction</a></li>
<div class="">
<h1 class="bg-gradient-to-r from-green-900 to-green-700 bg-clip-text p-5 text-3xl font-bold text-transparent lg:bg-gradient-to-r from-green-900 to-green-700 lg:bg-clip-text lg:p-5 lg:text-3xl lg:font-bold lg:text-transparent ">SteadyStride</h1>
</div>
<li class="p-7 font-semibold text-green-800"><a class="hover:bg-green-900 hover:text-green-400 hover:rounded-xl p-3 transition-colors duration-[0.4s] transition-all" href="report.html">Report</a></li>
<li class="p-7 font-semibold text-green-800"><a class="hover:bg-green-900 hover:text-green-400 hover:rounded-xl p-3 transition-colors duration-[0.4s] transition-all" href="#contactUs">Contact Us</a></li>
<li class="p-7 font-semibold text-green-800"><a class="hover:bg-green-900 hover:text-green-400 hover:rounded-xl p-3 transition-colors duration-[0.4s] transition-all" id="new" href="signIn.html">Logout</a></li>
</ul>
<div class="lg:flex lg:flex-row">
<div class="lg:w-1/2 lg:h-[85vh] lg:p-32">
<h1 class="lg:font-bold lg:text-4xl lg:mb-9 lg:text-left text-center text-3xl font-bold p-3 mb-5">WELCOME TO STEADY STRIDE</h1>
<p class="lg:font-semibold lg:text-xl lg:text-left text-center text-xl">Discover the future of tremor management with our innovative Anti-Tremor Band. This cutting-edge wearable device targets the radial and median nerves to significantly reduce tremor intensity. Equipped with advanced sensors and machine learning, it continuously monitors your condition and keeps your loved ones and healthcare providers informed. Experience improved quality of life and personalized tremor relief today.</p>
</div>
<div class="lg:w-1/2 lg:h-[85vh]"><img class="lg:m-auto lg:mt-28" src="./hand.png" alt=""></div>
</div>
</div>
</div>
</div>
<div class="hidden lg:block"><img id="lowercloud1" class="lg:w-full lg:mt-0" src="./lowercloud.png" alt=""></div>
<div class="lg:text-center lg:mt-10"><div class="lg:text-5xl lg:mt-10 lg:font-bold font-bold text-3xl p-3 text-center text-green-600">Steady Hands, Confident Lives</div><br><p style="text-align: center;" class="lg:text-3xl lg:font-bold font-bold text-2xl text-green-600">Easy to start. Easy to manage. Easy to use.</p><br>
<div class="text-green-600 font-semibold lg:mt-5 lg:mb-5 lg:text-xl text-center text-xl p-2">Its ease of setup, intuitive use, and ability to significantly reduce tremors have made it a trusted tool for improving daily life. Users reported feeling more confident and independent, emphasizing the band’s role in enhancing both functionality and quality of life.The emphasis on being "easy to start, easy to manage, and easy to use" aligns perfectly with the needs of users seeking a hassle-free, effective solution to regain control and stability in their daily lives. This reinforces the band’s value as an essential tool for enhancing independence and quality of life.</div></div>
<div style="display: flex; flex-direction: column;" class="flex flex-col lg:w-[100vw] lg:h-[100vh]">
<div class="lg:w-[100vw] lg:h-[50vh] lg:flex lg:flex-row flex flex-col items-center">
<div class="lg:w-[50vw] lg:h-[50vh] lg:pl-20 lg:flex lg:flex-col lg:justify-center lg:items-center flex flex-col items-center">
<div style="border-radius: 50%;" class="lg:w-52 lg:h-52 lg:border-2 lg:border-black lg:border-none lg:flex lg:flex-col lg:justify-center lg:items-center lg:text-3xl lg:mt-4 lg:bg-[#4caf4fa2] lg:font-bold lg:text-white border-2 border-black w-32 h-32 flex flex-col items-center pt-10 bg-[#4caf4fa2] mt-5 border-none"><div id="num" data-val="94">0</div><div>mins</div></div>
<div class="lg:w-[30vw] lg:h-28 lg:mt-7 lg:text-center text-center">64% of patients reported having persistent relief, lasting for an average of 94 minutes</div>
</div>
<div class="lg:w-[50vw] lg:h-[50vh] lg:pr-24 flex flex-col items-center"><div class="lg:w-[50vw] lg:h-[50vh] lg:flex lg:flex-col lg:justify-center lg:items-center flex flex-col items-center">
<div style="border-radius: 50%;" class="lg:w-52 lg:h-52 lg:border-2 lg:border-black lg:border-none lg:flex lg:flex-col lg:justify-center lg:items-center lg:text-3xl lg:mt-4 lg:bg-[#4caf4fa2] lg:font-bold lg:text-white border-2 border-black w-32 h-32 flex flex-col items-center pt-10 bg-[#4caf4fa2] border-none"><div id="num" data-val="9">0</div><div>/10</div></div>
<div class="lg:w-[30vw] lg:h-28 lg:mt-7 lg:text-center text-center">People experience reduction with a complete 30-minute session</div>
</div></div>
</div>
<div style="display: flex; flex-direction: column; flex-wrap: wrap;" class="lg:w-[100vw] lg:h-[100vh] lg:flex lg:flex-col lg:justify-between">
<div class="lg:w-[85vw] lg:h-[50vh] lg:flex lg:flex-row">
<div class="lg:w-1/3 lg:h-[50vh] lg:flex lg:flex-col lg:justify-center lg:items-center lg:ml-20 flex flex-col items-center">
<div style="border-radius: 50%;" class="lg:w-52 lg:h-52 lg:border-2 lg:ml-4 lg:border-black lg:border-none lg:flex lg:flex-col lg:justify-center lg:items-center lg:text-3xl lg:mt-4 lg:bg-[#4caf4fa2] lg:font-bold lg:text-white w-32 h-32 border-2 border-2 border-black flex flex-col items-center pt-10 bg-[#4caf4fa2] border-none"><div id="num" data-val="68">0</div><div>%</div></div>
<div class="lg:w-[30vw] lg:h-28 lg:mt-7 lg:ml-4 lg:text-center text-center">Of patients who self-rated as having “Severe or Moderate” difficulty in their activities of daily living self-rated as “Mild” or better at the end of the study</div>
</div>
<div class="lg:w-1/3 lg:h-[50vh] lg:flex lg:flex-col lg:justify-center lg:items-center lg:ml-4 flex flex-col items-center">
<div style="border-radius: 50%;" class="lg:w-52 lg:h-52 lg:ml-20 lg:border-2 lg:border-black lg:border-none lg:flex lg:flex-col lg:justify-center lg:items-center lg:text-3xl lg:mt-4 lg:bg-[#4caf4fa2] lg:font-bold lg:text-white flex flex-col items-center border-2 border-black w-32 h-32 p-10 bg-[#4caf4fa2] border-none"><div id="num" data-val="71">0</div><div>%</div></div>
<div class="lg:w-[30vw] lg:h-28 lg:mt-7 lg:ml-20 lg:text-center text-center">Of patients experienced improvement in holding a cup of tea</div>
</div>
<div class="lg:w-1/3 lg:h-[50vh] lg:flex lg:flex-col lg:justify-center lg:items-center lg:ml-10 flex flex-col items-center">
<div style="border-radius: 50%;" class="lg:w-52 lg:h-52 lg:ml-24 lg:border-2 lg:border-black lg:border-none lg:flex lg:flex-col lg:justify-center lg:items-center lg:text-3xl lg:mt-4 lg:bg-[#4caf4fa2] lg:font-bold lg:text-white border-2 border-black flex flex-col items-center w-32 h-32 pt-10 bg-[#4caf4fa2] border-none"><div id="num" data-val="76">0</div><div>%</div></div>
<div class="lg:w-[30vw] lg:h-28 lg:mt-7 lg:ml-24 lg:text-center text-center">Of patients reported improvement in dialing a telephone</div>
</div></div>
</div>
<img class="hidden lg:block" src="upppercloud.png" alt="" class="lg:w-[100vw]">
<div style="background-image: url('homescreen.png'); background-repeat: no-repeat; background-size: cover;" class="lg:flex lg:flex-row lg:w-[100vw] lg:h-[100vh]">
<div class="lg:w-[50vw] lg:h-[100vh] lg:flex-col">
<div style="background-image: url(./wat);" id='change' class="lg:w-[50vw] lg:h-[100vh]">
<div class="">
<p class="lg:font-bold lg:text-3xl lg:text-center lg:pl-20 p-5 text-center font-bold text-3xl">From Silence to Impact – One Toggle, One Band, Infinite Change!</p>
</div>
<div class="ml-[37vw] w-[100px] h-[40px]ml-72 lg:w-[100px] border-2 border-black rounded-full lg:h-[40px] lg:ml-72 lg:border-2 lg:border-black lg:rounded-full lg:mt-10">
<button id="changeColorButton" class="border-2 border-black mt-1 lg:border-2 rounded-[200px] p-3 mb-1 ml-1 lg:border-black lg:mt-1 lg:rounded-[200px] lg:p-3 lg:ml-2 lg:bg-black bg-black"></button>
<button id="newchangeColorButton" class="border-2 border-black mt-1 rounded-[200px] p-3 ml-[62px] mb-1 bg-black lg:border-2 lg:border-black lg:mt-1 lg:rounded-[200px] lg:hidden lg:p-3 lg:ml-[62px] lg:bg-black hidden" ></button>
</div>
<div style="margin-top: 40px; padding:30px;" class="lg:text-center lg:text-2xl text-center font-bold text-2xl">A sample signature of a person suffering from hand tremor</div>
<div id="before" class="lg:text-center lg:text-3xl lg:font-bold text-center font-bold text-xl">Before</div>
<div id="newpictures" class="lg:w-[50vw] lg:mt-4"><img class="lg:ml-32" src="tremornew.png" alt=""></div>
<div id="newpic" class="lg:w-[50vw] lg:mt-4 lg:hidden hidden"><img class="lg:ml-32" src="stablenew.jpg" alt=""></div>
</div></div>
<div class="lg:w-[50vw] lg:h-[100vh]"><img class="mt-20 lg:m-auto lg:mt-36" src="tfansformation.png" alt=""></div>
</div>
<div><img id="lowercloud1" class="hidden lg:block lg:w-full lg:mt-0" src="./lowercloud.png" alt=""></div>
<div class="lg:w-[100vw] lg:h-[100vh]">
<div class="lg:text-[3vw] lg:font-bold lg:text-center lg:mt-8 lg:mb-10 text-center font-bold text-3xl">Achievements</div>
<div><img id="lowercloud1" class="mt-10 mb-10 lg:w-full lg:mt-0" src="./prizes.png" alt=""></div>
</div>
<!-- <img src="upppercloud.png" class="w-full mt-10 absolute" alt=""> -->
<div class="text-center mt-10 lg:w-[100vw] lg:h-[100vh] lg:mt-24" style="background-image: url(./upppercloud.png ); background-repeat:no-repeat; background-size: cover;">
<div class="lg:mt-28 lg:ml-5 lg:flex lg:flex-row">
<div class="lg:relative"><h3 class="font-bold text-xl lg:font-bold lg:text-3xl lg:mb-[1vw]">Contact</h3>
<p>© 2024 SynapticQ.<br>
All rights reserved.<br>
Discover the future of tremor management<br>
with our innovative Anti-Tremor Band.<br>
<div class="lg:relative lg:ml-[20vw]"><p class="font-bold text-xl lg:text-xl lg:font-bold">Team</p>
<p>
Debangshu Chatterjee<br>
Aritra Mukhopadhyay<br>
Mainak Pal<br>
Sanga Bhattacharjee<br>
Rumani Sadhukhan<br>
Asmita Dasgupta<br>
Mentor: Prof.Dibakar Roy Choudhury</p></div>
<div>
<div class="lg:relative lg:ml-96 lg:mt-10 lg:mb-10">
<p class="font-bold font-bold text-xl">Social Media Handles-</p>
<a href="https://www.facebook.com/steadystride" target="_blank" title="Facebook"><i class="lg:text-3xl lg:mt-5 lg:ml-1 fab fa-facebook-f"></i></a>
<a href="https://www.instagram.com/steadystride" target="_blank" title="Instagram"><i class="lg:text-3xl lg:ml-1 fab fa-instagram"></i></a>
<a href="https://twitter.com/steadystride" target="_blank" title="Twitter"><i class="lg:text-3xl lg:ml-1 fab fa-twitter"></i></a>
<a href="https://www.linkedin.com/company/steadystride" target="_blank" title="LinkedIn"><i class="lg:text-3xl lg:ml-1 fab fa-linkedin-in"></i></a></div>
</div>
</div>
</body>
<script>
window.embeddedChatbotConfig = {
chatbotId: "010bm1cmIXwvDP1gFdH-i",
domain: "www.chatbase.co"
}
</script>
<script
src="https://www.chatbase.co/embed.min.js"
chatbotId="010bm1cmIXwvDP1gFdH-i"
domain="www.chatbase.co"
defer>
</script>
</html>