From af1d175775ab7d953a10a16fd9de80ef6ce1ebd6 Mon Sep 17 00:00:00 2001
From: kefreyinem-byte <kefrey.inem@gmail.com>
Date: Thu, 8 Jan 2026 12:30:37 +0100
Subject: [PATCH]  index.html

---
 index.html | 506 ++++-------------------------------------------------
 1 file changed, 37 insertions(+), 469 deletions(-)

diff --git a/index.html b/index.html
index b1a5998..483e353 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <title>One HTML Page Challenge</title>
-        <meta name="description" content="Create anything you want within 1 single HTML file. Practice your skills with the barebones of web development. How creative can you be with such restrictions?" />
+        <meta name="description" content="A simple guessing game between you and the computer" />
         <meta name="robots" content="index, follow" />
 
         <!-- Preload assets -->
@@ -16,494 +16,62 @@
 
         <meta property="og:title" content="One HTML Page Challenge" />
 
-        <style>
-            * {
-                box-sizing: border-box;
-            }
-
-            body {
-                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-                line-height: 1.5;
-                color: #212529;
-                background: repeating-linear-gradient(45deg, #000000, #1e1e1e 10px, #15191d 10px, #15191d 20px);
-                margin: 0;
-                padding: 0;
-            }
-
-            .container {
-                width: 100%;
-                max-width: 1140px;
-                margin: 15px auto;
-                padding: 0 15px;
-            }
-
-            .card {
-                background-color: #fff;
-                border: 1px solid rgba(0, 0, 0, 0.125);
-                border-radius: 0.25rem;
-                box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
-                margin-bottom: 1rem;
-            }
-
-            .card-body {
-                padding: 1.25rem;
-            }
-
-            .jumbotron {
-                text-align: center;
-                padding: 2rem 1rem;
-                margin-bottom: 2rem;
-                background-color: #e9ecef;
-                border-radius: 0.25rem;
-            }
-
-            .logo {
-                max-width: 70%;
-                height: auto;
-            }
-
-            .my-4 {
-                margin-top: 1.5rem;
-                margin-bottom: 1.5rem;
-            }
-
-            .btn {
-                display: inline-block;
-                font-weight: 400;
-                text-align: center;
-                vertical-align: middle;
-                user-select: none;
-                border: 1px solid transparent;
-                padding: 0.375rem 0.75rem;
-                font-size: 1rem;
-                line-height: 1.5;
-                border-radius: 0.25rem;
-                transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-                cursor: pointer;
-                text-decoration: none;
-                margin: 0.125rem;
-            }
-
-            .btn:hover {
-                text-decoration: none;
-            }
-
-            .btn-primary {
-                color: #fff;
-                background-color: #007bff;
-                border-color: #007bff;
-            }
-
-            .btn-primary:hover {
-                color: #fff;
-                background-color: #0056b3;
-                border-color: #004085;
-            }
-
-            .btn-secondary {
-                color: #fff;
-                background-color: #6c757d;
-                border-color: #6c757d;
-            }
-
-            .btn-secondary:hover {
-                color: #fff;
-                background-color: #545b62;
-                border-color: #4e555b;
-            }
-
-            .btn-success {
-                color: #ffffff;
-                background-color: hotpink;
-                border-color: hotpink;
-            }
-
-            .btn-success:hover,
-            .btn-success:focus,
-            .btn-success:active,
-            .btn-success.active {
-                color: #ffffff;
-                background-color: deeppink;
-                border-color: deeppink;
-            }
-
-            .btn-lg {
-                padding: 0.5rem 1rem;
-                font-size: 1.25rem;
-                line-height: 1.5;
-                border-radius: 0.3rem;
-            }
-
-            .btn-md {
-                padding: 0.375rem 0.75rem;
-                font-size: 1rem;
-                line-height: 1.5;
-                border-radius: 0.25rem;
-            }
-
-            .input-group {
-                position: relative;
-                display: flex;
-                flex-wrap: wrap;
-                align-items: stretch;
-                width: 100%;
-                margin-bottom: 1rem;
-            }
-
-            .flex-nowrap {
-                flex-wrap: nowrap;
-            }
-
-            .form-control {
-                display: block;
-                width: 100%;
-                padding: 0.375rem 0.75rem;
-                font-size: 1rem;
-                line-height: 1.5;
-                color: #495057;
-                background-color: #fff;
-                background-clip: padding-box;
-                border: 1px solid #ced4da;
-                border-radius: 0.25rem;
-                transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-                flex: 1 1 auto;
-                margin: 0;
-            }
-
-            .form-control:focus {
-                color: #495057;
-                background-color: #fff;
-                border-color: #80bdff;
-                outline: 0;
-                box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
-            }
-
-            .input-group-append {
-                display: flex;
-                margin-left: -1px;
-            }
-
-            .input-group-text {
-                display: flex;
-                align-items: center;
-                padding: 0.375rem 0.75rem;
-                margin-bottom: 0;
-                font-size: 1rem;
-                font-weight: 400;
-                line-height: 1.5;
-                color: #495057;
-                text-align: center;
-                white-space: nowrap;
-                background-color: #e9ecef;
-                border: 1px solid #ced4da;
-                border-radius: 0.25rem;
-                border-top-left-radius: 0;
-                border-bottom-left-radius: 0;
-            }
-
-            .card-title {
-                margin-bottom: 0.75rem;
-                font-size: 1.25rem;
-                font-weight: 500;
-                line-height: 1.2;
-                color: inherit;
-            }
-
-            .card-subtitle {
-                margin-top: -0.375rem;
-                margin-bottom: 0;
-                font-size: 0.875rem;
-                color: #6c757d;
-            }
-
-            .mb-2 {
-                margin-bottom: 0.5rem;
-            }
-
-            .text-muted {
-                color: #6c757d;
-            }
-
-            .card-text {
-                margin-bottom: 1rem;
-                line-height: 1.5;
-            }
-
-            .card-text:nth-of-type(2)::before {
-                display: inline-block;
-                content: "Supported in:";
-                margin-right: 0.5em;
-            }
-
-            .btn-toolbar {
-                display: flex;
-                flex-wrap: wrap;
-                justify-content: flex-start;
-                margin: -0.125rem;
-            }
-
-            .btn-group {
-                position: relative;
-                display: inline-flex;
-                vertical-align: middle;
-                margin: 0.125rem;
-            }
-
-            .mr-2 {
-                margin-right: 0.5rem;
-            }
-
-            hr {
-                margin-top: 1rem;
-                margin-bottom: 1rem;
-                border: 0;
-                border-top: 1px solid rgba(0, 0, 0, 0.1);
-            }
-
-            h5 {
-                margin-top: 0;
-                margin-bottom: 0.5rem;
-                font-weight: 500;
-                line-height: 1.2;
-                font-size: 1.25rem;
-            }
-
-            h6 {
-                margin-top: 0;
-                margin-bottom: 0.5rem;
-                font-weight: 500;
-                line-height: 1.2;
-                font-size: 1rem;
-            }
-
-            p {
-                margin-top: 0;
-                margin-bottom: 1rem;
-            }
-
-            a {
-                color: #007bff;
-                text-decoration: none;
-                background-color: transparent;
-            }
-
-            a:hover {
-                color: #0056b3;
-                text-decoration: underline;
-            }
-
-            /* Responsive design */
-            @media (max-width: 576px) {
-                .container {
-                    max-width: 540px;
-                }
-                
-                .btn-lg {
-                    font-size: 1.1rem;
-                    padding: 0.4rem 0.8rem;
-                }
-                
-                .jumbotron {
-                    padding: 1rem 0.5rem;
-                }
-            }
-
-            @media (max-width: 768px) {
-                .container {
-                    max-width: 720px;
-                }
-                
-                .btn-toolbar {
-                    flex-direction: column;
-                }
-                
-                .btn-group {
-                    margin-bottom: 0.5rem;
-                }
-            }
-
-            @media (max-width: 992px) {
-                .container {
-                    max-width: 960px;
-                }
-            }
-
-            @media (max-width: 1200px) {
-                .container {
-                    max-width: 1140px;
-                }
-            }
-        </style>
     </head>
     <body>
-        <div class="container">
-            <div class="card">
-                <div class="card-body">
-                    <div class="jumbotron">
-                        <img src="./one-html-page-logo.png" width="2404" height="1582" alt="One Html Page Challenge" fetchpriority="high" class="logo" />
-                        <hr class="my-4" />
-                        <p>
-                            The goal is to create anything you want within 1 single html file. Practice your skills with no assistance from libraries, no separation of files, and no assistance of a modern framework.
-                            <b>How creative can you be with such restrictions?</b>
-                        </p>
-                        <a class="btn btn-primary btn-lg" href="https://github.com/Metroxe/one-html-page-challenge/blob/master/README.md#how-to-submit" role="button" target="_blank">Submit an Entry</a>
-                        <a class="btn btn-primary btn-lg" href="https://github.com/Metroxe/one-html-page-challenge" role="button" target="_blank">Github</a>
-
-                    </div>
-                    <div class="input-group flex-nowrap">
-                        <input type="text" class="form-control" placeholder="Search" aria-label="Search" aria-describedby="addon-wrapping" id="search" oninput="searchOnInput()" />
-                        <div class="input-group-append">
-                            <span class="input-group-text" id="addon-wrapping">🔍</span>
-                        </div>
-                    </div>
-                    <div id="list"></div>
-                </div>
-            </div>
-        </div>
 
-        <script src="./entries.js"></script>
-        <script>
-            // sort based on title
-            const sortedEntries = entries.sort((a, b) => (a.title > b.title ? 1 : b.title > a.title ? -1 : 0));
+        <p>How many fingers are you holding up?</p>
 
-            // create initial list
-            searchOnInput();
+        <p>
+            <select id="myNumber">
+                <option>0</option>
 
-            function searchOnInput() {
-                //get elements
-                const filter = document.getElementById("search").value.toLowerCase();
-                const list = document.getElementById("list");
+                <option>1</option>
 
-                // remove children
-                while (list.firstChild) {
-                    list.removeChild(list.firstChild);
-                }
-
-                // filter list
-                const filteredEntries = sortedEntries.filter((entry) => {
-                    let key;
-                    for (key in entry) {
-                        if (entry.hasOwnProperty(key)) {
-                            const prop = entry[key];
-                            if (typeof prop === "string" && prop.toLowerCase().includes(filter)) {
-                                return true;
-                            }
-                        }
-                    }
-                    return false;
-                });
+                <option>2</option>
 
-                // create list
-                filteredEntries.forEach(({ title, description, filename, github, author, compatibleBrowsers, sponsored }) => {
-                    // horizontal rule
-                    const hr = document.createElement("hr");
-                    list.appendChild(hr);
+                <option>3</option>
 
-                    const card = document.createElement("div");
-                    card.className = "card";
+                <option>4</option>
 
-                    const body = document.createElement("div");
-                    body.className = "card-body";
-                    card.appendChild(body);
+                <option>5</option>
+            </select>
 
-                    // title
-                    const cardTitle = document.createElement("h5");
-                    const cardTitleNode = document.createTextNode(title);
-                    cardTitle.className = "card-title";
-                    cardTitle.appendChild(cardTitleNode);
-                    body.appendChild(cardTitle);
+            <button id="guess">Guess!</button>
+        </p>
 
-                    // author
-                    if (author) {
-                        const authorSubtitle = document.createElement("h6");
-                        const authorSubtitleNode = document.createTextNode(author);
-                        authorSubtitle.className = "card-subtitle mb-2 text-muted";
-                        authorSubtitle.appendChild(authorSubtitleNode);
+        <script type="text/javascript">
+            function doAGuess(correctAnswer) {
+                var guess = Math.random();
 
-                        // add a sponsor tag
-                        if (sponsored) {
-                            const sponsorEmoji = document.createElement("a");
-                            const sponsorEmojiNode = document.createTextNode(" ❤️");
-                            sponsorEmoji.href = "https://github.com/sponsors/Metroxe";
-                            sponsorEmoji.title = "Sponsored Submission";
-                            sponsorEmoji.appendChild(sponsorEmojiNode);
-                            authorSubtitle.appendChild(sponsorEmoji);
-                        }
+                guess = guess * 6;
 
-                        // add an owner tag for myself
-                        if (author.includes("Christopher Powroznik")) {
-                            const ownerEmoji = document.createElement("a");
-                            const ownerEmojiNode = document.createTextNode(" 👑️");
-                            ownerEmoji.href = "https://github.com/Metroxe";
-                            ownerEmoji.title = "Owner";
-                            ownerEmoji.appendChild(ownerEmojiNode);
-                            authorSubtitle.appendChild(ownerEmoji);
-                        }
+                guess = Math.floor(guess);
 
-                        body.appendChild(authorSubtitle);
-                    }
-
-                    // description
-                    if (description) {
-                        const cardDescription = document.createElement("p");
-                        const cardDescriptionNode = document.createTextNode(description);
-                        cardDescription.className = "card-text";
-                        cardDescription.appendChild(cardDescriptionNode);
-                        body.appendChild(cardDescription);
-                    }
+                if (guess == correctAnswer) {
+                    return true;
+                } else {
+                    return false;
+                }
+            }
 
-                    // browser list
-                    if (compatibleBrowsers) {
-                        const browserList = document.createElement("p");
-                        const browser = compatibleBrowsers.join(", ");
-                        const browserNameNode = document.createTextNode(browser);
-                        browserList.className = "card-text";
-                        browserList.appendChild(browserNameNode);
-                        body.appendChild(browserList);
-                    }
+            document.getElementById("guess").onclick = function () {
+                var myNumber = document.getElementById("myNumber").value;
 
-                    // toolbar
-                    const toolbar = document.createElement("div");
-                    const group1 = document.createElement("div");
-                    const group2 = document.createElement("div");
-                    toolbar.className = "btn-toolbar";
-                    group1.className = "btn-group mr-2";
-                    group2.className = "btn-group mr-2";
-                    toolbar.appendChild(group1);
-                    toolbar.appendChild(group2);
-                    body.appendChild(toolbar);
+                var gotIt = false;
 
-                    // HTML Link
-                    const linkButton = document.createElement("a");
-                    const linkButtonNode = document.createTextNode(filename);
-                    linkButton.className = "btn btn-primary btn-md";
-                    linkButton.href = `./entries/${filename}`;
-                    linkButton.appendChild(linkButtonNode);
-                    linkButton.setAttribute("target", "_blank");
-                    group1.appendChild(linkButton);
+                var numberOfGuesses = 1;
 
-                    // Source Code Link
-                    const sourceCodeButton = document.createElement("a");
-                    const sourceCodeNode = document.createTextNode("Source");
-                    sourceCodeButton.className = "btn btn-secondary btn-md";
-                    sourceCodeButton.href = `https://github.com/Metroxe/one-html-page-challenge/blob/master/entries/${filename}`;
-                    sourceCodeButton.appendChild(sourceCodeNode);
-                    sourceCodeButton.setAttribute("target", "_blank");
-                    group1.appendChild(sourceCodeButton);
+                while (gotIt == false) {
+                    if (doAGuess(myNumber) == true) {
+                        gotIt = true;
 
-                    // github button
-                    if (github) {
-                        const githubButton = document.createElement("a");
-                        const githubButtonNode = document.createTextNode("Github");
-                        githubButton.className = "btn btn-primary btn-md";
-                        githubButton.href = `https://github.com/${github}`;
-                        githubButton.appendChild(githubButtonNode);
-                        githubButton.setAttribute("target", "_blank");
-                        group2.appendChild(githubButton);
+                        alert("Got it!. It was a " + myNumber + " It took me" + numberOfGuesses + " guesses");
+                    } else {
+                        numberOfGuesses++;
                     }
-                    list.appendChild(card);
-                });
-            }
+                }
+            };
         </script>
+        
     </body>
 </html>