<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Connect free-cash-register.net account MCP server</title>
<style>
:root{
--bg1: #e0f2fe;
--bg2: #bfdbfe;
--acc1:#3b82f6;
--acc2:#60a5fa;
--acc3:#93c5fd;
--card: rgba(255,255,255,0.95);
--card-border: rgba(0,0,0,0.08);
--text: #1e3a8a;
--muted:#475569;
--error:#ef4444;
--shadow: 0 8px 20px rgba(59,130,246,0.15);
--radius: 16px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
color:var(--text);
background:
radial-gradient(1000px 600px at 80% -10%, rgba(147,197,253,0.3), transparent 60%),
radial-gradient(800px 500px at -10% 110%, rgba(191,219,254,0.3), transparent 60%),
linear-gradient(135deg, var(--bg1) 0%, var(--bg2) 100%);
min-height:100vh;
display:grid; place-items:center;
overflow:hidden;
}
.wrapper{ width:min(96%, 1100px); padding:24px; position:relative; }
.brand{ display:flex; align-items:center; gap:12px; justify-content:center; margin-bottom:28px; }
.logo{
width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
background: conic-gradient(from 210deg, var(--acc1), var(--acc2), var(--acc3), var(--acc1));
box-shadow: 0 6px 14px rgba(59,130,246,0.25);
}
.logo svg{ filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25)); }
.brand h1{ font-size:1.35rem; margin:0; font-weight:700; color:var(--text); }
.card{
width: min(420px, 100%);
margin: 0 auto;
background: var(--card);
border: 1px solid var(--card-border);
border-radius: var(--radius);
box-shadow: var(--shadow);
backdrop-filter: blur(6px);
}
.card-header{ padding: 22px 22px 8px; }
.card-header h2{ margin:0; font-size:1.1rem; font-weight:700; }
.hint{ color:var(--muted); font-size:.9rem; }
.card-body{ padding: 22px; }
.field{ position:relative; margin:18px 0 6px; }
.input{
width:100%; padding: 18px 14px 14px; border-radius:12px; border:1px solid var(--card-border);
background: white;
color:var(--text); outline:none; transition: border-color .2s, box-shadow .2s;
}
.input:focus{
border-color: var(--acc1);
box-shadow: 0 0 0 3px rgba(59,130,246,0.2);
}
.floating-label{
position:absolute; left:16px; top:50%; transform: translateY(-50%);
color: var(--muted); pointer-events:none; transition: all .18s ease;
background: white; padding: 0 4px;
}
.input:focus + .floating-label,
.input:not(:placeholder-shown) + .floating-label{
top:6px; font-size:.75rem; color: var(--acc1);
transform: translateY(0);
}
.row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:10px 0 6px; }
.checkbox{ display:flex; align-items:center; gap:8px; color:var(--muted); font-size:.9rem; }
.checkbox input{ width:16px; height:16px; accent-color: var(--acc1); }
.btn{
display:inline-grid; place-items:center; width:100%;
border:none; cursor:pointer; padding:14px 18px; border-radius:14px; font-weight:700; letter-spacing:.3px;
background: linear-gradient(135deg, var(--acc1), var(--acc2));
color:white; box-shadow: 0 6px 14px rgba(59,130,246,0.25);
transition: transform .08s ease, filter .2s ease;
}
.btn:hover{ filter: brightness(1.05); }
.btn:active{ transform: translateY(1px) scale(.997); }
.btn-secondary{
background: linear-gradient(135deg, #e0f2fe, #bfdbfe);
color: var(--acc1);
border: 1px solid var(--acc2);
margin-top:10px;
}
.btn-secondary:hover{ filter: brightness(0.97); }
.password-toggle{
position:absolute; right:10px; top:50%; transform: translateY(-50%);
background: none; border:none; color: var(--muted); cursor:pointer; padding:6px; border-radius:8px;
}
.password-toggle:hover{ color:var(--text); }
.link{ color: var(--acc1); text-decoration:none; font-size:.9rem; }
.link:hover{ text-decoration:underline; }
footer{ margin-top:24px; text-align:center; color:var(--muted); font-size:.85rem; }
</style>
</head>
<body>
<main class="wrapper">
<div class="brand">
<div class="logo">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="119.4963 77.7365 111.4921 111.4921" width="26px" height="26px"><g id="object-4" transform="matrix(0.9999999999999999, 0, 0, 0.9999999999999999, 125.24235534667969, 83.48248291015624)">
<rect width="51" height="51" style="fill: rgb(54, 54, 54);" id="object-0" transform="matrix(0.992475, 0.122446, -0.122446, 0.992475, 6.498501, -5.746029)"/>
<rect width="51" height="51" style="fill: #44AA55;" x="49" id="object-3" transform="matrix(0.992475, 0.122446, -0.122446, 0.992475, 6.498501, -5.746029)"/>
<rect y="49" width="51" height="51" style="fill: #44AA55;" id="object-2" transform="matrix(0.992475, 0.122446, -0.122446, 0.992475, 6.498501, -5.746029)"/>
<rect x="49" y="49" width="51" height="51" style="fill: #4455AA;" id="object-1" transform="matrix(0.992475, 0.122446, -0.122446, 0.992475, 6.498501, -5.746029)"/></g></svg>
</div>
<h1>Connect</h1>
</div>
<section class="card">
<div class="card-body">
<form action="#" method="post" novalidate>
<div class="field">
<input class="input" id="login" name="login" type="text" placeholder=" " autocomplete="username" required />
<label class="floating-label" for="login">Login</label>
</div>
<div class="field">
<input class="input" id="password" name="password" type="password" placeholder=" " autocomplete="current-password" required />
<label class="floating-label" for="password">Password</label>
<button class="password-toggle" type="button" aria-label="Show / Hide password" onclick="togglePassword()">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 5c-5 0-9 4-10 7 1 3 5 7 10 7s9-4 10-7c-1-3-5-7-10-7zm0 12a5 5 0 110-10 5 5 0 010 10z" fill="currentColor"/>
</svg>
</button>
</div>
<button class="btn" type="submit">Connect</button>
<a class="btn btn-secondary" target="_blank" href="https://www.free-cash-register.net" >Create account</a>
</form>
<footer>© <span id="year"></span> <a href="https://www.free-cash-register.net">free-cash-register.net</a></footer>
</div>
</section>
</main>
<script>
function togglePassword(){
const input = document.getElementById('password');
input.type = input.type === 'password' ? 'text' : 'password';
input.focus();
}
document.getElementById('year').textContent = new Date().getFullYear();
</script>
</body>
</html>