parent
49463bf34d
commit
41de455826
418
logos.svg
418
logos.svg
|
|
@ -0,0 +1,418 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<title>CluBird — Logo</title>
|
||||||
|
<style>
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=DM+Sans:wght@400;500&display=swap');
|
||||||
|
|
||||||
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--bg: #07080e;
|
||||||
|
--surface: #0b0d16;
|
||||||
|
--border: #181c2e;
|
||||||
|
--border2: #252840;
|
||||||
|
--acc: #6366f1;
|
||||||
|
--acc-h: #4f46e5;
|
||||||
|
--acc-l: #818cf8;
|
||||||
|
--acc-bg: #1a1a3a;
|
||||||
|
--acc-bd: #2d2f5a;
|
||||||
|
--t1: #e8eaf6;
|
||||||
|
--t2: #9a9ec8;
|
||||||
|
--t3: #4a5070;
|
||||||
|
--t4: #252840;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background: var(--bg);
|
||||||
|
color: var(--t1);
|
||||||
|
font-family: 'DM Sans', system-ui, sans-serif;
|
||||||
|
padding: 40px;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-family: 'DM Sans', sans-serif;
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--t3);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 1.5px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section { margin-bottom: 48px; }
|
||||||
|
|
||||||
|
.row {
|
||||||
|
display: flex;
|
||||||
|
gap: 24px;
|
||||||
|
align-items: flex-start;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
background: var(--surface);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 14px;
|
||||||
|
padding: 28px 32px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-light {
|
||||||
|
background: #f0f2ff;
|
||||||
|
border: 1px solid #d4d8ff;
|
||||||
|
border-radius: 14px;
|
||||||
|
padding: 28px 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-label {
|
||||||
|
font-size: 9px;
|
||||||
|
color: var(--t3);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Logo Lockup ── */
|
||||||
|
.logo {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 11px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-icon {
|
||||||
|
flex-shrink: 0;
|
||||||
|
border-radius: 10px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wordmark {
|
||||||
|
font-family: 'Syne', sans-serif;
|
||||||
|
font-weight: 800;
|
||||||
|
letter-spacing: -0.5px;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wordmark .clu { color: var(--t1); }
|
||||||
|
.wordmark .bird { color: var(--acc); }
|
||||||
|
.wordmark-light .clu { color: #0f1120; }
|
||||||
|
.wordmark-light .bird { color: var(--acc); }
|
||||||
|
|
||||||
|
.tagline {
|
||||||
|
font-size: 9px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--t3);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 1.8px;
|
||||||
|
margin-top: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Divider ── */
|
||||||
|
.divider {
|
||||||
|
width: 1px;
|
||||||
|
height: 40px;
|
||||||
|
background: var(--border);
|
||||||
|
margin: 0 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Family ── */
|
||||||
|
.family {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 20px;
|
||||||
|
background: var(--surface);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 14px;
|
||||||
|
padding: 20px 28px;
|
||||||
|
width: fit-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
.family-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 9px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plus {
|
||||||
|
font-size: 16px;
|
||||||
|
color: var(--border2);
|
||||||
|
font-weight: 300;
|
||||||
|
}
|
||||||
|
|
||||||
|
.family-name {
|
||||||
|
font-family: 'Syne', sans-serif;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 800;
|
||||||
|
letter-spacing: -0.3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.family-sub {
|
||||||
|
font-size: 8.5px;
|
||||||
|
color: var(--t3);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.8px;
|
||||||
|
margin-top: 1px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<!-- ── 1. HAUPTLOGO ── -->
|
||||||
|
<div class="section">
|
||||||
|
<h2>Hauptlogo — Dark Mode</h2>
|
||||||
|
<div class="row">
|
||||||
|
|
||||||
|
<!-- Groß -->
|
||||||
|
<div>
|
||||||
|
<div class="card-label">Groß</div>
|
||||||
|
<div class="card">
|
||||||
|
<div class="logo">
|
||||||
|
<div class="logo-icon" style="width:48px;height:48px;background:linear-gradient(135deg,#6366f1 0%,#4338ca 100%);box-shadow:0 0 20px rgba(99,102,241,.35);">
|
||||||
|
<svg width="28" height="28" viewBox="0 0 28 28" fill="none">
|
||||||
|
<!-- Körper -->
|
||||||
|
<path d="M5 19 C5 19 8 10 15 9 C19 8 23 11 24 15" stroke="white" stroke-width="2.2" stroke-linecap="round" fill="none"/>
|
||||||
|
<!-- Flügel links oben -->
|
||||||
|
<path d="M15 9 C15 9 12 5 8 5 C9.5 7 10 9 11 10" stroke="white" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
|
||||||
|
<!-- Flügel rechts -->
|
||||||
|
<path d="M24 15 C24 15 27 13 28 10 C26 11 24 12 23 13.5" stroke="white" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
|
||||||
|
<!-- Auge -->
|
||||||
|
<circle cx="19" cy="8" r="1.5" fill="white" opacity=".95"/>
|
||||||
|
<!-- Schwanz / Brust -->
|
||||||
|
<path d="M5 19 C6.5 22 9 23.5 12 23.5 C15 23.5 18 22 19.5 19" stroke="white" stroke-width="2.2" stroke-linecap="round" fill="none"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="wordmark" style="font-size:28px;">
|
||||||
|
<span class="clu">Clu</span><span class="bird">Bird</span>
|
||||||
|
</div>
|
||||||
|
<div class="tagline">Mail Server Management</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Standard -->
|
||||||
|
<div>
|
||||||
|
<div class="card-label">Standard</div>
|
||||||
|
<div class="card">
|
||||||
|
<div class="logo">
|
||||||
|
<div class="logo-icon" style="width:36px;height:36px;background:linear-gradient(135deg,#6366f1 0%,#4338ca 100%);box-shadow:0 0 14px rgba(99,102,241,.3);">
|
||||||
|
<svg width="21" height="21" viewBox="0 0 28 28" fill="none">
|
||||||
|
<path d="M5 19 C5 19 8 10 15 9 C19 8 23 11 24 15" stroke="white" stroke-width="2.2" stroke-linecap="round" fill="none"/>
|
||||||
|
<path d="M15 9 C15 9 12 5 8 5 C9.5 7 10 9 11 10" stroke="white" stroke-width="1.8" stroke-linecap="round" fill="none"/>
|
||||||
|
<path d="M24 15 C24 15 27 13 28 10 C26 11 24 12 23 13.5" stroke="white" stroke-width="1.8" stroke-linecap="round" fill="none"/>
|
||||||
|
<circle cx="19" cy="8" r="1.5" fill="white" opacity=".95"/>
|
||||||
|
<path d="M5 19 C6.5 22 9 23.5 12 23.5 C15 23.5 18 22 19.5 19" stroke="white" stroke-width="2.2" stroke-linecap="round" fill="none"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="wordmark" style="font-size:21px;">
|
||||||
|
<span class="clu">Clu</span><span class="bird">Bird</span>
|
||||||
|
</div>
|
||||||
|
<div class="tagline">by Aziros</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Klein / Sidebar -->
|
||||||
|
<div>
|
||||||
|
<div class="card-label">Klein / Sidebar</div>
|
||||||
|
<div class="card">
|
||||||
|
<div class="logo">
|
||||||
|
<div class="logo-icon" style="width:28px;height:28px;background:linear-gradient(135deg,#6366f1 0%,#4338ca 100%);border-radius:7px;">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 28 28" fill="none">
|
||||||
|
<path d="M5 19 C5 19 8 10 15 9 C19 8 23 11 24 15" stroke="white" stroke-width="2.5" stroke-linecap="round" fill="none"/>
|
||||||
|
<path d="M5 19 C6.5 22 9 23.5 12 23.5 C15 23.5 18 22 19.5 19" stroke="white" stroke-width="2.5" stroke-linecap="round" fill="none"/>
|
||||||
|
<circle cx="19" cy="8" r="2" fill="white" opacity=".95"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="wordmark" style="font-size:16px;">
|
||||||
|
<span class="clu">Clu</span><span class="bird">Bird</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- ── 2. LIGHT MODE ── -->
|
||||||
|
<div class="section">
|
||||||
|
<h2>Light Mode</h2>
|
||||||
|
<div class="row">
|
||||||
|
<div>
|
||||||
|
<div class="card-label">Standard Light</div>
|
||||||
|
<div class="card-light">
|
||||||
|
<div class="logo">
|
||||||
|
<div class="logo-icon" style="width:36px;height:36px;background:linear-gradient(135deg,#6366f1 0%,#4338ca 100%);border-radius:10px;box-shadow:0 4px 12px rgba(99,102,241,.25);">
|
||||||
|
<svg width="21" height="21" viewBox="0 0 28 28" fill="none">
|
||||||
|
<path d="M5 19 C5 19 8 10 15 9 C19 8 23 11 24 15" stroke="white" stroke-width="2.2" stroke-linecap="round" fill="none"/>
|
||||||
|
<path d="M15 9 C15 9 12 5 8 5 C9.5 7 10 9 11 10" stroke="white" stroke-width="1.8" stroke-linecap="round" fill="none"/>
|
||||||
|
<path d="M24 15 C24 15 27 13 28 10 C26 11 24 12 23 13.5" stroke="white" stroke-width="1.8" stroke-linecap="round" fill="none"/>
|
||||||
|
<circle cx="19" cy="8" r="1.5" fill="white" opacity=".95"/>
|
||||||
|
<path d="M5 19 C6.5 22 9 23.5 12 23.5 C15 23.5 18 22 19.5 19" stroke="white" stroke-width="2.2" stroke-linecap="round" fill="none"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="wordmark wordmark-light" style="font-size:21px;">
|
||||||
|
<span class="clu">Clu</span><span class="bird">Bird</span>
|
||||||
|
</div>
|
||||||
|
<div class="tagline" style="color:#8892aa;">Mail Server Management</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- ── 3. ICON VARIANTEN ── -->
|
||||||
|
<div class="section">
|
||||||
|
<h2>Icon-Only — alle Größen</h2>
|
||||||
|
<div class="card" style="display:flex;gap:20px;align-items:flex-end;width:fit-content;">
|
||||||
|
|
||||||
|
<!-- 64px -->
|
||||||
|
<div style="display:flex;flex-direction:column;align-items:center;gap:8px;">
|
||||||
|
<div style="width:64px;height:64px;border-radius:16px;background:linear-gradient(135deg,#6366f1,#4338ca);display:flex;align-items:center;justify-content:center;box-shadow:0 0 24px rgba(99,102,241,.4);">
|
||||||
|
<svg width="38" height="38" viewBox="0 0 28 28" fill="none">
|
||||||
|
<path d="M5 19 C5 19 8 10 15 9 C19 8 23 11 24 15" stroke="white" stroke-width="2.2" stroke-linecap="round" fill="none"/>
|
||||||
|
<path d="M15 9 C15 9 12 5 8 5 C9.5 7 10 9 11 10" stroke="white" stroke-width="1.8" stroke-linecap="round" fill="none"/>
|
||||||
|
<path d="M24 15 C24 15 27 13 28 10 C26 11 24 12 23 13.5" stroke="white" stroke-width="1.8" stroke-linecap="round" fill="none"/>
|
||||||
|
<circle cx="19" cy="8" r="1.5" fill="white" opacity=".95"/>
|
||||||
|
<path d="M5 19 C6.5 22 9 23.5 12 23.5 C15 23.5 18 22 19.5 19" stroke="white" stroke-width="2.2" stroke-linecap="round" fill="none"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<span style="font-size:9px;color:var(--t3);">64px</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 48px -->
|
||||||
|
<div style="display:flex;flex-direction:column;align-items:center;gap:8px;">
|
||||||
|
<div style="width:48px;height:48px;border-radius:12px;background:linear-gradient(135deg,#6366f1,#4338ca);display:flex;align-items:center;justify-content:center;box-shadow:0 0 16px rgba(99,102,241,.35);">
|
||||||
|
<svg width="28" height="28" viewBox="0 0 28 28" fill="none">
|
||||||
|
<path d="M5 19 C5 19 8 10 15 9 C19 8 23 11 24 15" stroke="white" stroke-width="2.2" stroke-linecap="round" fill="none"/>
|
||||||
|
<path d="M15 9 C15 9 12 5 8 5 C9.5 7 10 9 11 10" stroke="white" stroke-width="1.8" stroke-linecap="round" fill="none"/>
|
||||||
|
<path d="M24 15 C24 15 27 13 28 10 C26 11 24 12 23 13.5" stroke="white" stroke-width="1.8" stroke-linecap="round" fill="none"/>
|
||||||
|
<circle cx="19" cy="8" r="1.5" fill="white" opacity=".95"/>
|
||||||
|
<path d="M5 19 C6.5 22 9 23.5 12 23.5 C15 23.5 18 22 19.5 19" stroke="white" stroke-width="2.2" stroke-linecap="round" fill="none"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<span style="font-size:9px;color:var(--t3);">48px</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 36px -->
|
||||||
|
<div style="display:flex;flex-direction:column;align-items:center;gap:8px;">
|
||||||
|
<div style="width:36px;height:36px;border-radius:9px;background:linear-gradient(135deg,#6366f1,#4338ca);display:flex;align-items:center;justify-content:center;">
|
||||||
|
<svg width="21" height="21" viewBox="0 0 28 28" fill="none">
|
||||||
|
<path d="M5 19 C5 19 8 10 15 9 C19 8 23 11 24 15" stroke="white" stroke-width="2.2" stroke-linecap="round" fill="none"/>
|
||||||
|
<path d="M15 9 C15 9 12 5 8 5 C9.5 7 10 9 11 10" stroke="white" stroke-width="1.8" stroke-linecap="round" fill="none"/>
|
||||||
|
<circle cx="19" cy="8" r="1.5" fill="white" opacity=".95"/>
|
||||||
|
<path d="M5 19 C6.5 22 9 23.5 12 23.5 C15 23.5 18 22 19.5 19" stroke="white" stroke-width="2.2" stroke-linecap="round" fill="none"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<span style="font-size:9px;color:var(--t3);">36px</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 24px -->
|
||||||
|
<div style="display:flex;flex-direction:column;align-items:center;gap:8px;">
|
||||||
|
<div style="width:24px;height:24px;border-radius:6px;background:linear-gradient(135deg,#6366f1,#4338ca);display:flex;align-items:center;justify-content:center;">
|
||||||
|
<svg width="14" height="14" viewBox="0 0 28 28" fill="none">
|
||||||
|
<path d="M5 19 C5 19 8 10 15 9 C19 8 23 11 24 15" stroke="white" stroke-width="2.5" stroke-linecap="round" fill="none"/>
|
||||||
|
<path d="M5 19 C6.5 22 9 23.5 12 23.5 C15 23.5 18 22 19.5 19" stroke="white" stroke-width="2.5" stroke-linecap="round" fill="none"/>
|
||||||
|
<circle cx="19" cy="8" r="2" fill="white"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<span style="font-size:9px;color:var(--t3);">24px</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Favicon -->
|
||||||
|
<div style="display:flex;flex-direction:column;align-items:center;gap:8px;">
|
||||||
|
<div style="width:16px;height:16px;border-radius:4px;background:linear-gradient(135deg,#6366f1,#4338ca);display:flex;align-items:center;justify-content:center;">
|
||||||
|
<svg width="10" height="10" viewBox="0 0 28 28" fill="none">
|
||||||
|
<path d="M5 19 C5 19 8 10 15 9 C19 8 23 11 24 15" stroke="white" stroke-width="3" stroke-linecap="round" fill="none"/>
|
||||||
|
<path d="M5 19 C6.5 22 9 23.5 12 23.5 C15 23.5 18 22 19.5 19" stroke="white" stroke-width="3" stroke-linecap="round" fill="none"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<span style="font-size:9px;color:var(--t3);">Favicon</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Rund -->
|
||||||
|
<div style="display:flex;flex-direction:column;align-items:center;gap:8px;">
|
||||||
|
<div style="width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#4338ca);display:flex;align-items:center;justify-content:center;box-shadow:0 0 16px rgba(99,102,241,.35);">
|
||||||
|
<svg width="28" height="28" viewBox="0 0 28 28" fill="none">
|
||||||
|
<path d="M5 19 C5 19 8 10 15 9 C19 8 23 11 24 15" stroke="white" stroke-width="2.2" stroke-linecap="round" fill="none"/>
|
||||||
|
<path d="M15 9 C15 9 12 5 8 5 C9.5 7 10 9 11 10" stroke="white" stroke-width="1.8" stroke-linecap="round" fill="none"/>
|
||||||
|
<path d="M24 15 C24 15 27 13 28 10 C26 11 24 12 23 13.5" stroke="white" stroke-width="1.8" stroke-linecap="round" fill="none"/>
|
||||||
|
<circle cx="19" cy="8" r="1.5" fill="white" opacity=".95"/>
|
||||||
|
<path d="M5 19 C6.5 22 9 23.5 12 23.5 C15 23.5 18 22 19.5 19" stroke="white" stroke-width="2.2" stroke-linecap="round" fill="none"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<span style="font-size:9px;color:var(--t3);">Rund</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- ── 4. WORDMARK VARIANTEN ── -->
|
||||||
|
<div class="section">
|
||||||
|
<h2>Wordmark</h2>
|
||||||
|
<div class="card" style="display:flex;flex-direction:column;gap:16px;width:fit-content;">
|
||||||
|
<div class="wordmark" style="font-size:32px;"><span class="clu">Clu</span><span class="bird">Bird</span></div>
|
||||||
|
<div class="wordmark" style="font-size:22px;"><span class="clu">Clu</span><span class="bird">Bird</span></div>
|
||||||
|
<div style="font-family:'Syne',sans-serif;font-size:18px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--t1);">CLU<span style="color:var(--acc);">BIRD</span></div>
|
||||||
|
<div style="font-family:'Syne',sans-serif;font-size:16px;font-weight:800;color:var(--t1);">clu<span style="color:var(--acc);">bird</span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- ── 5. PRODUKTFAMILIE ── -->
|
||||||
|
<div class="section">
|
||||||
|
<h2>Aziros Produktfamilie</h2>
|
||||||
|
<div class="family">
|
||||||
|
|
||||||
|
<!-- CluPilot -->
|
||||||
|
<div class="family-item">
|
||||||
|
<div style="width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,#6366f1,#4338ca);display:flex;align-items:center;justify-content:center;box-shadow:0 0 10px rgba(99,102,241,.3);">
|
||||||
|
<span style="font-size:11px;font-weight:800;color:#fff;font-family:'Syne',sans-serif;">CP</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="family-name"><span style="color:var(--t1);">Clu</span><span style="color:var(--acc);">Pilot</span></div>
|
||||||
|
<div class="family-sub">Infrastruktur</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="plus">+</div>
|
||||||
|
|
||||||
|
<!-- CluBird -->
|
||||||
|
<div class="family-item">
|
||||||
|
<div style="width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,#6366f1,#4338ca);display:flex;align-items:center;justify-content:center;box-shadow:0 0 10px rgba(99,102,241,.3);">
|
||||||
|
<svg width="18" height="18" viewBox="0 0 28 28" fill="none">
|
||||||
|
<path d="M5 19 C5 19 8 10 15 9 C19 8 23 11 24 15" stroke="white" stroke-width="2.2" stroke-linecap="round" fill="none"/>
|
||||||
|
<path d="M15 9 C15 9 12 5 8 5 C9.5 7 10 9 11 10" stroke="white" stroke-width="1.8" stroke-linecap="round" fill="none"/>
|
||||||
|
<circle cx="19" cy="8" r="1.5" fill="white" opacity=".95"/>
|
||||||
|
<path d="M5 19 C6.5 22 9 23.5 12 23.5 C15 23.5 18 22 19.5 19" stroke="white" stroke-width="2.2" stroke-linecap="round" fill="none"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="family-name"><span style="color:var(--t1);">Clu</span><span style="color:var(--acc);">Bird</span></div>
|
||||||
|
<div class="family-sub">Mail Management</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="plus">=</div>
|
||||||
|
|
||||||
|
<!-- Aziros Suite -->
|
||||||
|
<div>
|
||||||
|
<div style="font-family:'Syne',sans-serif;font-size:15px;font-weight:800;color:var(--t1);">Aziros <span style="color:var(--acc);">Suite</span></div>
|
||||||
|
<div class="family-sub">Infrastructure + Mail</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -68,6 +68,14 @@
|
||||||
{{ $buttonLabel }}
|
{{ $buttonLabel }}
|
||||||
</button>
|
</button>
|
||||||
@endif
|
@endif
|
||||||
|
|
||||||
|
<button wire:click="openLogs"
|
||||||
|
class="inline-flex items-center gap-1 rounded-full text-[10px] px-2.5 py-0.5 border
|
||||||
|
border-white/10 bg-white/5 hover:bg-white/10 transition-colors"
|
||||||
|
style="color:var(--mw-t4)">
|
||||||
|
<i class="ph ph-list-bullets text-[11px]"></i>
|
||||||
|
Logs
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue