<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Good Mornning</title>
<style>
#treatment-gif {
width: 100%;
height: auto;
}
#tost-or-biscuit, #enjoy-the-tea, #be-here {
width: 80%;
max-width: 300px;
margin: auto;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(0, 0, 0, 0.8);
color: white;
padding: 20px;
border-radius: 10px;
z-index: 2;
}
#tost-or-biscuit button {
border: 1px dotted blue;
}
#finish-button {
width: 80%;
max-width: 300px;
margin-left: auto;
position: fixed;
top: 80%;
left: 80%;
transform: translate(-50%, -50%);
background: rgba(0, 0, 0, 0.8);
padding: 20px;
border-radius: 10px;
z-index: 2;
}
#credit-section {
background-color: #FEFEFE;
}
.credit-person {
border: 1px dotted gray;
width: 80%;
}
.credit-person > a > img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<main>
<div id="start-screen">
<h2>This will be a good morning thing</h2>
<button onclick="go_to_treatment_selection_section()">Go to treatment</button>
</div>
<div id="treatment-selection-div">
<h4>This is just an Good Mornig message</h4>
<h2>Please select your type of teartment</h2>
<select id="treatment-type">
<option value="standerd">Standerd Treatment</option>
<option value="spacial">Spacial Treatment</option>
<option value="princess">Princess Treatment</option>
</select>
<button onclick="select_treatment()">Done</button>
<p>Increase the volume for better experince</p>
</div>
<div id="treatment-div">
<img id="treatment-gif">
<div id="tost-or-biscuit">
<button onclick="tb_choose()">Tost</button> or <button onclick="tb_choose()">Biscuit</button> ?
</div>
<div id="enjoy-the-tea">
Enjoy the tea<br>
<button onclick="hide_div(enjoy_the_tea)">Okey :)</button>
</div>
<div id="finish-button">
<button onclick="go_to_credit_section()">Click when you finished</button>
</div>
<div id="be-here">
You can be here as much you like 😌<br>
<button onclick="hide_div(be_here)">Okey ;)</button>
</div>
</div>
<div id="credit-section">
<h1>Credit Section</h1>
<h2>Ummid to yahi hai ke apka princess treatment achha rha ho</h2>
<h3>ye treatment banane me yogdan rha:</h3>
<div class="credit-person">
<h4>Aman Babu Hemant</h4>
<h6>[ABH]</h6>
<a target="_blank" href="https://wa.me/919548750198">
<img src="kutta.png"><br>
</a>
<p>Pura code aur base Idea</p>
</div>
<div class="credit-person">
<h4>Himanshu</h4>
<h6>Orynxiel</h6>
<a target="_blank" href="https://wa.me/917309899025">
<img src="gentle-boy.png"><br>
</a>
<p>GIFs aur Idea extending</p>
</div>
<div class="credit-person">
<h4>Chosic.com</h4>
<p>Background Music</p>
</div>
</div>
</main>
<script>
const start_screen_div = document.getElementById("start-screen");
const treatment_selection_div = document.getElementById("treatment-selection-div");
const treatmen_div = document.getElementById("treatment-div");
const treatment_gif = document.getElementById("treatment-gif");
const tb_ask = document.getElementById("tost-or-biscuit");
const enjoy_the_tea = document.getElementById("enjoy-the-tea");
const finish_button = document.getElementById("finish-button");
const be_here = document.getElementById("be-here");
const credit_section = document.getElementById("credit-section");
const bg_music = new Audio("precious-memories-chosic.com.mp3");
var images = {};
var image_srcs = [
"tea-pour.gif",
"tea-mix.gif",
"tea-serve.gif",
"tb.gif",
"drinking-guy.jpg",
];
image_srcs.forEach(src => {
images[src] = new Image();
images[src].src = src;
})
function select_treatment() {
let selected_treatment = document.getElementById("treatment-type").value;
if (selected_treatment == "") {
alert("mohtarma treatment type bhi select kijiye");
}
if (selected_treatment != "princess") {
alert("nahi nahi, aap to princess treatment hi deserve karti hain, wahi select kijiye");
return
}
start_treatment();
}
function hide_div(div) {
div.style.display = "none";
}
function show_div(div) {
div.style.display = "block";
}
// hidding all
hide_div(treatment_selection_div);
hide_div(treatmen_div);
hide_div(tb_ask);
hide_div(enjoy_the_tea);
hide_div(finish_button);
hide_div(credit_section);
hide_div(be_here);
function go_to_treatment_selection_section() {
setTimeout(() => {
hide_div(start_screen_div);
show_div(treatment_selection_div);
}, 1000);
}
function go_to_credit_section() {
setTimeout(() => {
hide_div(treatmen_div);
show_div(credit_section);
}, 1000);
}
function start_treatment() {
hide_div(treatment_selection_div);
show_div(treatmen_div)
treatment_gif.src = images["tea-pour.gif"].src;
setTimeout(() => {
treatment_gif.src = images["tea-mix.gif"].src;
}, 3000);
setTimeout(() => {
treatment_gif.src = images["tea-serve.gif"].src;
}, 6000);
setTimeout(() => {
treatment_gif.src = images["tb.gif"].src;
setTimeout(() => {
show_div(tb_ask);
}, 1000);
}, 11000);
}
function drinkup() {
setTimeout(() => {
treatment_gif.src = images["drinking-guy.jpg"].src;
bg_music.loop = true;
bg_music.play();
setTimeout(() => {
show_div(enjoy_the_tea);
show_div(finish_button);
}, 2000);
setTimeout(() => {
show_div(be_here);
}, 200);
}, 2000);
}
function tb_choose() {
hide_div(tb_ask);
alert("cholo me dono le aya");
drinkup();
}
</script>
</body>
</html>