62 lines
2.1 KiB
Vue
62 lines
2.1 KiB
Vue
<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>
|