Copy base from mistoxwebsite

2025-07-13 19:04:43 -07:00
parent a0e106c2bc
commit 22a30933ca
103 changed files with 13926 additions and 457 deletions
@@ -0,0 +1,179 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8" />
+        <title>Stripe-Payments</title>
+        <script src="https://js.stripe.com/v3/"></script>
+        <style>
+
+            #submit {
+                width: 200px;
+                height: 40px;
+                margin-left: calc(50% - 100px);
+                margin-top: 30px;
+                color: #fff;
+                background-color: #393;
+                font-size: 16px;
+                text-decoration: none;
+                text-transform: uppercase;
+                overflow: hidden;
+                transition: .5s;
+                letter-spacing: 4px;
+                border: 1px solid #8F7CEC;
+            }
+
+                #submit:hover {
+                    background: #353;
+                    color: #fff;
+                    border-radius: 5px;
+                    border-color: #353;
+
+                }
+        </style>
+    </head>
+    <body>
+
+        <form id="payment-form">
+            <div id="link-authentication-element">
+                <!--Stripe.js injects the Link Authentication Element-->
+            </div>
+            <div id="payment-element">
+                <!--Stripe.js injects the Payment Element-->
+            </div>
+            <button id="submit">
+                <div class="spinner hidden" id="spinner"></div>
+                <span id="button-text">Pay now</span>
+            </button>
+            <div id="payment-message" class="hidden"></div>
+        </form>
+
+        <script>
+            // This is your test publishable API key.
+            const stripe = Stripe('pk_live_51LBODxCozZzTNCNhFdVbzm93F1N3Kk5sEiOyUYeU8GlqxF8AkS6h1JOkIqmFJ1hBmkBCEEa8cfBCY7RotHlweS7g00UzyxkUnO');
+
+            let elements;
+
+            initialize();
+            checkStatus();
+
+            document.querySelector("#payment-form").addEventListener("submit", handleSubmit);
+
+            let emailAddress = '';
+
+            // Fetches a payment intent and captures the client secret
+            async function initialize() {
+
+                const response = await fetch("/api/getCheckoutToken?userID=" + new URL(window.location.href).searchParams.get("userID"), {
+                    method: "POST",
+                    headers: { "Content-Type": "text/plain" },
+                    body: ""
+                });
+
+                const clientSecret = await response.text();
+
+                const appearance = {
+                    theme: 'night',
+                };
+                elements = stripe.elements({ appearance, clientSecret });
+
+                const linkAuthenticationElement = elements.create("linkAuthentication");
+                linkAuthenticationElement.mount("#link-authentication-element");
+
+                linkAuthenticationElement.on('change', (event) => {
+                    emailAddress = event.value.email;
+                });
+
+                const paymentElementOptions = {
+                    layout: "tabs",
+                };
+
+                const paymentElement = elements.create("payment", paymentElementOptions);
+                paymentElement.mount("#payment-element");
+            }
+
+            async function handleSubmit(e) {
+                e.preventDefault();
+                setLoading(true);
+
+                const { error } = await stripe.confirmPayment({
+                    elements,
+                    confirmParams: {
+                        // Make sure to change this to your payment completion page
+                        return_url: "https://mistox.net/store/payment/success",
+                        receipt_email: emailAddress,
+                    },
+                });
+
+                // This point will only be reached if there is an immediate error when
+                // confirming the payment. Otherwise, your customer will be redirected to
+                // your `return_url`. For some payment methods like iDEAL, your customer will
+                // be redirected to an intermediate site first to authorize the payment, then
+                // redirected to the `return_url`.
+                if (error.type === "card_error" || error.type === "validation_error") {
+                    showMessage(error.message);
+                } else {
+                    showMessage("An unexpected error occurred.");
+                }
+
+                setLoading(false);
+            }
+
+            // Fetches the payment intent status after payment submission
+            async function checkStatus() {
+                const clientSecret = new URLSearchParams(window.location.search).get(
+                    "payment_intent_client_secret"
+                );
+
+                if (!clientSecret) {
+                    return;
+                }
+
+                const { paymentIntent } = await stripe.retrievePaymentIntent(clientSecret);
+
+                switch (paymentIntent.status) {
+                    case "succeeded":
+                        showMessage("Payment succeeded!");
+                        break;
+                    case "processing":
+                        showMessage("Your payment is processing.");
+                        break;
+                    case "requires_payment_method":
+                        showMessage("Your payment was not successful, please try again.");
+                        break;
+                    default:
+                        showMessage("Something went wrong.");
+                        break;
+                }
+            }
+
+            // ------- UI helpers -------
+
+            function showMessage(messageText) {
+                const messageContainer = document.querySelector("#payment-message");
+
+                messageContainer.classList.remove("hidden");
+                messageContainer.textContent = messageText;
+
+                setTimeout(function () {
+                    messageContainer.classList.add("hidden");
+                    messageText.textContent = "";
+                }, 4000);
+            }
+
+            // Show a spinner on payment submission
+            function setLoading(isLoading) {
+                if (isLoading) {
+                    // Disable the button and show a spinner
+                    document.querySelector("#submit").disabled = true;
+                    document.querySelector("#spinner").classList.remove("hidden");
+                    document.querySelector("#button-text").classList.add("hidden");
+                } else {
+                    document.querySelector("#submit").disabled = false;
+                    document.querySelector("#spinner").classList.add("hidden");
+                    document.querySelector("#button-text").classList.remove("hidden");
+                }
+            }
+
+        </script>
+    </body>
+</html>
@@ -0,0 +1,192 @@
+<html>
+    <head>
+        <title>HTML_Snake</title>
+    </head>
+
+    <body onkeydown='return keyDown(event)'; style="background-color: #333;">
+        <h1 id="Score" style="width: 100%; text-align: center; color:#fff;">Score : 0</h1>
+        <div id="BODY" style="position: relative; margin-bottom: 5px; margin-left: 50%; right: 300px; background-color: #666; width: 600px; height: 600px;">
+        <script>
+            var snake = [];
+            var score = 0;
+            var posX = 12;
+            var posY = 15;
+            var colX, colY;
+            var saves = "";
+            var paused = false;
+            var direction = 2;
+            var wasCollected = false;
+            var body = document.getElementById("BODY");
+
+            function set(name,value) {
+                var expires = "";
+                var date = new Date();
+                date.setTime(date.getTime() + (9999*24*60*60*1000));
+                expires = "; expires=" + date.toUTCString();
+                document.cookie = name + "=" + (value || "")  + expires + "; path=/";
+            }
+
+            function get(name) {
+                var nameEQ = name + "=";
+                var ca = document.cookie.split(';');
+                for(var i=0;i < ca.length;i++) {
+                    var c = ca[i];
+                    while (c.charAt(0)==' ') c = c.substring(1,c.length);
+                    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
+                }
+                return null;
+            }
+
+
+            function hsl2rgb(h,s,l) {
+              let a=s*Math.min(l,1-l);
+              let f= (n,k=(n+h/30)%12) => l - a*Math.max(Math.min(k-3,9-k,1),-1);                
+              return [f(0),f(8),f(4)];
+            }
+
+            var degree = 0;
+            function newTail(x, y){
+                degree += 5;
+                if(degree > 359){
+                    degree = 0;
+                }
+
+                var color = hsl2rgb(degree, .6, .5);
+                var r = Math.floor(color[0] * 255).toString(16);
+                var g = Math.floor(color[1] * 255).toString(16);
+                var b = Math.floor(color[2] * 255).toString(16);
+
+                var nX = (10*x)-10;
+                var nY = (10*y)-10;
+                var id = x + "," + y;
+                if (x == colX){
+                    if (y == colY){
+                        var item = document.getElementById("collectable");
+                        item.parentNode.removeChild(item);
+                        wasCollected = true;
+                        newCollectable();
+                        score += 1;
+                        document.getElementById("Score").innerHTML = "Score : " + score;
+                    }
+                }
+
+                body.innerHTML = body.innerHTML + "<div id='" + id + "'; style='position: absolute; left: " + nX + "px; top:" + nY + "px; width: 10px; height: 10px; background-color: #" + r+g+b + "; border: 0; padding: 0; margin: 0;'></div>";
+                return id;
+            }
+
+            function randInt(min, max) {
+              min = Math.ceil(min);
+              max = Math.floor(max);
+              return Math.floor(Math.random() * (max - min + 1)) + min;
+            }
+
+            function newCollectable(){
+            colX = randInt(1, 59);
+            colY = randInt(1, 59);
+            body.innerHTML = body.innerHTML + "<div id='collectable'; style='position: absolute; left: " + (colX*10-10) + "px; top:" + (colY*10-10) + "px; width: 10px; height: 10px; background-color: #f00; border: 0; padding: 0; margin: 0;'></div>";
+            }
+
+            function isBound(x, y){
+            if (x > 0 && x < 61){
+            if (y > 0 && y < 61){
+            return true;
+            }
+            }
+            return false;
+            }
+
+            function die(){
+            set("data", saves + "|" + score );
+            location.reload();
+            }
+
+            function update(){
+                if (paused == false){
+                    if (direction == 1){
+                        posY -= 1;
+                    }else if(direction == 2){
+                        posX += 1;
+                    }else if(direction == 3){
+                        posY += 1;
+                    }else if(direction == 4){
+                        posX -= 1;
+                    }
+                    if (isBound(posX, posY)){
+                        function func(item, index, arr){
+                            var x = item.split(",")[0];
+                            var y = item.split(",")[1];
+                            if(posX == x){
+                                if(posY == y){
+                                    die();
+                                }
+                            }
+                        }
+                        snake.forEach(func);
+
+                        snake.push(newTail(posX, posY));
+                        if(wasCollected == false){
+                            var rem = snake.shift();
+                            var remObj = document.getElementById(rem);
+                            remObj.parentNode.removeChild(remObj);
+                        }else{
+                            wasCollected = false;
+                        }
+                    }else{
+                        die();
+                    }
+                }
+            }
+
+            function keyDown(event){
+            if (event.key == "w"){
+            direction = 1;
+            }else if(event.key == "d"){
+            direction = 2;
+            }else if(event.key == "s"){
+            direction = 3;
+            }else if(event.key == "a"){
+            direction = 4;
+            }else if(event.key == "p"){
+            if (paused == true){
+            paused = false;
+            document.getElementById("PauseScreen").style.display = "none";
+            }else{
+            paused = true;
+            document.getElementById("PauseScreen").style.display = "";
+            }
+            }
+            }
+
+            function loadLeaderboard(){
+            if (get("data") != null){
+            saves = get("data");
+            function func(item, index, arr){
+            document.getElementById("Scoreboard").innerHTML += '<div><h2 id="' + item + '"; style="text-align: center; font-size: 20px; padding: 0; margin: 0; border: 0;">' + item.toString() + '</h2></div>';
+            }
+            saves.split("|").forEach(func);
+            }
+            }
+
+            function start(){
+                newCollectable();
+                snake.push(newTail(10, 15));
+                snake.push(newTail(11, 15));
+                snake.push(newTail(12, 15));
+                setTimeout(loadLeaderboard, 100);
+                setInterval(update, 100);
+            }
+
+            start();
+        </script>
+    </div>
+    <div id="PauseScreen"style="position: relative; display: none; width: 500px; margin-left: 50%; right: 250px;">
+        <h2 style="text-align: center; color: #f00; ">Game Paused</h2>
+    </div>
+    <div style="margin: 0 40px; width: calc(100% - 80px); background-color: #777;">
+        <h3 style="text-align: center; font-size: 25px; color: #0f0; padding: 0; margin: 0; border: 0;">LEADERBOARD</h3>
+    </div>
+    <hr style="margin: 0px; width:calc(100% - 82px);" />
+    <div id="Scoreboard" style="margin: 0 40px; width: calc(100% - 80px); background-color: #777;"></div>
+    <h3 style="position: absolute; right: 10px; bottom: 3px; color: #fff;">Designed by Derek in California</h3>
+    </body>
+</html>