Initial commit — Diabetix V2

Application Laravel 12 + Inertia + Vue 3 + Tailwind.
Fonctionnalités : dashboard glycémique, saisie de mesures, courbe SVG,
statistiques (jour/semaine/mois/trimestre), défis & badges, chat coach IA
(Gemini), paramètres profil avec palette de couleurs, pages auth redessinées,
emails transactionnels via Resend avec thème Diabetix.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
jeremy bayse
2026-04-29 07:01:41 +02:00
commit 26c6d8031c
150 changed files with 19863 additions and 0 deletions

View File

@@ -0,0 +1,91 @@
<script setup>
import { Head, Link, useForm } from '@inertiajs/vue3';
import { tokens, FONT } from '@/Components/Diabetix/palette.js';
const tok = tokens('mint');
const font = FONT;
const form = useForm({
name: '',
email: '',
password: '',
password_confirmation: '',
});
function submit() {
form.post(route('register'), {
onFinish: () => form.reset('password', 'password_confirmation'),
});
}
function inputStyle() {
return {
width: '100%', padding: '12px 14px', borderRadius: '14px',
border: '1.5px solid ' + tok.border, background: tok.bg,
fontSize: '15px', color: tok.text, outline: 'none', boxSizing: 'border-box',
};
}
</script>
<template>
<Head title="Créer un compte" />
<div :style="{ minHeight: '100vh', background: '#eeece8', fontFamily: font.body, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '24px' }">
<div :style="{ width: '100%', maxWidth: '400px' }">
<!-- Logo -->
<div style="text-align:center;margin-bottom:32px;">
<div :style="{ width: '64px', height: '64px', borderRadius: '50%', background: tok.light, border: '2px solid ' + tok.primary, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '28px', margin: '0 auto 14px' }">🩺</div>
<div :style="{ fontFamily: font.title, fontSize: '26px', fontWeight: 700, color: tok.text }">Diabetix</div>
<div :style="{ fontSize: '13px', color: tok.muted, marginTop: '4px' }">Créez votre compte gratuitement</div>
</div>
<!-- Carte -->
<div :style="{ background: tok.white, borderRadius: '24px', padding: '28px 24px', boxShadow: '0 4px 24px rgba(42,53,51,0.10)' }">
<form @submit.prevent="submit">
<div style="margin-bottom:14px;">
<label :style="{ fontSize: '11px', color: tok.muted, fontWeight: 600, display: 'block', marginBottom: '6px', textTransform: 'uppercase', letterSpacing: '0.7px' }">Nom complet</label>
<input v-model="form.name" type="text" required autofocus autocomplete="name" :style="inputStyle()" />
<span v-if="form.errors.name" :style="{ fontSize: '11px', color: '#c43', marginTop: '4px', display: 'block' }">{{ form.errors.name }}</span>
</div>
<div style="margin-bottom:14px;">
<label :style="{ fontSize: '11px', color: tok.muted, fontWeight: 600, display: 'block', marginBottom: '6px', textTransform: 'uppercase', letterSpacing: '0.7px' }">Adresse e-mail</label>
<input v-model="form.email" type="email" required autocomplete="username" :style="inputStyle()" />
<span v-if="form.errors.email" :style="{ fontSize: '11px', color: '#c43', marginTop: '4px', display: 'block' }">{{ form.errors.email }}</span>
</div>
<div style="margin-bottom:14px;">
<label :style="{ fontSize: '11px', color: tok.muted, fontWeight: 600, display: 'block', marginBottom: '6px', textTransform: 'uppercase', letterSpacing: '0.7px' }">Mot de passe</label>
<input v-model="form.password" type="password" required autocomplete="new-password" :style="inputStyle()" />
<span v-if="form.errors.password" :style="{ fontSize: '11px', color: '#c43', marginTop: '4px', display: 'block' }">{{ form.errors.password }}</span>
</div>
<div style="margin-bottom:24px;">
<label :style="{ fontSize: '11px', color: tok.muted, fontWeight: 600, display: 'block', marginBottom: '6px', textTransform: 'uppercase', letterSpacing: '0.7px' }">Confirmer le mot de passe</label>
<input v-model="form.password_confirmation" type="password" required autocomplete="new-password" :style="inputStyle()" />
<span v-if="form.errors.password_confirmation" :style="{ fontSize: '11px', color: '#c43', marginTop: '4px', display: 'block' }">{{ form.errors.password_confirmation }}</span>
</div>
<button type="submit" :disabled="form.processing"
:style="{
width: '100%', padding: '15px', background: tok.primary, color: '#fff',
borderRadius: '16px', border: 'none', fontSize: '15px', fontWeight: 700,
cursor: form.processing ? 'not-allowed' : 'pointer',
opacity: form.processing ? 0.6 : 1,
boxShadow: '0 6px 18px rgba(123,191,181,0.35)',
}">
{{ form.processing ? 'Création…' : 'Créer mon compte' }}
</button>
</form>
</div>
<!-- Lien connexion -->
<div style="text-align:center;margin-top:20px;">
<span :style="{ fontSize: '13px', color: tok.muted }">Déjà un compte ? </span>
<Link :href="route('login')" :style="{ fontSize: '13px', color: tok.primary, fontWeight: 600, textDecoration: 'none' }">Se connecter</Link>
</div>
</div>
</div>
</template>