20256426/Map-Jurnal
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

added logo image and slogan to sign in page

Browse Source
This commit is contained in:
haerikimmm
2026-06-16 15:20:07 +09:00
parent 06e5fe5593
commit d2fb40f692
26 changed files with 1553 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
src/lib/auth/LoginOverlay.svelte
View File

@@ -1,12 +1,13 @@
<script>
import { signInWithGoogle } from './userStore.svelte.js';
import logoImg from '../../assets/logo.png';
</script>
<div class="overlay">
<div class="card">
<img src="/logo.png" alt="Map Journal" class="logo" />
<h1 class="title">Map Journal</h1>
<p class="subtitle">Sign in to start your journey</p>
<img src={logoImg} alt="Journi" class="logo" />
<h1 class="title">Journi</h1>
<p class="subtitle">Collect Colors Along the Way</p>
<button class="google-btn" onclick={signInWithGoogle}>
<svg class="google-icon" viewBox="0 0 48 48">
<path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"/>
@@ -24,64 +25,71 @@
.overlay {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.85);
background: var(--bg);
display: flex;
align-items: center;
justify-content: center;
z-index: 100;
backdrop-filter: blur(4px);
}
.card {
background: #1e2937;
border-radius: 16px;
padding: 48px 40px;
text-align: center;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
max-width: 400px;
max-width: 360px;
width: 90%;
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
}
.logo {
width: 80px;
height: 80px;
border-radius: 12px;
width: 216px;
height: 216px;
object-fit: contain;
margin-bottom: 16px;
}
.title {
font: 700 28px/1.2 sans-serif;
color: #f1f5f9;
margin-bottom: 8px;
font-family: var(--heading);
font-size: 28px;
font-weight: 600;
color: var(--text-h);
letter-spacing: -0.5px;
margin: 0;
}
.subtitle {
font: 400 15px/1.4 sans-serif;
color: #94a3b8;
margin-bottom: 32px;
font-family: var(--sans);
font-size: 14px;
font-weight: 300;
color: var(--text);
margin: 0 0 32px;
}
.google-btn {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 12px 28px;
border: 1px solid rgba(255,255,255,0.15);
gap: 10px;
padding: 10px 24px;
border: 1px solid var(--border);
border-radius: 8px;
background: #334155;
color: #f1f5f9;
font: 500 16px/1.4 sans-serif;
background: var(--bg-subtle);
color: var(--text-h);
font-family: var(--sans);
font-size: 14px;
font-weight: 400;
cursor: pointer;
transition: background 0.2s;
transition: background 0.15s, border-color 0.15s;
}
.google-btn:hover {
background: #475569;
background: var(--bg);
border-color: var(--accent-border);
}
.google-icon {
width: 22px;
height: 22px;
width: 20px;
height: 20px;
flex-shrink: 0;
}
</style>