Homer/leuschke-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: build leuschke.site with pixel design system, vue 3, tailwind
Some checks failed
Build and Deploy / build-and-deploy (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Homér
2026-05-13 12:48:05 +00:00
parent c3ee66682e
commit 04d9ea35f4
32 changed files with 2363 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
src/views/ContactView.vue Normal file
View File

@@ -0,0 +1,61 @@
<template>
<section class="max-w-[960px] mx-auto px-6 pt-24 pb-16">
<h1 class="text-2xl text-olive leading-[2] mb-4 font-pixel">{{ t('contact.title') }}</h1>
<p class="text-orange mb-10">{{ t('contact.subtitle') }}</p>
<div class="section max-w-xl">
<form @submit.prevent="sendForm" class="space-y-4">
<div>
<label class="block text-[8px] text-olive font-pixel mb-1">{{ t('contact.name') }}</label>
<input v-model="form.name" required class="pixel-input" />
</div>
<div>
<label class="block text-[8px] text-olive font-pixel mb-1">{{ t('contact.email') }}</label>
<input v-model="form.email" type="email" required class="pixel-input" />
</div>
<div>
<label class="block text-[8px] text-olive font-pixel mb-1">{{ t('contact.message') }}</label>
<textarea v-model="form.message" required rows="6" class="pixel-input" />
</div>
<button type="submit" class="pixel-btn active text-[8px] px-6 py-3">{{ t('contact.send') }}</button>
</form>
<p v-if="success" class="text-olive text-sm mt-4 font-pixel">✅ {{ t('contact.success') }}</p>
</div>
</section>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { t } from '../i18n'
const form = ref({ name: '', email: '', message: '' })
const success = ref(false)
const sendForm = () => {
// TODO: Backend anbindung
success.value = true
form.value = { name: '', email: '', message: '' }
setTimeout(() => success.value = false, 4000)
}
</script>
<style scoped>
.section {
border: 4px solid var(--color-olive);
padding: 2rem;
background: var(--color-beige);
}
[data-theme="dark"] .section { background: var(--color-beige-dark); }
.pixel-input {
font-family: 'Silkscreen', sans-serif;
border: 3px solid var(--color-olive);
padding: 12px;
background: var(--color-beige-light);
font-size: 13px;
outline: none;
width: 100%;
display: block;
}
.pixel-input:focus { border-color: var(--color-orange); box-shadow: 2px 2px 0 var(--color-orange); }
[data-theme="dark"] .pixel-input { background: var(--color-beige); }
</style>