startpage/index.html at main · LayerByte/startpage · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Startpage is a minimal developer-focused browser homepage.">
    <title>Startpage</title>
    <link rel="icon" href="assets/icons/samurai-favicon.png?v=3" type="image/png" sizes="64x64">
    <link rel="apple-touch-icon" href="assets/icons/samurai-mark-blue.png">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <main class="startpage" aria-label="Startpage browser homepage">
        <figure class="visual">
            <img src="assets/images/samurai-panel.png" alt="Ink-wash samurai overlooking misty mountains beneath the moon">
            <figcaption>
                <span>@YOUR USERNAME // MOON WATCH</span>
                <span class="online"><i aria-hidden="true"></i>ACTIVE</span>
            </figcaption>
        </figure>

        <section class="content" aria-labelledby="terminal-heading">
            <div class="masthead">
                <div class="wordmark">
                    <img src="assets/icons/samurai-mark-blue.png" alt="Blue samurai emblem">
                    <div>
                        <strong>@YOUR USERNAME</strong>
                        <span>STARTPAGE / 01</span>
                    </div>
                </div>
                <span class="edition" aria-hidden="true">START / 01</span>
            </div>

            <header class="terminal-header">
                <div class="meta">
                    <p id="date">Loading date...</p>
                    <time id="time" datetime="">--:--</time>
                </div>
                <p class="eyebrow">MOVE WITH PURPOSE</p>
                <h1 id="terminal-heading"><span class="terminal-symbol" aria-hidden="true">&gt;</span> <span id="greeting-text">Ready when you are.</span><span class="cursor" aria-hidden="true">_</span></h1>
            </header>

            <form id="search-form" class="search" role="search">
                <label class="visually-hidden" for="search-input">Search the web</label>
                <span aria-hidden="true">/</span>
                <input id="search-input" name="q" type="search" placeholder="Search Google..." autocomplete="off">
                <button type="submit"><span>Search</span><span class="button-arrow" aria-hidden="true">&#8594;</span></button>
            </form>

            <nav class="bookmarks" aria-label="Bookmarks">
                <section class="category" aria-labelledby="daily-heading">
                    <h2 id="daily-heading">FOCUS</h2>
                    <ul>
                        <li><a href="https://gmail.com/" target="_blank" rel="noopener noreferrer">Gmail</a></li>
                        <li><a href="https://mail.proton.me/" target="_blank" rel="noopener noreferrer">Proton Mail</a></li>
                        <li><a href="https://youtube.com/" target="_blank" rel="noopener noreferrer">YouTube</a></li>
                        <li><a href="https://reddit.com/" target="_blank" rel="noopener noreferrer">Reddit</a></li>
                    </ul>
                </section>

                <section class="category" aria-labelledby="dev-heading">
                    <h2 id="dev-heading">BUILD</h2>
                    <ul>
                        <li><a href="https://github.com/" target="_blank" rel="noopener noreferrer">GitHub</a></li>
                        <li><a href="https://stackoverflow.com/" target="_blank" rel="noopener noreferrer">Stack Overflow</a></li>
                        <li><a href="https://distrowatch.com/" target="_blank" rel="noopener noreferrer">DistroWatch</a></li>
                        <li><a href="https://devdocs.io/" target="_blank" rel="noopener noreferrer">DevDocs</a></li>
                    </ul>
                </section>

                <section class="category" aria-labelledby="community-heading">
                    <h2 id="community-heading">COMMUNITY</h2>
                    <ul>
                        <li><a href="https://reddit.com/r/programming/" target="_blank" rel="noopener noreferrer">Programming</a></li>
                        <li><a href="https://reddit.com/r/archlinux/" target="_blank" rel="noopener noreferrer">Arch Linux</a></li>
                        <li><a href="https://reddit.com/r/unixporn/" target="_blank" rel="noopener noreferrer">Unixporn</a></li>
                        <li><a href="https://reddit.com/r/linuxmasterrace/" target="_blank" rel="noopener noreferrer">Linux</a></li>
                    </ul>
                </section>

                <section class="category" aria-labelledby="fun-heading">
                    <h2 id="fun-heading">RESET</h2>
                    <ul>
                        <li><a href="https://monkeytype.com/" target="_blank" rel="noopener noreferrer">Monkeytype</a></li>
                        <li><a href="https://twitter.com/" target="_blank" rel="noopener noreferrer">Twitter</a></li>
                        <li><a href="https://twitch.tv/" target="_blank" rel="noopener noreferrer">Twitch</a></li>
                        <li><a href="https://netflix.com/" target="_blank" rel="noopener noreferrer">Netflix</a></li>
                    </ul>
                </section>
            </nav>

            <footer class="footer">
                <span><kbd>/</kbd> search</span>
                <span><kbd>ESC</kbd> clear</span>
                <span>@YOUR USERNAME // School Purpose Only.</span>
            </footer>
        </section>
    </main>

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