feat(redesign): re-skin admin-ops/platform-admin/public views to DS (Phase D batch 4 — panel re-skin complete)
All checks were successful
Test Asgard Runner / test (push) Successful in 3s
All checks were successful
Test Asgard Runner / test (push) Successful in 3s
Final re-skin batch: admin ops (Console/FileManager[VueFinder preserved]/WipeCalendar/WipeHistory/Changelog/Migration), platform-admin (Dashboard/Licenses/Servers/Subscriptions/Users), public product pages (ServerInfo/StatusPage/StoreView) + PublicLayout, WarpEditor, ErrorBoundary. All logic/store/router/WebSocket/handlers preserved. Marketing views (Landing/Pricing/FAQ/HowItWorks/Roadmap/EarlyAccess + MarketingLayout) intentionally deferred to the dedicated marketing-site redesign. Build green. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Vantz Stockwell
@@ -1,7 +1,14 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { Server, Users, Calendar, MessageCircle, Loader2, ExternalLink } from 'lucide-vue-next'
|
||||
import Panel from '@/components/ds/data/Panel.vue'
|
||||
import StatCard from '@/components/ds/data/StatCard.vue'
|
||||
import Badge from '@/components/ds/core/Badge.vue'
|
||||
import Button from '@/components/ds/core/Button.vue'
|
||||
import Icon from '@/components/ds/core/Icon.vue'
|
||||
import Alert from '@/components/ds/feedback/Alert.vue'
|
||||
import EmptyState from '@/components/ds/feedback/EmptyState.vue'
|
||||
import Logo from '@/components/ds/brand/Logo.vue'
|
||||
|
||||
interface ServerInfo {
|
||||
server_name: string
|
||||
@@ -51,99 +58,225 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="min-h-screen bg-neutral-950">
|
||||
<!-- Loading State -->
|
||||
<div v-if="isLoading" class="flex items-center justify-center min-h-screen">
|
||||
<Loader2 class="w-8 h-8 text-oxide-500 animate-spin" />
|
||||
<div class="si-page">
|
||||
<!-- Loading -->
|
||||
<div v-if="isLoading" class="si-state">
|
||||
<Icon name="loader" :size="28" class="si-spin" />
|
||||
</div>
|
||||
|
||||
<!-- Error State -->
|
||||
<div v-else-if="error" class="flex items-center justify-center min-h-screen p-6">
|
||||
<div class="bg-neutral-900 border border-neutral-800 rounded-lg p-8 max-w-md text-center">
|
||||
<Server class="w-12 h-12 text-neutral-600 mx-auto mb-4" />
|
||||
<h1 class="text-xl font-bold text-neutral-100 mb-2">Server Not Found</h1>
|
||||
<p class="text-sm text-neutral-400">{{ error }}</p>
|
||||
</div>
|
||||
<!-- Error -->
|
||||
<div v-else-if="error" class="si-state">
|
||||
<EmptyState
|
||||
icon="server"
|
||||
title="Server not found"
|
||||
:description="error"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Server Info -->
|
||||
<div v-else-if="serverInfo" class="max-w-4xl mx-auto p-6 space-y-6">
|
||||
<!-- Header Image -->
|
||||
<div v-if="serverInfo.header_image" class="rounded-lg overflow-hidden">
|
||||
<img :src="serverInfo.header_image" :alt="serverInfo.server_name" class="w-full h-64 object-cover" />
|
||||
</div>
|
||||
<!-- Content -->
|
||||
<template v-else-if="serverInfo">
|
||||
<!-- Sticky nav bar -->
|
||||
<header class="si-bar">
|
||||
<div class="si-bar__inner">
|
||||
<Logo :size="22" :wordmark="true" />
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Server Name & Stats -->
|
||||
<div class="bg-neutral-900 border border-neutral-800 rounded-lg p-6">
|
||||
<div class="flex items-start justify-between mb-4">
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold text-neutral-100 mb-2">{{ serverInfo.server_name }}</h1>
|
||||
<div class="flex items-center gap-2 text-neutral-400">
|
||||
<Users class="w-4 h-4" />
|
||||
<span class="text-sm">{{ serverInfo.player_count }}/{{ serverInfo.max_players }} players online</span>
|
||||
<main class="si-main">
|
||||
<!-- Hero image -->
|
||||
<div v-if="serverInfo.header_image" class="si-hero">
|
||||
<img
|
||||
:src="serverInfo.header_image"
|
||||
:alt="serverInfo.server_name"
|
||||
class="si-hero__img"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Identity + connect -->
|
||||
<Panel>
|
||||
<div class="si-identity">
|
||||
<div class="si-identity__left">
|
||||
<h1 class="si-title">{{ serverInfo.server_name }}</h1>
|
||||
<p v-if="serverInfo.description" class="si-desc">
|
||||
{{ serverInfo.description }}
|
||||
</p>
|
||||
</div>
|
||||
<Button icon="external-link" size="md" @click="copyConnectUrl">
|
||||
Connect
|
||||
</Button>
|
||||
</div>
|
||||
<button
|
||||
@click="copyConnectUrl"
|
||||
class="flex items-center gap-2 px-4 py-2 bg-oxide-500 hover:bg-oxide-600 text-white font-medium rounded-lg transition-colors"
|
||||
>
|
||||
<ExternalLink class="w-4 h-4" />
|
||||
Connect
|
||||
</button>
|
||||
</Panel>
|
||||
|
||||
<!-- KPIs -->
|
||||
<div class="si-kpis">
|
||||
<StatCard
|
||||
icon="users"
|
||||
label="Players online"
|
||||
:value="String(serverInfo.player_count)"
|
||||
:unit="'/' + serverInfo.max_players"
|
||||
/>
|
||||
<StatCard
|
||||
v-if="serverInfo.wipe_schedule"
|
||||
icon="calendar"
|
||||
label="Wipe schedule"
|
||||
:value="serverInfo.wipe_schedule"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<p v-if="serverInfo.description" class="text-neutral-300 leading-relaxed">
|
||||
{{ serverInfo.description }}
|
||||
</p>
|
||||
</div>
|
||||
<!-- MOTD -->
|
||||
<Panel v-if="serverInfo.motd" title="Message of the day">
|
||||
<p class="si-motd">{{ serverInfo.motd }}</p>
|
||||
</Panel>
|
||||
|
||||
<!-- MOTD -->
|
||||
<div v-if="serverInfo.motd" class="bg-neutral-900 border border-neutral-800 rounded-lg p-6">
|
||||
<h2 class="text-lg font-bold text-neutral-100 mb-3">Message of the Day</h2>
|
||||
<p class="text-neutral-300 whitespace-pre-line">{{ serverInfo.motd }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Wipe Schedule -->
|
||||
<div v-if="serverInfo.wipe_schedule" class="bg-neutral-900 border border-neutral-800 rounded-lg p-6">
|
||||
<div class="flex items-center gap-2 mb-3">
|
||||
<Calendar class="w-5 h-5 text-oxide-500" />
|
||||
<h2 class="text-lg font-bold text-neutral-100">Wipe Schedule</h2>
|
||||
</div>
|
||||
<p class="text-neutral-300">{{ serverInfo.wipe_schedule }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Mods -->
|
||||
<div v-if="serverInfo.mods.length > 0" class="bg-neutral-900 border border-neutral-800 rounded-lg p-6">
|
||||
<h2 class="text-lg font-bold text-neutral-100 mb-3">Active Mods</h2>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span
|
||||
v-for="mod in serverInfo.mods"
|
||||
:key="mod"
|
||||
class="px-3 py-1 bg-neutral-800 border border-neutral-700 rounded-full text-sm text-neutral-300"
|
||||
>
|
||||
{{ mod }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Discord -->
|
||||
<div v-if="serverInfo.discord_invite" class="bg-neutral-900 border border-neutral-800 rounded-lg p-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<MessageCircle class="w-5 h-5 text-oxide-500" />
|
||||
<h2 class="text-lg font-bold text-neutral-100">Join our Discord</h2>
|
||||
<!-- Active mods -->
|
||||
<Panel v-if="serverInfo.mods.length > 0" title="Active mods">
|
||||
<div class="si-mods">
|
||||
<Badge
|
||||
v-for="mod in serverInfo.mods"
|
||||
:key="mod"
|
||||
tone="neutral"
|
||||
size="lg"
|
||||
>{{ mod }}</Badge>
|
||||
</div>
|
||||
<a
|
||||
:href="serverInfo.discord_invite"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="flex items-center gap-2 px-4 py-2 bg-neutral-800 hover:bg-neutral-700 text-neutral-200 font-medium rounded-lg transition-colors"
|
||||
>
|
||||
<ExternalLink class="w-4 h-4" />
|
||||
Join
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Panel>
|
||||
|
||||
<!-- Discord -->
|
||||
<Panel v-if="serverInfo.discord_invite" title="Community">
|
||||
<Alert tone="info" title="Join our Discord">
|
||||
<template #actions>
|
||||
<a
|
||||
:href="serverInfo.discord_invite"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Button size="sm" variant="secondary" icon="external-link">Join Discord</Button>
|
||||
</a>
|
||||
</template>
|
||||
</Alert>
|
||||
</Panel>
|
||||
</main>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.si-page {
|
||||
min-height: 100vh;
|
||||
background: var(--surface-canvas);
|
||||
}
|
||||
|
||||
/* Loading / error centering */
|
||||
.si-state {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Spinner */
|
||||
.si-spin {
|
||||
color: var(--accent);
|
||||
animation: si-rotate 0.7s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes si-rotate {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.si-spin { animation: none; }
|
||||
}
|
||||
|
||||
/* Sticky brand bar */
|
||||
.si-bar {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 20;
|
||||
background: var(--surface-base);
|
||||
box-shadow: 0 1px 0 var(--border-subtle);
|
||||
}
|
||||
|
||||
.si-bar__inner {
|
||||
max-width: 860px;
|
||||
margin: 0 auto;
|
||||
padding: var(--space-4) var(--space-6);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Main content */
|
||||
.si-main {
|
||||
max-width: 860px;
|
||||
margin: 0 auto;
|
||||
padding: var(--space-6);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
/* Hero image */
|
||||
.si-hero {
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.si-hero__img {
|
||||
width: 100%;
|
||||
height: 240px;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Identity block inside panel */
|
||||
.si-identity {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-4);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.si-identity__left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-2);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.si-title {
|
||||
font-size: var(--text-3xl);
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.02em;
|
||||
color: var(--text-primary);
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.si-desc {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.6;
|
||||
max-width: 560px;
|
||||
}
|
||||
|
||||
/* KPI row */
|
||||
.si-kpis {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
/* MOTD */
|
||||
.si-motd {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.65;
|
||||
white-space: pre-line;
|
||||
}
|
||||
|
||||
/* Mods */
|
||||
.si-mods {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,8 +1,16 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, computed } from 'vue'
|
||||
import { Server, Users, Activity, TrendingUp, Search } from 'lucide-vue-next'
|
||||
import { useApi } from '@/composables/useApi'
|
||||
import { safeFixed } from '@/utils/formatters'
|
||||
import Panel from '@/components/ds/data/Panel.vue'
|
||||
import StatCard from '@/components/ds/data/StatCard.vue'
|
||||
import Badge from '@/components/ds/core/Badge.vue'
|
||||
import StatusDot from '@/components/ds/core/StatusDot.vue'
|
||||
import Icon from '@/components/ds/core/Icon.vue'
|
||||
import Alert from '@/components/ds/feedback/Alert.vue'
|
||||
import EmptyState from '@/components/ds/feedback/EmptyState.vue'
|
||||
import Input from '@/components/ds/forms/Input.vue'
|
||||
import Logo from '@/components/ds/brand/Logo.vue'
|
||||
|
||||
interface ServerStatus {
|
||||
server_name: string
|
||||
@@ -72,32 +80,16 @@ async function fetchStatus() {
|
||||
}
|
||||
}
|
||||
|
||||
function getStatusColor(status: string) {
|
||||
switch (status) {
|
||||
case 'online':
|
||||
return 'bg-green-500'
|
||||
case 'degraded':
|
||||
return 'bg-yellow-500'
|
||||
default:
|
||||
return 'bg-red-500'
|
||||
}
|
||||
function getStatusTone(status: string): 'online' | 'offline' | 'warn' {
|
||||
if (status === 'online') return 'online'
|
||||
if (status === 'degraded') return 'warn'
|
||||
return 'offline'
|
||||
}
|
||||
|
||||
function getStatusText(status: string) {
|
||||
switch (status) {
|
||||
case 'online':
|
||||
return 'Online'
|
||||
case 'degraded':
|
||||
return 'Degraded'
|
||||
default:
|
||||
return 'Offline'
|
||||
}
|
||||
}
|
||||
|
||||
function getUptimeBadgeColor(uptime: number) {
|
||||
if (uptime >= 99) return 'bg-green-500/10 text-green-400'
|
||||
if (uptime >= 95) return 'bg-yellow-500/10 text-yellow-400'
|
||||
return 'bg-red-500/10 text-red-400'
|
||||
function getUptimeTone(uptime: number): 'online' | 'warn' | 'offline' {
|
||||
if (uptime >= 99) return 'online'
|
||||
if (uptime >= 95) return 'warn'
|
||||
return 'offline'
|
||||
}
|
||||
|
||||
function formatTimeUntil(isoDate: string | null): string {
|
||||
@@ -135,207 +127,376 @@ onUnmounted(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="min-h-screen bg-neutral-950">
|
||||
<!-- Header -->
|
||||
<header class="bg-neutral-900 border-b border-neutral-800">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
|
||||
<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold text-neutral-100 flex items-center gap-3">
|
||||
<Activity class="w-8 h-8 text-oxide-500" />
|
||||
Corrosion Status
|
||||
</h1>
|
||||
<p class="text-neutral-400 mt-1">
|
||||
Real-time status for all Corrosion-powered Rust servers
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Search -->
|
||||
<div class="relative w-full md:w-80">
|
||||
<Search class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-neutral-500" />
|
||||
<input
|
||||
v-model="searchQuery"
|
||||
type="text"
|
||||
placeholder="Search servers..."
|
||||
class="w-full pl-10 pr-4 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
|
||||
/>
|
||||
</div>
|
||||
<div class="sp-page">
|
||||
<!-- Brand bar -->
|
||||
<header class="sp-bar">
|
||||
<div class="sp-bar__inner">
|
||||
<div class="sp-bar__brand">
|
||||
<Logo :size="22" :wordmark="true" />
|
||||
<div class="sp-bar__sub">Real-time status for all Corrosion-powered servers</div>
|
||||
</div>
|
||||
|
||||
<!-- Platform Health Stats -->
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mt-6" v-if="!loading">
|
||||
<div class="bg-neutral-800 rounded-lg p-4 border border-neutral-700">
|
||||
<div class="flex items-center gap-2 text-neutral-400 text-xs mb-1">
|
||||
<Server class="w-3.5 h-3.5" />
|
||||
Total Servers
|
||||
</div>
|
||||
<p class="text-2xl font-bold text-neutral-100">
|
||||
{{ platformHealth.total_servers }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-neutral-800 rounded-lg p-4 border border-neutral-700">
|
||||
<div class="flex items-center gap-2 text-neutral-400 text-xs mb-1">
|
||||
<Activity class="w-3.5 h-3.5" />
|
||||
Online Now
|
||||
</div>
|
||||
<p class="text-2xl font-bold text-green-400">
|
||||
{{ platformHealth.online_servers }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-neutral-800 rounded-lg p-4 border border-neutral-700">
|
||||
<div class="flex items-center gap-2 text-neutral-400 text-xs mb-1">
|
||||
<Users class="w-3.5 h-3.5" />
|
||||
Total Players
|
||||
</div>
|
||||
<p class="text-2xl font-bold text-oxide-400">
|
||||
{{ platformHealth.total_players }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-neutral-800 rounded-lg p-4 border border-neutral-700">
|
||||
<div class="flex items-center gap-2 text-neutral-400 text-xs mb-1">
|
||||
<TrendingUp class="w-3.5 h-3.5" />
|
||||
Platform Uptime
|
||||
</div>
|
||||
<p class="text-2xl font-bold text-neutral-100">
|
||||
{{ safeFixed(platformHealth.uptime_percent, 1) }}%
|
||||
</p>
|
||||
</div>
|
||||
<div class="sp-bar__search">
|
||||
<Input
|
||||
v-model="searchQuery"
|
||||
icon="search"
|
||||
placeholder="Search servers..."
|
||||
size="sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Server Grid -->
|
||||
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
<!-- Loading State -->
|
||||
<div v-if="loading" class="text-center py-12">
|
||||
<div class="inline-block w-8 h-8 border-4 border-oxide-500/20 border-t-oxide-500 rounded-full animate-spin"></div>
|
||||
<p class="text-neutral-400 mt-4">Loading server status...</p>
|
||||
<!-- Platform KPIs -->
|
||||
<div v-if="!loading" class="sp-kpis">
|
||||
<StatCard icon="server" label="Total servers" :value="String(platformHealth.total_servers)" />
|
||||
<StatCard icon="activity" label="Online now" :value="String(platformHealth.online_servers)" />
|
||||
<StatCard icon="users" label="Total players" :value="String(platformHealth.total_players)" />
|
||||
<StatCard icon="trending-up" label="Platform uptime" :value="safeFixed(platformHealth.uptime_percent, 1)" unit="%" />
|
||||
</div>
|
||||
|
||||
<!-- Body -->
|
||||
<main class="sp-main">
|
||||
<!-- Loading -->
|
||||
<div v-if="loading" class="sp-state">
|
||||
<Icon name="loader" :size="28" class="sp-spin" />
|
||||
<span class="sp-state__label">Loading server status...</span>
|
||||
</div>
|
||||
|
||||
<!-- Error State -->
|
||||
<div v-else-if="error" class="bg-red-500/10 border border-red-500/20 rounded-lg p-6 text-center">
|
||||
<p class="text-red-400">{{ error }}</p>
|
||||
</div>
|
||||
<!-- Error -->
|
||||
<Alert v-else-if="error" tone="danger" :title="error ?? ''" />
|
||||
|
||||
<!-- Empty State -->
|
||||
<div v-else-if="filteredServers.length === 0" class="text-center py-12">
|
||||
<Server class="w-16 h-16 text-neutral-600 mx-auto mb-4" />
|
||||
<p class="text-neutral-400 text-lg">
|
||||
{{ searchQuery ? 'No servers match your search' : 'No servers available yet' }}
|
||||
</p>
|
||||
</div>
|
||||
<!-- Empty -->
|
||||
<EmptyState
|
||||
v-else-if="filteredServers.length === 0"
|
||||
icon="server"
|
||||
:title="searchQuery ? 'No servers match your search' : 'No servers available yet'"
|
||||
/>
|
||||
|
||||
<!-- Server Cards -->
|
||||
<div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<div
|
||||
<!-- Server grid -->
|
||||
<div v-else class="sp-grid">
|
||||
<Panel
|
||||
v-for="server in filteredServers"
|
||||
:key="server.subdomain"
|
||||
class="bg-neutral-900 border border-neutral-800 rounded-lg p-5 hover:border-oxide-500/50 transition-colors"
|
||||
class="sp-card"
|
||||
>
|
||||
<!-- Server Header -->
|
||||
<div class="flex items-start justify-between mb-4">
|
||||
<div class="flex-1 min-w-0">
|
||||
<h3 class="text-lg font-semibold text-neutral-100 truncate">
|
||||
{{ server.server_name }}
|
||||
</h3>
|
||||
<a
|
||||
:href="`https://${server.subdomain}.corrosionmgmt.com`"
|
||||
target="_blank"
|
||||
class="text-xs text-oxide-400 hover:text-oxide-300 truncate block"
|
||||
>
|
||||
{{ server.subdomain }}.corrosionmgmt.com
|
||||
</a>
|
||||
<div class="sp-card__body">
|
||||
<!-- Server name + link -->
|
||||
<div class="sp-card__head">
|
||||
<div class="sp-card__name-block">
|
||||
<h3 class="sp-card__name">{{ server.server_name }}</h3>
|
||||
<a
|
||||
:href="`https://${server.subdomain}.corrosionmgmt.com`"
|
||||
target="_blank"
|
||||
class="sp-card__link"
|
||||
>
|
||||
<Icon name="external-link" :size="11" />
|
||||
{{ server.subdomain }}.corrosionmgmt.com
|
||||
</a>
|
||||
</div>
|
||||
<StatusDot :tone="getStatusTone(server.status)" :size="10" :pulse="server.status === 'online'" />
|
||||
</div>
|
||||
|
||||
<!-- Status Indicator -->
|
||||
<div class="flex items-center gap-2 ml-3">
|
||||
<div
|
||||
:class="getStatusColor(server.status)"
|
||||
class="w-2.5 h-2.5 rounded-full animate-pulse"
|
||||
></div>
|
||||
<span class="text-xs font-medium text-neutral-300">
|
||||
{{ getStatusText(server.status) }}
|
||||
</span>
|
||||
<!-- Description -->
|
||||
<p v-if="server.description" class="sp-card__desc">{{ server.description }}</p>
|
||||
|
||||
<!-- Player bar -->
|
||||
<div class="sp-players">
|
||||
<div class="sp-players__label">
|
||||
<Icon name="users" :size="12" />
|
||||
<span>{{ server.player_count }} / {{ server.max_players }} players</span>
|
||||
</div>
|
||||
<div class="sp-players__track">
|
||||
<div
|
||||
class="sp-players__fill"
|
||||
:style="{ width: `${(server.player_count / server.max_players) * 100}%` }"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Map -->
|
||||
<div v-if="server.map_name" class="sp-card__meta">
|
||||
<Icon name="map" :size="12" />
|
||||
<span>{{ server.map_name }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Wipe schedule -->
|
||||
<div v-if="server.wipe_schedule" class="sp-wipe">
|
||||
<div class="sp-wipe__label">Wipe schedule</div>
|
||||
<div class="sp-wipe__val">{{ server.wipe_schedule }}</div>
|
||||
<div v-if="server.next_wipe" class="sp-wipe__next">
|
||||
Next: {{ formatTimeUntil(server.next_wipe) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Uptime badges -->
|
||||
<div class="sp-uptime">
|
||||
<Badge :tone="getUptimeTone(server.uptime_24h_percent)" :mono="true" size="lg">
|
||||
{{ safeFixed(server.uptime_24h_percent, 1) }}% <span class="sp-uptime__period">24h</span>
|
||||
</Badge>
|
||||
<Badge :tone="getUptimeTone(server.uptime_7d_percent)" :mono="true" size="lg">
|
||||
{{ safeFixed(server.uptime_7d_percent, 1) }}% <span class="sp-uptime__period">7d</span>
|
||||
</Badge>
|
||||
<Badge :tone="getUptimeTone(server.uptime_30d_percent)" :mono="true" size="lg">
|
||||
{{ safeFixed(server.uptime_30d_percent, 1) }}% <span class="sp-uptime__period">30d</span>
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Description -->
|
||||
<p v-if="server.description" class="text-sm text-neutral-400 mb-4 line-clamp-2">
|
||||
{{ server.description }}
|
||||
</p>
|
||||
|
||||
<!-- Player Count -->
|
||||
<div class="flex items-center gap-2 mb-4">
|
||||
<Users class="w-4 h-4 text-neutral-500" />
|
||||
<span class="text-sm text-neutral-300">
|
||||
{{ server.player_count }} / {{ server.max_players }} players
|
||||
</span>
|
||||
<div class="flex-1 bg-neutral-800 rounded-full h-1.5 overflow-hidden">
|
||||
<div
|
||||
class="h-full bg-oxide-500 transition-all duration-300"
|
||||
:style="{ width: `${(server.player_count / server.max_players) * 100}%` }"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Map Info -->
|
||||
<div v-if="server.map_name" class="text-xs text-neutral-500 mb-3">
|
||||
Map: {{ server.map_name }}
|
||||
</div>
|
||||
|
||||
<!-- Wipe Schedule -->
|
||||
<div v-if="server.wipe_schedule" class="bg-neutral-800 rounded-lg p-3 mb-3">
|
||||
<div class="text-xs text-neutral-500 mb-1">Wipe Schedule</div>
|
||||
<div class="text-sm text-neutral-300">{{ server.wipe_schedule }}</div>
|
||||
<div v-if="server.next_wipe" class="text-xs text-oxide-400 mt-1">
|
||||
Next wipe: {{ formatTimeUntil(server.next_wipe) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Uptime Badges -->
|
||||
<div class="flex gap-2">
|
||||
<div :class="getUptimeBadgeColor(server.uptime_24h_percent)" class="flex-1 rounded-lg px-2 py-1.5 text-center">
|
||||
<div class="text-xs font-medium">{{ safeFixed(server.uptime_24h_percent, 1) }}%</div>
|
||||
<div class="text-[10px] opacity-75">24h</div>
|
||||
</div>
|
||||
<div :class="getUptimeBadgeColor(server.uptime_7d_percent)" class="flex-1 rounded-lg px-2 py-1.5 text-center">
|
||||
<div class="text-xs font-medium">{{ safeFixed(server.uptime_7d_percent, 1) }}%</div>
|
||||
<div class="text-[10px] opacity-75">7d</div>
|
||||
</div>
|
||||
<div :class="getUptimeBadgeColor(server.uptime_30d_percent)" class="flex-1 rounded-lg px-2 py-1.5 text-center">
|
||||
<div class="text-xs font-medium">{{ safeFixed(server.uptime_30d_percent, 1) }}%</div>
|
||||
<div class="text-[10px] opacity-75">30d</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Panel>
|
||||
</div>
|
||||
|
||||
<!-- Auto-refresh indicator -->
|
||||
<div class="text-center mt-8 text-xs text-neutral-600">
|
||||
Auto-refreshing every 10 seconds
|
||||
</div>
|
||||
<!-- Auto-refresh note -->
|
||||
<div class="sp-refresh-note">Auto-refreshing every 10 seconds</div>
|
||||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-neutral-900 border-t border-neutral-800 mt-16">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 text-center">
|
||||
<p class="text-neutral-400 text-sm mb-2">
|
||||
Powered by
|
||||
<a
|
||||
href="https://panel.corrosionmgmt.com"
|
||||
class="text-oxide-400 hover:text-oxide-300 font-medium"
|
||||
target="_blank"
|
||||
>
|
||||
Corrosion
|
||||
</a>
|
||||
</p>
|
||||
<p class="text-neutral-600 text-xs">
|
||||
The complete server management platform for Rust game servers
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.sp-page {
|
||||
min-height: 100vh;
|
||||
background: var(--surface-canvas);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Brand bar */
|
||||
.sp-bar {
|
||||
background: var(--surface-base);
|
||||
box-shadow: 0 1px 0 var(--border-subtle);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
.sp-bar__inner {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: var(--space-5) var(--space-6);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-5);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.sp-bar__brand {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-1);
|
||||
}
|
||||
|
||||
.sp-bar__sub {
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.sp-bar__search {
|
||||
width: 260px;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
/* Platform KPIs */
|
||||
.sp-kpis {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
padding: var(--space-5) var(--space-6) 0;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
/* Main content area */
|
||||
.sp-main {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
padding: var(--space-5) var(--space-6) var(--space-8);
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* Loading state */
|
||||
.sp-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: var(--space-4);
|
||||
padding: var(--space-16) 0;
|
||||
}
|
||||
|
||||
.sp-spin {
|
||||
color: var(--accent);
|
||||
animation: sp-rotate 0.7s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes sp-rotate {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.sp-spin { animation: none; }
|
||||
}
|
||||
|
||||
.sp-state__label {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
/* Server grid */
|
||||
.sp-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: var(--space-4);
|
||||
margin-top: var(--space-5);
|
||||
}
|
||||
|
||||
/* Server card body */
|
||||
.sp-card__body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.sp-card__head {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.sp-card__name-block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-1);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.sp-card__name {
|
||||
font-size: var(--text-base);
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.sp-card__link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
color: var(--accent-text);
|
||||
transition: color var(--dur-fast) var(--ease-standard);
|
||||
}
|
||||
|
||||
.sp-card__link:hover {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.sp-card__desc {
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-tertiary);
|
||||
line-height: 1.55;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sp-card__meta {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-1-5);
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* Player progress bar */
|
||||
.sp-players {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-1);
|
||||
}
|
||||
|
||||
.sp-players__label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-1-5);
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.sp-players__track {
|
||||
height: 4px;
|
||||
background: var(--surface-raised-2);
|
||||
border-radius: var(--radius-pill);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sp-players__fill {
|
||||
height: 100%;
|
||||
background: var(--accent);
|
||||
border-radius: var(--radius-pill);
|
||||
transition: width 0.4s var(--ease-standard);
|
||||
}
|
||||
|
||||
/* Wipe schedule block */
|
||||
.sp-wipe {
|
||||
background: var(--surface-raised);
|
||||
box-shadow: var(--ring-default);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--space-2-5) var(--space-3);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.sp-wipe__label {
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.sp-wipe__val {
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.sp-wipe__next {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
color: var(--accent-text);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
/* Uptime badges row */
|
||||
.sp-uptime {
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.sp-uptime__period {
|
||||
opacity: 0.65;
|
||||
font-weight: 400;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
/* Auto-refresh note */
|
||||
.sp-refresh-note {
|
||||
text-align: center;
|
||||
margin-top: var(--space-8);
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 1100px) {
|
||||
.sp-grid { grid-template-columns: repeat(2, 1fr); }
|
||||
.sp-kpis { grid-template-columns: repeat(2, 1fr); }
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.sp-grid { grid-template-columns: 1fr; }
|
||||
.sp-kpis { grid-template-columns: repeat(2, 1fr); }
|
||||
.sp-bar__search { width: 100%; }
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -2,8 +2,16 @@
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import type { PublicStoreInfo, PublicStoreItem, StorePurchaseRequest, StorePurchaseResponse } from '@/types'
|
||||
import { ShoppingCart, Package, Filter, X, AlertCircle, ExternalLink, Check } from 'lucide-vue-next'
|
||||
import { safeCurrency } from '@/utils/formatters'
|
||||
import Panel from '@/components/ds/data/Panel.vue'
|
||||
import Badge from '@/components/ds/core/Badge.vue'
|
||||
import Button from '@/components/ds/core/Button.vue'
|
||||
import Icon from '@/components/ds/core/Icon.vue'
|
||||
import Alert from '@/components/ds/feedback/Alert.vue'
|
||||
import EmptyState from '@/components/ds/feedback/EmptyState.vue'
|
||||
import Input from '@/components/ds/forms/Input.vue'
|
||||
import Select from '@/components/ds/forms/Select.vue'
|
||||
import Logo from '@/components/ds/brand/Logo.vue'
|
||||
|
||||
const route = useRoute()
|
||||
const subdomain = computed(() => route.params.subdomain as string)
|
||||
@@ -29,7 +37,7 @@ const categories = computed(() => {
|
||||
})
|
||||
return Array.from(cats).map(name => ({
|
||||
value: name,
|
||||
label: name === 'all' ? 'All Items' : name
|
||||
label: name === 'all' ? 'All items' : name
|
||||
}))
|
||||
})
|
||||
|
||||
@@ -142,14 +150,14 @@ function formatPrice(price: number): string {
|
||||
return safeCurrency(price, '$')
|
||||
}
|
||||
|
||||
function itemTypeBadgeClass(itemType: string): string {
|
||||
const colors: Record<string, string> = {
|
||||
kit: 'bg-blue-500/15 text-blue-400',
|
||||
rank: 'bg-purple-500/15 text-purple-400',
|
||||
currency: 'bg-green-500/15 text-green-400',
|
||||
custom_command: 'bg-orange-500/15 text-orange-400',
|
||||
function itemTypeTone(itemType: string): 'info' | 'wiping' | 'online' | 'warn' | 'neutral' {
|
||||
const tones: Record<string, 'info' | 'wiping' | 'online' | 'warn' | 'neutral'> = {
|
||||
kit: 'info',
|
||||
rank: 'wiping',
|
||||
currency: 'online',
|
||||
custom_command: 'warn',
|
||||
}
|
||||
return colors[itemType] || 'bg-neutral-700/50 text-neutral-400'
|
||||
return tones[itemType] ?? 'neutral'
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
@@ -158,264 +166,631 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="min-h-screen bg-gradient-to-b from-neutral-950 to-neutral-900">
|
||||
<!-- Header -->
|
||||
<div class="bg-neutral-950/80 backdrop-blur-sm border-b border-neutral-800 sticky top-0 z-10">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<ShoppingCart class="w-6 h-6 text-oxide-500" />
|
||||
<h1 class="text-3xl font-bold text-neutral-100">
|
||||
{{ storeInfo?.store_name || 'Server Store' }}
|
||||
</h1>
|
||||
<div class="sv-page">
|
||||
<!-- Sticky store header -->
|
||||
<header class="sv-bar">
|
||||
<div class="sv-bar__inner">
|
||||
<div class="sv-bar__brand">
|
||||
<Logo :size="20" :wordmark="true" />
|
||||
<div class="sv-bar__divider" />
|
||||
<div class="sv-bar__store">
|
||||
<Icon name="shopping-cart" :size="16" />
|
||||
<span class="sv-bar__name">{{ storeInfo?.store_name ?? 'Server store' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<p v-if="storeInfo?.description" class="text-neutral-400 max-w-3xl">
|
||||
{{ storeInfo.description }}
|
||||
</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Store description -->
|
||||
<div v-if="storeInfo?.description" class="sv-desc-wrap">
|
||||
<p class="sv-desc">{{ storeInfo.description }}</p>
|
||||
</div>
|
||||
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
<!-- Loading state -->
|
||||
<div v-if="isLoading" class="flex items-center justify-center py-20">
|
||||
<div class="text-center">
|
||||
<div class="inline-block w-8 h-8 border-4 border-oxide-500 border-t-transparent rounded-full animate-spin mb-4"></div>
|
||||
<p class="text-neutral-400">Loading store...</p>
|
||||
</div>
|
||||
<div class="sv-body">
|
||||
<!-- Loading -->
|
||||
<div v-if="isLoading" class="sv-state">
|
||||
<Icon name="loader" :size="28" class="sv-spin" />
|
||||
<span class="sv-state__label">Loading store...</span>
|
||||
</div>
|
||||
|
||||
<!-- Error state -->
|
||||
<div v-else-if="storeError" class="bg-neutral-900 border border-neutral-800 rounded-lg p-12 text-center">
|
||||
<AlertCircle class="w-16 h-16 text-red-400 mx-auto mb-4" />
|
||||
<h2 class="text-2xl font-bold text-neutral-100 mb-2">Store Unavailable</h2>
|
||||
<p class="text-neutral-400 mb-6">{{ storeError }}</p>
|
||||
<button
|
||||
@click="loadStore"
|
||||
class="px-6 py-3 bg-oxide-600 hover:bg-oxide-700 text-white font-medium rounded-lg transition-colors"
|
||||
<!-- Error -->
|
||||
<div v-else-if="storeError" class="sv-error">
|
||||
<EmptyState
|
||||
icon="shopping-bag"
|
||||
title="Store unavailable"
|
||||
:description="storeError"
|
||||
>
|
||||
Retry
|
||||
</button>
|
||||
<template #action>
|
||||
<Button icon="refresh-cw" variant="secondary" @click="loadStore">Retry</Button>
|
||||
</template>
|
||||
</EmptyState>
|
||||
</div>
|
||||
|
||||
<!-- Store content -->
|
||||
<div v-else-if="storeInfo">
|
||||
<template v-else-if="storeInfo">
|
||||
<!-- Category filter -->
|
||||
<div v-if="categories.length > 1" class="mb-6 flex items-center gap-3">
|
||||
<Filter class="w-4 h-4 text-neutral-500" />
|
||||
<select
|
||||
<div v-if="categories.length > 1" class="sv-filter">
|
||||
<Icon name="list" :size="14" class="sv-filter__icon" />
|
||||
<Select
|
||||
v-model="selectedCategory"
|
||||
class="px-4 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
|
||||
>
|
||||
<option v-for="cat in categories" :key="cat.value" :value="cat.value">
|
||||
{{ cat.label }}
|
||||
</option>
|
||||
</select>
|
||||
size="sm"
|
||||
:options="categories"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Items grid -->
|
||||
<div v-if="filteredItems.length > 0" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
|
||||
<div v-if="filteredItems.length > 0" class="sv-grid">
|
||||
<div
|
||||
v-for="item in filteredItems"
|
||||
:key="item.id"
|
||||
class="bg-neutral-900 border border-neutral-800 rounded-xl overflow-hidden hover:border-oxide-500/50 transition-all group shadow-lg hover:shadow-oxide-500/10"
|
||||
class="sv-item"
|
||||
>
|
||||
<!-- Item image -->
|
||||
<div class="relative h-48 bg-gradient-to-br from-neutral-800 to-neutral-900 overflow-hidden">
|
||||
<div class="sv-item__img-wrap">
|
||||
<img
|
||||
v-if="item.image_url"
|
||||
:src="item.image_url"
|
||||
:alt="item.name"
|
||||
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
|
||||
class="sv-item__img"
|
||||
/>
|
||||
<div v-else class="w-full h-full flex items-center justify-center">
|
||||
<Package class="w-16 h-16 text-neutral-700" />
|
||||
<div v-else class="sv-item__img-ph">
|
||||
<Icon name="package" :size="32" :stroke-width="1.5" />
|
||||
</div>
|
||||
<div v-if="item.category_name" class="absolute top-3 right-3">
|
||||
<span class="text-xs font-medium px-2.5 py-1 rounded-full bg-neutral-950/80 backdrop-blur-sm text-neutral-300 border border-neutral-700">
|
||||
{{ item.category_name }}
|
||||
</span>
|
||||
<div v-if="item.category_name" class="sv-item__cat">
|
||||
<Badge tone="neutral">{{ item.category_name }}</Badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Item details -->
|
||||
<div class="p-5 space-y-4">
|
||||
<div>
|
||||
<div class="flex items-start justify-between gap-2 mb-2">
|
||||
<h3 class="text-lg font-bold text-neutral-100 group-hover:text-oxide-400 transition-colors">
|
||||
{{ item.name }}
|
||||
</h3>
|
||||
<span class="text-xl font-bold text-oxide-400 shrink-0">
|
||||
{{ formatPrice(item.price) }}
|
||||
</span>
|
||||
</div>
|
||||
<p v-if="item.description" class="text-sm text-neutral-400 line-clamp-2 leading-relaxed">
|
||||
{{ item.description }}
|
||||
</p>
|
||||
<div class="sv-item__body">
|
||||
<div class="sv-item__top">
|
||||
<h3 class="sv-item__name">{{ item.name }}</h3>
|
||||
<span class="sv-item__price">{{ formatPrice(item.price) }}</span>
|
||||
</div>
|
||||
<p v-if="item.description" class="sv-item__desc">{{ item.description }}</p>
|
||||
|
||||
<!-- Item type badge -->
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-xs font-medium px-2 py-1 rounded" :class="itemTypeBadgeClass(item.item_type)">
|
||||
<!-- Type badge + limit -->
|
||||
<div class="sv-item__meta">
|
||||
<Badge :tone="itemTypeTone(item.item_type)">
|
||||
{{ item.item_type.replace('_', ' ') }}
|
||||
</Badge>
|
||||
<span v-if="item.limit_per_player" class="sv-item__limit">
|
||||
Limit {{ item.limit_per_player }} per player
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Purchase limit indicator -->
|
||||
<div v-if="item.limit_per_player" class="text-xs text-neutral-500">
|
||||
Limited to {{ item.limit_per_player }} per player
|
||||
</div>
|
||||
|
||||
<!-- Buy button -->
|
||||
<button
|
||||
<Button
|
||||
:block="true"
|
||||
icon="shopping-cart"
|
||||
@click="openPurchaseModal(item)"
|
||||
class="w-full py-3 text-sm font-semibold text-white bg-oxide-600 hover:bg-oxide-700 rounded-lg transition-colors shadow-lg shadow-oxide-500/20"
|
||||
>
|
||||
Buy Now
|
||||
</button>
|
||||
>Buy now</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Empty state -->
|
||||
<div v-else class="bg-neutral-900 border border-neutral-800 rounded-lg p-16 text-center">
|
||||
<Package class="w-16 h-16 text-neutral-600 mx-auto mb-4" />
|
||||
<h3 class="text-xl font-medium text-neutral-300 mb-2">No Items Available</h3>
|
||||
<p class="text-sm text-neutral-500">
|
||||
{{ selectedCategory === 'all' ? 'This store has no items at the moment.' : 'No items in this category.' }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Empty category -->
|
||||
<EmptyState
|
||||
v-else
|
||||
icon="package"
|
||||
title="No items available"
|
||||
:description="selectedCategory === 'all' ? 'This store has no items at the moment.' : 'No items in this category.'"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Purchase Modal -->
|
||||
<!-- Purchase modal -->
|
||||
<div
|
||||
v-if="showPurchaseModal && selectedItem"
|
||||
class="fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm p-4"
|
||||
class="sv-modal-scrim"
|
||||
@click.self="closePurchaseModal"
|
||||
>
|
||||
<div class="bg-neutral-900 border border-neutral-800 rounded-xl max-w-lg w-full shadow-2xl">
|
||||
<!-- Modal Header -->
|
||||
<div class="border-b border-neutral-800 px-6 py-5 flex items-start justify-between">
|
||||
<div class="flex-1">
|
||||
<h2 class="text-2xl font-bold text-neutral-100 mb-1">Complete Purchase</h2>
|
||||
<p class="text-sm text-neutral-400">You'll be redirected to PayPal to complete payment</p>
|
||||
<div class="sv-modal">
|
||||
<!-- Modal header -->
|
||||
<div class="sv-modal__head">
|
||||
<div>
|
||||
<div class="sv-modal__title">Complete purchase</div>
|
||||
<div class="sv-modal__sub">You'll be redirected to PayPal to complete payment</div>
|
||||
</div>
|
||||
<button
|
||||
class="sv-modal__close"
|
||||
type="button"
|
||||
aria-label="Close"
|
||||
@click="closePurchaseModal"
|
||||
class="p-2 text-neutral-400 hover:text-neutral-200 rounded-lg transition-colors"
|
||||
>
|
||||
<X class="w-5 h-5" />
|
||||
<Icon name="x" :size="16" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Modal Body -->
|
||||
<div class="p-6 space-y-5">
|
||||
<!-- Modal body -->
|
||||
<div class="sv-modal__body">
|
||||
<!-- Item preview -->
|
||||
<div class="bg-neutral-800/50 border border-neutral-700 rounded-lg p-4 flex items-start gap-4">
|
||||
<div class="w-20 h-20 bg-neutral-800 rounded-lg overflow-hidden shrink-0">
|
||||
<div class="sv-modal__item">
|
||||
<div class="sv-modal__thumb">
|
||||
<img
|
||||
v-if="selectedItem.image_url"
|
||||
:src="selectedItem.image_url"
|
||||
:alt="selectedItem.name"
|
||||
class="w-full h-full object-cover"
|
||||
class="sv-modal__thumb-img"
|
||||
/>
|
||||
<div v-else class="w-full h-full flex items-center justify-center">
|
||||
<Package class="w-8 h-8 text-neutral-600" />
|
||||
<div v-else class="sv-modal__thumb-ph">
|
||||
<Icon name="package" :size="20" :stroke-width="1.5" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<h3 class="text-lg font-semibold text-neutral-100 mb-1">{{ selectedItem.name }}</h3>
|
||||
<p v-if="selectedItem.description" class="text-sm text-neutral-400 line-clamp-2 mb-2">
|
||||
{{ selectedItem.description }}
|
||||
</p>
|
||||
<p class="text-2xl font-bold text-oxide-400">{{ formatPrice(selectedItem.price) }}</p>
|
||||
<div class="sv-modal__item-info">
|
||||
<div class="sv-modal__item-name">{{ selectedItem.name }}</div>
|
||||
<p v-if="selectedItem.description" class="sv-modal__item-desc">{{ selectedItem.description }}</p>
|
||||
<div class="sv-modal__item-price">{{ formatPrice(selectedItem.price) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Steam ID input -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-neutral-300 mb-2">
|
||||
Steam ID <span class="text-red-400">*</span>
|
||||
</label>
|
||||
<input
|
||||
v-model="steamId"
|
||||
type="text"
|
||||
placeholder="76561198012345678"
|
||||
maxlength="17"
|
||||
class="w-full px-4 py-3 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
|
||||
:class="{ 'border-red-500': purchaseError && !validateSteamId() }"
|
||||
/>
|
||||
<p class="text-xs text-neutral-500 mt-1.5">
|
||||
Required for item delivery. Must be your 17-digit Steam ID.
|
||||
</p>
|
||||
</div>
|
||||
<!-- Steam ID -->
|
||||
<Input
|
||||
v-model="steamId"
|
||||
label="Steam ID"
|
||||
:required="true"
|
||||
:mono="true"
|
||||
placeholder="76561198012345678"
|
||||
:error="purchaseError && !validateSteamId() ? 'Must be your 17-digit Steam ID' : undefined"
|
||||
hint="Required for item delivery."
|
||||
/>
|
||||
|
||||
<!-- Player name input -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-neutral-300 mb-2">
|
||||
Player Name (Optional)
|
||||
</label>
|
||||
<input
|
||||
v-model="playerName"
|
||||
type="text"
|
||||
placeholder="Your in-game name"
|
||||
class="w-full px-4 py-3 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
|
||||
/>
|
||||
</div>
|
||||
<!-- Player name -->
|
||||
<Input
|
||||
v-model="playerName"
|
||||
label="Player name (optional)"
|
||||
placeholder="Your in-game name"
|
||||
/>
|
||||
|
||||
<!-- Error message -->
|
||||
<div v-if="purchaseError" class="flex items-start gap-2 bg-red-500/10 border border-red-500/20 rounded-lg p-3">
|
||||
<AlertCircle class="w-4 h-4 text-red-400 shrink-0 mt-0.5" />
|
||||
<p class="text-sm text-red-400">{{ purchaseError }}</p>
|
||||
</div>
|
||||
<!-- Purchase error -->
|
||||
<Alert v-if="purchaseError" tone="danger" :title="purchaseError" />
|
||||
|
||||
<!-- Legal disclaimer -->
|
||||
<div class="bg-neutral-800/30 border border-neutral-700 rounded-lg p-4">
|
||||
<p class="text-xs text-neutral-500 leading-relaxed space-y-1.5">
|
||||
<span class="flex items-start gap-1.5">
|
||||
<Check class="w-3 h-3 text-oxide-500 shrink-0 mt-0.5" />
|
||||
<span>Items will be delivered automatically to your in-game character after payment</span>
|
||||
</span>
|
||||
<span class="flex items-start gap-1.5">
|
||||
<Check class="w-3 h-3 text-oxide-500 shrink-0 mt-0.5" />
|
||||
<Panel variant="raised">
|
||||
<div class="sv-modal__terms">
|
||||
<div class="sv-modal__term">
|
||||
<Icon name="check" :size="13" class="sv-modal__term-icon" />
|
||||
<span>Items delivered automatically to your character after payment</span>
|
||||
</div>
|
||||
<div class="sv-modal__term">
|
||||
<Icon name="check" :size="13" class="sv-modal__term-icon" />
|
||||
<span>All purchases are final and non-refundable</span>
|
||||
</span>
|
||||
<span class="flex items-start gap-1.5">
|
||||
<Check class="w-3 h-3 text-oxide-500 shrink-0 mt-0.5" />
|
||||
</div>
|
||||
<div class="sv-modal__term">
|
||||
<Icon name="check" :size="13" class="sv-modal__term-icon" />
|
||||
<span>You must be logged into the server to receive items</span>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Panel>
|
||||
</div>
|
||||
|
||||
<!-- Modal Footer -->
|
||||
<div class="border-t border-neutral-800 px-6 py-5 flex items-center justify-between gap-4">
|
||||
<button
|
||||
@click="closePurchaseModal"
|
||||
<!-- Modal footer -->
|
||||
<div class="sv-modal__foot">
|
||||
<Button
|
||||
variant="secondary"
|
||||
:disabled="isPurchasing"
|
||||
class="px-6 py-3 text-sm font-medium text-neutral-300 bg-neutral-800 hover:bg-neutral-700 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
@click="confirmPurchase"
|
||||
@click="closePurchaseModal"
|
||||
>Cancel</Button>
|
||||
<Button
|
||||
icon="external-link"
|
||||
:disabled="isPurchasing || !steamId.trim()"
|
||||
class="flex items-center gap-2 px-8 py-3 text-sm font-semibold text-white bg-oxide-600 hover:bg-oxide-700 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed shadow-lg shadow-oxide-500/20"
|
||||
>
|
||||
<ExternalLink v-if="!isPurchasing" class="w-4 h-4" />
|
||||
<span>{{ isPurchasing ? 'Processing...' : 'Proceed to PayPal' }}</span>
|
||||
</button>
|
||||
:loading="isPurchasing"
|
||||
@click="confirmPurchase"
|
||||
>{{ isPurchasing ? 'Processing...' : 'Proceed to PayPal' }}</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="mt-16 py-8 border-t border-neutral-800">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex items-center justify-center gap-2 text-neutral-600 text-sm">
|
||||
<img src="/logo.png" alt="Corrosion" class="h-4 w-4 opacity-60" />
|
||||
<span>Powered by <span class="text-oxide-500 font-semibold">Corrosion</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.sv-page {
|
||||
min-height: 100vh;
|
||||
background: var(--surface-canvas);
|
||||
}
|
||||
|
||||
/* Store bar */
|
||||
.sv-bar {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 20;
|
||||
background: var(--surface-base);
|
||||
box-shadow: 0 1px 0 var(--border-subtle);
|
||||
}
|
||||
|
||||
.sv-bar__inner {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: var(--space-4) var(--space-6);
|
||||
}
|
||||
|
||||
.sv-bar__brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.sv-bar__divider {
|
||||
width: 1px;
|
||||
height: 20px;
|
||||
background: var(--border-default);
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.sv-bar__store {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.sv-bar__name {
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* Description strip */
|
||||
.sv-desc-wrap {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: var(--space-4) var(--space-6) 0;
|
||||
}
|
||||
|
||||
.sv-desc {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-tertiary);
|
||||
line-height: 1.6;
|
||||
max-width: 640px;
|
||||
}
|
||||
|
||||
/* Body */
|
||||
.sv-body {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: var(--space-5) var(--space-6) var(--space-8);
|
||||
}
|
||||
|
||||
/* Loading state */
|
||||
.sv-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: var(--space-4);
|
||||
padding: var(--space-16) 0;
|
||||
}
|
||||
|
||||
.sv-spin {
|
||||
color: var(--accent);
|
||||
animation: sv-rotate 0.7s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes sv-rotate {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.sv-spin { animation: none; }
|
||||
}
|
||||
|
||||
.sv-state__label {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
/* Error */
|
||||
.sv-error {
|
||||
background: var(--surface-base);
|
||||
box-shadow: var(--ring-default);
|
||||
border-radius: var(--radius-xl);
|
||||
}
|
||||
|
||||
/* Category filter */
|
||||
.sv-filter {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
margin-bottom: var(--space-5);
|
||||
}
|
||||
|
||||
.sv-filter__icon {
|
||||
color: var(--text-muted);
|
||||
flex: none;
|
||||
}
|
||||
|
||||
/* Items grid */
|
||||
.sv-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
|
||||
gap: var(--space-5);
|
||||
}
|
||||
|
||||
/* Item card */
|
||||
.sv-item {
|
||||
background: var(--surface-base);
|
||||
box-shadow: var(--ring-default), var(--shadow-sm);
|
||||
border-radius: var(--radius-xl);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: box-shadow var(--dur-fast) var(--ease-standard),
|
||||
transform var(--dur-fast) var(--ease-standard);
|
||||
}
|
||||
|
||||
.sv-item:hover {
|
||||
box-shadow: var(--ring-strong), var(--shadow-md);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.sv-item__img-wrap {
|
||||
position: relative;
|
||||
height: 180px;
|
||||
background: var(--surface-raised);
|
||||
overflow: hidden;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.sv-item__img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
transition: transform 0.3s var(--ease-standard);
|
||||
}
|
||||
|
||||
.sv-item:hover .sv-item__img {
|
||||
transform: scale(1.04);
|
||||
}
|
||||
|
||||
.sv-item__img-ph {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.sv-item__cat {
|
||||
position: absolute;
|
||||
top: var(--space-3);
|
||||
right: var(--space-3);
|
||||
}
|
||||
|
||||
.sv-item__body {
|
||||
padding: var(--space-4);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3);
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.sv-item__top {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.sv-item__name {
|
||||
font-size: var(--text-base);
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
line-height: 1.3;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.sv-item__price {
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-xl);
|
||||
font-weight: 700;
|
||||
color: var(--accent-text);
|
||||
flex: none;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.sv-item__desc {
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-tertiary);
|
||||
line-height: 1.55;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sv-item__meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.sv-item__limit {
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* Modal scrim */
|
||||
.sv-modal-scrim {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 50;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--scrim);
|
||||
backdrop-filter: blur(4px);
|
||||
padding: var(--space-4);
|
||||
}
|
||||
|
||||
/* Modal */
|
||||
.sv-modal {
|
||||
background: var(--surface-overlay);
|
||||
box-shadow: var(--shadow-pop);
|
||||
border-radius: var(--radius-xl);
|
||||
max-width: 520px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: calc(100vh - var(--space-8));
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.sv-modal__head {
|
||||
padding: var(--space-5) var(--space-6);
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-4);
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.sv-modal__title {
|
||||
font-size: var(--text-xl);
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.01em;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.sv-modal__sub {
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-tertiary);
|
||||
margin-top: var(--space-1);
|
||||
}
|
||||
|
||||
.sv-modal__close {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
flex: none;
|
||||
border-radius: var(--radius-sm);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
color: var(--text-secondary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: background var(--dur-fast) var(--ease-standard),
|
||||
color var(--dur-fast) var(--ease-standard);
|
||||
}
|
||||
|
||||
.sv-modal__close:hover {
|
||||
background: var(--surface-hover);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.sv-modal__close:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: var(--focus-ring);
|
||||
}
|
||||
|
||||
.sv-modal__body {
|
||||
padding: var(--space-5) var(--space-6);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
/* Item preview in modal */
|
||||
.sv-modal__item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: var(--space-4);
|
||||
background: var(--surface-raised);
|
||||
box-shadow: var(--ring-default);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--space-3);
|
||||
}
|
||||
|
||||
.sv-modal__thumb {
|
||||
width: 76px;
|
||||
height: 76px;
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--surface-raised-2);
|
||||
overflow: hidden;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.sv-modal__thumb-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.sv-modal__thumb-ph {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.sv-modal__item-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-1);
|
||||
}
|
||||
|
||||
.sv-modal__item-name {
|
||||
font-size: var(--text-base);
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.sv-modal__item-desc {
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-tertiary);
|
||||
line-height: 1.5;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sv-modal__item-price {
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-2xl);
|
||||
font-weight: 700;
|
||||
color: var(--accent-text);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
/* Terms list */
|
||||
.sv-modal__terms {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.sv-modal__term {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: var(--space-2);
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-tertiary);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.sv-modal__term-icon {
|
||||
color: var(--accent-text);
|
||||
flex: none;
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
/* Modal footer */
|
||||
.sv-modal__foot {
|
||||
padding: var(--space-4) var(--space-6);
|
||||
border-top: 1px solid var(--border-subtle);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: var(--space-3);
|
||||
flex: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user