feat: export + detail receptů
feat: losování jídel
This commit is contained in:
Ondřej Anděl committed
1 parent
35cbc5a9ca
commit
caffb6d8b4
23 files changed
+2674
-43
No files matched your search
@@ -0,0 +1,154 @@
|
||||
// Konfety po výsledku kola štěstí, převzaté z Luncheru
|
||||
.wheel-confetti {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 2000; // nad modalem (bootstrap 1055)
|
||||
pointer-events: none;
|
||||
overflow: hidden;
|
||||
|
||||
> span {
|
||||
position: absolute;
|
||||
will-change: transform, opacity;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
}
|
||||
|
||||
// Vrh: rychle vzhůru do vrcholu (zpomalení), pak volný pád (zrychlení)
|
||||
@keyframes confetti-throw {
|
||||
0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(0.4); opacity: 0; animation-timing-function: cubic-bezier(0.2, 0.7, 0.4, 1); }
|
||||
6% { opacity: 1; }
|
||||
38% { transform: translate3d(var(--x1), var(--y1), 0) rotate(var(--r1)) scale(1); animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.6); }
|
||||
88% { opacity: 1; }
|
||||
100% { transform: translate3d(var(--x2), var(--y2), 0) rotate(var(--r2)) scale(1); opacity: 0; }
|
||||
}
|
||||
|
||||
// Déšť: plynulý pád shora s mírným houpáním
|
||||
@keyframes confetti-rain {
|
||||
0% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0; animation-timing-function: ease-in-out; }
|
||||
8% { opacity: 1; }
|
||||
40% { transform: translate3d(var(--x1), var(--y1), 0) rotate(var(--r1)); animation-timing-function: ease-in; }
|
||||
88% { opacity: 1; }
|
||||
100% { transform: translate3d(var(--x2), var(--y2), 0) rotate(var(--r2)); opacity: 0; }
|
||||
}
|
||||
|
||||
.confetti-emoji {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// Konfety ve stylu Hell Girl
|
||||
// ============================================
|
||||
.confetti-hg {
|
||||
filter: drop-shadow(0 0 6px rgb(200 16 46 / 0.55)) drop-shadow(0 3px 3px rgb(0 0 0 / 0.3));
|
||||
}
|
||||
|
||||
.confetti-hg-badge {
|
||||
padding: 4px 14px;
|
||||
border: 1px solid #c8102e;
|
||||
outline: 1px solid rgb(200 16 46 / 0.4);
|
||||
outline-offset: 2px;
|
||||
color: #fff4ee;
|
||||
font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
|
||||
font-weight: 800;
|
||||
font-size: 1.1rem;
|
||||
letter-spacing: 1px;
|
||||
white-space: nowrap;
|
||||
text-shadow: 0 0 8px rgb(232 52 79 / 0.7);
|
||||
}
|
||||
|
||||
// Nápis „poslání do pekla" — černá deska s rudým lemem, vynoří se z mlhy
|
||||
.confetti-hg-banner {
|
||||
position: absolute;
|
||||
top: 38%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
padding: 14px 48px;
|
||||
font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
|
||||
font-weight: 800;
|
||||
font-size: clamp(2rem, 7vw, 4rem);
|
||||
letter-spacing: 0.3em;
|
||||
white-space: nowrap;
|
||||
color: #fff4ee;
|
||||
background: linear-gradient(90deg, transparent, #12070a 15%, #12070a 85%, transparent);
|
||||
border-top: 2px solid #c8102e;
|
||||
border-bottom: 2px solid #c8102e;
|
||||
text-shadow: 0 0 18px rgb(232 52 79 / 0.9), 0 0 4px #c8102e;
|
||||
animation: hg-banner 2.6s ease both;
|
||||
}
|
||||
|
||||
@keyframes hg-banner {
|
||||
0% { transform: translate(-50%, -50%) scale(1.15); opacity: 0; filter: blur(12px); }
|
||||
25% { transform: translate(-50%, -50%) scale(1); opacity: 1; filter: blur(0); }
|
||||
75% { transform: translate(-50%, -50%) scale(1); opacity: 1; filter: blur(0); }
|
||||
100% { transform: translate(-50%, -50%) scale(0.96); opacity: 0; filter: blur(8px); }
|
||||
}
|
||||
|
||||
// Postava s hláškou — tmavý odznak s rudou září a bublina jako svitek
|
||||
.confetti-voice {
|
||||
position: absolute;
|
||||
left: 16px;
|
||||
bottom: 16px;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 8px;
|
||||
max-width: min(460px, calc(100vw - 32px));
|
||||
animation: confetti-voice 4.6s ease both;
|
||||
}
|
||||
|
||||
.confetti-avatar {
|
||||
flex: none;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 84px;
|
||||
height: 84px;
|
||||
margin-bottom: 8px;
|
||||
font-size: 46px;
|
||||
border-radius: 50%;
|
||||
border: 4px solid #12070a;
|
||||
background: radial-gradient(circle at 50% 60%, #3a0d16, #12070a);
|
||||
box-shadow: 0 0 0 3px var(--speaker, #c8102e), 0 0 18px rgb(200 16 46 / 0.6);
|
||||
}
|
||||
|
||||
.confetti-bubble {
|
||||
position: relative;
|
||||
margin-bottom: 40px;
|
||||
padding: 12px 16px;
|
||||
background: #170c0f;
|
||||
color: #f3e6e2;
|
||||
border: 1px solid var(--speaker, #c8102e);
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 0 16px rgb(0 0 0 / 0.6), 0 0 10px rgb(200 16 46 / 0.3);
|
||||
font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
small {
|
||||
display: block;
|
||||
margin-top: 4px;
|
||||
color: var(--speaker, #c8102e);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
// ocásek bubliny směrem k postavě
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -14px;
|
||||
bottom: 14px;
|
||||
border: 8px solid transparent;
|
||||
border-right: 10px solid var(--speaker, #c8102e);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes confetti-voice {
|
||||
0% { opacity: 0; transform: translateY(40px) scale(0.8); }
|
||||
10% { opacity: 1; transform: translateY(0) scale(1.03); }
|
||||
15% { transform: translateY(0) scale(1); }
|
||||
85% { opacity: 1; transform: translateY(0); }
|
||||
100% { opacity: 0; transform: translateY(20px); }
|
||||
}
|
||||
Reference in new issue
Block a user