feat: AI-powered prediction market (Hopium)
This commit is contained in:
Face
parent
4fcc55fa72
commit
2a92c37d26
33 changed files with 7009 additions and 4518 deletions
|
|
@ -0,0 +1,194 @@
|
|||
<script lang="ts">
|
||||
import * as Card from '$lib/components/ui/card';
|
||||
import { Separator } from '$lib/components/ui/separator';
|
||||
import { Skeleton } from '$lib/components/ui/skeleton';
|
||||
</script>
|
||||
|
||||
<!-- Header Section -->
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="bg-muted rounded-lg p-4">
|
||||
<Skeleton class="h-14 w-14" />
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<Skeleton class="mb-2 h-8 w-3/4" />
|
||||
<Skeleton class="h-4 w-1/3" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Creator Info -->
|
||||
<div class="mb-4 mt-3 flex flex-wrap items-center gap-1.5">
|
||||
<Skeleton class="h-3 w-16" />
|
||||
<Skeleton class="h-4 w-4 rounded-full" />
|
||||
<Skeleton class="h-4 w-32" />
|
||||
</div>
|
||||
|
||||
<div class="grid gap-8">
|
||||
<!-- Main content grid -->
|
||||
<div class="grid grid-cols-1 gap-8 lg:grid-cols-3">
|
||||
<!-- Left: Chart (2/3 width) -->
|
||||
<div class="lg:col-span-2">
|
||||
<Card.Root class="shadow-sm">
|
||||
<Card.Header>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<Skeleton class="h-6 w-6" />
|
||||
<Skeleton class="h-6 w-16" />
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<Skeleton class="mb-1 h-10 w-20" />
|
||||
<Skeleton class="h-4 w-16" />
|
||||
</div>
|
||||
</div>
|
||||
</Card.Header>
|
||||
<Card.Content>
|
||||
<Skeleton class="h-[400px] w-full rounded-lg" />
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
</div>
|
||||
|
||||
<!-- Right: Trading Controls (1/3 width) -->
|
||||
<div class="space-y-6 lg:col-span-1">
|
||||
<!-- Trading Card -->
|
||||
<Card.Root>
|
||||
<Card.Header>
|
||||
<Skeleton class="h-6 w-20" />
|
||||
</Card.Header>
|
||||
<Card.Content class="space-y-6">
|
||||
<!-- YES/NO Buttons -->
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<Skeleton class="h-12 w-full rounded-md" />
|
||||
<Skeleton class="h-12 w-full rounded-md" />
|
||||
</div>
|
||||
|
||||
<!-- Amount Input -->
|
||||
<Skeleton class="h-10 w-full rounded-md" />
|
||||
|
||||
<!-- Quick Amount Buttons -->
|
||||
<div class="flex gap-2">
|
||||
<Skeleton class="h-9 flex-1 rounded-md" />
|
||||
<Skeleton class="h-9 flex-1 rounded-md" />
|
||||
<Skeleton class="h-9 flex-1 rounded-md" />
|
||||
<Skeleton class="h-9 flex-1 rounded-md" />
|
||||
</div>
|
||||
|
||||
<!-- Win Estimation -->
|
||||
<div class="space-y-2">
|
||||
<div class="flex justify-between">
|
||||
<Skeleton class="h-4 w-16" />
|
||||
<Skeleton class="h-4 w-12" />
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<Skeleton class="h-4 w-16" />
|
||||
<Skeleton class="h-4 w-12" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pay Button -->
|
||||
<Skeleton class="h-12 w-full rounded-md" />
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Position and Stats Cards below chart -->
|
||||
<div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
|
||||
<!-- Position Card -->
|
||||
<Card.Root class="gap-1">
|
||||
<Card.Header>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="bg-muted rounded-full p-2">
|
||||
<Skeleton class="h-5 w-5" />
|
||||
</div>
|
||||
<Skeleton class="h-6 w-32" />
|
||||
</div>
|
||||
</Card.Header>
|
||||
<Card.Content class="pb-4">
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<Skeleton class="mb-1 h-4 w-16" />
|
||||
<Skeleton class="h-3 w-20" />
|
||||
</div>
|
||||
<Skeleton class="h-6 w-16" />
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<Skeleton class="mb-1 h-4 w-14" />
|
||||
<Skeleton class="h-3 w-20" />
|
||||
</div>
|
||||
<Skeleton class="h-6 w-16" />
|
||||
</div>
|
||||
<Separator />
|
||||
<div class="flex items-center justify-between">
|
||||
<Skeleton class="h-4 w-24" />
|
||||
<Skeleton class="h-6 w-16" />
|
||||
</div>
|
||||
</div>
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
|
||||
<!-- Market Stats Card -->
|
||||
<Card.Root class="gap-1">
|
||||
<Card.Header>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="bg-muted rounded-full p-2">
|
||||
<Skeleton class="h-5 w-5" />
|
||||
</div>
|
||||
<Skeleton class="h-6 w-28" />
|
||||
</div>
|
||||
</Card.Header>
|
||||
<Card.Content>
|
||||
<div class="space-y-2">
|
||||
<div class="flex justify-between">
|
||||
<Skeleton class="h-4 w-20" />
|
||||
<Skeleton class="h-4 w-16" />
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<Skeleton class="h-4 w-16" />
|
||||
<Skeleton class="h-4 w-8" />
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<Skeleton class="h-4 w-14" />
|
||||
<Skeleton class="h-4 w-20" />
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<Skeleton class="h-4 w-16" />
|
||||
<Skeleton class="h-4 w-20" />
|
||||
</div>
|
||||
</div>
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
</div>
|
||||
|
||||
<!-- Recent Activity Section -->
|
||||
<Card.Root class="shadow-sm">
|
||||
<Card.Header>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="bg-muted rounded-full p-2">
|
||||
<Skeleton class="h-6 w-6" />
|
||||
</div>
|
||||
<Skeleton class="h-6 w-32" />
|
||||
</div>
|
||||
</Card.Header>
|
||||
<Card.Content class="pb-6">
|
||||
<div class="space-y-4">
|
||||
{#each Array(3) as _}
|
||||
<div class="flex items-center justify-between rounded-xl border p-4">
|
||||
<div class="flex items-center gap-4">
|
||||
<Skeleton class="h-10 w-10 rounded-full" />
|
||||
<div>
|
||||
<Skeleton class="mb-1 h-4 w-24" />
|
||||
<Skeleton class="h-3 w-16" />
|
||||
</div>
|
||||
<Skeleton class="h-5 w-8 rounded-full" />
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<Skeleton class="mb-1 h-5 w-12" />
|
||||
<Skeleton class="h-3 w-16" />
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<script lang="ts">
|
||||
import * as Card from '$lib/components/ui/card';
|
||||
import { Skeleton } from '$lib/components/ui/skeleton';
|
||||
</script>
|
||||
|
||||
<div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
|
||||
{#each Array(6) as _}
|
||||
<Card.Root class="flex flex-col">
|
||||
<Card.Header class="pb-4">
|
||||
<div class="flex items-start justify-between gap-3">
|
||||
<div class="flex-1 space-y-3">
|
||||
<!-- Question title skeleton -->
|
||||
<Skeleton class="h-6 w-full" />
|
||||
<Skeleton class="h-6 w-3/4" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col items-end gap-2">
|
||||
<!-- Probability meter skeleton -->
|
||||
<div class="relative flex h-12 w-16 items-end justify-center">
|
||||
<Skeleton class="h-10 w-16 rounded-full" />
|
||||
<div class="absolute bottom-0">
|
||||
<Skeleton class="h-4 w-8" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Time and amount info skeleton -->
|
||||
<div class="flex items-center gap-2">
|
||||
<Skeleton class="h-4 w-24" />
|
||||
<Skeleton class="h-1 w-1 rounded-full" />
|
||||
<Skeleton class="h-4 w-16" />
|
||||
</div>
|
||||
|
||||
<!-- Creator info skeleton -->
|
||||
<div class="mb-2 mt-2 flex items-center gap-2">
|
||||
<Skeleton class="h-5 w-5 rounded-full" />
|
||||
<Skeleton class="h-4 w-20" />
|
||||
</div>
|
||||
</Card.Header>
|
||||
</Card.Root>
|
||||
{/each}
|
||||
</div>
|
||||
Reference in a new issue