From d44795fdf04baf119b6c825187e9b356cc72efc1 Mon Sep 17 00:00:00 2001 From: Simon Abler Date: Wed, 11 Mar 2026 16:54:32 +0000 Subject: [PATCH 1/2] feat(home): terminal/industrial hero redesign MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Completely replace the generic two-column hero with a Terminal/Cyber aesthetic that matches the brand identity (Cyber Security Engineer, industrial palette). HTML changes (home.component.html): - Animated status badge with pulsing cyan dot ("all systems operational") - Larger, bolder gradient headline (hero-title-accent) - Hero subtitle now mentions Signpack (signing) - Three-button CTA row: solid dark primary / outlined secondary / ghost - Terminal widget replaces the three feature-kacheln: • macOS-style title bar with red/yellow/green dots • Monospace code body with prompt/cmd/flag/string/comment tokens • Blinking cursor animation • Stats strip: 7 APIs / <50ms / free / GS1 styles.scss: - hero-bg: 3-stop radial gradient + dot-grid overlay with mask-image - hero-grid: pure-CSS dot-grid via background-image + mask, no image files - status-dot: pulse keyframe animation - hero-title / hero-title-accent: 800 weight, clamp() responsive size - hero-btn-primary/secondary/ghost: custom buttons (no Bootstrap dependency) - terminal-widget: dark surface #0d1117, cyan border glow, nested shadows - terminal-bar / t-dot: macOS traffic-light dots - t-prompt/cmd/flag/string/comment: syntax-highlight color tokens - t-cursor: blink keyframe - terminal-stats: 4-column stat strip with separators --- .../src/app/features/home/home.component.html | 164 ++++++----- apps/simonapi/src/styles.scss | 261 +++++++++++++++++- 2 files changed, 359 insertions(+), 66 deletions(-) diff --git a/apps/simonapi/src/app/features/home/home.component.html b/apps/simonapi/src/app/features/home/home.component.html index c2f496c..da3f192 100644 --- a/apps/simonapi/src/app/features/home/home.component.html +++ b/apps/simonapi/src/app/features/home/home.component.html @@ -1,87 +1,123 @@ -
-
-
- - -
- - hub.abler.tirol - -

- Secure APIs.
- - Resilient Systems. - +
+ + + + +
+
+ + +
+ + +
+ + hub.abler.tirol — all systems operational +
+ + +

+ Secure APIs.
+ Resilient Systems.

-

- GS1 barcodes, QR codes, watermarking and dev utilities — - built by a Cyber Security Engineer from Tyrol. + + +

+ GS1 barcodes · QR codes · watermarking · crypto · signing — + engineered by a Cyber Security Engineer from Tyrol.

+ +
- + class="hero-btn-primary d-inline-flex align-items-center gap-2"> + API Docs - + class="hero-btn-secondary d-inline-flex align-items-center gap-2"> + Try in Swagger - - - Explore APIs - - - - Contact + + Explore APIs ↓
+
- -
-
-
- 🏭 -
-
Industrial GS1
-
- GS1-128, DataMatrix, batch up to 100 barcodes/request -
-
+ +
+
+ + +
+ + + + hub.abler.tirol — api
-
- 🔐 -
-
Security-first
-
- Rate limiting, anomaly detection, blocklist -
+ + +
+
+ $ + curl -X POST https://hub.abler.tirol/api/qr \ +
+
+ -H "Content-Type: application/json" \ +
+
+ -d '{"type":"url","payload":{"url":"https://example.com"}}' +
+
+
+ # 200 OK · image/png · 3.2 KB · 41ms +
+
+
+ $ + curl https://hub.abler.tirol/api/barcode/ean13.png \ +
+
+ -H "x-api-key: sk_pro_••••••••••••" +
+
+
+ # 200 OK · image/svg+xml · 4.8 KB · 28ms +
+
+
+ $
-
- ⚡ -
-
Open & free
-
- Standard APIs free to use · GS1 with API key -
+ + +
+
+ 7 + APIs +
+ +
+ <50ms + avg latency +
+ +
+ free + to start +
+ +
+ GS1 + certified
+
diff --git a/apps/simonapi/src/styles.scss b/apps/simonapi/src/styles.scss index cef4f4f..f7d9007 100644 --- a/apps/simonapi/src/styles.scss +++ b/apps/simonapi/src/styles.scss @@ -280,13 +280,270 @@ kbd { } /* Hero-Hintergrund (ersetzt Blob-Animationen) */ +/* ── Home: Hero ───────────────────────────────────────── */ .hero-bg { + position: relative; + overflow: hidden; background: - radial-gradient(ellipse 80% 50% at 50% -10%, color-mix(in oklab, var(--brand), transparent 88%), transparent), - radial-gradient(ellipse 60% 40% at 80% 60%, color-mix(in oklab, var(--brand-2), transparent 92%), transparent), + radial-gradient(ellipse 70% 60% at 15% 50%, color-mix(in oklab, var(--brand), transparent 88%), transparent), + radial-gradient(ellipse 50% 70% at 90% 20%, color-mix(in oklab, var(--brand-2), transparent 90%), transparent), + radial-gradient(ellipse 80% 40% at 50% 100%, color-mix(in oklab, #818cf8, transparent 94%), transparent), #f8fafc; } +// Subtle dot-grid overlay — pure CSS, zero images +.hero-grid { + pointer-events: none; + position: absolute; + inset: 0; + background-image: radial-gradient(circle, color-mix(in oklab, var(--brand), transparent 80%) 1px, transparent 1px); + background-size: 32px 32px; + mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 100%); + opacity: .45; +} + +.hero-inner { + position: relative; + z-index: 1; +} + +// Status badge +.hero-status { + display: inline-flex; + align-items: center; + gap: .5rem; + font-size: .72rem; + font-weight: 600; + letter-spacing: .04em; + text-transform: uppercase; + color: var(--brand-dark, #0891b2); + background: color-mix(in oklab, var(--brand), transparent 88%); + border: 1px solid color-mix(in oklab, var(--brand), transparent 65%); + border-radius: 99px; + padding: .3rem .85rem .3rem .6rem; +} + +.status-dot { + width: 7px; + height: 7px; + border-radius: 50%; + background: #22d3ee; + box-shadow: 0 0 0 3px color-mix(in oklab, #22d3ee, transparent 65%); + animation: pulse-dot 2.2s ease-in-out infinite; +} + +@keyframes pulse-dot { + 0%, 100% { box-shadow: 0 0 0 2px color-mix(in oklab, #22d3ee, transparent 55%); } + 50% { box-shadow: 0 0 0 5px color-mix(in oklab, #22d3ee, transparent 82%); } +} + +// Hero headline +.hero-title { + font-size: clamp(2.2rem, 5.5vw, 3.4rem); + font-weight: 800; + line-height: 1.08; + letter-spacing: -.03em; + color: var(--text); +} + +.hero-title-accent { + background: linear-gradient(110deg, var(--brand-2) 10%, var(--brand) 55%, #a5f3fc 100%); + -webkit-background-clip: text; + background-clip: text; + color: transparent; +} + +.hero-sub { + font-size: 1rem; + line-height: 1.7; + color: var(--muted); + max-width: 480px; +} + +// Hero CTAs +.hero-btn-primary { + display: inline-flex; + align-items: center; + gap: .45rem; + padding: .55rem 1.25rem; + border-radius: var(--radius); + background: var(--text); + color: #f8fafc; + font-size: .88rem; + font-weight: 600; + text-decoration: none; + transition: background .18s var(--ease), transform .1s var(--ease), box-shadow .18s var(--ease); + box-shadow: 0 2px 8px rgba(0,0,0,.18); + + &:hover { + background: color-mix(in oklab, var(--text), var(--brand) 20%); + color: #f8fafc; + transform: translateY(-1px); + box-shadow: 0 4px 16px rgba(0,0,0,.18); + } +} + +.hero-btn-secondary { + display: inline-flex; + align-items: center; + gap: .45rem; + padding: .55rem 1.25rem; + border-radius: var(--radius); + background: transparent; + color: var(--text); + font-size: .88rem; + font-weight: 600; + text-decoration: none; + border: 1.5px solid color-mix(in oklab, var(--text), transparent 68%); + transition: border-color .18s, background .18s, transform .1s; + + &:hover { + border-color: var(--brand); + color: var(--text); + background: color-mix(in oklab, var(--brand), transparent 90%); + transform: translateY(-1px); + } +} + +.hero-btn-ghost { + display: inline-flex; + align-items: center; + padding: .55rem .9rem; + border-radius: var(--radius); + color: var(--muted); + font-size: .85rem; + font-weight: 500; + text-decoration: none; + transition: color .18s; + + &:hover { color: var(--brand-dark, #0891b2); } +} + +// ── Terminal Widget ──────────────────────────────────── +.terminal-widget { + border-radius: var(--radius-lg); + overflow: hidden; + border: 1px solid color-mix(in oklab, var(--brand), transparent 70%); + box-shadow: + 0 0 0 1px color-mix(in oklab, var(--brand), transparent 80%), + 0 20px 60px rgba(0,0,0,.13), + inset 0 1px 0 rgba(255,255,255,.06); + background: #0d1117; +} + +.terminal-bar { + display: flex; + align-items: center; + gap: .45rem; + padding: .6rem 1rem; + background: #161b22; + border-bottom: 1px solid rgba(255,255,255,.07); +} + +.t-dot { + width: 12px; + height: 12px; + border-radius: 50%; + flex-shrink: 0; + + &.t-red { background: #ff5f57; } + &.t-yellow { background: #febc2e; } + &.t-green { background: #28c840; } +} + +.terminal-title { + flex: 1; + text-align: center; + font-size: .72rem; + color: rgba(255,255,255,.35); + font-family: ui-monospace, "Cascadia Code", "JetBrains Mono", monospace; + letter-spacing: .04em; +} + +.terminal-body { + padding: 1.1rem 1.25rem; + font-family: ui-monospace, "Cascadia Code", "JetBrains Mono", "Fira Code", monospace; + font-size: .78rem; + line-height: 1.65; + color: #c9d1d9; +} + +.t-line { + display: flex; + flex-wrap: wrap; + align-items: baseline; + gap: 0; + min-height: 1.4em; +} + +.t-blank { height: .5em; } + +.t-prompt { + color: #22d3ee; + font-weight: 700; + margin-right: .25rem; + user-select: none; +} + +.t-cmd { color: #e6edf3; } +.t-flag { color: #79c0ff; } +.t-string { color: #a5d6ff; } +.t-comment { color: #8b949e; font-style: italic; } + +.t-cursor { + display: inline-block; + width: 7px; + height: 1.1em; + background: #22d3ee; + border-radius: 1px; + vertical-align: text-bottom; + margin-left: .2rem; + animation: blink 1.1s step-end infinite; +} + +@keyframes blink { + 0%, 100% { opacity: 1; } + 50% { opacity: 0; } +} + +.terminal-stats { + display: flex; + align-items: center; + gap: 0; + padding: .6rem 1.25rem; + background: #161b22; + border-top: 1px solid rgba(255,255,255,.07); +} + +.t-stat { + display: flex; + flex-direction: column; + align-items: center; + flex: 1; +} + +.t-stat-val { + font-size: .85rem; + font-weight: 700; + color: #22d3ee; + font-family: ui-monospace, monospace; + line-height: 1.2; +} + +.t-stat-label { + font-size: .65rem; + color: rgba(255,255,255,.35); + text-transform: uppercase; + letter-spacing: .06em; +} + +.t-stat-sep { + width: 1px; + height: 2rem; + background: rgba(255,255,255,.1); + flex-shrink: 0; +} + /* ── Home: Section Label ──────────────────────────────── */ .section-label { font-size: .72rem; From 1ab6a53a3584c01edf47ce6c20c28565dea9ba37 Mon Sep 17 00:00:00 2001 From: Simon Abler Date: Wed, 11 Mar 2026 18:05:57 +0100 Subject: [PATCH 2/2] Update curl command for barcode API request --- apps/simonapi/src/app/features/home/home.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/simonapi/src/app/features/home/home.component.html b/apps/simonapi/src/app/features/home/home.component.html index da3f192..25766bf 100644 --- a/apps/simonapi/src/app/features/home/home.component.html +++ b/apps/simonapi/src/app/features/home/home.component.html @@ -80,7 +80,7 @@

$ - curl https://hub.abler.tirol/api/barcode/ean13.png \ + curl https://hub.abler.tirol/api/barcode/png?type=ean13&text=12222222222222&includetext=true&scale=3 \
-H "x-api-key: sk_pro_••••••••••••"