randomperson3465.github.io/progress.html at master · RandomPerson3465/randomperson3465.github.io · 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
<html>
    <head>
        <title>100 Years Progress Bar</title>
        <meta property="og:type" content="website">
        <meta property="og:site_name" content="RandomPerson3465.github.io">
        <meta property="og:url" content="https://randomperson3465.github.io">
        <meta property="og:description" content="RandomPerson3465's website">
        <meta name="twitter:site" content="RandomPerson3465.github.io">
        <meta name="twitter:description" content="RandomPerson3465's website">
        <meta name="twitter:url" content="https://randomperson3465.github.io">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.7/css/all.css">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext" type="text/css">
        <link class="document-theme-css" rel="stylesheet" href="/src/main.css">
        <link rel="icon" href="./img/progressbar.png">
        <link rel="stylesheet" href="/src/progress/progress.css">
    </head>
    <body>
        <div class="sidebar-menu"></div>
        <div class="top-icons"></div>
        <h2 class="title">Happy 7th anniversary, RandomPerson3465.github.io!</h1>
        <hr>
        <div class="main-content">
            <svg id="progress-container" width="98%">
                <rect id="progress-bar-background" width="100%"/>
                <rect id="progress-bar" width="0%"/>
            </svg>
            <p><strong><span id="progress-bar-progress">Loading...</span></strong>% complete • <span id="progress-time-left">Loading...</span> left</p>
            <p>Start date and time: <strong><span id="progress-start-time">Loading...</span></strong></p>
            <p>End date and time: <strong><span id="progress-end-time">Loading...</span></strong></p>
            <p>Do you think you will be alive when this progress bar ends? <a href="https://strawpoll.com/59zh5hhf">Vote here.</a></p>
            <a href="/progress/create.html">Create your own custom progress bar! (BETA)</a>
            <div>
                <h3>Milestone Calculator</h3>
                <p>Input a milestone: <input id="progress-milestone" type="number" step="any" min="0" max="100" value="7">%</p>
                <p>Date and time that the progress bar <span id="progress-tense">will reach</span> that milestone: <strong><span id="progress-milestone-date">Loading...</span></strong></p>
            </div>
        </div>
        <p class="footer-stuff">Site updated August 24, 2024</p>

        <div id="disqus_thread"></div>
        <script>

            var disqus_config = function () {
                this.page.url = "https://randomperson3465.github.io/progress";
                this.page.identifier = "https://randomperson3465.github.io/progress";
            };

            (function() {
            var d = document, s = d.createElement('script');
            s.src = 'https://randomperson3465.disqus.com/embed.js';
            s.setAttribute('data-timestamp', +new Date());
            (d.head || d.body).appendChild(s);
            })();

            document.addEventListener('themeChanged', function (e) {
                DISQUS.reset({ reload: true, config: disqus_config });
            });
        </script>
        <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>

    </body>
    <script src="./src/main.js"></script>
    <script src="./src/progress/progress.js"></script>
</html>