naman_panwar_gnpl/pragativeer-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix modal border and improve light mode firecracker colors

Browse Source
This commit is contained in:
ectasy663
2026-07-10 16:51:25 +05:30
parent 6382924a62
commit 90700c0268
3 changed files with 18 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
public/streak-animation.html
View File

@@ -207,14 +207,8 @@
<script> <script>
(function(){ (function(){
let isLight = false;
try {
isLight = !window.parent.document.documentElement.classList.contains('dark');
} catch (e) {
const p = new URLSearchParams(window.location.search); const p = new URLSearchParams(window.location.search);
isLight = p.get('theme') === 'light'; window.isLightTheme = p.get('theme') === 'light';
}
window.isLightTheme = isLight;
})(); })();
const stage=document.getElementById('stage'); const stage=document.getElementById('stage');
@@ -236,8 +230,8 @@
} }
resize(); addEventListener('resize',resize); resize(); addEventListener('resize',resize);
const SPARK=window.isLightTheme?['#e28a22','#c2410c','#b45309','#78350f','#ea580c','#3b82f6']:['#f6dd93','#e8c463','#d4af37','#fff4cf','#ffffff','#8fb4ff']; const SPARK=window.isLightTheme?['#b91c1c','#c2410c','#1d4ed8','#15803d','#7e22ce','#0f172a']:['#f6dd93','#e8c463','#d4af37','#fff4cf','#ffffff','#8fb4ff'];
const CONF=window.isLightTheme?['#e28a22','#c2410c','#b45309','#ea580c','#ef4444','#3b82f6','#10b981']:['#f6dd93','#e8c463','#d4af37','#ffffff','#ffd34d']; const CONF=window.isLightTheme?['#b91c1c','#c2410c','#1d4ed8','#15803d','#7e22ce','#0f172a','#b45309']:['#f6dd93','#e8c463','#d4af37','#ffffff','#ffd34d'];
let parts=[], running=false, mode='fireworks', rafFW=null, fwTimers=[], fadeCol=(window.isLightTheme ? 'rgba(255,255,255,0.22)' : 'rgba(0,0,0,0.22)'); let parts=[], running=false, mode='fireworks', rafFW=null, fwTimers=[], fadeCol=(window.isLightTheme ? 'rgba(255,255,255,0.22)' : 'rgba(0,0,0,0.22)');
function burst(xr,yr,count){ function burst(xr,yr,count){
@@ -409,15 +403,9 @@
<script> <script>
(function(){ (function(){
setInterval(() => { setInterval(() => {
let isLight = false;
try {
isLight = !window.parent.document.documentElement.classList.contains('dark');
} catch (e) {
const p = new URLSearchParams(window.location.search); const p = new URLSearchParams(window.location.search);
isLight = p.get('theme') === 'light'; window.isLightTheme = p.get('theme') === 'light';
} const isLight = window.isLightTheme;
window.isLightTheme = isLight;
if (isLight) { if (isLight) {
document.body.style.setProperty('background', '#ffffff', 'important'); document.body.style.setProperty('background', '#ffffff', 'important');

22
scratch/port_streak_clean.py
View File

@@ -64,21 +64,15 @@ def port_html():
# Inject theme initialization at start of script block # Inject theme initialization at start of script block
init_theme_script = """<script> init_theme_script = """<script>
(function(){ (function(){
let isLight = false;
try {
isLight = !window.parent.document.documentElement.classList.contains('dark');
} catch (e) {
const p = new URLSearchParams(window.location.search); const p = new URLSearchParams(window.location.search);
isLight = p.get('theme') === 'light'; window.isLightTheme = p.get('theme') === 'light';
}
window.isLightTheme = isLight;
})(); })();
""" """
html = html.replace("<script>", init_theme_script, 1) html = html.replace("<script>", init_theme_script, 1)
# Make firecracker spark/confetti arrays dynamic based on theme # Make firecracker spark/confetti arrays dynamic based on theme
spark_replacement = "const SPARK=window.isLightTheme?['#e28a22','#c2410c','#b45309','#78350f','#ea580c','#3b82f6']:['#f6dd93','#e8c463','#d4af37','#fff4cf','#ffffff','#8fb4ff'];" spark_replacement = "const SPARK=window.isLightTheme?['#b91c1c','#c2410c','#1d4ed8','#15803d','#7e22ce','#0f172a']:['#f6dd93','#e8c463','#d4af37','#fff4cf','#ffffff','#8fb4ff'];"
conf_replacement = "const CONF=window.isLightTheme?['#e28a22','#c2410c','#b45309','#ea580c','#ef4444','#3b82f6','#10b981']:['#f6dd93','#e8c463','#d4af37','#ffffff','#ffd34d'];" conf_replacement = "const CONF=window.isLightTheme?['#b91c1c','#c2410c','#1d4ed8','#15803d','#7e22ce','#0f172a','#b45309']:['#f6dd93','#e8c463','#d4af37','#ffffff','#ffd34d'];"
html = re.sub(r"const SPARK\s*=\s*\[[^\]]*\];", spark_replacement, html) html = re.sub(r"const SPARK\s*=\s*\[[^\]]*\];", spark_replacement, html)
html = re.sub(r"const CONF\s*=\s*\[[^\]]*\];", conf_replacement, html) html = re.sub(r"const CONF\s*=\s*\[[^\]]*\];", conf_replacement, html)
@@ -112,15 +106,9 @@ def port_html():
<script> <script>
(function(){ (function(){
setInterval(() => { setInterval(() => {
let isLight = false;
try {
isLight = !window.parent.document.documentElement.classList.contains('dark');
} catch (e) {
const p = new URLSearchParams(window.location.search); const p = new URLSearchParams(window.location.search);
isLight = p.get('theme') === 'light'; window.isLightTheme = p.get('theme') === 'light';
} const isLight = window.isLightTheme;
window.isLightTheme = isLight;
if (isLight) { if (isLight) {
document.body.style.setProperty('background', '#ffffff', 'important'); document.body.style.setProperty('background', '#ffffff', 'important');

7
src/components/Dashboard/StreakOnboardingModal.tsx
View File

@@ -8,7 +8,8 @@ import { useTheme } from "next-themes";
export function StreakOnboardingModal() { export function StreakOnboardingModal() {
const { user, loading } = useActiveUser(); const { user, loading } = useActiveUser();
const { resolvedTheme } = useTheme(); const { resolvedTheme, theme } = useTheme();
const activeTheme = resolvedTheme || theme || "dark";
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
useEffect(() => { useEffect(() => {
@@ -59,7 +60,7 @@ export function StreakOnboardingModal() {
<div className="fixed inset-0 z-50 flex items-center justify-center bg-background/85 backdrop-blur-md animate-in fade-in duration-300"> <div className="fixed inset-0 z-50 flex items-center justify-center bg-background/85 backdrop-blur-md animate-in fade-in duration-300">
{/* Centered Modal Card Container covering 80% screen size (w-[80vw] h-[80vh]) */} {/* Centered Modal Card Container covering 80% screen size (w-[80vw] h-[80vh]) */}
<div className="bg-background border border-border/80 shadow-[0_0_60px_-10px_rgba(0,240,255,0.25)] rounded-3xl w-[80vw] max-w-5xl h-[80vh] max-h-[800px] relative overflow-hidden animate-in zoom-in-95 slide-in-from-bottom-4 duration-300 z-20 pointer-events-auto mx-4 flex flex-col justify-start"> <div className="bg-background border-none shadow-[0_0_60px_-10px_rgba(0,240,255,0.25)] rounded-3xl w-[80vw] max-w-5xl h-[80vh] max-h-[800px] relative overflow-hidden animate-in zoom-in-95 slide-in-from-bottom-4 duration-300 z-20 pointer-events-auto mx-4 flex flex-col justify-start">
{/* Subtle background glow */} {/* Subtle background glow */}
<div className="absolute -right-20 -top-20 size-48 bg-[#00F0FF]/5 rounded-full blur-3xl pointer-events-none" /> <div className="absolute -right-20 -top-20 size-48 bg-[#00F0FF]/5 rounded-full blur-3xl pointer-events-none" />
@@ -68,7 +69,7 @@ export function StreakOnboardingModal() {
{/* Top Celebration Animation Panel (Iframe with height 60%, matching bg) */} {/* Top Celebration Animation Panel (Iframe with height 60%, matching bg) */}
<div className="relative w-full h-[60%] z-10 pointer-events-none overflow-hidden bg-background"> <div className="relative w-full h-[60%] z-10 pointer-events-none overflow-hidden bg-background">
<iframe <iframe
src={`/streak-animation.html?streak=${streak}&theme=${resolvedTheme === 'light' ? 'light' : 'dark'}`} src={`/streak-animation.html?streak=${streak}&theme=${activeTheme === 'light' ? 'light' : 'dark'}`}
className="w-full h-full border-none" className="w-full h-full border-none"
title="Streak Celebration" title="Streak Celebration"
allowtransparency="true" allowtransparency="true"