(cache)GUST/index.html at main · nautilus-os/GUST · 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
16829
16830
16831
16832
16833
16834
16835
16836
16837
16838
16839
16840
16841
16842
16843
16844
16845
16846
16847
16848
16849
16850
16851
16852
16853
16854
16855
16856
16857
16858
16859
16860
16861
16862
16863
16864
16865
16866
16867
16868
16869
16870
16871
16872
16873
16874
16875
16876
16877
16878
16879
16880
16881
16882
16883
16884
16885
16886
16887
16888
16889
16890
16891
16892
16893
16894
16895
16896
16897
16898
16899
16900
16901
16902
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <meta name="description" content="GUST: A service worker -less web browser-in-a-browser" />
    <title>GUST Browser</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link rel="dns-prefetch" href="https://cdn.jsdelivr.net" />
    <link rel="prerender" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600&family=Space+Grotesk:wght@400;500;600;700&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600&family=Space+Grotesk:wght@400;500;600;700&display=swap" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
    <script src="https://cdn.jsdelivr.net/npm/iso-639-1@2.1.11/build/index.js" defer
        onload="window._iso639Ready=true;"
        onerror="console.warn('iso-639-1 failed to load');"
    ></script>
    <!-- ES module stub: satisfies ECMAScript 6 Modules feature detection -->
    <script type="module">window._esModulesSupported = true;</script>
    <style>

        :root {
            --bg0: #0d0f12;
            --bg1: #181c21;
            --bg2: #1c2026;
            --bg3: #252b33;
            --bg-elevated: #161a1f;
            --surface: rgba(255, 255, 255, .08);
            --surface2: rgba(255, 255, 255, .14);
            --bd: #4f5963;
            --bd2: #5a6370;
            --tx: #f0f4f8;
            --tx2: #b8c4d0;
            --tx3: #7d8a98;
            --ac: #9de5ff;
            --ac2: #70d4ff;
            --ok: #8aefb0;
            --warn: #f8dc75;
            --err: #ff9595;
            --radius-sm: 8px;
            --radius-md: 10px;
            --radius-lg: 20px;
            --radius-full: 9999px;
            --shadow-sm: 0 1px 3px rgba(0, 0, 0, .35);
            --shadow-md: 0 8px 24px rgba(0, 0, 0, .45);
            --ui-lh: 1.5;
            --ui: 'Space Grotesk', 'Segoe UI', sans-serif;
            --mono: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0
        }

        /* Icon spacing: log message icons get a small right gap */
        .log-msg i[class*="fa-"] { margin-right: 4px; }

        html,
        body {
            height: 100%;
            background: var(--bg0);
            color: var(--tx);
            font-family: var(--ui);
            overflow: hidden
        }

        button,
        input,
        select {
            font: inherit
        }

        ::selection {
            background: rgba(141, 217, 255, .25);
            color: var(--tx)
        }

        .app {
            height: 100%;
            display: flex;
            flex-direction: column
        }

        .titlebar {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 8px 12px;
            background: var(--bg0);
            border-bottom: 1px solid var(--bd);
        }

        .brand {
            display: flex;
            align-items: center;
            gap: 8px;
            color: var(--ac);
            font-weight: 600;
            font-size: 14px;
            white-space: nowrap;
            border: 1px solid var(--ac);
            padding: 10px 12px;
            border-radius: 10px;
            margin-left: -3px;
            margin-right: -6px;
            height: 42px;
        }

        .brand i {
            font-size: 18px
        }

        .tab-strip-wrapper {
            flex: 1;
            min-width: 0;
            display: flex;
            align-items: center;
            position: relative;
        }

        .tab-strip-scroll-btn {
            max-width: 0;
            min-width: 0;
            width: 32px;
            height: 38px;
            background: transparent;
            border: none;
            color: var(--tx2);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            z-index: 3;
            flex-shrink: 0;
            overflow: hidden;
            opacity: 0;
            pointer-events: none;
            transition: max-width .2s ease, opacity .2s ease, color .12s;
        }

        .tab-strip-scroll-btn:hover {
        </div>
        <svg id="tutorialSpotSvg"
            style="position:absolute;inset:0;width:100%;height:100%;pointer-events:all;transition:opacity .35s;opacity:0;"
            xmlns="http://www.w3.org/2000/svg">
            <defs>
                <mask id="spotMask">
                    <rect width="100%" height="100%" fill="white" />
                    <rect id="spotRect" x="0" y="0" width="0" height="0" rx="12" fill="black" />
                </mask>
            </defs>
            <rect width="100%" height="100%" fill="rgba(0,0,0,0.48)" mask="url(#spotMask)" id="spotOverlay" />
            <rect id="spotRing" x="0" y="0" width="0" height="0" rx="12" fill="none" stroke="var(--ac, #9de5ff)"
                stroke-width="1" />
        </svg>
        <div id="tutorialCloneWrap" style="position:absolute;inset:0;pointer-events:none;z-index:2;">
            <!-- pointer-events:none so the clone is visual-only; the SVG backdrop above intercepts all background clicks -->
        </div>
        <div id="tutorialRing"
            style="position:absolute;pointer-events:none;border:1.5px solid #9de5ff;border-radius:8px;display:none;transition:none;z-index:3;">
        </div>
        <div id="tutorialCard" style="
                        position:absolute;
                        width:380px;
                        background:var(--bg2);
                        border:1px solid var(--ac);
                        border-radius:16px;
                        padding:24px 26px 20px;
                        box-shadow:0 12px 50px rgba(0,0,0,0.7), 0 0 0 1px rgba(100,210,255,0.08);
                        pointer-events:all;
                        transition: opacity .15s ease, transform .2s cubic-bezier(0.34, 1.56, 0.64, 1);
                        opacity:0;
                        transform:translateY(8px);
                        z-index:10;
                    ">
            <div id="tutorialDots" style="display:flex;gap:5px;margin-bottom:16px;"></div>
            <div id="tutorialArrow"
                style="position:absolute;width:12px;height:12px;background:var(--bg2);border:1px solid var(--ac);display:none;transform:rotate(45deg);z-index:-1;">
            </div>
            <div style="display:flex;align-items:flex-start;gap:14px;margin-bottom:14px;">
                <div id="tutorialIcon" style="
                                width:42px;height:42px;border-radius:11px;
                                background:rgba(100,210,255,0.12);
                                display:flex;align-items:center;justify-content:center;
                                flex-shrink:0;color:var(--ac);font-size:18px;
                            "></div>
                <div style="flex:1;">
                    <div id="tutorialTitle"
                        style="font-size:15px;font-weight:700;color:var(--tx);margin-bottom:5px;line-height:1.2;"></div>
                    <div id="tutorialBody" style="font-size:13.5px;color:var(--tx2);line-height:1.6;"></div>
                </div>
            </div>
            <div style="display:flex;justify-content:space-between;align-items:center;margin-top:18px;">
                <button id="tutorialSkip" style="
                                background:none;border:none;color:var(--tx3);
                                font-size:12px;cursor:pointer;padding:0;
                            ">Skip tour</button>
                <div style="display:flex;gap:8px;">
                    <button id="tutorialBack" style="
                                    background:var(--bg3);border:1px solid var(--bd);
                                    color:var(--tx2);border-radius:8px;padding:7px 18px;
                                    font-size:13px;cursor:pointer;display:none;
                                "><i class="fas fa-arrow-left" style="margin-right:5px;"></i>Back</button>
                    <button id="tutorialNext" style="
                                    background:var(--ac);border:none;
                                    color:#000;border-radius:8px;padding:7px 20px;
                                    font-size:13px;font-weight:700;cursor:pointer;
                                ">Next</button>
                </div>
            </div>
        </div>
    </div>
</body>

</html>