harupios/index.html

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>HarupiOS</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/booklist.js"></script>
</head>
<body>
    <main>
        <div id="topbar-div">
            <h4 id="harupios-btn" class="btn">HarupiOS</h4>

            <p id="date-and-time"></p>
            
            <p id="notif-btn" class="btn">🔔</p>
        </div>

        <div id="dock-div">
            <img src="images/me.png" alt="My profile picture" id="welcome-div-open" class="btn">
            <p id="booklist-div-open" class="dock-icon btn closed">📚️</p>
            <p id="about-me-div-open" class="dock-icon btn closed">📃</p>
            <p id="super-secret-pong-div-open" class="dock-icon btn hidden">🏓</p>
        </div>
    
        <div id="welcome-div" class="draggable">
            <span id="welcome-div-header" class="header">
                <img src="images/me.png" alt="My profile picture" class="logo">
                <p>Welcome window</p>
                <p id="welcome-div-close" class="btn">⨯</p>
            </span>

            <h1>Welcome to my personal OS</h1>

            <h2>Introduction</h2>

            <p>
                Welcome to my OS-looking portfolio.<br>
                On this website, you can learn about me with an original interface.<br>
                This website was made during the <a href="https://stardance.hackclub.com/home" target="_blank">Stardance hackclub event</a> using <a href="https://jams.hackclub.com/batch/webOS/" target="_blank">this walkthrough</a>.
            </p>

            <figure>
                <img src="images/me.png" alt="My profile picture">
                <figcaption>Drawing by <a href="https://www.instagram.com/wawell__/" target="_blank">Wawel</a></figcaption>
            </figure>

            <p>This website is <a href="https://github.com/Hvrnbi/harupios">open-source</a>.</p>
        </div>

        <div id="booklist-div" class="draggable hidden">
            <span id="booklist-div-header" class="header">
                <p id="booklist-div-icon">📚️</p>
                <p>Book list</p>
                <p id="booklist-div-close" class="btn">⨯</p>
            </span>

            <h4>A list of the last books I've read</h4>

            <section id="current-book">
                <p id="next-book-btn" class="btn">←</p>
                <h4 id="current-book-title"></h4>
                <section id="current-book-metadata">
                    <h6 id="current-book-author"></h6>
                    <h6 id="current-book-end-date"></h6>
                    <h6 id="current-book-publication-date"></h6>
                </section>
                <p id="current-book-comments"></p>
                <p id="previous-book-btn" class="btn">→</p>
            </section>
        </div>

        <div id="about-me-div" class="draggable hidden">
            <span id="about-me-div-header" class="header">
                <p id="about-me-div-icon">📃</p>
                <p>About me</p>
                <p id="about-me-div-close" class="btn">⨯</p>
            </span>
            <h4>About me</h4>
            <p>Hello ! I'm Harupi, a french student in computer sciences.<br>
            I don't really know what to tell about me, but you can find some links to my differents profiles on Internet just below.<br>
            Have a nice day !
            </p>
            <p>
                <a href="https://github.com/Hvrnbi" target="_blank">Github</a><br>
                <a href="https://twitch.tv/hvrupi" target="_blank">Twitch</a><br>
                <a href="https://discord.gg/y4v6XHYPfB" target="_blank">Discord</a><br>
                <a href="https://artfight.net/~Hvrupi" target="_blank">Artfight</a>
                <a href="https://bsky.app/profile/hvrupi.bsky.social" target="_blank">Bluesky</a><br>
                <a href="mailto:hvrupi@proton.me" target="_blank">E-mail</a>
            </p>
        </div>
        <div id="super-secret-pong-div" class="draggable hidden">
            <span id="super-secret-pong-div-header" class="header">
                <p id="super-secret-pong-div-icon">🏓</p>
                <p>Super secret Pong</p>
                <p id="super-secret-pong-div-close" class="btn">⨯</p>
            </span>
            <h4>Welcome to the super secret Pong !</h4>
            <p>Play with ↑ and ↓</p>
            <p id="super-secret-pong-start" class="btn"><b>Start</b></p>
            <section id="super-secret-pong-game">
                <section id="super-secret-pong-score">0</section>
                <section id="super-secret-pong-left-paddle" class="super-secret-pong-paddle"></section>
                <section id="super-secret-pong-right-paddle" class="super-secret-pong-paddle"></section>
                <section id="super-secret-pong-ball"></section>
            </section>
        </div>
    </main>
    <script src="js/script.js"></script>
</body>
</html>