Skip to content

Commit e9f78fc

Browse files
VeldtJumperVeldtJumper
committed
Add LabCoat landing page
- Splash page at /labcoat/ with shared styling (Tailwind, Fira Code, Inter, Arcane Nine) - Purple accent (#7c3aed) to give LabCoat its own identity - Hero, features grid, screenshot showcase, open source callout, download CTA - Schema.org MobileApplication markup for SEO - Ready for labcoat.commit451.com subdomain redirect later
1 parent 4057f0f commit e9f78fc

1 file changed

Lines changed: 312 additions & 0 deletions

File tree

‎labcoat/index.html‎

Lines changed: 312 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,312 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>LabCoat for GitLab — A Native GitLab Client for Android & iOS</title>
7+
<meta name="description" content="LabCoat is a native, open-source GitLab client for Android and iOS. Browse projects, issues, merge requests, pipelines, and more — all from your phone. Built with Kotlin Multiplatform by Commit 451.">
8+
<meta name="robots" content="index, follow">
9+
<meta name="author" content="Commit 451 LLC">
10+
<meta name="keywords" content="GitLab, Android, iOS, Kotlin, open source, GitLab client, mobile app, merge requests, pipelines, issues, LabCoat">
11+
<link rel="canonical" href="https://labcoat.commit451.com/">
12+
<meta name="theme-color" content="#7c3aed">
13+
<meta name="color-scheme" content="dark">
14+
15+
<!-- Open Graph -->
16+
<meta property="og:type" content="website">
17+
<meta property="og:title" content="LabCoat for GitLab — Native Mobile GitLab Client">
18+
<meta property="og:description" content="Browse your GitLab projects, issues, merge requests, and pipelines from your phone. Open source, built with Kotlin Multiplatform.">
19+
<meta property="og:url" content="https://labcoat.commit451.com/">
20+
<meta property="og:image" content="https://commit451.com/images/labcoat_icon.png">
21+
<meta property="og:site_name" content="LabCoat for GitLab">
22+
23+
<!-- Twitter Card -->
24+
<meta name="twitter:card" content="summary">
25+
<meta name="twitter:site" content="@Commit451">
26+
<meta name="twitter:title" content="LabCoat for GitLab — Native Mobile GitLab Client">
27+
<meta name="twitter:description" content="Browse your GitLab projects, issues, merge requests, and pipelines from your phone. Open source.">
28+
<meta name="twitter:image" content="https://commit451.com/images/labcoat_icon.png">
29+
30+
<link rel="icon" type="image/png" href="/images/labcoat_icon.png">
31+
32+
<!-- Fonts -->
33+
<link rel="preconnect" href="https://fonts.googleapis.com">
34+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
35+
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
36+
37+
<!-- Tailwind CSS -->
38+
<script src="https://cdn.tailwindcss.com"></script>
39+
<script>
40+
tailwind.config = {
41+
theme: {
42+
extend: {
43+
colors: {
44+
brand: { accent: '#d65a31' },
45+
labcoat: { 500: '#7c3aed', 400: '#a78bfa', 600: '#6d28d9' },
46+
dark: { 950: '#030712', 900: '#111827', 800: '#1f2937', 700: '#374151' }
47+
},
48+
fontFamily: {
49+
fira: ['"Fira Code"', 'monospace'],
50+
sans: ['Inter', 'system-ui', 'sans-serif']
51+
}
52+
}
53+
}
54+
}
55+
</script>
56+
57+
<!-- Schema.org -->
58+
<script type="application/ld+json">
59+
{
60+
"@context": "https://schema.org",
61+
"@type": "MobileApplication",
62+
"name": "LabCoat for GitLab",
63+
"operatingSystem": "Android, iOS",
64+
"applicationCategory": "DeveloperApplication",
65+
"description": "A native, open-source GitLab client for Android and iOS. Browse projects, issues, merge requests, pipelines, and more.",
66+
"url": "https://labcoat.commit451.com",
67+
"image": "https://commit451.com/images/labcoat_icon.png",
68+
"author": {
69+
"@type": "Organization",
70+
"name": "Commit 451",
71+
"url": "https://commit451.com"
72+
},
73+
"offers": {
74+
"@type": "Offer",
75+
"price": "0",
76+
"priceCurrency": "USD"
77+
},
78+
"installUrl": "https://play.google.com/store/apps/details?id=com.commit451.gitlab",
79+
"softwareVersion": "3.0",
80+
"isAccessibleForFree": true
81+
}
82+
</script>
83+
84+
<style>
85+
@font-face {
86+
font-family: "Arcane Nine";
87+
src: url("/fonts/arcane-nine.ttf") format("truetype");
88+
font-display: swap;
89+
}
90+
.font-arcane { font-family: "Arcane Nine", "Fira Code", monospace; }
91+
html { scroll-behavior: smooth; }
92+
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
93+
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
94+
.reveal.visible { opacity: 1; transform: translateY(0); }
95+
.glow-purple { box-shadow: 0 0 60px rgba(124, 58, 237, 0.12); }
96+
</style>
97+
</head>
98+
<body class="bg-dark-950 text-gray-100 font-sans antialiased">
99+
100+
<!-- Background -->
101+
<div class="fixed inset-0 -z-10">
102+
<div class="absolute inset-0 bg-gradient-to-b from-labcoat-600/5 via-dark-950 to-dark-950"></div>
103+
</div>
104+
105+
<!-- Navigation -->
106+
<nav class="fixed top-0 left-0 right-0 z-50 border-b border-dark-700/50 bg-dark-950/80 backdrop-blur-md">
107+
<div class="mx-auto max-w-5xl px-6 py-4 flex items-center justify-between">
108+
<a href="#" class="flex items-center gap-3 group">
109+
<img src="/images/labcoat_icon.png" alt="LabCoat icon" width="36" height="36" class="rounded-lg transition-transform group-hover:scale-105">
110+
<span class="font-fira font-bold text-lg text-white group-hover:text-labcoat-400 transition-colors">LabCoat</span>
111+
</a>
112+
<div class="flex items-center gap-6 text-sm font-medium">
113+
<a href="#features" class="hidden sm:block text-gray-400 hover:text-labcoat-400 transition-colors">Features</a>
114+
<a href="https://gitlab.com/AlfredBr/labcoat/-/releases" target="_blank" rel="noopener noreferrer" class="hidden sm:block text-gray-400 hover:text-labcoat-400 transition-colors">Releases</a>
115+
<a href="https://gitlab.com/AlfredBr/labcoat" target="_blank" rel="noopener noreferrer" class="hidden sm:block text-gray-400 hover:text-labcoat-400 transition-colors">Source</a>
116+
<a href="https://play.google.com/store/apps/details?id=com.commit451.gitlab" target="_blank" rel="noopener noreferrer" class="rounded-lg border border-labcoat-500/60 px-4 py-2 text-labcoat-400 hover:bg-labcoat-500/10 transition-all">Get the App</a>
117+
</div>
118+
</div>
119+
</nav>
120+
121+
<main>
122+
<!-- Hero -->
123+
<section class="min-h-screen flex items-center justify-center px-6 pt-20">
124+
<div class="max-w-4xl text-center reveal">
125+
<div class="flex justify-center mb-8">
126+
<div class="relative">
127+
<div class="absolute -inset-4 rounded-3xl bg-labcoat-500/30 blur-2xl"></div>
128+
<img src="/images/labcoat_icon.png" alt="LabCoat for GitLab" width="128" height="128" class="relative rounded-3xl shadow-2xl">
129+
</div>
130+
</div>
131+
<h1 class="font-arcane text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight text-white">
132+
Lab<span class="text-labcoat-400">Coat</span>
133+
</h1>
134+
<p class="mt-3 text-xl sm:text-2xl text-gray-400 font-light">Your GitLab, in your pocket.</p>
135+
<p class="mt-6 text-base sm:text-lg text-gray-300 leading-relaxed max-w-2xl mx-auto">
136+
A native, open-source GitLab client for Android and iOS. Browse projects, review merge requests,
137+
track issues, monitor pipelines — all from a fast, beautiful mobile app built with Kotlin Multiplatform.
138+
</p>
139+
140+
<!-- Download buttons -->
141+
<div class="mt-10 flex flex-col sm:flex-row gap-4 justify-center">
142+
<a href="https://play.google.com/store/apps/details?id=com.commit451.gitlab" target="_blank" rel="noopener noreferrer"
143+
class="inline-flex items-center justify-center gap-3 rounded-xl bg-labcoat-500 px-8 py-4 text-sm font-semibold text-white hover:bg-labcoat-600 transition-all hover:scale-105 shadow-lg shadow-labcoat-500/25">
144+
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M3.609 1.814L13.792 12 3.61 22.186a.996.996 0 01-.61-.92V2.734a1 1 0 01.609-.92zm10.89 10.893l2.302 2.302-10.937 6.333 8.635-8.635zm3.199-3.199l2.302 2.302-2.302 2.302-2.698-2.302 2.698-2.302zM5.864 3.458L16.8 9.79l-2.301 2.302-8.635-8.634z"/></svg>
145+
Google Play
146+
</a>
147+
<a href="https://gitlab.com/AlfredBr/labcoat" target="_blank" rel="noopener noreferrer"
148+
class="inline-flex items-center justify-center gap-3 rounded-xl border border-dark-700 px-8 py-4 text-sm font-medium text-gray-300 hover:border-labcoat-500 hover:text-labcoat-400 transition-all">
149+
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M22.65 14.39L12 22.13 1.35 14.39a.84.84 0 01-.3-.94l1.22-3.78 2.44-7.51A.42.42 0 014.82 2a.43.43 0 01.58 0 .42.42 0 01.11.18l2.44 7.49h8.1l2.44-7.51A.42.42 0 0118.6 2a.43.43 0 01.58 0 .42.42 0 01.11.18l2.44 7.51L23 13.45a.84.84 0 01-.35.94z"/></svg>
150+
View Source
151+
</a>
152+
</div>
153+
154+
<!-- Stats -->
155+
<div class="mt-14 flex flex-wrap justify-center gap-8 sm:gap-14">
156+
<div>
157+
<p class="text-3xl font-fira font-bold text-labcoat-400">50K+</p>
158+
<p class="mt-1 text-sm text-gray-500">Installs</p>
159+
</div>
160+
<div>
161+
<p class="text-3xl font-fira font-bold text-labcoat-400">⭐ #1</p>
162+
<p class="mt-1 text-sm text-gray-500">Most Starred Kotlin Project on GitLab</p>
163+
</div>
164+
<div>
165+
<p class="text-3xl font-fira font-bold text-labcoat-400">Free</p>
166+
<p class="mt-1 text-sm text-gray-500">& Open Source</p>
167+
</div>
168+
</div>
169+
</div>
170+
</section>
171+
172+
<!-- Screenshot Section -->
173+
<section class="py-24 px-6">
174+
<div class="mx-auto max-w-lg reveal">
175+
<div class="relative mx-auto w-[280px] rounded-[2.5rem] border-[3px] border-dark-700 bg-dark-900 p-3 shadow-2xl glow-purple">
176+
<img src="/images/labcoat_screenshot.png" alt="LabCoat app screenshot showing a GitLab project view" class="rounded-[2rem] w-full">
177+
</div>
178+
</div>
179+
</section>
180+
181+
<!-- Features -->
182+
<section id="features" class="py-24 sm:py-32 px-6">
183+
<div class="mx-auto max-w-5xl">
184+
<div class="text-center reveal">
185+
<p class="text-sm font-fira font-bold text-labcoat-400 uppercase tracking-widest">Features</p>
186+
<h2 class="mt-4 text-3xl sm:text-4xl font-bold tracking-tight text-white">Everything you need from GitLab, on the go</h2>
187+
</div>
188+
<div class="mt-16 grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
189+
<!-- Feature cards -->
190+
<div class="reveal rounded-2xl border border-dark-700/60 bg-dark-900/70 p-7 hover:border-labcoat-500/40 transition-all duration-300">
191+
<div class="w-11 h-11 rounded-xl bg-labcoat-500/10 flex items-center justify-center mb-5">
192+
<svg class="w-5 h-5 text-labcoat-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/></svg>
193+
</div>
194+
<h3 class="font-fira font-bold text-white">Projects</h3>
195+
<p class="mt-2 text-sm text-gray-400 leading-relaxed">Browse projects, view READMEs with full markdown rendering, explore file trees, and star your favorites.</p>
196+
</div>
197+
198+
<div class="reveal rounded-2xl border border-dark-700/60 bg-dark-900/70 p-7 hover:border-labcoat-500/40 transition-all duration-300">
199+
<div class="w-11 h-11 rounded-xl bg-labcoat-500/10 flex items-center justify-center mb-5">
200+
<svg class="w-5 h-5 text-labcoat-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
201+
</div>
202+
<h3 class="font-fira font-bold text-white">Issues</h3>
203+
<p class="mt-2 text-sm text-gray-400 leading-relaxed">Create, browse, and manage issues. Filter by assignee, label, or milestone. Comment and update on the go.</p>
204+
</div>
205+
206+
<div class="reveal rounded-2xl border border-dark-700/60 bg-dark-900/70 p-7 hover:border-labcoat-500/40 transition-all duration-300">
207+
<div class="w-11 h-11 rounded-xl bg-labcoat-500/10 flex items-center justify-center mb-5">
208+
<svg class="w-5 h-5 text-labcoat-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"/></svg>
209+
</div>
210+
<h3 class="font-fira font-bold text-white">Merge Requests</h3>
211+
<p class="mt-2 text-sm text-gray-400 leading-relaxed">Review merge requests, view diffs, check approvals, and stay on top of your code review queue.</p>
212+
</div>
213+
214+
<div class="reveal rounded-2xl border border-dark-700/60 bg-dark-900/70 p-7 hover:border-labcoat-500/40 transition-all duration-300">
215+
<div class="w-11 h-11 rounded-xl bg-labcoat-500/10 flex items-center justify-center mb-5">
216+
<svg class="w-5 h-5 text-labcoat-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
217+
</div>
218+
<h3 class="font-fira font-bold text-white">Pipelines</h3>
219+
<p class="mt-2 text-sm text-gray-400 leading-relaxed">Monitor CI/CD pipeline status, view job logs, and catch failures before they become problems.</p>
220+
</div>
221+
222+
<div class="reveal rounded-2xl border border-dark-700/60 bg-dark-900/70 p-7 hover:border-labcoat-500/40 transition-all duration-300">
223+
<div class="w-11 h-11 rounded-xl bg-labcoat-500/10 flex items-center justify-center mb-5">
224+
<svg class="w-5 h-5 text-labcoat-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/></svg>
225+
</div>
226+
<h3 class="font-fira font-bold text-white">Push Notifications</h3>
227+
<p class="mt-2 text-sm text-gray-400 leading-relaxed">Get notified about activity on your projects. Tap a notification and jump straight to the relevant screen.</p>
228+
</div>
229+
230+
<div class="reveal rounded-2xl border border-dark-700/60 bg-dark-900/70 p-7 hover:border-labcoat-500/40 transition-all duration-300">
231+
<div class="w-11 h-11 rounded-xl bg-labcoat-500/10 flex items-center justify-center mb-5">
232+
<svg class="w-5 h-5 text-labcoat-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
233+
</div>
234+
<h3 class="font-fira font-bold text-white">Self-Hosted Support</h3>
235+
<p class="mt-2 text-sm text-gray-400 leading-relaxed">Works with GitLab.com and self-hosted GitLab instances. Your server, your data, your rules.</p>
236+
</div>
237+
</div>
238+
</div>
239+
</section>
240+
241+
<!-- Open Source callout -->
242+
<section class="py-24 px-6">
243+
<div class="mx-auto max-w-3xl reveal">
244+
<div class="rounded-2xl border border-labcoat-500/30 bg-gradient-to-br from-dark-900/90 to-dark-800/50 p-10 text-center glow-purple">
245+
<p class="text-sm font-fira font-bold text-labcoat-400 uppercase tracking-widest">Open Source</p>
246+
<h2 class="mt-4 text-2xl sm:text-3xl font-bold text-white">Built in the open, for the community</h2>
247+
<p class="mt-4 text-gray-400 leading-relaxed max-w-xl mx-auto">
248+
LabCoat is and always will be free and open source. Built with Kotlin Multiplatform,
249+
contributions are welcome. Check out the source, file issues, or submit a merge request.
250+
</p>
251+
<div class="mt-8 flex flex-col sm:flex-row gap-4 justify-center">
252+
<a href="https://gitlab.com/AlfredBr/labcoat" target="_blank" rel="noopener noreferrer"
253+
class="inline-flex items-center justify-center gap-2 rounded-lg bg-labcoat-500 px-6 py-3 text-sm font-semibold text-white hover:bg-labcoat-600 transition-all hover:scale-105 shadow-lg shadow-labcoat-500/20">
254+
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M22.65 14.39L12 22.13 1.35 14.39a.84.84 0 01-.3-.94l1.22-3.78 2.44-7.51A.42.42 0 014.82 2a.43.43 0 01.58 0 .42.42 0 01.11.18l2.44 7.49h8.1l2.44-7.51A.42.42 0 0118.6 2a.43.43 0 01.58 0 .42.42 0 01.11.18l2.44 7.51L23 13.45a.84.84 0 01-.35.94z"/></svg>
255+
View on GitLab
256+
</a>
257+
<a href="https://gitlab.com/AlfredBr/labcoat/-/issues" target="_blank" rel="noopener noreferrer"
258+
class="inline-flex items-center justify-center gap-2 rounded-lg border border-dark-700 px-6 py-3 text-sm font-medium text-gray-300 hover:border-labcoat-500 hover:text-labcoat-400 transition-all">
259+
Report an Issue
260+
</a>
261+
</div>
262+
</div>
263+
</div>
264+
</section>
265+
266+
<!-- CTA -->
267+
<section class="py-24 px-6">
268+
<div class="mx-auto max-w-2xl text-center reveal">
269+
<h2 class="text-3xl sm:text-4xl font-bold text-white">Ready to try LabCoat?</h2>
270+
<p class="mt-4 text-lg text-gray-400">Free on Google Play. iOS coming soon.</p>
271+
<div class="mt-8">
272+
<a href="https://play.google.com/store/apps/details?id=com.commit451.gitlab" target="_blank" rel="noopener noreferrer"
273+
class="inline-flex items-center justify-center gap-3 rounded-xl bg-labcoat-500 px-10 py-4 text-base font-semibold text-white hover:bg-labcoat-600 transition-all hover:scale-105 shadow-lg shadow-labcoat-500/25">
274+
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M3.609 1.814L13.792 12 3.61 22.186a.996.996 0 01-.61-.92V2.734a1 1 0 01.609-.92zm10.89 10.893l2.302 2.302-10.937 6.333 8.635-8.635zm3.199-3.199l2.302 2.302-2.302 2.302-2.698-2.302 2.698-2.302zM5.864 3.458L16.8 9.79l-2.301 2.302-8.635-8.634z"/></svg>
275+
Download on Google Play
276+
</a>
277+
</div>
278+
</div>
279+
</section>
280+
</main>
281+
282+
<!-- Footer -->
283+
<footer class="border-t border-dark-700/50 bg-dark-950/80 backdrop-blur-sm">
284+
<div class="mx-auto max-w-5xl px-6 py-8">
285+
<div class="flex flex-col items-center gap-4 sm:flex-row sm:justify-between">
286+
<p class="text-sm text-gray-500">
287+
Made with ❤️ by <a href="https://commit451.com" class="text-labcoat-400 hover:text-labcoat-400/80 transition-colors">Commit 451</a>
288+
</p>
289+
<nav class="flex gap-6 text-sm">
290+
<a href="https://commit451.com/privacy" class="text-gray-500 hover:text-labcoat-400 transition-colors">Privacy</a>
291+
<a href="https://commit451.com/terms" class="text-gray-500 hover:text-labcoat-400 transition-colors">Terms</a>
292+
<a href="https://commit451.com/account-deletion" class="text-gray-500 hover:text-labcoat-400 transition-colors">Account Deletion</a>
293+
</nav>
294+
</div>
295+
</div>
296+
</footer>
297+
298+
<!-- Scroll reveal -->
299+
<script>
300+
const observer = new IntersectionObserver((entries) => {
301+
entries.forEach(entry => {
302+
if (entry.isIntersecting) entry.target.classList.add('visible');
303+
});
304+
}, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });
305+
document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
306+
307+
// Navbar shadow on scroll
308+
const nav = document.querySelector('nav');
309+
window.addEventListener('scroll', () => nav.classList.toggle('shadow-lg', window.scrollY > 20));
310+
</script>
311+
</body>
312+
</html>

0 commit comments

Comments
 (0)