Tech-Reborn/phoenix
1
0
Fork 0
Code Issues Pull Requests 2 Actions 6 Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
Tobias Klemp
2025-11-23 18:55:37 +01:00
parent c829f9f57b
commit 90280fd436
53 changed files with 1620 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

196
src/routes/+page.svelte
View File

@@ -1,15 +1,199 @@
<script lang="ts">
import * as Carousel from '$lib/components/ui/carousel'
import { Badge, type BadgeVariant } from '$lib/components/ui/badge'
import { Separator } from '$lib/components/ui/separator'
import ColorVariations from '$lib/components/ui/variations/ColorVariations.svelte'
import {
ConditionEnum,
type CapacityProductVariation,
type ColorProductVariation,
type ConditionProductVariation,
type Specification,
} from '$lib'
import CapacityVarations from '$lib/components/ui/variations/CapacityVarations.svelte'
import ConditionVariations from '$lib/components/ui/variations/ConditionVariations.svelte'
import { SpecCard } from '$lib/components/ui/specCard'
async function crawlClevertronik() {
const response = await fetch('/crawl', { method: 'POST' })
const productName = await response.json()
console.log(productName)
}
type ProductBadge = {
text: string
variant: BadgeVariant
}
const product = {
title: 'Apple iPhone 15',
description:
'Das iPhone 15 bietet modernste Technologie zu einem nachhaltigen Preis. Professionell aufbereitet und vollständig getestet.',
images: [
'https://images.unsplash.com/photo-1702184117235-56002cb13663?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxpUGhvbmUlMjAxNSUyMGJsYWNrfGVufDF8fHx8MTc2MzI5NDI5OHww&ixlib=rb-4.1.0&q=80&w=1080',
'https://images.unsplash.com/photo-1710023038502-ba80a70a9f53?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxpUGhvbmUlMjAxNSUyMHByb3xlbnwxfHx8fDE3NjMzMjEyMTF8MA&ixlib=rb-4.1.0&q=80&w=1080',
'https://images.unsplash.com/photo-1761907174062-c8baf8b7edb3?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxzbWFydHBob25lJTIwbW9kZXJufGVufDF8fHx8MTc2MzM2OTEyOXww&ixlib=rb-4.1.0&q=80&w=1080',
'https://images.unsplash.com/photo-1567985944845-cb4d1e598822?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxpUGhvbmUlMjBjYW1lcmF8ZW58MXx8fHwxNzYzMzkxOTUyfDA&ixlib=rb-4.1.0&q=80&w=1080',
],
badges: [
{
text: 'Refurbished',
variant: 'default',
},
{
text: 'Nachhaltig',
variant: 'outline',
},
] satisfies ProductBadge[],
specifications: [
{
title: 'display',
attributes: [
{
key: 'display_size',
value: '6,1 Zoll',
},
{
key: 'display_technology',
value: 'Super Retina XDR OLED',
},
{
key: 'display_resolution',
value: '2556 x 1179 Pixel (460 ppi)',
},
],
},
{
title: 'battery',
attributes: [
{
key: 'battery_video',
value: '20',
},
{
key: 'battery_streaming',
value: '16',
},
{
key: 'battery_audio',
value: '80',
},
{
key: 'battery_quickcharge',
value: 'ja (50% in 30 Min mit 20W+)',
},
],
},
] satisfies Specification[],
variations: {
color: [
{
name: 'Blau',
type: 'color',
hex: '#87CEFA',
numericValue: null,
},
{
name: 'Grün',
type: 'color',
hex: '#ADFF2F',
numericValue: null,
},
{
name: 'Gelb',
type: 'color',
hex: '#FFFF00',
numericValue: null,
},
{
name: 'Rose',
type: 'color',
hex: '#FF69B4',
numericValue: null,
},
{
name: 'Schwarz',
type: 'color',
hex: '#000000',
numericValue: null,
},
] satisfies ColorProductVariation[],
capacity: [
{
name: '128GB',
numericValue: 128,
hex: null,
type: 'capacity',
},
{
name: '256GB',
numericValue: 256,
hex: null,
type: 'capacity',
},
{
name: '512GB',
numericValue: 512,
hex: null,
type: 'capacity',
},
] satisfies CapacityProductVariation[],
condition: [
{
name: ConditionEnum.EXCELLENT,
numericValue: 15,
hex: null,
type: 'condition',
},
{
name: ConditionEnum.VERY_GOOD,
numericValue: 25,
hex: null,
type: 'condition',
},
{
name: ConditionEnum.GOOD,
numericValue: 35,
hex: null,
type: 'condition',
},
] satisfies ConditionProductVariation[],
},
}
</script>
<h1>Welcome to SvelteKit</h1>
<p>
Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the
documentation
</p>
<div>
<div class="flex lg:flex-row flex-col gap-6">
<Carousel.Root class="max-w-xs mx-12">
<Carousel.Previous />
<Carousel.Content>
{#each product.images as image}
<Carousel.Item>
<img class="p-1 rounded-lg" src={image} alt="" />
</Carousel.Item>
{/each}
</Carousel.Content>
<Carousel.Next />
</Carousel.Root>
<button onclick={crawlClevertronik}>lets do it</button>
<div>
<div class="flex flex-col gap-y-1">
<div class="flex flex-row gap-2">
{#each product.badges as badgeInput (badgeInput.text)}
<Badge variant={badgeInput.variant}>{badgeInput.text}</Badge>
{/each}
</div>
<h1 class="text-xl">{product.title}</h1>
<h2 class="text-md">{product.description}</h2>
</div>
<Separator class="mt-4 mb-6" />
<div class="flex flex-col gap-4">
<ColorVariations variations={product.variations.color} />
<CapacityVarations variations={product.variations.capacity} />
<ConditionVariations variations={product.variations.condition} />
</div>
<SpecCard specifications={product.specifications} />
</div>
</div>
<button onclick={crawlClevertronik}>lets do it</button>
</div>