ludwig/sonri
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

small changes

Browse Source
This commit is contained in:
Ludwig Lehnert 2025-06-22 22:26:25 +02:00
parent 0815012780
commit 48f3928c6d
Signed by: ludwig
SSH Key Fingerprint: SHA256:4vshH9GJ8TLO1RS2fY6rDDLnq7+KVvSClCY+uEhYYRA
4 changed files with 65 additions and 39 deletions

2
src/app.css

@ -17,7 +17,7 @@ html,
body {
height: 100%;
scroll-behavior: smooth;
background-color: #e7f7df;
/* background-color: #e7f7df; */
font-family: var(--font-sans);
}

13
src/lib/auth.ts

@ -2,18 +2,22 @@ import { decodeKeyVault, deriveKeyVault, encodeKeyVault, type KeyVault } from ".
export function loggedIn() {
if (typeof window !== 'object') return false;
return !!sessionStorage['_vault'];
const vault = localStorage['_vault'] ?? sessionStorage['_vault'];
return !!vault;
}
export async function login(passkey: string): Promise<KeyVault> {
export async function login(passkey: string, persistent: boolean = false): Promise<KeyVault> {
const storage = persistent ? localStorage : sessionStorage;
const keyVault = await deriveKeyVault(passkey);
sessionStorage['_vault'] = encodeKeyVault(keyVault);
storage['_vault'] = encodeKeyVault(keyVault);
return keyVault;
}
export function getKeyVault(): KeyVault | null {
try {
return decodeKeyVault(sessionStorage['_vault']);
const vault = localStorage['_vault'] ?? sessionStorage['_vault'];
return decodeKeyVault(vault);
} catch (e) {
console.log(e);
return null;
@ -21,6 +25,7 @@ export function getKeyVault(): KeyVault | null {
}
export function logout() {
delete localStorage['_vault'];
delete sessionStorage['_vault'];
}

21
src/routes/(area)/login/+page.svelte

@ -5,9 +5,13 @@
const onSubmit = async (e: SubmitEvent) => {
e.preventDefault();
const formData = new FormData(e.target as any);
const passkey = formData.get('passkey') as string;
await login(passkey);
if (!passkey) return;
await login(passkey, !!formData.get('persistent'));
window.location.href = '/today';
};
@ -24,14 +28,21 @@
<title>Somri Login</title>
</svelte:head>
<div class="absolute left-0 right-0 m-auto p-6 max-w-[400px]">
<div class="absolute left-0 right-0 m-auto p-6 max-w-[400px] font-serif">
<form method="POST" class="p-6 rounded-3xl bg-white flex flex-col gap-2"
onsubmit={onSubmit}
>
<h1 class="text-2xl font-bold">Login</h1>
<h1 class="text-3xl font-bold p-2">Login</h1>
<input type="password" name="passkey" placeholder="Passkey"
class="px-3 py-1 rounded-3xl outline-none bg-[#00000010]">
<button type="submit" class="px-3 py-1 rounded-3xl cursor-pointer bg-[#2596be] cusor-pointer text-white">
class="text-xl px-3 py-1 rounded-3xl outline-none bg-[#00000010]">
<div class="p-2">
<input id="persistent" name="persistent" type="checkbox">
<label for="persistent">Stay signed in</label>
</div>
<button type="submit" class="text-xl px-3 py-1 rounded-3xl cursor-pointer bg-green-600 font-bold cusor-pointer text-white">
Login
</button>
</form>

68
src/routes/+page.svelte

@ -11,42 +11,52 @@
});
</script>
<div class="min-h-screen bg-[#e7f7df] font-serif text-gray-800 flex flex-col">
<div class="min-h-screen font-serif text-gray-800 flex flex-col">
<div class="relative w-full overflow-hidden py-12 px-4 md:py-24 lg:py-32 flex-grow flex items-center justify-center">
<div class="relative z-10 max-w-5xl mx-auto flex flex-col lg:flex-row items-center justify-between gap-8 md:gap-12">
<div class="lg:w-1/2 text-center lg:text-left">
<h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-[#388e3c] mb-3 leading-tight">
Sonri: Your Private Life, <span class="text-[#4caf50]">Truly Yours.</span>
</h1>
<p class="text-lg sm:text-xl lg:text-2xl text-gray-700 mb-6">
Capture your moments with <b class="font-semibold text-gray-900">unmatched privacy</b> and <b class="font-semibold text-gray-900">total freedom</b>. Sonri ensures your video diary is for your eyes only, and it's <b class="font-semibold text-gray-900">currently free</b>.
</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start">
<a href="/login" class="bg-[#66bb6a] text-white font-bold py-3 px-6 rounded-full text-lg shadow-xl hover:bg-[#5cb85d] focus:outline-none focus:ring-4 focus:ring-[#81c784] focus:ring-opacity-75 transition-all duration-300 ease-in-out">
Start Journal Now
</a>
<a href="#features" class="inline-flex items-center justify-center text-[#4caf50] font-semibold py-3 px-6 rounded-full text-lg border-2 border-[#4caf50] hover:bg-[#4caf50] hover:text-white transition-colors duration-300 ease-in-out group">
Your Privacy
<svg class="ml-2 w-5 h-5 group-hover:translate-x-1 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
</a>
</div>
</div>
<div class="relative w-full overflow-hidden py-20 px-6 md:py-28 lg:py-36 flex items-center justify-center bg-gradient-to-br from-green-100 via-white to-green-50">
<div class="absolute inset-0 bg-[url('/img/texture.svg')] opacity-10 pointer-events-none"></div>
<div class="hidden lg:static lg:w-1/2 mt-8 lg:mt-0 flex justify-center items-center">
<div class="w-64 h-64 sm:w-72 sm:h-72 bg-white rounded-full shadow-2xl flex items-center justify-center p-6 sm:p-8 border-4 border-[#aed581] transform rotate-3 hover:rotate-0 transition-transform duration-500 ease-in-out">
<svg class="w-40 h-40 sm:w-48 sm:h-48 text-[#4caf50] opacity-70" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
</div>
</div>
</div>
<div class="relative z-10 max-w-6xl mx-auto flex flex-col lg:flex-row items-center justify-between gap-10">
<!-- Textbereich -->
<div class="lg:w-1/2 text-center lg:text-left">
<h1 class="text-4xl sm:text-5xl lg:text-6xl font-black text-green-800 leading-tight tracking-tight drop-shadow-sm">
Sonri: Your Private Life, <br><span class="text-green-600">Truly Yours.</span>
</h1>
<p class="text-lg sm:text-xl lg:text-2xl text-gray-700 mt-6 mb-8 leading-relaxed max-w-xl mx-auto lg:mx-0">
Capture your moments with <strong class="text-gray-900">unmatched privacy</strong> and <strong class="text-gray-900">total freedom</strong>.
Sonri is your safe space — <span class="text-green-800 font-semibold">and it’s free.</span>
</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start">
<a href="/login" class="bg-green-600 hover:bg-green-500 text-white font-semibold py-3 px-6 rounded-full text-lg shadow-lg transition-all duration-300">
Start Journal Now
</a>
<a href="#features" class="inline-flex items-center justify-center text-green-700 border-2 border-green-600 hover:bg-green-600 hover:text-white font-medium py-3 px-6 rounded-full transition-all duration-300 group">
Your Privacy
<svg class="ml-2 w-5 h-5 group-hover:translate-x-1 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</a>
</div>
</div>
<!-- Iconbereich -->
<div class="opacity-0 lg:w-1/2 mt-10 lg:mt-0 flex justify-center items-center">
<div class="relative w-72 h-72 sm:w-80 sm:h-80 bg-white rounded-full shadow-2xl border-8 border-green-300 flex items-center justify-center p-6 transform hover:rotate-1 transition-transform duration-500 ease-in-out">
<svg class="w-32 h-32 sm:w-40 sm:h-40 text-green-600 animate-pulse-slow" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
</svg>
</div>
</div>
</div>
</div>
<div id="features" class="relative z-20 w-full max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl sm:text-4xl font-extrabold text-[#388e3c] text-center mb-10">The Sonri Advantage</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
<div class="bg-white p-6 sm:p-8 rounded-2xl shadow-lg border border-[#c5e1a5] flex flex-col items-center text-center transition-all duration-300 hover:shadow-xl hover:bg-[#f9fdf8]">
<div class="p-3 sm:p-4 rounded-full bg-[#e6ee9c] mb-4 sm:mb-6 shadow-md">
<svg class="w-12 h-12 sm:w-16 sm:h-16 text-[#4caf50]" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
<svg class="w-12 h-12 sm:w-16 sm:h-16 text-[#4caf50]" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17.06 13C15.2 13 13.64 14.33 13.24 16.1C12.29 15.69 11.42 15.8 10.76 16.09C10.35 14.31 8.79 13 6.94 13C4.77 13 3 14.79 3 17C3 19.21 4.77 21 6.94 21C9 21 10.68 19.38 10.84 17.32C11.18 17.08 12.07 16.63 13.16 17.34C13.34 19.39 15 21 17.06 21C19.23 21 21 19.21 21 17C21 14.79 19.23 13 17.06 13M6.94 19.86C5.38 19.86 4.13 18.58 4.13 17S5.39 14.14 6.94 14.14C8.5 14.14 9.75 15.42 9.75 17S8.5 19.86 6.94 19.86M17.06 19.86C15.5 19.86 14.25 18.58 14.25 17S15.5 14.14 17.06 14.14C18.62 14.14 19.88 15.42 19.88 17S18.61 19.86 17.06 19.86M22 10.5H2V12H22V10.5M15.53 2.63C15.31 2.14 14.75 1.88 14.22 2.05L12 2.79L9.77 2.05L9.72 2.04C9.19 1.89 8.63 2.17 8.43 2.68L6 9H18L15.56 2.68L15.53 2.63Z" /></svg>
</div>
<h3 class="text-2xl sm:text-3xl font-bold text-[#388e3c] mb-2 sm:mb-3">Anonymous</h3>
<p class="text-base sm:text-lg text-gray-700">No email, no phone number, nothing else.</p>
@ -55,7 +65,7 @@
<div class="bg-white p-6 sm:p-8 rounded-2xl shadow-lg border border-[#c5e1a5] flex flex-col items-center text-center transition-all duration-300 hover:shadow-xl hover:bg-[#f9fdf8]">
<div class="p-3 sm:p-4 rounded-full bg-[#e6ee9c] mb-4 sm:mb-6 shadow-md">
<svg class="w-12 h-12 sm:w-16 sm:h-16 text-[#4caf50]" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 7a2 2 0 012 2v5l-3 3H7a2 2 0 01-2-2V9a2 2 0 012-2h1V5a2 2 0 012-2h4a2 2 0 012 2v2h1zM10 11H8v2h2v-2z"></path></svg>
<svg class="w-12 h-12 sm:w-16 sm:h-16 text-[#4caf50]" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M22,18V22H18V19H15V16H12L9.74,13.74C9.19,13.91 8.61,14 8,14A6,6 0 0,1 2,8A6,6 0 0,1 8,2A6,6 0 0,1 14,8C14,8.61 13.91,9.19 13.74,9.74L22,18M7,5A2,2 0 0,0 5,7A2,2 0 0,0 7,9A2,2 0 0,0 9,7A2,2 0 0,0 7,5Z" /></svg>
</div>
<h3 class="text-2xl sm:text-3xl font-bold text-[#388e3c] mb-2 sm:mb-3">Fully Encrypted</h3>
<p class="text-base sm:text-lg text-gray-700">Every log entry is encrypted using your unique passphrase.</p>
@ -64,7 +74,7 @@
<div class="bg-white p-6 sm:p-8 rounded-2xl shadow-lg border border-[#c5e1a5] flex flex-col items-center text-center transition-all duration-300 hover:shadow-xl hover:bg-[#f9fdf8]">
<div class="p-3 sm:p-4 rounded-full bg-[#e6ee9c] mb-4 sm:mb-6 shadow-md">
<svg class="w-12 h-12 sm:w-16 sm:h-16 text-[#4caf50]" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-3.333a2 2 0 01-1.5-.667L12 4z"></path></svg>
<svg class="w-12 h-12 sm:w-16 sm:h-16 text-[#4caf50]" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3,4.27L4.28,3L21,19.72L19.73,21L16.06,17.33C15.44,18 14.54,18.55 13.5,18.82V21H10.5V18.82C8.47,18.31 7,16.79 7,15H9C9,16.08 10.37,17 12,17C13.13,17 14.14,16.56 14.65,15.92L11.68,12.95C9.58,12.42 7,11.75 7,9C7,8.77 7,8.55 7.07,8.34L3,4.27M10.5,5.18V3H13.5V5.18C15.53,5.69 17,7.21 17,9H15C15,7.92 13.63,7 12,7C11.63,7 11.28,7.05 10.95,7.13L9.4,5.58L10.5,5.18Z" /></svg>
</div>
<h3 class="text-2xl sm:text-3xl font-bold text-[#388e3c] mb-2 sm:mb-3">Free</h3>
<p class="text-base sm:text-lg text-gray-700">Currently, Sonri is completely free to use. Experience true privacy and security in your video journaling journey without any cost barriers.</p>