HTMLify

index.html
Views: 524 | Author: abh
<!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>
HTMLify

Share this file:
