Replaced most ai assets with heroicons (https://heroicons.com/))
This commit is contained in:
CodingPhoenixx
@@ -69,7 +69,7 @@ export class IconCard extends LitElement {
|
||||
return html`
|
||||
<div class="card">
|
||||
<div class="icon">
|
||||
<slot name="icon"></slot>
|
||||
<slot></slot>
|
||||
</div>
|
||||
<h3>${this.heading}</h3>
|
||||
<p>${this.description}</p>
|
||||
|
||||
@@ -0,0 +1,27 @@
|
||||
import { html, type TemplateResult } from "lit";
|
||||
|
||||
export class Icons {
|
||||
public static icons: Record<string, TemplateResult> = {
|
||||
calendar: html`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5m-9-6h.008v.008H12v-.008ZM12 15h.008v.008H12V15Zm0 2.25h.008v.008H12v-.008ZM9.75 15h.008v.008H9.75V15Zm0 2.25h.008v.008H9.75v-.008ZM7.5 15h.008v.008H7.5V15Zm0 2.25h.008v.008H7.5v-.008Zm6.75-4.5h.008v.008h-.008v-.008Zm0 2.25h.008v.008h-.008V15Zm0 2.25h.008v.008h-.008v-.008Zm2.25-4.5h.008v.008H16.5v-.008Zm0 2.25h.008v.008H16.5V15Z" /></svg>`,
|
||||
globe: html`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 0 1 7.843 4.582M12 3a8.997 8.997 0 0 0-7.843 4.582m15.686 0A11.953 11.953 0 0 1 12 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0 1 21 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0 1 12 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 0 1 3 12c0-1.605.42-3.113 1.157-4.418" /></svg>`,
|
||||
trophy: html`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 18.75h-9m9 0a3 3 0 0 1 3 3h-15a3 3 0 0 1 3-3m9 0v-3.375c0-.621-.503-1.125-1.125-1.125h-.871M7.5 18.75v-3.375c0-.621.504-1.125 1.125-1.125h.872m5.007 0H9.497m5.007 0a7.454 7.454 0 0 1-.982-3.172M9.497 14.25a7.454 7.454 0 0 0 .981-3.172M5.25 4.236c-.982.143-1.954.317-2.916.52A6.003 6.003 0 0 0 7.73 9.728M5.25 4.236V4.5c0 2.108.966 3.99 2.48 5.228M5.25 4.236V2.721C7.456 2.41 9.71 2.25 12 2.25c2.291 0 4.545.16 6.75.47v1.516M7.73 9.728a6.726 6.726 0 0 0 2.748 1.35m8.272-6.842V4.5c0 2.108-.966 3.99-2.48 5.228m2.48-5.492a46.32 46.32 0 0 1 2.916.52 6.003 6.003 0 0 1-5.395 4.972m0 0a6.726 6.726 0 0 1-2.749 1.35m0 0a6.772 6.772 0 0 1-3.044 0" /></svg>`,
|
||||
target: html`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="M6 6.878V6a2.25 2.25 0 0 1 2.25-2.25h7.5A2.25 2.25 0 0 1 18 6v.878m-12 0c.235-.083.487-.128.75-.128h10.5c.263 0 .515.045.75.128m-12 0A2.25 2.25 0 0 0 4.5 9v.878m13.5-3A2.25 2.25 0 0 1 19.5 9v.878m0 0a2.246 2.246 0 0 0-.75-.128H5.25c-.263 0-.515.045-.75.128m15 0A2.25 2.25 0 0 1 21 12v6a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 18v-6c0-.98.626-1.813 1.5-2.122" /></svg>`,
|
||||
clipboard: html`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="M15.666 3.888A2.25 2.25 0 0 0 13.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 0 1-.75.75H9a.75.75 0 0 1-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 0 1-2.25 2.25H6.75A2.25 2.25 0 0 1 4.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 0 1 1.927-.184" /></svg>`,
|
||||
users: html`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z" /></svg>`,
|
||||
user: html`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" /></svg>`,
|
||||
home: html`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" /></svg>`,
|
||||
mail: html`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75" /></svg>`,
|
||||
desktop: html`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="M9 17.25v1.007a3 3 0 0 1-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0 1 15 18.257V17.25m6-12V15a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 15V5.25m18 0A2.25 2.25 0 0 0 18.75 3H5.25A2.25 2.25 0 0 0 3 5.25m18 0V12a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 12V5.25" /></svg>`,
|
||||
tools: html`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="M11.42 15.17 17.25 21A2.652 2.652 0 0 0 21 17.25l-5.877-5.877M11.42 15.17l2.496-3.03c.317-.384.74-.626 1.208-.766M11.42 15.17l-4.655 5.653a2.548 2.548 0 1 1-3.586-3.586l6.837-5.63m5.108-.233c.55-.164 1.163-.188 1.743-.14a4.5 4.5 0 0 0 4.486-6.336l-3.276 3.277a3.004 3.004 0 0 1-2.25-2.25l3.276-3.276a4.5 4.5 0 0 0-6.336 4.486c.091 1.076-.071 2.264-.904 2.95l-.102.085m-1.745 1.437L5.909 7.5H4.5L2.25 3.75l1.5-1.5L7.5 4.5v1.409l4.26 4.26m-1.745 1.437 1.745-1.437m6.615 8.206L15.75 15.75M4.867 19.125h.008v.008h-.008v-.008Z" /></svg>`,
|
||||
map_pin: html`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z" /></svg>`,
|
||||
clock: html`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" /></svg>`,
|
||||
table: html`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="M3.375 19.5h17.25m-17.25 0a1.125 1.125 0 0 1-1.125-1.125M3.375 19.5h7.5c.621 0 1.125-.504 1.125-1.125m-9.75 0V5.625m0 12.75v-1.5c0-.621.504-1.125 1.125-1.125m18.375 2.625V5.625m0 12.75c0 .621-.504 1.125-1.125 1.125m1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125m0 3.75h-7.5A1.125 1.125 0 0 1 12 18.375m9.75-12.75c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125m19.5 0v1.5c0 .621-.504 1.125-1.125 1.125M2.25 5.625v1.5c0 .621.504 1.125 1.125 1.125m0 0h17.25m-17.25 0h7.5c.621 0 1.125.504 1.125 1.125M3.375 8.25c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125m17.25-3.75h-7.5c-.621 0-1.125.504-1.125 1.125m8.625-1.125c.621 0 1.125.504 1.125 1.125v1.5c0 .621-.504 1.125-1.125 1.125m-17.25 0h7.5m-7.5 0c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125M12 10.875v-1.5m0 1.5c0 .621-.504 1.125-1.125 1.125M12 10.875c0 .621.504 1.125 1.125 1.125m-2.25 0c.621 0 1.125.504 1.125 1.125M13.125 12h7.5m-7.5 0c-.621 0-1.125.504-1.125 1.125M20.625 12c.621 0 1.125.504 1.125 1.125v1.5c0 .621-.504 1.125-1.125 1.125m-17.25 0h7.5M12 14.625v-1.5m0 1.5c0 .621-.504 1.125-1.125 1.125M12 14.625c0 .621.504 1.125 1.125 1.125m-2.25 0c.621 0 1.125.504 1.125 1.125m0 1.5v-1.5m0 0c0-.621.504-1.125 1.125-1.125m0 0h7.5" /></svg>`,
|
||||
calculator: html`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 15.75V18m-7.5-6.75h.008v.008H8.25v-.008Zm0 2.25h.008v.008H8.25V13.5Zm0 2.25h.008v.008H8.25v-.008Zm0 2.25h.008v.008H8.25V18Zm2.498-6.75h.007v.008h-.007v-.008Zm0 2.25h.007v.008h-.007V13.5Zm0 2.25h.007v.008h-.007v-.008Zm0 2.25h.007v.008h-.007V18Zm2.504-6.75h.008v.008h-.008v-.008Zm0 2.25h.008v.008h-.008V13.5Zm0 2.25h.008v.008h-.008v-.008Zm0 2.25h.008v.008h-.008V18Zm2.498-6.75h.008v.008h-.008v-.008Zm0 2.25h.008v.008h-.008V13.5ZM8.25 6h7.5v2.25h-7.5V6ZM12 2.25c-1.892 0-3.758.11-5.593.322C5.307 2.7 4.5 3.65 4.5 4.757V19.5a2.25 2.25 0 0 0 2.25 2.25h10.5a2.25 2.25 0 0 0 2.25-2.25V4.757c0-1.108-.806-2.057-1.907-2.185A48.507 48.507 0 0 0 12 2.25Z" /></svg>`,
|
||||
chart_pie: html`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6a7.5 7.5 0 1 0 7.5 7.5h-7.5V6Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 10.5H21A7.5 7.5 0 0 0 13.5 3v7.5Z" /></svg>`,
|
||||
gear: html`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.149.894c.07.424.384.764.78.93.398.164.855.142 1.205-.108l.737-.527a1.125 1.125 0 0 1 1.45.12l.773.774c.39.389.44 1.002.12 1.45l-.527.737c-.25.35-.272.806-.107 1.204.165.397.505.71.93.78l.893.15c.543.09.94.559.94 1.109v1.094c0 .55-.397 1.02-.94 1.11l-.894.149c-.424.07-.764.383-.929.78-.165.398-.143.854.107 1.204l.527.738c.32.447.269 1.06-.12 1.45l-.774.773a1.125 1.125 0 0 1-1.449.12l-.738-.527c-.35-.25-.806-.272-1.203-.107-.398.165-.71.505-.781.929l-.149.894c-.09.542-.56.94-1.11.94h-1.094c-.55 0-1.019-.398-1.11-.94l-.148-.894c-.071-.424-.384-.764-.781-.93-.398-.164-.854-.142-1.204.108l-.738.527c-.447.32-1.06.269-1.45-.12l-.773-.774a1.125 1.125 0 0 1-.12-1.45l.527-.737c.25-.35.272-.806.108-1.204-.165-.397-.506-.71-.93-.78l-.894-.15c-.542-.09-.94-.56-.94-1.109v-1.094c0-.55.398-1.02.94-1.11l.894-.149c.424-.07.765-.383.93-.78.165-.398.143-.854-.108-1.204l-.526-.738a1.125 1.125 0 0 1 .12-1.45l.773-.773a1.125 1.125 0 0 1 1.45-.12l.737.527c.35.25.807.272 1.204.107.397-.165.71-.505.78-.929l.15-.894Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" /></svg>`,
|
||||
document: html`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" /></svg>`,
|
||||
document_text: html`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" /></svg>`,
|
||||
bin: html`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" /></svg>`,
|
||||
stack: html`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="M6.429 9.75 2.25 12l4.179 2.25m0-4.5 5.571 3 5.571-3m-11.142 0L2.25 7.5 12 2.25l9.75 5.25-4.179 2.25m0 0L21.75 12l-4.179 2.25m0 0 4.179 2.25L12 21.75 2.25 16.5l4.179-2.25m11.142 0-5.571 3-5.571-3" /></svg>`,
|
||||
};
|
||||
}
|
||||
@@ -32,7 +32,14 @@ export class UiBadge extends LitElement {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.icon ::slotted(svg) {
|
||||
.icon ::slotted(*) {
|
||||
display: inline-flex;
|
||||
width: 0.85rem;
|
||||
height: 0.85rem;
|
||||
}
|
||||
|
||||
.icon ::slotted(svg),
|
||||
.icon ::slotted(* > svg) {
|
||||
width: 0.85rem;
|
||||
height: 0.85rem;
|
||||
}
|
||||
@@ -43,6 +50,12 @@ export class UiBadge extends LitElement {
|
||||
padding-top: 0.05em;
|
||||
}
|
||||
|
||||
.badge.white {
|
||||
color: #ffffff;
|
||||
background: color-mix(in srgb, #ffffff 10%, transparent);
|
||||
border-color: color-mix(in srgb, #ffffff 25%, transparent);
|
||||
}
|
||||
|
||||
.badge.accent {
|
||||
color: var(--color-accent);
|
||||
background: color-mix(in srgb, var(--color-accent) 10%, transparent);
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
// components/ui-tab-bar.ts
|
||||
import { LitElement, html, css } from "lit";
|
||||
import { customElement, property } from "lit/decorators.js";
|
||||
import { Icons } from "./icons";
|
||||
|
||||
export interface Tab {
|
||||
id: string;
|
||||
@@ -73,14 +74,7 @@ export class UiTabBar extends LitElement {
|
||||
@property({ type: Array }) tabs: Tab[] = [];
|
||||
@property() active = "";
|
||||
|
||||
private icons: Record<string, unknown> = {
|
||||
calendar: html`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5"/></svg>`,
|
||||
trophy: html`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 18.75h-9m9 0a3 3 0 0 1 3 3h-15a3 3 0 0 1 3-3m9 0v-4.5A3.375 3.375 0 0 0 13.125 10.875h-2.25A3.375 3.375 0 0 0 7.5 14.25v4.5m9-13.5V3.375c0-.621-.504-1.125-1.125-1.125H8.625c-.621 0-1.125.504-1.125 1.125V5.25m10.5 0h1.875c.621 0 1.125.504 1.125 1.125v2.25c0 1.864-1.511 3.375-3.375 3.375h-.375m-10.5-6.75H4.875c-.621 0-1.125.504-1.125 1.125v2.25c0 1.864 1.511 3.375 3.375 3.375h.375"/></svg>`,
|
||||
target: html`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15a2.25 2.25 0 0 1 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V19.5a2.25 2.25 0 0 0 2.25 2.25h.75"/></svg>`,
|
||||
clipboard: html`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"/></svg>`,
|
||||
users: html`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z"/></svg>`,
|
||||
user: html`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z"/></svg>`,
|
||||
};
|
||||
|
||||
|
||||
private handleClick(id: string) {
|
||||
this.dispatchEvent(
|
||||
@@ -101,7 +95,7 @@ export class UiTabBar extends LitElement {
|
||||
class="tab ${this.active === t.id ? "active" : ""}"
|
||||
@click=${() => this.handleClick(t.id)}
|
||||
>
|
||||
${t.icon ? this.icons[t.icon] ?? html`` : html``}
|
||||
${t.icon ? Icons.icons[t.icon] ?? html`` : html``}
|
||||
${t.label}
|
||||
</button>
|
||||
`
|
||||
|
||||
@@ -3,6 +3,8 @@ import { LitElement, html, css, nothing } from "lit";
|
||||
import { customElement, state } from "lit/decorators.js";
|
||||
import type { Tab } from "../../components/ui-tab-bar.js";
|
||||
import "../../components/ui-tab-bar.js";
|
||||
import "../../components/ui-badge.js";
|
||||
import { Icons } from "../../components/icons.js";
|
||||
|
||||
const TAB_LOADERS: Record<string, () => Promise<unknown>> = {
|
||||
details: () => import("./tabs/competition-details.js"),
|
||||
@@ -31,7 +33,10 @@ export class CompetitionPage extends LitElement {
|
||||
static styles = css`
|
||||
:host {
|
||||
display: block;
|
||||
font-family: system-ui, -apple-system, sans-serif;
|
||||
font-family:
|
||||
system-ui,
|
||||
-apple-system,
|
||||
sans-serif;
|
||||
color: var(--color-text);
|
||||
background: var(--color-bg);
|
||||
min-height: 100vh;
|
||||
@@ -194,56 +199,20 @@ export class CompetitionPage extends LitElement {
|
||||
<span>/</span>
|
||||
<a href="/competitions">Competitions</a>
|
||||
<span>/</span>
|
||||
<span
|
||||
>22. Schweizermeisterschaften Heissluftballon / Swiss
|
||||
Cup</span
|
||||
>
|
||||
<span>EVENT_NAME</span>
|
||||
</div>
|
||||
|
||||
<h1>
|
||||
22. Schweizermeisterschaften Heissluftballon / Swiss Cup
|
||||
</h1>
|
||||
<h1>EVENT_NAME</h1>
|
||||
|
||||
<div class="hero-meta">
|
||||
<div class="hero-meta-item">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
|
||||
/>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z"
|
||||
/>
|
||||
</svg>
|
||||
Langenthal / BE, Switzerland
|
||||
${Icons.icons.map_pin} COMPETITION_LOCATION
|
||||
</div>
|
||||
<div class="hero-meta-item">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5"
|
||||
/>
|
||||
</svg>
|
||||
13 – 17 May 2026
|
||||
${Icons.icons.calendar} DATE_FROM_UNTIL_SHORT
|
||||
</div>
|
||||
<ui-badge variant="accent">CAT2</ui-badge>
|
||||
<ui-badge variant="success">Upcoming</ui-badge>
|
||||
<ui-badge variant="white">EVENT_TYPE</ui-badge>
|
||||
<ui-badge variant="success">EVENT_STATUS</ui-badge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
// tabs/competition-details.ts
|
||||
import { LitElement, html, css } from "lit";
|
||||
import { customElement } from "lit/decorators.js";
|
||||
import { Icons } from "../../../components/icons";
|
||||
|
||||
@customElement("competition-details")
|
||||
export class CompetitionDetails extends LitElement {
|
||||
@@ -131,76 +132,52 @@ export class CompetitionDetails extends LitElement {
|
||||
<div class="layout">
|
||||
<div>
|
||||
<div class="main-card">
|
||||
<div class="card-date">13 May 2026 – 17 May 2026</div>
|
||||
<div class="card-date">DATE_FROM – DATE_UNTIL</div>
|
||||
<div class="card-body">
|
||||
<span>Schweizermeisterschaften 2026</span>
|
||||
<span>Open Swiss Nationals & Swiss Cup</span>
|
||||
<span
|
||||
>Location: Berufsfachschule BZL Langenthal</span
|
||||
>
|
||||
<span
|
||||
>Official announcement can be found in the
|
||||
<a href="#">ENB</a></span
|
||||
>
|
||||
<span
|
||||
>Registration via
|
||||
<a
|
||||
href="https://www.smhl.ch/de/registration"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>https://www.smhl.ch/de/registration</a
|
||||
></span
|
||||
>
|
||||
COMPETITION_DETAILS
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stats-row">
|
||||
<stat-card value="32" label="Registered Pilots"></stat-card>
|
||||
<stat-card value="12" label="Tasks Planned"></stat-card>
|
||||
<stat-card value="5" label="Days"></stat-card>
|
||||
<stat-card value="CAT2" label="FAI Category"></stat-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sidebar">
|
||||
<div class="sidebar-card">
|
||||
<div class="sidebar-card-header">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M11.42 15.17 17.25 21A2.652 2.652 0 0 0 21 17.25l-5.877-5.877M11.42 15.17l2.496-3.03c.317-.384.74-.626 1.208-.766M11.42 15.17l-4.655 5.653a2.548 2.548 0 1 1-3.586-3.586l6.837-5.63m5.108-.233c.55-.164 1.163-.188 1.743-.14a4.5 4.5 0 0 0 4.486-6.336l-3.276 3.277a3.004 3.004 0 0 1-2.25-2.25l3.276-3.276a4.5 4.5 0 0 0-6.336 4.486c.049.58.025 1.193-.14 1.743"/></svg>
|
||||
${Icons.icons.tools}
|
||||
Competition Details
|
||||
</div>
|
||||
<div class="sidebar-card-body">
|
||||
<div class="detail-row">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z"/></svg>
|
||||
Director: Claude Weber
|
||||
${Icons.icons.user}
|
||||
Director: DIRECTOR_NAME
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 0 1 7.843 4.582M12 3a8.997 8.997 0 0 0-7.843 4.582m15.686 0A11.953 11.953 0 0 1 12 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0 1 21 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0 1 12 16.5a17.92 17.92 0 0 1-8.716-2.247m0 0A8.966 8.966 0 0 1 3 12c0-1.264.26-2.467.73-3.56"/></svg>
|
||||
FAI sanctioned – CAT2 / CIA Sporting event
|
||||
${Icons.icons.globe}
|
||||
EVENT_TYPE [National, Continental] (CAT 1 | CAT 2)
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9 17.25v1.007a3 3 0 0 1-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0 1 15 18.257V17.25m6-12V15a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 15V5.25A2.25 2.25 0 0 1 5.25 3h13.5A2.25 2.25 0 0 1 21 5.25Z"/></svg>
|
||||
Combined Logger/Marker Event
|
||||
${Icons.icons.desktop}
|
||||
LOGGER_TYPE [Combined Logger, Marker Event]
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-card">
|
||||
<div class="sidebar-card-header">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75"/></svg>
|
||||
${Icons.icons.mail}
|
||||
Contact Details
|
||||
</div>
|
||||
<div class="sidebar-card-body">
|
||||
<div class="detail-row">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z"/></svg>
|
||||
Werner BEYELER
|
||||
${Icons.icons.user}
|
||||
ORGANISATOR_NAME
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"/></svg>
|
||||
<a href="#" target="_blank" rel="noopener">Website</a>
|
||||
${Icons.icons.home}
|
||||
<a href="#" target="_blank" rel="noopener">COMPETITION_WEBSITE</a>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75"/></svg>
|
||||
<a href="mailto:bewerner@bluewin.ch">bewerner@bluewin.ch</a>
|
||||
${Icons.icons.mail}
|
||||
<a href="mailto:-">CONTACT_EMAIL</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,14 +1,15 @@
|
||||
// pages/home/home-page.ts (updated)
|
||||
import { LitElement, html, css } from 'lit';
|
||||
import { customElement } from 'lit/decorators.js';
|
||||
import '../components/ui-button';
|
||||
import '../components/ui-button-secondary';
|
||||
import '../components/ui-badge';
|
||||
import '../components/stat-card';
|
||||
import '../components/icon-card';
|
||||
import '../components/ui-link';
|
||||
import { LitElement, html, css } from "lit";
|
||||
import { customElement } from "lit/decorators.js";
|
||||
import "../components/ui-button";
|
||||
import "../components/ui-button-secondary";
|
||||
import "../components/ui-badge";
|
||||
import "../components/stat-card";
|
||||
import "../components/icon-card";
|
||||
import "../components/ui-link";
|
||||
import { Icons } from "../components/icons";
|
||||
|
||||
@customElement('home-page')
|
||||
@customElement("home-page")
|
||||
export class HomePage extends LitElement {
|
||||
static styles = css`
|
||||
:host {
|
||||
@@ -40,7 +41,7 @@ export class HomePage extends LitElement {
|
||||
}
|
||||
|
||||
.hero::after {
|
||||
content: '';
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
@@ -152,11 +153,7 @@ export class HomePage extends LitElement {
|
||||
}
|
||||
|
||||
.comp-row:hover {
|
||||
border-color: color-mix(
|
||||
in srgb,
|
||||
var(--color-accent) 40%,
|
||||
transparent
|
||||
);
|
||||
border-color: color-mix(in srgb, var(--color-accent) 40%, transparent);
|
||||
}
|
||||
|
||||
.comp-date {
|
||||
@@ -165,11 +162,7 @@ export class HomePage extends LitElement {
|
||||
align-items: center;
|
||||
min-width: 3.5rem;
|
||||
padding: 0.5rem 0.65rem;
|
||||
background: color-mix(
|
||||
in srgb,
|
||||
var(--color-accent) 10%,
|
||||
transparent
|
||||
);
|
||||
background: color-mix(in srgb, var(--color-accent) 10%, transparent);
|
||||
border-radius: 0.5rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
@@ -235,11 +228,11 @@ export class HomePage extends LitElement {
|
||||
|
||||
private navigate(path: string) {
|
||||
this.dispatchEvent(
|
||||
new CustomEvent('nav', {
|
||||
new CustomEvent("nav", {
|
||||
detail: { path },
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
})
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
@@ -247,25 +240,19 @@ export class HomePage extends LitElement {
|
||||
return html`
|
||||
<div class="hero">
|
||||
<ui-badge variant="accent">
|
||||
<svg slot="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M12 2L2 7l10 5 10-5-10-5z" />
|
||||
<path d="M2 17l10 5 10-5" />
|
||||
<path d="M2 12l10 5 10-5" />
|
||||
</svg>
|
||||
<span slot="icon">${Icons.icons.stack}</span>
|
||||
Live Scoring Platform
|
||||
</ui-badge>
|
||||
<h1>Transparent scoring for <span>balloon competitions</span></h1>
|
||||
<p class="hero-sub">
|
||||
Track tasks, manage participants, and deliver real-time
|
||||
results for hot air balloon competitions worldwide.
|
||||
Track tasks, manage participants, and deliver real-time results for
|
||||
hot air balloon competitions worldwide.
|
||||
</p>
|
||||
<div class="hero-actions">
|
||||
<ui-button @click=${() => this.navigate('/competitions')}>
|
||||
<ui-button @click=${() => this.navigate("/competitions")}>
|
||||
Browse competitions
|
||||
</ui-button>
|
||||
<ui-button-secondary
|
||||
@click=${() => this.navigate('/register')}
|
||||
>
|
||||
<ui-button-secondary @click=${() => this.navigate("/register")}>
|
||||
Create account
|
||||
</ui-button-secondary>
|
||||
</div>
|
||||
@@ -280,10 +267,7 @@ export class HomePage extends LitElement {
|
||||
<div class="stats-grid">
|
||||
<stat-card value="42" label="Competitions scored"></stat-card>
|
||||
<stat-card value="318" label="Registered pilots"></stat-card>
|
||||
<stat-card
|
||||
value="1,240"
|
||||
label="Tasks completed"
|
||||
></stat-card>
|
||||
<stat-card value="1,240" label="Tasks completed"></stat-card>
|
||||
<stat-card value="12" label="Countries"></stat-card>
|
||||
</div>
|
||||
</section>
|
||||
@@ -297,65 +281,39 @@ export class HomePage extends LitElement {
|
||||
<div class="features-grid">
|
||||
<icon-card
|
||||
heading="Real-Time Scoring"
|
||||
description="Scores update live as scorers submit results. Pilots and spectators always see the latest standings."
|
||||
description="Scores update live as judges submit results. Pilots and spectators always see the latest standings."
|
||||
>
|
||||
<svg slot="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle cx="12" cy="12" r="10" />
|
||||
<polyline points="12 6 12 12 16 14" />
|
||||
</svg>
|
||||
${Icons.icons.clock}
|
||||
</icon-card>
|
||||
<icon-card
|
||||
heading="Task Management"
|
||||
description="Define and manage competition tasks with support for all standard ballooning task types."
|
||||
>
|
||||
<svg slot="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z" />
|
||||
<polyline points="14 2 14 8 20 8" />
|
||||
<line x1="16" y1="13" x2="8" y2="13" />
|
||||
<line x1="16" y1="17" x2="8" y2="17" />
|
||||
<polyline points="10 9 9 9 8 9" />
|
||||
</svg>
|
||||
${Icons.icons.document_text}
|
||||
</icon-card>
|
||||
<icon-card
|
||||
heading="Pilot Profiles"
|
||||
description="Every pilot gets a profile with competition history, rankings, and performance statistics."
|
||||
>
|
||||
<svg slot="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2" />
|
||||
<circle cx="9" cy="7" r="4" />
|
||||
<path d="M23 21v-2a4 4 0 00-3-3.87" />
|
||||
<path d="M16 3.13a4 4 0 010 7.75" />
|
||||
</svg>
|
||||
${Icons.icons.users}
|
||||
</icon-card>
|
||||
<icon-card
|
||||
heading="Live Leaderboard"
|
||||
description="Public leaderboards let spectators follow the action from anywhere in the world."
|
||||
>
|
||||
<svg slot="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<rect x="1" y="3" width="15" height="13" rx="2" ry="2" />
|
||||
<path d="M16 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2" />
|
||||
<line x1="8" y1="21" x2="8" y2="16" />
|
||||
<line x1="4" y1="21" x2="12" y2="21" />
|
||||
</svg>
|
||||
${Icons.icons.desktop}
|
||||
</icon-card>
|
||||
<icon-card
|
||||
heading="GPS Integration"
|
||||
description="Import GPS tracks and calculate distances to targets automatically for precise scoring."
|
||||
>
|
||||
<svg slot="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z" />
|
||||
<circle cx="12" cy="10" r="3" />
|
||||
</svg>
|
||||
${Icons.icons.map_pin}
|
||||
</icon-card>
|
||||
<icon-card
|
||||
heading="Result Export"
|
||||
description="Export final standings and detailed score sheets as PDF or CSV for official records."
|
||||
>
|
||||
<svg slot="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
|
||||
<line x1="3" y1="9" x2="21" y2="9" />
|
||||
<line x1="9" y1="21" x2="9" y2="9" />
|
||||
</svg>
|
||||
${Icons.icons.table}
|
||||
</icon-card>
|
||||
</div>
|
||||
</section>
|
||||
@@ -369,22 +327,16 @@ export class HomePage extends LitElement {
|
||||
<div class="competitions-list">
|
||||
<div
|
||||
class="comp-row"
|
||||
@click=${() => this.navigate('/competitions/1')}
|
||||
@click=${() => this.navigate("/competitions/1")}
|
||||
>
|
||||
<div class="comp-date">
|
||||
<span class="comp-date-day">18</span>
|
||||
<span class="comp-date-month">Mar</span>
|
||||
</div>
|
||||
<div class="comp-info">
|
||||
<span class="comp-name">
|
||||
European Balloon Challenge 2026
|
||||
</span>
|
||||
<span class="comp-name"> European Balloon Challenge 2026 </span>
|
||||
<span class="comp-location">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z" />
|
||||
<circle cx="12" cy="10" r="3" />
|
||||
</svg>
|
||||
Salzburg, Austria
|
||||
${Icons.icons.map_pin} Salzburg, Austria
|
||||
</span>
|
||||
</div>
|
||||
<ui-badge variant="accent">Upcoming</ui-badge>
|
||||
@@ -392,7 +344,7 @@ export class HomePage extends LitElement {
|
||||
|
||||
<div
|
||||
class="comp-row"
|
||||
@click=${() => this.navigate('/competitions/2')}
|
||||
@click=${() => this.navigate("/competitions/2")}
|
||||
>
|
||||
<div class="comp-date">
|
||||
<span class="comp-date-day">14</span>
|
||||
@@ -401,11 +353,7 @@ export class HomePage extends LitElement {
|
||||
<div class="comp-info">
|
||||
<span class="comp-name">Cappadocia Open 2026</span>
|
||||
<span class="comp-location">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z" />
|
||||
<circle cx="12" cy="10" r="3" />
|
||||
</svg>
|
||||
Goreme, Turkey
|
||||
${Icons.icons.map_pin} Goreme, Turkey
|
||||
</span>
|
||||
</div>
|
||||
<ui-badge variant="success">Live</ui-badge>
|
||||
@@ -413,22 +361,16 @@ export class HomePage extends LitElement {
|
||||
|
||||
<div
|
||||
class="comp-row"
|
||||
@click=${() => this.navigate('/competitions/3')}
|
||||
@click=${() => this.navigate("/competitions/3")}
|
||||
>
|
||||
<div class="comp-date">
|
||||
<span class="comp-date-day">02</span>
|
||||
<span class="comp-date-month">Feb</span>
|
||||
</div>
|
||||
<div class="comp-info">
|
||||
<span class="comp-name">
|
||||
Albuquerque Winter Fiesta
|
||||
</span>
|
||||
<span class="comp-name"> Albuquerque Winter Fiesta </span>
|
||||
<span class="comp-location">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z" />
|
||||
<circle cx="12" cy="10" r="3" />
|
||||
</svg>
|
||||
New Mexico, USA
|
||||
${Icons.icons.map_pin} New Mexico, USA
|
||||
</span>
|
||||
</div>
|
||||
<ui-badge variant="muted">Ended</ui-badge>
|
||||
@@ -436,22 +378,16 @@ export class HomePage extends LitElement {
|
||||
|
||||
<div
|
||||
class="comp-row"
|
||||
@click=${() => this.navigate('/competitions/4')}
|
||||
@click=${() => this.navigate("/competitions/4")}
|
||||
>
|
||||
<div class="comp-date">
|
||||
<span class="comp-date-day">11</span>
|
||||
<span class="comp-date-month">Jan</span>
|
||||
</div>
|
||||
<div class="comp-info">
|
||||
<span class="comp-name">
|
||||
Swiss Alpine Balloon Trophy
|
||||
</span>
|
||||
<span class="comp-name"> Swiss Alpine Balloon Trophy </span>
|
||||
<span class="comp-location">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z" />
|
||||
<circle cx="12" cy="10" r="3" />
|
||||
</svg>
|
||||
Chateau-d'Oex, Switzerland
|
||||
${Icons.icons.map_pin} Chateau-d'Oex, Switzerland
|
||||
</span>
|
||||
</div>
|
||||
<ui-badge variant="error">Canceled</ui-badge>
|
||||
|
||||
Reference in New Issue
Block a user