upleb.uk

Public git repos — served from a NIP-34 GRASP relay at git.upleb.uk

summaryrefslogtreecommitdiff
path: root/templates
diff options
context:
space:
mode:
authorDanConwayDev <DanConwayDev@protonmail.com>2025-12-02 13:39:20 +0000
committerDanConwayDev <DanConwayDev@protonmail.com>2025-12-02 13:39:20 +0000
commit774d237fec608dd60773b4d88e5893323b79ed24 (patch)
treefd4f8b5b2d1cbd2c8ad8354f252c302fa4d2dc61 /templates
parent6e1b4620d26051da4aec8b808c346d17bb1889df (diff)
improve landing page
Diffstat (limited to 'templates')
-rw-r--r--templates/landing.html234
1 files changed, 178 insertions, 56 deletions
diff --git a/templates/landing.html b/templates/landing.html
index bc7ee4f..6d820c3 100644
--- a/templates/landing.html
+++ b/templates/landing.html
@@ -6,14 +6,24 @@
6 <title>{relay_name}</title> 6 <title>{relay_name}</title>
7 <style> 7 <style>
8 {base_css} 8 {base_css}
9 .container {{ 9 .hero {{
10 height: 100vh;
11 padding: 4rem 24px 3rem;
12 text-align: center;
13 display: flex;
14 flex-direction: column;
15 justify-content: center;
16 align-items: center;
17 position: relative;
18 }}
19 .hero-content {{
10 max-width: 720px; 20 max-width: 720px;
11 margin: 0 auto; 21 width: 100%;
12 padding: 80px 24px;
13 }} 22 }}
14 .header {{ 23 .header {{
15 display: flex; 24 display: flex;
16 align-items: center; 25 align-items: center;
26 justify-content: center;
17 gap: 16px; 27 gap: 16px;
18 margin-bottom: 24px; 28 margin-bottom: 24px;
19 }} 29 }}
@@ -29,18 +39,51 @@
29 .subtitle {{ 39 .subtitle {{
30 color: var(--text-muted); 40 color: var(--text-muted);
31 font-size: 1.125rem; 41 font-size: 1.125rem;
32 margin-bottom: 48px;
33 }} 42 }}
34 .overview {{ 43 .scroll-indicator {{
35 background: var(--surface); 44 position: absolute;
36 border: 1px solid var(--border); 45 bottom: 30px;
37 border-radius: 12px; 46 left: 50%;
38 padding: 24px; 47 transform: translateX(-50%);
39 margin-bottom: 48px;
40 }} 48 }}
41 .overview p {{ 49 .scroll-down {{
42 color: var(--text-muted); 50 display: flex;
43 font-size: 0.95rem; 51 flex-direction: column;
52 align-items: center;
53 animation: float 2s ease-in-out infinite;
54 text-decoration: none;
55 }}
56 .scroll-text {{
57 font-size: 0.8rem;
58 opacity: 0.7;
59 margin-bottom: 4px;
60 }}
61 @keyframes float {{
62 0%, 100% {{
63 transform: translateY(0);
64 }}
65 50% {{
66 transform: translateY(-8px);
67 }}
68 }}
69 .scroll-down svg {{
70 fill: none;
71 stroke: currentColor;
72 opacity: 0.8;
73 filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
74 }}
75 .scroll-down:hover svg {{
76 opacity: 1;
77 transform: scale(1.2);
78 stroke-width: 2.5;
79 }}
80 .scroll-down:hover .scroll-text {{
81 opacity: 1;
82 }}
83 .container {{
84 max-width: 720px;
85 margin: 0 auto;
86 padding: 80px 24px;
44 }} 87 }}
45 .section {{ 88 .section {{
46 margin-bottom: 40px; 89 margin-bottom: 40px;
@@ -81,62 +124,141 @@
81 margin-right: 8px; 124 margin-right: 8px;
82 }} 125 }}
83 code {{ padding: 2px 8px; }} 126 code {{ padding: 2px 8px; }}
84 .connection-grid {{ 127 .tag-container {{
85 display: grid; 128 margin: 24px 0;
86 gap: 12px;
87 }}
88 .connection-item {{
89 display: flex; 129 display: flex;
90 justify-content: space-between; 130 flex-wrap: wrap;
131 gap: 8px;
91 align-items: center; 132 align-items: center;
92 padding: 12px 16px; 133 justify-content: center;
93 background: var(--surface); 134 }}
94 border: 1px solid var(--border); 135 .tag-label {{
136 font-size: 0.75rem;
137 color: var(--text-muted);
138 margin-right: 4px;
139 }}
140 .tag {{
141 display: inline-block;
142 padding: 4px 10px;
143 border-radius: 6px;
144 font-size: 0.75rem;
145 font-weight: 500;
146 }}
147 .tag-grasp {{
148 background: rgba(68, 52, 255, 0.15);
149 color: var(--brand-light);
150 border: 1px solid rgba(68, 52, 255, 0.3);
151 }}
152 .tag-nip {{
153 background: rgba(34, 197, 94, 0.15);
154 color: var(--success);
155 border: 1px solid rgba(34, 197, 94, 0.3);
156 }}
157 .browse-link {{
158 display: inline-block;
159 background: var(--brand);
160 color: white;
161 padding: 14px 24px;
95 border-radius: 8px; 162 border-radius: 8px;
163 font-weight: 500;
164 font-size: 1rem;
165 margin: 32px 0;
166 transition: background 0.2s;
96 }} 167 }}
97 .connection-label {{ 168 .browse-link:hover {{
98 font-size: 0.875rem; 169 background: var(--brand-light);
170 text-decoration: none;
171 }}
172 .software-box {{
173 display: flex;
174 align-items: flex-start;
175 gap: 16px;
176 text-align: left;
177 }}
178 .software-logo {{
179 width: 48px;
180 height: 48px;
181 flex-shrink: 0;
182 }}
183 .software-content {{
184 flex: 1;
185 }}
186 .software-label {{
187 font-size: 0.75rem;
188 font-weight: 600;
189 text-transform: uppercase;
190 letter-spacing: 0.1em;
99 color: var(--text-muted); 191 color: var(--text-muted);
192 margin-bottom: 8px;
193 }}
194 .software-heading {{
195 font-size: 1.125rem;
196 font-weight: 500;
197 margin-bottom: 8px;
198 color: var(--text);
199 }}
200 .software-heading a {{
201 color: var(--text);
202 }}
203 .software-heading a:hover {{
204 color: var(--brand-light);
205 }}
206 .software-desc {{
207 color: var(--text-muted);
208 font-size: 0.9rem;
209 line-height: 1.5;
100 }} 210 }}
101 .footer {{ margin-top: 64px; }} 211 .footer {{ margin-top: 64px; }}
102 </style> 212 </style>
103</head> 213</head>
104<body> 214<body>
105 <div class="container"> 215 <header class="hero">
106 <div class="header"> 216 <div class="hero-content">
107 <svg class="logo" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg"> 217 <div class="header">
108 <rect width="38" height="38" rx="12" fill="#4434FF"/> 218 <h1>{relay_name}</h1>
109 <path d="M10.6731 30.6348C8.83687 30.6346 7.34885 29.1458 7.34885 27.3096C7.34891 26.2473 7.84783 25.303 8.62326 24.6943C8.21265 23.3055 7.86571 22.049 7.45334 20.6758C6.90247 18.8412 7.4492 16.8197 8.93576 15.5605L15.7512 9.78906C15.6931 9.54286 15.6614 9.28642 15.6613 9.02246C15.6613 7.51617 16.6628 6.24465 18.0363 5.83594L18.0363 -1.11215e-06C18.511 0.000462658 18.4612 0.000975391 18.9856 0.000975533C19.5102 0.000975578 19.5802 -1.11589e-06 19.9367 -9.46012e-07L19.9367 5.83594C21.3097 6.24503 22.3108 7.5166 22.3108 9.02246C22.3107 9.29118 22.2792 9.55249 22.219 9.80273L29.0783 15.6123C30.5229 16.8359 31.1022 18.8013 30.5539 20.6133L29.3254 24.6758C30.1142 25.2837 30.6232 26.2367 30.6233 27.3096C30.6233 29.1459 29.1344 30.6348 27.2981 30.6348C25.4619 30.6346 23.9738 29.1458 23.9738 27.3096C23.974 25.4734 25.4619 23.9846 27.2981 23.9844C27.3814 23.9844 27.4643 23.9891 27.5461 23.9951L28.7356 20.0625C29.0645 18.9753 28.7166 17.7966 27.8498 17.0625L21.2424 11.4648C20.8746 11.8048 20.4294 12.0622 19.9367 12.209L19.9367 18.9258C21.0425 19.3175 21.836 20.3694 21.8362 21.6094C21.8362 23.1834 20.5596 24.46 18.9856 24.46C17.4117 24.4598 16.136 23.1833 16.136 21.6094C16.1361 20.3689 16.93 19.3172 18.0363 18.9258L18.0363 12.21C17.5395 12.0622 17.0916 11.801 16.7219 11.457L10.1643 17.0107C9.27919 17.7605 8.93068 18.9867 9.27365 20.1289C9.68708 21.5056 10.0175 22.7009 10.3986 23.998C10.4892 23.9906 10.5806 23.9844 10.6731 23.9844C12.5093 23.9844 13.9981 25.4733 13.9983 27.3096C13.9983 29.1459 12.5094 30.6348 10.6731 30.6348Z" fill="white"/> 219 </div>
110 </svg> 220
111 <h1>{relay_name}</h1> 221 <p class="subtitle">{relay_description}</p>
112 </div> 222
113 223 <a href="https://gitworkshop.dev/relay/{domain}" class="browse-link" target="_blank">
114 <p class="subtitle">{relay_description}</p> 224 Browse Repositories on GitWorkshop.dev &rarr;
115 225 </a>
116 <div class="overview"> 226
117 <p>Software: <a href="https://gitworkshop.dev/danconwaydev.com/ngit-grasp">ngit-grasp</a> 227 <div class="tag-container">
118 </p> 228 <span class="tag-label">Supports:</span>
119 <p>Git hosting distributed across relays using Nostr to authorise repo creation and git push operations. An implementation of the <a href="https://gitworkshop.dev/danconwaydev.com/grasp">Grasp Protocol</a>.</p> 229 <span class="tag tag-grasp">GRASP-01</span>
120 </div> 230 <span class="tag tag-nip">NIP-01</span>
121 231 <span class="tag tag-nip">NIP-11</span>
122 <div> 232 <span class="tag tag-nip">NIP-34</span>
123 <a href="https://gitworkshop.dev/relay/{domain}">Browse Listed Repositories (using GitWorkshop.dev)</a> 233 </div>
124 </div> 234
125 235 <div class="card">
126 <div class="section"> 236 <div class="software-box">
127 <div class="section-title">Connection</div> 237 <svg class="software-logo" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
128 <div class="connection-grid"> 238 <rect width="38" height="38" rx="12" fill="#4434FF"/>
129 <div class="connection-item"> 239 <path d="M10.6731 30.6348C8.83687 30.6346 7.34885 29.1458 7.34885 27.3096C7.34891 26.2473 7.84783 25.303 8.62326 24.6943C8.21265 23.3055 7.86571 22.049 7.45334 20.6758C6.90247 18.8412 7.4492 16.8197 8.93576 15.5605L15.7512 9.78906C15.6931 9.54286 15.6614 9.28642 15.6613 9.02246C15.6613 7.51617 16.6628 6.24465 18.0363 5.83594L18.0363 -1.11215e-06C18.511 0.000462658 18.4612 0.000975391 18.9856 0.000975533C19.5102 0.000975578 19.5802 -1.11589e-06 19.9367 -9.46012e-07L19.9367 5.83594C21.3097 6.24503 22.3108 7.5166 22.3108 9.02246C22.3107 9.29118 22.2792 9.55249 22.219 9.80273L29.0783 15.6123C30.5229 16.8359 31.1022 18.8013 30.5539 20.6133L29.3254 24.6758C30.1142 25.2837 30.6232 26.2367 30.6233 27.3096C30.6233 29.1459 29.1344 30.6348 27.2981 30.6348C25.4619 30.6346 23.9738 29.1458 23.9738 27.3096C23.974 25.4734 25.4619 23.9846 27.2981 23.9844C27.3814 23.9844 27.4643 23.9891 27.5461 23.9951L28.7356 20.0625C29.0645 18.9753 28.7166 17.7966 27.8498 17.0625L21.2424 11.4648C20.8746 11.8048 20.4294 12.0622 19.9367 12.209L19.9367 18.9258C21.0425 19.3175 21.836 20.3694 21.8362 21.6094C21.8362 23.1834 20.5596 24.46 18.9856 24.46C17.4117 24.4598 16.136 23.1833 16.136 21.6094C16.1361 20.3689 16.93 19.3172 18.0363 18.9258L18.0363 12.21C17.5395 12.0622 17.0916 11.801 16.7219 11.457L10.1643 17.0107C9.27919 17.7605 8.93068 18.9867 9.27365 20.1289C9.68708 21.5056 10.0175 22.7009 10.3986 23.998C10.4892 23.9906 10.5806 23.9844 10.6731 23.9844C12.5093 23.9844 13.9981 25.4733 13.9983 27.3096C13.9983 29.1459 12.5094 30.6348 10.6731 30.6348Z" fill="white"/>
130 <span class="connection-label">WebSocket</span> 240 </svg>
131 <code>ws://{domain}/</code> 241 <div class="software-content">
132 </div> 242 <div class="software-label">Powered By</div>
133 <div class="connection-item"> 243 <h3 class="software-heading"><a href="https://gitworkshop.dev/danconwaydev.com/ngit-grasp">ngit-grasp</a></h3>
134 <span class="connection-label">HTTP</span> 244 <p class="software-desc">Git hosting distributed across relays using Nostr to authorise repo creation and git push operations. An implementation of the <a href="https://gitworkshop.dev/danconwaydev.com/grasp">Grasp Protocol</a>.</p>
135 <code>http://{domain}/</code> 245 </div>
136 </div> 246 </div>
137 </div> 247 </div>
138 </div> 248 </div>
139 249
250 <div class="scroll-indicator">
251 <a href="#content" class="scroll-down" aria-label="Scroll to content">
252 <span class="scroll-text">SCROLL</span>
253 <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
254 <polyline points="7 13 12 18 17 13"></polyline>
255 <polyline points="7 6 12 11 17 6"></polyline>
256 </svg>
257 </a>
258 </div>
259 </header>
260
261 <main class="container" id="content">
140 <div class="section"> 262 <div class="section">
141 <div class="section-title">Supported GRASPs</div> 263 <div class="section-title">Supported GRASPs</div>
142 <div class="card"> 264 <div class="card">
@@ -172,6 +294,6 @@
172 <div class="footer"> 294 <div class="footer">
173 Powered by <strong>ngit-grasp</strong> 295 Powered by <strong>ngit-grasp</strong>
174 </div> 296 </div>
175 </div> 297 </main>
176</body> 298</body>
177</html> \ No newline at end of file 299</html> \ No newline at end of file