diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/routes/user/[user]/+page.svelte | 15 | ||||
| -rw-r--r-- | src/styles/badge.css | 47 |
2 files changed, 59 insertions, 3 deletions
diff --git a/src/routes/user/[user]/+page.svelte b/src/routes/user/[user]/+page.svelte index 2c6c87cc..761ba1ee 100644 --- a/src/routes/user/[user]/+page.svelte +++ b/src/routes/user/[user]/+page.svelte @@ -7,6 +7,8 @@ import root from '$lib/Utility/root.js'; import locale from '$stores/locale.js'; import { onMount } from 'svelte'; + import authorisedUsers from '$lib/Data/authorised.json'; + import tooltip from '$lib/Tooltip/tooltip.js'; export let data; @@ -71,8 +73,15 @@ <a href={`https://anilist.co/user/${userData.name}`} target="_blank" - title={String(userData.id)}>@{userData.name}</a + title={String(userData.id)} + use:tooltip > + @{userData.name} + </a> + {#if userData && authorisedUsers.includes(userData.id)} + ‌ + <button class="unclickable-button button-badge badge-rainbow">Owner</button> + {/if} <span class="click-item">•</span> <a href={root(`/user/${userData.name}/badges`)}>Badge Wall</a> </p> @@ -88,10 +97,10 @@ <p /> {#await fetch(root(`/api/badges?id=${userData.id}`))} - {displayBadges(userData.name, '…')} + {displayBadges(userData.name, '...')} {:then badges} {#await badges.json()} - {displayBadges(userData.name, '…')} + {displayBadges(userData.name, '...')} {:then badges} {displayBadges(userData.name, badges.length)} {:catch} diff --git a/src/styles/badge.css b/src/styles/badge.css index 38cae6e4..68b15ea7 100644 --- a/src/styles/badge.css +++ b/src/styles/badge.css @@ -14,3 +14,50 @@ .badge-info:hover { background-color: var(--base0E); } + +.badge-rainbow { + color: var(--base07); + animation: rainbow 20s ease-in-out infinite; +} + +@keyframes rainbow { + 0% { + background: rgba(0, 105, 255, 0.71); + } + 10% { + background: rgba(100, 0, 255, 0.71); + } + 20% { + background: rgba(255, 0, 139, 0.71); + } + 30% { + background: rgba(255, 0, 0, 0.71); + } + 40% { + background: rgba(255, 96, 0, 0.71); + } + 50% { + background: rgba(202, 255, 0, 0.71); + } + 60% { + background: rgba(0, 255, 139, 0.71); + } + 70% { + background: rgba(202, 255, 0, 0.71); + } + 80% { + background: rgba(255, 96, 0, 0.71); + } + 85% { + background: rgba(255, 0, 0, 0.71); + } + 90% { + background: rgba(255, 0, 139, 0.71); + } + 95% { + background: rgba(100, 0, 255, 0.71); + } + to { + background: rgba(0, 105, 255, 0.71); + } +} |