all repos — www @ 21c0adb90a362f03a033ed4efe841261a6378f2d

deserthorns.net content + generator

etc/do.html (view raw)

 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
 
<!DOCTYPE html>
<html>

<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="stylesheet" href="/assets/css/zenburn.css">
    <title>do</title>
    <style>
        html {
            background: var(--background);
            color: var(--f_high);
        }

        body {
            -webkit-text-size-adjust: 100%;
        }

        p {
            max-width: 30rem;
            margin: 0 auto;
            text-align: center;
        }

        hr {
            border: 1px solid var(--b_med);
        }

        a {
            color: var(--f_med);
        }

        h1,
        h2 {
            letter-spacing: 0.5rem;
            font-family: monospace;
            text-align: center;
            color: var(--f_low);
        }

        .logo {
            display: block;
            margin: 2rem auto;
            width: 4rem;
            height: 4rem;
        }

        .rotation {
            max-width: 20rem;
            margin: 0 auto;
            margin-bottom: 3rem;
        }

        .rotation > div {
            padding: 1rem;
            margin: 0.25rem;
            text-align: center;
            color: var(--f_high);
            font-family: monospace;
            font-size: 1rem;
        }

        .rotation > div > span {
            display: block;
        }

        #today {
            background: var(--b_high);
            color: var(--f_med);
            font-weight: bold;
        }

        #plus-1 {
            background: var(--b_med);
        }

        #plus-2 {
            background: var(--b_low);
        }
    </style>
</head>

<body>
    <a href="/">
        <img class="logo" src="/assets/svg/logo-block-mono.svg">
    </a>
    <hr>
    <h1>do</h1>
    <div class="rotation">
        <div id="today">
            <span>Today,</span>
            <span id="action"></span>
        </div>
        <div id="plus-1">
            <span>Tommorrow,</span>
            <span id="action"></span>
        </div>
        <div id="plus-2">
            <span>Then,</span>
            <span id="action"></span>
        </div>
    </div>
    <h2>about</h2>
    <p>
        Based on the concept of "The Discipline" discussed <a href="https://anatomy.1651.org/#the-discipline">here</a>.
    </p>    
</body>
<script>
    const rotation = [
        "connect",
        "read",
        "study",
        "play",
        "create",
        "read",
        "create",
        "play",
        "study",
        "read"
    ];
    const now = Date.now();
    const index = Math.floor((now / 1000 / 60 / 60 / 24) % 10);
    document.querySelector("#today > #action").innerText = rotation[index];
    document.querySelector("#plus-1 > #action").innerText = rotation[(index + 1) % 10];
    document.querySelector("#plus-2 > #action").innerText = rotation[(index + 2) % 10];
</script>

</html>