github-pages-hello-world/index.html at main · pm-Andrew/github-pages-hello-world · 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
<!DOCTYPE html>
<html lang="en" data-theme="dark">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Digital Garden</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,600;1,400&family=JetBrains+Mono:wght@400;500&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/radial.css">
</head>

<body>

    <!-- SIDEBAR -->
    <aside class="sidebar">
        <div class="sidebar-header">
            <div class="site-name">🌱 The Garden</div>
            <div class="site-tagline">A digital commonplace book</div>
        </div>
        <div class="search-box">
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <circle cx="11" cy="11" r="8" />
                <path d="m21 21-4.35-4.35" />
            </svg>
            Search notes...
        </div>
        <nav class="nav-section">
            <div class="nav-label">Notes</div>
            <div id="sidebar-notes"></div>
        </nav>
        <nav class="nav-section" style="margin-top:auto; border-top: 1px solid var(--border);">
            <div class="nav-label">Tags</div>
            <div id="sidebar-tags"></div>
        </nav>
    </aside>

    <!-- MAIN -->
    <div class="content-area">
        <main class="note-pane">
            <div class="note-header">
                <div class="note-tags" id="note-tags"></div>
                <h1 class="note-title" id="note-title">Loading…</h1>
                <div class="note-meta" id="note-meta"></div>
            </div>
            <hr class="divider">
            <div class="note-body" id="note-body"></div>
            <div class="backlinks-section" id="backlinks-section" style="display:none">
                <div class="backlinks-title" id="backlinks-title"></div>
                <div id="backlinks-list"></div>
            </div>
        </main>

        <!-- RIGHT PANEL -->
        <aside class="right-panel">
            <div class="panel-section">
                <div class="panel-label">Local Graph</div>
                <canvas id="graph-canvas"></canvas>
            </div>
            <div class="panel-section">
                <div class="panel-label">On this page</div>
                <div id="outline-list"></div>
            </div>
            <div class="panel-section">
                <div class="panel-label">Linked Notes</div>
                <div id="linked-notes"></div>
            </div>
        </aside>
    </div>

    <!-- ── RADIAL FAB ── -->
    <div class="fab-container" id="fab-container">

        <!-- NATIVE CSS version (Chrome with base-select support) -->
        <div class="fab-native" id="fab-native">

            <!-- Main trigger button -->
            <button class="fab-trigger" id="fab-trigger" aria-label="Open menu">
                <span class="fab-icon fab-icon-open">✦</span>
                <span class="fab-icon fab-icon-close">✕</span>
            </button>

            <!-- Petal: Navigate -->
            <div class="fab-petal" id="petal-navigate" data-angle="140" data-label="Navigate">
                <button class="petal-btn" data-petal="navigate" aria-label="Navigate to note">🗺️</button>
                <div class="petal-label">Navigate</div>
                <div class="petal-panel" id="panel-navigate">
                    <div class="petal-panel-title">Jump to note</div>
                    <div id="nav-note-list"></div>
                </div>
            </div>

            <!-- Petal: Tags -->
            <div class="fab-petal" id="petal-tags" data-angle="210" data-label="Tags">
                <button class="petal-btn" data-petal="tags" aria-label="Filter by tag">🏷️</button>
                <div class="petal-label">Tags</div>
                <div class="petal-panel" id="panel-tags">
                    <div class="petal-panel-title">Filter by tag</div>
                    <div id="nav-tag-list"></div>
                </div>
            </div>

            <!-- Petal: Theme -->
            <div class="fab-petal" id="petal-theme" data-angle="280" data-label="Theme">
                <button class="petal-btn" data-petal="theme" aria-label="Switch theme">🎨</button>
                <div class="petal-label">Theme</div>
                <div class="petal-panel" id="panel-theme">
                    <div class="petal-panel-title">Choose theme</div>
                    <div class="theme-options">
                        <button class="theme-opt" data-theme="dark">🌑 Dark</button>
                        <button class="theme-opt" data-theme="light">☀️ Light</button>
                        <button class="theme-opt" data-theme="sepia">📜 Sepia</button>
                        <button class="theme-opt" data-theme="forest">🌲 Forest</button>
                    </div>
                </div>
            </div>
        </div>

    </div><!-- end fab-container -->

    <script src="js/app.js"></script>
    <script src="js/radial.js"></script>
</body>

</html>