Skip to content

Commit 44928fd

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

1 file changed

Lines changed: 61 additions & 105 deletions

File tree

‎index.html‎

Lines changed: 61 additions & 105 deletions
Original file line numberDiff line numberDiff line change
@@ -3,154 +3,110 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>Rutu's Website</title>
6+
<title>Welcome Dashboard</title>
77
<style>
8-
/* Reset */
9-
* { margin: 0; padding: 0; box-sizing: border-box; }
10-
118
body {
12-
font-family: Arial, sans-serif;
9+
margin: 0;
1310
height: 100vh;
14-
background: linear-gradient(135deg, #6a11cb, #2575fc);
15-
color: white;
1611
display: flex;
1712
justify-content: center;
1813
align-items: center;
14+
background: #111;
15+
color: white;
16+
font-family: Arial, sans-serif;
1917
overflow: hidden;
18+
flex-direction: column;
2019
}
2120

22-
.fade {
23-
opacity: 0;
24-
transition: opacity 1s ease-in-out;
25-
}
26-
27-
.fade.show {
28-
opacity: 1;
29-
}
30-
31-
.container {
32-
text-align: center;
33-
max-width: 400px;
34-
width: 90%;
21+
#nameInputBox {
22+
display: flex;
23+
flex-direction: column;
24+
align-items: center;
3525
}
3626

37-
h1, h2, p {
38-
margin-bottom: 20px;
27+
input {
28+
padding: 8px;
29+
border-radius: 8px;
30+
border: none;
31+
margin-bottom: 10px;
32+
font-size: 16px;
3933
}
4034

4135
button {
42-
padding: 10px 20px;
36+
padding: 8px 15px;
37+
border-radius: 8px;
4338
border: none;
44-
border-radius: 25px;
45-
background: #fff;
46-
color: #2575fc;
47-
font-weight: bold;
4839
cursor: pointer;
40+
font-size: 16px;
41+
background: #0af;
42+
color: white;
4943
transition: 0.3s;
5044
}
5145

5246
button:hover {
53-
background: #eee;
47+
background: #09c;
5448
}
5549

56-
.input-container {
57-
display: flex;
58-
align-items: center;
59-
justify-content: center;
60-
gap: 10px;
50+
.flicker {
51+
margin-top: 15px;
52+
font-size: 18px;
53+
animation: flicker 1.2s infinite alternate;
54+
cursor: pointer;
6155
}
6256

63-
input {
64-
padding: 10px;
65-
border-radius: 25px;
66-
border: none;
67-
outline: none;
68-
width: 60%;
57+
@keyframes flicker {
58+
0% { opacity: 1; }
59+
50% { opacity: 0.3; }
60+
100% { opacity: 1; }
6961
}
7062

71-
#dashboard h2 {
72-
font-size: 26px;
73-
margin-bottom: 10px;
63+
#dashboard {
64+
display: none;
65+
width: 100%;
66+
height: 100vh;
67+
background: white;
68+
color: black;
69+
justify-content: center;
70+
align-items: center;
71+
font-size: 24px;
7472
}
7573
</style>
7674
</head>
7775
<body>
78-
<!-- Welcome Screen -->
79-
<div id="welcome" class="container fade show">
80-
<h1>Welcome 👋</h1>
81-
<button onclick="goToName()">Next</button>
76+
77+
<!-- Name Input -->
78+
<div id="nameInputBox">
79+
<input type="text" id="username" placeholder="Enter your name">
80+
<button onclick="showWelcome()">Start</button>
8281
</div>
8382

84-
<!-- Name Input Screen -->
85-
<div id="nameScreen" class="container fade" style="display:none;">
86-
<h2>Provide us your name</h2>
87-
<p>For better conversation 😊</p>
88-
<div class="input-container">
89-
<input type="text" id="nameInput" placeholder="Enter your name">
90-
<button onclick="saveName()">Done</button>
91-
</div>
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>
9287
</div>
9388

9489
<!-- Dashboard -->
95-
<div id="dashboard" class="container fade" style="display:none;">
96-
<h2 id="greeting"></h2>
97-
<p>Welcome to your dashboard 🚀</p>
90+
<div id="dashboard">
91+
<h2>🎮 Your White Dashboard (Game area)</h2>
9892
</div>
9993

10094
<script>
101-
const welcome = document.getElementById("welcome");
102-
const nameScreen = document.getElementById("nameScreen");
103-
const dashboard = document.getElementById("dashboard");
104-
const greeting = document.getElementById("greeting");
105-
const nameInput = document.getElementById("nameInput");
106-
107-
// Agar user pehle se name save kar chuka hai
108-
window.onload = () => {
109-
const savedName = localStorage.getItem("username");
110-
if (savedName) {
111-
showDashboard(savedName);
112-
}
113-
};
114-
115-
function goToName() {
116-
fadeOut(welcome, () => {
117-
nameScreen.style.display = "block";
118-
fadeIn(nameScreen);
119-
});
120-
}
95+
function showWelcome() {
96+
let name = document.getElementById("username").value;
97+
if (name.trim() === "") name = "User";
12198

122-
function saveName() {
123-
const name = nameInput.value.trim();
124-
if (name) {
125-
localStorage.setItem("username", name);
126-
fadeOut(nameScreen, () => {
127-
showDashboard(name);
128-
});
129-
} else {
130-
alert("Please enter your name 🙂");
131-
}
132-
}
133-
134-
function showDashboard(name) {
135-
greeting.textContent = `Hello, ${name}!`;
136-
dashboard.style.display = "block";
137-
fadeIn(dashboard);
138-
}
99+
document.getElementById("nameInputBox").style.display = "none";
100+
document.getElementById("welcomeScreen").style.display = "block";
139101

140-
// Animation helpers
141-
function fadeOut(element, callback) {
142-
element.classList.remove("show");
143-
setTimeout(() => {
144-
element.style.display = "none";
145-
if (callback) callback();
146-
}, 1000); // 1s = same as CSS transition
102+
document.getElementById("greeting").innerText = `Hello, ${name}!`;
147103
}
148104

149-
function fadeIn(element) {
150-
setTimeout(() => {
151-
element.classList.add("show");
152-
}, 50);
105+
function openDashboard() {
106+
document.getElementById("welcomeScreen").style.display = "none";
107+
document.getElementById("dashboard").style.display = "flex";
153108
}
154109
</script>
110+
155111
</body>
156112
</html>

0 commit comments

Comments
 (0)