Universe-Splitter-Webapp/index.html at main · tmnahum/Universe-Splitter-Webapp · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="apple-touch-icon" sizes="180x180" href="/images/icons/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/images/icons/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/images/icons/favicon-16x16.png">
    <link rel="mask-icon" href="/images/icons/safari-pinned-tab.svg" color="#5bbad5">
    <link rel="shortcut icon" href="/images/icons/favicon.ico">
    <meta name="msapplication-TileColor" content="#ffc40d">
    <meta name="msapplication-config" content="/images/icons/browserconfig.xml">
    <meta name="theme-color" content="#35235e">


    <title>Universe Splitter Webapp</title>
    <link rel="manifest" href="./manifest.json">

    <meta name="title" content="Universe Splitter Webapp">
    <meta name="description" content="Free Universe Splitter Online. Split the universe with a quantum random number generator. Soon to have multiple splitting sources.
    (PWA: works on android, iphone, and the web)">
    <meta name="keywords" content="Universe Splitter Online, Universe Splitter Unofficial, Universe Splitter Free, Quantum random number generator, coin flip simulator, decision maker, Universe Splitter app, universe splitter android app, universe spliter, younivers spliter, universe splitting app, open source projects, progressive web app, frontend, vanilla js, apis, online tools, Universe Splitter Free Online">
    <!-- ^Im just guessing at that mostly it probably doesnt even do anything lol -->
    <!-- Needs to be on the page for google to look at it I think -->

    <!-- Umami analytics -->
    <script defer src="https://msgu.ttools.io/script.js" data-website-id="a1d60aa5-ef0b-4b65-aa86-2bcaed350e9d"></script>


    <!-- Theme detection, blocks rest of page loading until this is run -->
    <script>
        function getInitialPreferredThemeAndUpdateLocalStorage(){
            const systemPreferredThemeIsDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
            if (systemPreferredThemeIsDark){
                localStorage.setItem("preferred_theme", "dark")
                return "dark"
            }
            localStorage.setItem("preferred_theme", "light")
            return "light"
        }

        const preferredTheme = localStorage.getItem("preferred_theme")
                               || getInitialPreferredThemeAndUpdateLocalStorage()

        console.log("HI1", preferredTheme)
        document.documentElement.dataset.theme = preferredTheme

        //need to load with no transition to load right 100% of time on firefox (only tested on chromium & firefox)
        window.addEventListener("load", () => {
            document.body.classList.remove("no-transition")
        })
    </script>
    <script src="themeButton.js" defer></script>

    <link rel="stylesheet" href="style.css">
    <script src="./script.js" defer></script>

</head>


<body class="no-transition">
    <script>
        window.addEventListener("load", () => {
            document.body.classList.remove("no-transition")
        })
    </script>

    <div id="theme-toggle">

        <button id="light-button">
            <p>L</p>
        </button>

        <button id="dark-button">
            <p>D</p>
        </button>
    </div>


    <div id="main-div">
        <header>
            <h1 id="title">Universe Splitter</h1>
        </header>

        <!-- Should this be a form for accessability or other reason? -->
        <form class="button-and-slider-container container">
            <div class="main-button-container">
                <button class="main-button"
                aria-label="Split Universe"
                data-umami-event="click split universe button"
                >
                    <p>
                        Split Universe
                    </p>
                </button>
                <span class="loading-image-container">
                    <img class="loading-image"
                    src="./Spinner-1s-200px.gif" alt="">
                    <!-- ^Slow? -->
                </span>
            </div>

            <div class="slider-container">
                <input class="slider" type="range" min="1" max="10" value="2"
                aria-label="Number of Universes Slider" data-umami-event="number-unierses-slider">
                <p>
                    <span class="num-universes-display"> 2 </span>
                </p>
            </div>
        </form>

        <ul class="output-area container">
            <li></li>
        </ul>


    </div>
    <!-- TODO: add server select somewhere -->
    <!-- <div class="footer-box container">
        <div>Hello</div>
    </div> -->
    <footer class="footer  footer-box container">
        <a href="https://cheapuniverses.com/">
            Inspired By
        </a>
        <a href="./explanation">Explanation</a> <!-- Currently no .html because cloudflare removes the .html and the caching conflicts with it's auto redirection, leading the .html link to be broken-->
        <!-- <select name="server-select" id="server-select">
            <option value="test">WIP</option>
            <option value="test2">ANU old</option>
            <option value="test2">Work In Progress</option>
        </select> -->
        <!-- <a href="" onclick="alert('Coming Soon')">Install PWA</a> -->
        <a href="https://github.com/tomernahum/Universe-Splitter-Webapp"> <!--TODO: replace with this projects repo-->
            Source Code
            <!-- Maybe when you hover it could say "Star Me!" -->
        </a>
        <a href="mailto: contact@ttools.io">Email</a>
        <!-- Todo: replace with "submit feedback" and open menu with link to github issues and to email -->
        <!-- <a href="">Test</a> -->
        <!--  <div>LM</div> -->
    </footer>

</body>
</html>