Skip to content

Commit a3de8aa

Browse files
devrutu143devrutu143
authored
index.html
1 parent 44928fd commit a3de8aa

1 file changed

Lines changed: 92 additions & 66 deletions

File tree

‎index.html‎

Lines changed: 92 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -3,110 +3,136 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>Welcome Dashboard</title>
6+
<title>Welcome Website</title>
77
<style>
88
body {
99
margin: 0;
10+
padding: 0;
1011
height: 100vh;
1112
display: flex;
1213
justify-content: center;
1314
align-items: center;
14-
background: #111;
15-
color: white;
16-
font-family: Arial, sans-serif;
15+
font-family: 'Poppins', sans-serif;
16+
background: linear-gradient(135deg, #667eea, #764ba2);
1717
overflow: hidden;
18-
flex-direction: column;
18+
color: white;
1919
}
2020

21-
#nameInputBox {
22-
display: flex;
23-
flex-direction: column;
24-
align-items: center;
21+
.fade {
22+
opacity: 0;
23+
transition: opacity 1s ease;
2524
}
26-
27-
input {
28-
padding: 8px;
29-
border-radius: 8px;
30-
border: none;
31-
margin-bottom: 10px;
32-
font-size: 16px;
25+
.fade.show {
26+
opacity: 1;
3327
}
3428

35-
button {
36-
padding: 8px 15px;
37-
border-radius: 8px;
38-
border: none;
39-
cursor: pointer;
40-
font-size: 16px;
41-
background: #0af;
42-
color: white;
43-
transition: 0.3s;
29+
.screen {
30+
display: none;
31+
text-align: center;
32+
}
33+
.screen.active {
34+
display: block;
4435
}
4536

46-
button:hover {
47-
background: #09c;
37+
h1 {
38+
font-size: 3rem;
39+
margin-bottom: 20px;
4840
}
4941

50-
.flicker {
51-
margin-top: 15px;
52-
font-size: 18px;
53-
animation: flicker 1.2s infinite alternate;
42+
button, .done-btn {
43+
padding: 10px 20px;
44+
border: none;
45+
background: white;
46+
color: #333;
47+
font-size: 1rem;
48+
border-radius: 10px;
5449
cursor: pointer;
50+
transition: 0.3s;
5551
}
56-
57-
@keyframes flicker {
58-
0% { opacity: 1; }
59-
50% { opacity: 0.3; }
60-
100% { opacity: 1; }
52+
button:hover, .done-btn:hover {
53+
background: #ddd;
6154
}
6255

63-
#dashboard {
64-
display: none;
65-
width: 100%;
66-
height: 100vh;
67-
background: white;
68-
color: black;
56+
.input-box {
57+
display: flex;
6958
justify-content: center;
7059
align-items: center;
71-
font-size: 24px;
60+
margin-top: 20px;
61+
}
62+
input {
63+
padding: 10px;
64+
font-size: 1rem;
65+
border: none;
66+
border-radius: 10px 0 0 10px;
67+
outline: none;
68+
}
69+
.done-btn {
70+
border-radius: 0 10px 10px 0;
7271
}
7372
</style>
7473
</head>
7574
<body>
76-
77-
<!-- Name Input -->
78-
<div id="nameInputBox">
79-
<input type="text" id="username" placeholder="Enter your name">
80-
<button onclick="showWelcome()">Start</button>
75+
<!-- Screen 1 -->
76+
<div id="welcomeScreen" class="screen active fade">
77+
<h1>Welcome</h1>
78+
<button onclick="goToName()">Next</button>
8179
</div>
8280

83-
<!-- Welcome Screen -->
84-
<div id="welcomeScreen" style="display:none; text-align:center;">
85-
<h1 id="greeting"></h1>
86-
<div class="flicker" onclick="openDashboard()">Click on screen for next</div>
81+
<!-- Screen 2 -->
82+
<div id="nameScreen" class="screen fade">
83+
<h1>Provide us your name, for better conversation</h1>
84+
<div class="input-box">
85+
<input type="text" id="username" placeholder="Enter your name">
86+
<button class="done-btn" onclick="saveName()">Done</button>
87+
</div>
8788
</div>
8889

89-
<!-- Dashboard -->
90-
<div id="dashboard">
91-
<h2>🎮 Your White Dashboard (Game area)</h2>
90+
<!-- Screen 3 -->
91+
<div id="dashboard" class="screen fade">
92+
<h1 id="greeting"></h1>
93+
<p>🎉 This is your main dashboard</p>
9294
</div>
9395

9496
<script>
95-
function showWelcome() {
96-
let name = document.getElementById("username").value;
97-
if (name.trim() === "") name = "User";
98-
99-
document.getElementById("nameInputBox").style.display = "none";
100-
document.getElementById("welcomeScreen").style.display = "block";
97+
function fadeOutIn(current, next) {
98+
document.getElementById(current).classList.remove("show");
99+
setTimeout(() => {
100+
document.getElementById(current).classList.remove("active");
101+
document.getElementById(next).classList.add("active");
102+
setTimeout(() => {
103+
document.getElementById(next).classList.add("show");
104+
}, 50);
105+
}, 1000);
106+
}
101107

102-
document.getElementById("greeting").innerText = `Hello, ${name}!`;
108+
// Next button
109+
function goToName() {
110+
fadeOutIn("welcomeScreen", "nameScreen");
103111
}
104112

105-
function openDashboard() {
106-
document.getElementById("welcomeScreen").style.display = "none";
107-
document.getElementById("dashboard").style.display = "flex";
113+
// Save Name
114+
function saveName() {
115+
let name = document.getElementById("username").value.trim();
116+
if (name) {
117+
localStorage.setItem("userName", name);
118+
document.getElementById("greeting").innerText = "Hello, " + name + "!";
119+
fadeOutIn("nameScreen", "dashboard");
120+
}
108121
}
109-
</script>
110122

123+
// On load check if name already saved
124+
window.onload = function() {
125+
let savedName = localStorage.getItem("userName");
126+
if (savedName) {
127+
document.getElementById("welcomeScreen").classList.remove("active", "show");
128+
document.getElementById("dashboard").classList.add("active", "show");
129+
document.getElementById("greeting").innerText = "Hello, " + savedName + "!";
130+
} else {
131+
setTimeout(() => {
132+
document.getElementById("welcomeScreen").classList.add("show");
133+
}, 50);
134+
}
135+
};
136+
</script>
111137
</body>
112138
</html>

0 commit comments

Comments
 (0)