<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FraisPro - Béta Test</title>
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700&family=Epilogue:wght@300;400;500&display=swap" rel="stylesheet">
<style>
:root {
--bg: #F7F5F0;
--surface: #FFFFFF;
--surface2: #F2EFE9;
--border: #E2DDD5;
--border2: #CCC8BF;
--text: #1C1A17;
--muted: #7A756D;
--accent: #2D6BE4;
--accent-bg: #EBF0FC;
--green: #1A8A4A;
--green-bg: #EAF6EF;
--amber: #B45309;
--amber-bg: #FEF3E2;
--red: #C0392B;
--red-bg: #FDECEA;
--blue: #1565C0;
--blue-bg: #E8F0FE;
--purple: #6B21A8;
--purple-bg: #F3E8FF;
--radius: 7px;
--radius-lg: 12px;
--shadow: 0 1px 4px rgba(0,0,0,.07), 0 4px 16px rgba(0,0,0,.04);
}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Epilogue',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;font-size:14px;line-height:1.5;}
.screen{display:none;min-height:100vh;}
.screen.active{display:flex;flex-direction:column;}
/* MODIFICATION : BLOC FIXE (SANS SCROLL) */
.table-wrap {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
overflow-x: hidden; /* Fixé : plus de glissement */
box-shadow: var(--shadow);
animation: fadeUp .35s ease both;
width: 100%;
}
table {
width: 100%;
border-collapse: collapse;
table-layout: fixed; /* Force le respect de la largeur */
}
th, td {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* STYLE BETA */
.beta-mention {
font-size: 10px;
color: var(--muted);
font-weight: 400;
vertical-align: super;
margin-left: 4px;
}
/* LOGIN */
#screen-login{align-items:center;justify-content:center;padding:24px;}
.login-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:40px;width:100%;max-width:400px;box-shadow:var(--shadow);}
.login-logo{font-family:'Syne',sans-serif;font-size:26px;font-weight:700;margin-bottom:8px;text-align:center;}
.login-logo span{color:var(--accent);}
/* NAV */
.app-nav{background:var(--surface);border-bottom:1px solid var(--border);padding:0 24px;display:flex;align-items:center;height:54px;position:sticky;top:0;z-index:50;}
.nav-logo{font-family:'Syne',sans-serif;font-weight:700;font-size:18px;margin-right:20px;}
.nav-logo span{color:var(--accent);}
.nav-user{margin-left:auto;display:flex;align-items:center;gap:12px;}
/* RESTE DU CSS (Simplifié pour l'espace) */
.app-main{flex:1;padding:24px;max-width:1200px;width:100%;margin:0 auto;}
.btn{padding:8px 16px;border-radius:var(--radius);cursor:pointer;border:none;font-weight:500;}
.btn-primary{background:var(--accent);color:#fff;}
.status{padding:3px 8px;border-radius:12px;font-size:11px;font-weight:600;}
.s-pending{background:var(--amber-bg);color:var(--amber);}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
</style>
</head>
<body>
<div id="screen-login" class="screen active">
<div class="login-box">
<div class="login-logo">Frais<span>Pro</span><span class="beta-mention">(beta)</span></div>
<p style="text-align:center; color:var(--muted); margin-bottom:24px;">Bêta-test de gestion de frais</p>
<div class="form-group">
<input type="text" id="login-user" placeholder="Identifiant (ex: admin, employe)" style="width:100%; padding:10px; margin-bottom:10px; border:1px solid var(--border); border-radius:var(--radius);">
<button onclick="login()" class="btn btn-primary" style="width:100%">Se connecter</button>
</div>
</div>
</div>
<div id="screen-app" class="screen">
<nav class="app-nav">
<div class="nav-logo">Frais<span>Pro</span><span class="beta-mention">(beta)</span></div>
<div class="nav-user">
<span id="user-display" style="font-size:13px; color:var(--muted);"></span>
<button onclick="logout()" class="btn" style="background:none; border:1px solid var(--border); font-size:12px;">Déconnexion</button>
</div>
</nav>
<main class="app-main">
<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:20px;">
<h1 style="font-family:'Syne'; font-size:22px;">Mes Notes de Frais</h1>
<button class="btn btn-primary" onclick="alert('Fonction d\'ajout en cours de test...')">+ Nouveau frais</button>
</div>
<div class="table-wrap">
<table>
<thead style="background:var(--surface2);">
<tr>
<th style="padding:12px; text-align:left; width:15%;">Date</th>
<th style="padding:12px; text-align:left; width:40%;">Description</th>
<th style="padding:12px; text-align:right; width:20%;">Montant</th>
<th style="padding:12px; text-align:center; width:25%;">Statut</th>
</tr>
</thead>
<tbody id="expense-list">
<tr style="border-bottom:1px solid var(--border);">
<td style="padding:12px;">12/03/2026</td>
<td style="padding:12px;">Déjeuner Client - Paris</td>
<td style="padding:12px; text-align:right; font-weight:600;">45.50€</td>
<td style="padding:12px; text-align:center;"><span class="status s-pending">En attente</span></td>
</tr>
</tbody>
</table>
</div>
</main>
</div>
<script>
// Logique ultra-simplifiée pour la version en ligne Cloudflare
function login() {
const user = document.getElementById('login-user').value;
if(user) {
localStorage.setItem('fraispro_user', user);
initApp();
}
}
function logout() {
localStorage.removeItem('fraispro_user');
location.reload();
}
function initApp() {
const user = localStorage.getItem('fraispro_user');
if(user) {
document.getElementById('screen-login').classList.remove('active');
document.getElementById('screen-app').classList.add('active');
document.getElementById('user-display').textContent = "Session : " + user;
}
}
// Vérification session au chargement
window.onload = initApp;
</script>
</body>
</html>