Skip to content

Commit ae0ff50

Browse files
tomupstomups
committed
Add install watchflow button
1 parent 6711b4b commit ae0ff50

2 files changed

Lines changed: 131 additions & 10 deletions

File tree

‎index.html‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -53,10 +53,10 @@
5353
<!-- Header stars (generated by script) -->
5454
<div class="header-stars"></div>
5555

56-
<!-- GitHub Button -->
56+
<!-- GitHub Button (Top Right) -->
5757
<a href="https://github.com/warestack/watchflow" class="github-btn" target="_blank" rel="noopener noreferrer">
5858
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
59-
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
59+
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.30.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
6060
</svg>
6161
View in GitHub
6262
</a>
@@ -67,6 +67,14 @@ <h1 class="title">
6767
<p class="subtitle">
6868
Replace static protection rules with agentic guardrails. <strong>Watchflow</strong> ensures consistent quality standards with smarter, context-aware protection for every repo.
6969
</p>
70+
71+
<!-- Install Button -->
72+
<div class="header-cta">
73+
<a href="https://github.com/apps/watchflow" class="install-btn" target="_blank" rel="noopener noreferrer">
74+
<img src="favicon.svg" width="20" height="20" alt="Watchflow">
75+
Install Watchflow
76+
</a>
77+
</div>
7078
</header>
7179

7280
<main class="main">

‎style.css‎

Lines changed: 121 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -168,7 +168,74 @@ body::after {
168168
position: relative;
169169
}
170170

171-
/* GitHub Button */
171+
/* Header CTA */
172+
.header-cta {
173+
text-align: center;
174+
margin-top: 2rem;
175+
animation: slideUp 1s ease-out 0.8s both;
176+
}
177+
178+
.install-btn {
179+
display: inline-flex;
180+
align-items: center;
181+
gap: 0.5rem;
182+
padding: 1rem 2rem;
183+
background: var(--accent-secondary);
184+
color: var(--text-primary);
185+
text-decoration: none;
186+
font-weight: 700;
187+
font-size: 1.1rem;
188+
border: 3px solid var(--border-color);
189+
border-radius: 12px;
190+
box-shadow: 4px 4px 0 var(--shadow-color);
191+
transition: all 0.2s ease;
192+
text-transform: uppercase;
193+
letter-spacing: 0.02em;
194+
position: relative;
195+
overflow: hidden;
196+
}
197+
198+
.install-btn:hover {
199+
background: #FFEB3B;
200+
transform: translate(2px, 2px);
201+
box-shadow: 2px 2px 0 var(--shadow-color);
202+
}
203+
204+
.install-btn::before {
205+
content: '';
206+
position: absolute;
207+
top: 0;
208+
left: 0;
209+
right: 0;
210+
bottom: 0;
211+
background:
212+
radial-gradient(circle at 20px 15px, var(--accent-primary) 2px, transparent 2px),
213+
radial-gradient(circle at 60px 10px, var(--accent-tertiary) 1.5px, transparent 1.5px),
214+
radial-gradient(circle at 100px 35px, var(--accent-quaternary) 2px, transparent 2px),
215+
radial-gradient(circle at 140px 20px, var(--accent-primary) 1.5px, transparent 1.5px),
216+
radial-gradient(circle at 180px 30px, var(--accent-tertiary) 2px, transparent 2px),
217+
radial-gradient(circle at 40px 40px, var(--accent-quaternary) 1.5px, transparent 1.5px),
218+
radial-gradient(circle at 120px 45px, var(--accent-primary) 2px, transparent 2px),
219+
radial-gradient(circle at 80px 25px, var(--accent-tertiary) 1.5px, transparent 1.5px);
220+
background-size: 200px 60px;
221+
opacity: 0;
222+
transition: opacity 0.3s ease;
223+
animation: sparkleFlow 4s linear infinite;
224+
pointer-events: none;
225+
z-index: 0;
226+
border-radius: 9px;
227+
}
228+
229+
.install-btn:hover::before {
230+
opacity: 0.6;
231+
}
232+
233+
.install-btn img, .install-btn span {
234+
position: relative;
235+
z-index: 1;
236+
}
237+
238+
/* GitHub Button (Top Right) */
172239
.github-btn {
173240
position: fixed;
174241
top: 0.5rem;
@@ -362,6 +429,7 @@ body::after {
362429
opacity: 1;
363430
}
364431

432+
365433
.btn-primary:disabled {
366434
background: #A0A0A0;
367435
color: #666666;
@@ -380,6 +448,7 @@ body::after {
380448
display: none;
381449
}
382450

451+
383452
.btn-secondary {
384453
background: var(--accent-secondary);
385454
color: var(--text-primary);
@@ -585,12 +654,12 @@ body::after {
585654
}
586655

587656
.install-btn {
588-
background: var(--accent-primary);
657+
background: var(--accent-secondary);
589658
color: var(--text-primary);
590659
}
591660

592661
.install-btn:hover {
593-
background: #45B7B8;
662+
background: #FFEB3B;
594663
transform: translateY(-1px);
595664
}
596665

@@ -1120,7 +1189,7 @@ body::after {
11201189
line-height: 1.4;
11211190
}
11221191

1123-
/* GitHub button responsive */
1192+
/* Header responsive */
11241193
.github-btn {
11251194
top: 1rem;
11261195
right: 1rem;
@@ -1129,6 +1198,16 @@ body::after {
11291198
gap: 0.4rem;
11301199
}
11311200

1201+
.header-cta {
1202+
margin-top: 1.5rem;
1203+
}
1204+
1205+
.install-btn {
1206+
padding: 0.875rem 1.5rem;
1207+
font-size: 1rem;
1208+
gap: 0.4rem;
1209+
}
1210+
11321211
/* Header adjustments */
11331212
.header {
11341213
padding: 3rem 1rem 2.5rem;
@@ -1297,7 +1376,7 @@ body::after {
12971376
letter-spacing: 0.02em;
12981377
}
12991378

1300-
/* GitHub button mobile - brutalist banner */
1379+
/* GitHub button mobile - banner layout */
13011380
.github-btn {
13021381
position: fixed;
13031382
top: 0;
@@ -1313,11 +1392,9 @@ body::after {
13131392
box-shadow: 0 3px 0 var(--shadow-color);
13141393
z-index: 20;
13151394
justify-content: center;
1316-
text-align: center;
1317-
background: var(--accent-quaternary);
1318-
color: var(--text-primary);
13191395
text-transform: uppercase;
13201396
letter-spacing: 0.03em;
1397+
background: var(--accent-quaternary);
13211398
}
13221399

13231400
.github-btn:hover {
@@ -1337,6 +1414,28 @@ body::after {
13371414
padding-top: 3.2rem;
13381415
}
13391416

1417+
/* Install button mobile */
1418+
.header-cta {
1419+
margin-top: 1rem;
1420+
}
1421+
1422+
.install-btn {
1423+
padding: 0.875rem 1.25rem;
1424+
font-size: 0.95rem;
1425+
border-radius: 10px;
1426+
text-transform: none;
1427+
letter-spacing: 0.02em;
1428+
}
1429+
1430+
/* Disable sparkle animation on mobile */
1431+
.install-btn::before {
1432+
display: none;
1433+
}
1434+
1435+
.install-btn:hover::before {
1436+
display: none;
1437+
}
1438+
13401439
/* Examples mobile */
13411440
.examples-section {
13421441
margin-bottom: 2rem;
@@ -1542,6 +1641,11 @@ body::after {
15421641
font-size: 0.75rem;
15431642
}
15441643

1644+
.install-btn {
1645+
padding: 0.75rem 1rem;
1646+
font-size: 0.9rem;
1647+
}
1648+
15451649
.example-card {
15461650
padding: 1rem;
15471651
}
@@ -1644,6 +1748,15 @@ body::after {
16441748
}
16451749
}
16461750

1751+
@keyframes sparkleFlow {
1752+
0% {
1753+
background-position: 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px;
1754+
}
1755+
100% {
1756+
background-position: 200px 0px, 200px 0px, 200px 0px, 200px 0px, 200px 0px, 200px 0px, 200px 0px, 200px 0px;
1757+
}
1758+
}
1759+
16471760
/* Robot Loading Animations */
16481761
@keyframes robotBobble {
16491762
0%, 100% {

0 commit comments

Comments
 (0)