<html>

    <head>

        <meta charset="utf-8">

        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <meta name="viewport" content="width=device-width,initial-scale=1">

        <title>Elsnoir: Quest for the Forgotten Love</title>

        <meta name="description" content="Join Elsa Nox in her quest to discover the mysterious girl that the idol Sonder Yone imprinted with.">

        <meta name="keywords" content="Otome Game, Gacha, Elsnoir, Elsa Nox, Sonder Yone, Magical Realm, Prohyas Finch, Ardy, Kyree Marcus">



        <link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Open+Sans:wght@300&display=swap" rel="stylesheet">



        <style>

            body {

                background: linear-gradient(to right, #6a11cb 0%, #2575fc 100%);

                font-family: 'Open Sans', sans-serif;

            }

            

            h1 {

                font-family: 'Abril Fatface', cursive;

                color: #fff;

                text-align: center;

                padding-top: 20px;

            }



            #main-container {

                display: grid;

                grid-template-columns: repeat(4, 1fr);

                grid-gap: 10px;

                padding: 10px;

                color: #fff;

            }



            .character-card {

                background: rgba(255, 255, 255, 0.1);

                border-radius: 10px;

                padding: 10px;

                text-align: center;

                transition: all 0.3s ease;

            }



            .character-card:hover {

                transform: scale(1.05);

                background: rgba(255, 255, 255, 0.3);

            }



            .character-card img {

                width: 100%;

                border-radius: 50%;

            }



            .character-card h2 {

                color: #fff;

                font-size: 24px;

                margin: 10px 0;

            }

            

            .character-card p {

                font-size: 16px;

            }

        </style>

    </head>

    <body>

        <h1>Elsnoir: Quest for the Forgotten Love</h1>

        <div id="main-container" class="container">

            <!-- App HTML Goes Here -->

        </div>



        <script>

            document.addEventListener("DOMContentLoaded", function() {

                var characters = [

                    {

                        name: "Prohyas Finch",

                        description: "A prodigy warlock and Sonder's best friend. Cool personality. Red hair, blue eyes.",

                        image: "https://via.placeholder.com/150/FF0000/FFFFFF?text=🧑‍🦰"

                    },

                    {

                        name: "Ardy",

                        description: "Sonder's Shadow and loyal servant. Black hair, monocle, yellow eyes. A bit of a masochist.",

                        image: "https://via.placeholder.com/150/000000/FFFFFF?text=🕶️"

                    },

                    {

                        name: "Kyree Marcus",

                        description: "The son of the chief of the magical index police. Righteous and good. Blonde hair, green eyes.",

                        image: "https://via.placeholder.com/150/FFFF00/FFFFFF?text=👱"

                    },

                    {

                        name: "Sonder Yone",

                        description: "The idol of the magical realm. A bit of a tsundere. Pink hair, purple eyes.",

                        image: "https://via.placeholder.com/150/FFC0CB/800080?text=🎤"

                    }

                ];



                var container = document.getElementById("main-container");



                characters.forEach(function(character) {

                    var card = document.createElement("div");

                    card.className = "character-card";

                    

                    var img = document.createElement("img");

                    img.src = character.image;

                    

                    var h2 = document.createElement("h2");

                    h2.textContent = character.name;

                    

                    var p = document.createElement("p");

                    p.textContent = character.description;



                    card.appendChild(img);

                    card.appendChild(h2);

                    card.appendChild(p);



                    container.appendChild(card);

                });

            });

        </script>

    </body>

</html>