-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
336 lines (294 loc) · 18.3 KB
/
Copy pathindex.html
File metadata and controls
336 lines (294 loc) · 18.3 KB
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
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
<!DOCTYPE html>
<html lang="fr" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bit CLI - Client Bitbucket Natif par Gopu Inc.</title>
<!-- 1. SEO & Google -->
<meta name="description" content="Le client CLI ultime pour Bitbucket. Pipelines, PRs et Workflow Git intégrés. Développé en C par Gopu Inc.">
<meta name="keywords" content="bitbucket, cli, git, c, gopu, pipelines, automation, devops">
<meta name="author" content="Gopu Inc.">
<meta name="robots" content="index, follow">
<!-- 2. OpenGraph (Facebook, Discord, LinkedIn) -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://gopu-inc.github.io/bit/">
<meta property="og:title" content="Bit CLI - Bitbucket dans votre Terminal">
<meta property="og:description" content="Gérez vos PRs, surveillez vos Pipelines et déployez sans quitter la console. Performance native C.">
<meta property="og:image" content="https://raw.githubusercontent.com/gopu-inc/bit/main/logo.png"> <!-- Assurez-vous d'avoir une image ici -->
<meta property="og:site_name" content="Gopu Inc.">
<!-- 3. Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="https://gopu-inc.github.io/bit/">
<meta name="twitter:title" content="Bit CLI - Bitbucket Superchargé">
<meta name="twitter:description" content="L'outil indispensable pour les ingénieurs Bitbucket.">
<meta name="twitter:image" content="https://raw.githubusercontent.com/gopu-inc/bit/main/logo.png">
<!-- 4. Favicon -->
<link rel="icon" type="image/png" href="https://bitbucket.org/gopu-sin/bit/avatar/32">
<!-- 5. Tailwind CSS (CDN) -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- 6. TypeScript (CDN pour compilation runtime) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/typescript/5.3.3/typescript.min.js"></script>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
<!-- Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- Config Tailwind -->
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: {
sans: ['Inter', 'sans-serif'],
mono: ['"JetBrains Mono"', 'monospace'],
},
colors: {
bit: {
bg: '#020617', /* Slate 950 */
card: '#0f172a', /* Slate 900 */
blue: '#2563eb', /* Bitbucket Blue-ish */
accent: '#38bdf8' /* Sky 400 */
}
},
animation: {
'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
'float': 'float 6s ease-in-out infinite',
},
keyframes: {
float: {
'0%, 100%': { transform: 'translateY(0)' },
'50%': { transform: 'translateY(-20px)' },
}
}
}
}
}
</script>
</head>
<body class="bg-bit-bg text-slate-200 antialiased selection:bg-bit-blue selection:text-white overflow-x-hidden">
<!-- Background Gradients -->
<div class="fixed inset-0 z-0 pointer-events-none">
<div class="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-blue-600/10 rounded-full blur-[120px]"></div>
<div class="absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] bg-purple-600/10 rounded-full blur-[120px]"></div>
</div>
<!-- Navigation -->
<nav class="fixed w-full z-50 top-0 border-b border-white/5 bg-bit-bg/80 backdrop-blur-md">
<div class="max-w-7xl mx-auto px-6 py-4 flex justify-between items-center">
<a href="#" class="flex items-center gap-3 group">
<div class="w-8 h-8 rounded bg-gradient-to-tr from-blue-600 to-indigo-600 flex items-center justify-center font-mono font-bold text-white shadow-lg group-hover:shadow-blue-500/50 transition">b</div>
<span class="font-bold text-lg tracking-tight text-white">Gopu Inc <span class="text-slate-500">/</span> bit</span>
</a>
<div class="flex items-center gap-4">
<a href="https://bitbucket.org/gopu-sin/bit" class="text-slate-400 hover:text-[#2684FF] transition" title="Voir sur Bitbucket">
<i class="fab fa-bitbucket text-xl"></i>
</a>
<a href="https://github.com/gopu-inc/bit" class="text-slate-400 hover:text-white transition">
<i class="fab fa-github text-xl"></i>
</a>
<a href="https://discord.gg/RgJRE62AJ" class="hidden md:flex bg-[#5865F2] hover:bg-[#4752C4] text-white px-4 py-1.5 rounded-full text-sm font-medium transition items-center gap-2 shadow-lg shadow-indigo-500/20">
<i class="fab fa-discord"></i> Discord
</a>
</div>
</div>
</nav>
<!-- Hero Section -->
<main class="relative z-10 pt-40 pb-20 px-6 max-w-7xl mx-auto">
<div class="lg:flex lg:items-center lg:gap-20">
<!-- Left: Content -->
<div class="lg:w-1/2 space-y-8 animate-fade-in-up">
<a href="https://bitbucket.org/gopu-sin/bit/downloads/" class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-blue-900/20 border border-blue-500/30 text-blue-400 text-xs font-semibold hover:bg-blue-900/40 transition cursor-pointer">
<span class="relative flex h-2 w-2">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75"></span>
<span class="relative inline-flex rounded-full h-2 w-2 bg-blue-500"></span>
</span>
v1.0.2 Stable
</a>
<h1 class="text-5xl lg:text-7xl font-extrabold tracking-tight text-white leading-[1.1]">
Bitbucket <br>
<span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 via-indigo-400 to-purple-400">Unleashed.</span>
</h1>
<p class="text-lg text-slate-400 max-w-xl">
Le client CLI haute performance pour Bitbucket. <br>
Compilez, déployez et mergez sans quitter votre terminal. <br>
<span class="text-white font-mono text-sm mt-2 block">> 100% C. Native Speed.</span>
</p>
<!-- Install Box -->
<div class="mt-8 bg-bit-card border border-white/10 rounded-xl overflow-hidden shadow-2xl max-w-lg group hover:border-blue-500/30 transition duration-500">
<div class="flex items-center justify-between px-4 py-2 bg-black/20 border-b border-white/5">
<span class="text-xs text-slate-500 font-mono">Install via cURL</span>
<div class="flex gap-1.5">
<div class="w-2.5 h-2.5 rounded-full bg-slate-700"></div>
<div class="w-2.5 h-2.5 rounded-full bg-slate-700"></div>
</div>
</div>
<div class="p-4 flex items-center gap-4 cursor-pointer" onclick="copyCmd()">
<span class="text-green-500 font-mono">$</span>
<code id="cmd-text" class="flex-1 font-mono text-sm text-slate-300 truncate">curl -fsSL https://raw.githubusercontent.com/gopu-inc/bit/main/script/bitup-sh | sudo sh</code>
<i class="far fa-copy text-slate-500 group-hover:text-white transition"></i>
</div>
</div>
<div id="copy-toast" class="opacity-0 transition text-xs text-green-400 font-mono pl-4">Commande copiée dans le presse-papier !</div>
</div>
<!-- Right: Terminal Animation -->
<div class="lg:w-1/2 mt-16 lg:mt-0 lg:pl-10 relative">
<!-- Decorative Elements -->
<div class="absolute -top-10 -right-10 w-24 h-24 bg-blue-500/20 rounded-full blur-xl animate-pulse-slow"></div>
<div class="absolute -bottom-5 -left-5 w-32 h-32 bg-purple-500/20 rounded-full blur-xl animate-pulse-slow delay-700"></div>
<div class="relative bg-[#0d1117] rounded-lg border border-slate-800 shadow-2xl transform hover:-translate-y-1 transition duration-500 animate-float">
<div class="flex items-center px-4 py-3 border-b border-slate-800 bg-[#161b22] rounded-t-lg gap-2">
<div class="w-3 h-3 rounded-full bg-[#ff5f56]"></div>
<div class="w-3 h-3 rounded-full bg-[#ffbd2e]"></div>
<div class="w-3 h-3 rounded-full bg-[#27c93f]"></div>
<div class="ml-auto text-xs text-slate-600 font-mono">bit — zsh</div>
</div>
<!-- Le conteneur où TypeScript va écrire -->
<div id="terminal-output" class="p-6 font-mono text-sm h-[340px] overflow-hidden text-slate-300 space-y-2"></div>
</div>
</div>
</div>
</main>
<!-- Features Grid -->
<section class="py-24 bg-black/20 border-t border-white/5 relative z-10">
<div class="max-w-7xl mx-auto px-6">
<div class="text-center mb-16">
<span class="text-blue-500 font-bold text-sm uppercase tracking-wider">Features</span>
<h2 class="text-3xl md:text-4xl font-bold text-white mt-2">Pourquoi Bit est différent ?</h2>
</div>
<div class="grid md:grid-cols-3 gap-8">
<!-- Card 1 -->
<div class="p-8 rounded-2xl bg-bit-card border border-white/5 hover:border-blue-500/40 transition duration-300 group">
<div class="w-12 h-12 bg-blue-500/10 rounded-lg flex items-center justify-center text-blue-400 mb-6 group-hover:scale-110 transition">
<i class="fas fa-rocket text-xl"></i>
</div>
<h3 class="text-xl font-bold text-white mb-3">Native Performance</h3>
<p class="text-slate-400 text-sm leading-relaxed">
Écrit en C. Pas de runtime lourd. Démarrage instantané et empreinte mémoire minimale. Idéal pour les pipelines CI.
</p>
</div>
<!-- Card 2 -->
<div class="p-8 rounded-2xl bg-bit-card border border-white/5 hover:border-purple-500/40 transition duration-300 group">
<div class="w-12 h-12 bg-purple-500/10 rounded-lg flex items-center justify-center text-purple-400 mb-6 group-hover:scale-110 transition">
<i class="fab fa-bitbucket text-xl"></i>
</div>
<h3 class="text-xl font-bold text-white mb-3">Bitbucket First</h3>
<p class="text-slate-400 text-sm leading-relaxed">
Intègre nativement les APIs de <code>bitbucket.org</code>. Gérez vos PRs, reviewers et commentaires sans navigateur.
</p>
</div>
<!-- Card 3 -->
<div class="p-8 rounded-2xl bg-bit-card border border-white/5 hover:border-green-500/40 transition duration-300 group">
<div class="w-12 h-12 bg-green-500/10 rounded-lg flex items-center justify-center text-green-400 mb-6 group-hover:scale-110 transition">
<i class="fas fa-shield-alt text-xl"></i>
</div>
<h3 class="text-xl font-bold text-white mb-3">Secure by Design</h3>
<p class="text-slate-400 text-sm leading-relaxed">
Gestion sécurisée des tokens OAuth2. Stockage chiffré localement. Audit de sécurité continu via CodeQL.
</p>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="border-t border-white/10 bg-[#02040a] pt-16 pb-8">
<div class="max-w-7xl mx-auto px-6 flex flex-col items-center">
<div class="mb-8 flex gap-6">
<a href="https://bitbucket.org/gopu-sin/bit" class="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center hover:bg-blue-600 hover:text-white transition text-slate-400">
<i class="fab fa-bitbucket"></i>
</a>
<a href="https://discord.gg/RgJRE62AJ" class="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center hover:bg-[#5865F2] hover:text-white transition text-slate-400">
<i class="fab fa-discord"></i>
</a>
<a href="https://github.com/gopu-inc/bit" class="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center hover:bg-gray-700 hover:text-white transition text-slate-400">
<i class="fab fa-github"></i>
</a>
</div>
<p class="text-slate-500 text-sm text-center">
© 2026 <strong>Gopu Inc.</strong> Built for engineers. <br>
<a href="https://bitbucket.org/gopu-sin/bit" class="hover:text-white transition underline decoration-slate-700 underline-offset-4">gopu-sin/bit</a>
</p>
</div>
</footer>
<!-- Logic Script (Vanilla JS for Copy) -->
<script>
function copyCmd() {
const text = document.getElementById('cmd-text').innerText;
navigator.clipboard.writeText(text);
const toast = document.getElementById('copy-toast');
toast.style.opacity = '1';
setTimeout(() => toast.style.opacity = '0', 2000);
}
</script>
<!-- TypeScript Script (Compiled at Runtime via CDN) -->
<script type="text/typescript">
// Définition des types pour notre mini-terminal
interface TerminalLine {
type: 'input' | 'output' | 'info';
content: string;
delay: number;
}
class Terminal {
private element: HTMLElement;
private lines: TerminalLine[];
private currentLineIndex: number = 0;
constructor(elementId: string) {
const el = document.getElementById(elementId);
if (!el) throw new Error("Terminal element not found");
this.element = el;
// Scénario de démonstration
this.lines = [
{ type: 'input', content: 'bit login', delay: 800 },
{ type: 'info', content: 'Authenticating with Bitbucket OAuth...', delay: 600 },
{ type: 'output', content: '<span class="text-green-400">✓ Success:</span> Logged in as <span class="text-blue-400">dev@gopu-inc</span>', delay: 800 },
{ type: 'input', content: 'bit copy https://bitbucket.org/gopu-sin/core', delay: 1000 },
{ type: 'output', content: 'Cloning into \'core\'... 100% done.', delay: 500 },
{ type: 'input', content: 'bit pr-list', delay: 1200 },
{ type: 'output', content: '#42 fix: memory leak in auth module (Open)\n#43 feat: add support for pipelines (Review)', delay: 2000 },
{ type: 'input', content: 'bit ci --watch', delay: 1000 },
{ type: 'output', content: 'Pipeline #1024: <span class="text-yellow-400">Running...</span> [|||||| ]', delay: 0 }
];
}
public async run() {
while(true) { // Boucle infinie
this.element.innerHTML = ''; // Reset
this.currentLineIndex = 0;
for (const line of this.lines) {
await this.renderLine(line);
}
await new Promise(r => setTimeout(r, 3000)); // Pause à la fin
}
}
private async renderLine(line: TerminalLine) {
const lineEl = document.createElement('div');
lineEl.className = 'flex flex-wrap';
if (line.type === 'input') {
lineEl.innerHTML = `<span class="text-blue-500 mr-2">➜</span><span class="text-purple-400 mr-2">~</span> <span class="typing-text"></span><span class="cursor w-2 h-4 bg-slate-500 ml-1 animate-pulse"></span>`;
this.element.appendChild(lineEl);
// Effet machine à écrire
const textSpan = lineEl.querySelector('.typing-text') as HTMLElement;
const cursor = lineEl.querySelector('.cursor') as HTMLElement;
// Masquer les curseurs précédents
const oldCursors = document.querySelectorAll('.cursor');
oldCursors.forEach((c) => { if(c !== cursor) (c as HTMLElement).style.display = 'none'; });
for (let i = 0; i < line.content.length; i++) {
textSpan.textContent += line.content.charAt(i);
await new Promise(r => setTimeout(r, 40 + Math.random() * 40));
}
} else {
lineEl.className = "text-slate-400 whitespace-pre-wrap animate-fade-in pl-6";
lineEl.innerHTML = line.content;
this.element.appendChild(lineEl);
}
// Scroll auto vers le bas
this.element.scrollTop = this.element.scrollHeight;
await new Promise(r => setTimeout(r, line.delay));
}
}
// Lancement au chargement
window.onload = () => {
const term = new Terminal('terminal-output');
term.run();
};
</script>
</body>
</html>