<p><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JSingh</title> <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Cormorant+Garamond:wght@300;400;500;600&family=IM+Fell+English+SC&display=swap" rel="stylesheet">
<style> :root{ --gold:#c9a84c;--gold2:#e8d48b; --dark:#0a0a0a;--cream:#f5f0e8; --warm:#2a1f14;--gray:#888; --blue:#2980b9;--red:#c0392b;--green:#27ae60; } *{margin:0;padding:0;box-sizing:border-box;} html{scroll-behavior:smooth;} body{font-family:'Cormorant Garamond',serif;background:var(--dark);color:var(--cream);} /* ══════ ADMIN PANEL (top, always on top) ══════ */ #AP{ position:fixed;top:0;left:0;right:0;z-index:9999; background:#12122a;border-bottom:2px solid var(--gold); padding:8px 16px;display:none; align-items:center;gap:8px;flex-wrap:wrap; } #AP.show{display:flex;} .ap-lbl{font-family:'IM Fell English SC',serif;color:var(--gold);font-size:14px;letter-spacing:2px;margin-right:4px;} .ab{padding:8px 14px;border:none;border-radius:4px;cursor:pointer;font-family:'Cormorant Garamond',serif;font-size:13px;font-weight:700;letter-spacing:1px;transition:opacity .2s;} .ab:hover{opacity:.85;} .ab-gold{background:var(--gold);color:#111;} .ab-blue{background:var(--blue);color:#fff;} .ab-red{background:var(--red);color:#fff;} .ab-grn{background:var(--green);color:#fff;} .ab-dk{background:#333;color:#fff;} .ap-tip{font-size:11px;color:rgba(201,168,76,.5);margin-left:auto;letter-spacing:1px;} /* ══════ NAVIGATION ══════ */ nav{ position:fixed;left:0;right:0;z-index:500; display:flex;justify-content:space-between;align-items:center; padding:18px 36px; background:rgba(10,10,10,.95); border-bottom:1px solid rgba(201,168,76,.1); transition:top .3s; } nav.push{top:46px;} nav.top{top:0;} .logo{font-family:'IM Fell English SC',serif;font-size:20px;color:var(--gold);letter-spacing:3px;cursor:pointer;border:none;background:none;} .nlinks{display:flex;gap:24px;list-style:none;margin-right:80px;} .nlinks a{font-size:12px;color:var(--cream);text-decoration:none;letter-spacing:2px;text-transform:uppercase;cursor:pointer;transition:color .3s;padding-bottom:2px;border-bottom:1px solid transparent;} .nlinks a:hover,.nlinks a.cur{color:var(--gold);border-bottom-color:var(--gold);} .lsw{display:flex;border:1px solid rgba(201,168,76,.4);border-radius:3px;overflow:hidden;} .lb{padding:5px 12px;font-size:11px;letter-spacing:2px;text-transform:uppercase;background:transparent;color:rgba(245,240,232,.5);border:none;cursor:pointer;font-family:'Cormorant Garamond',serif;transition:all .3s;} .lb.cur{background:var(--gold);color:#111;font-weight:700;} .hb{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px;} .hb span{width:22px;height:1px;background:var(--gold);} .mnav{display:none;position:fixed;inset:0;background:rgba(8,8,8,.97);z-index:700;flex-direction:column;align-items:center;justify-content:center;gap:30px;} .mnav.show{display:flex;} .mnav a{font-family:'Playfair Display',serif;font-size:28px;color:var(--cream);cursor:pointer;transition:color .3s;} .mnav a:hover{color:var(--gold);} .mx{position:absolute;top:20px;right:22px;font-size:24px;color:var(--gold);background:none;border:none;cursor:pointer;} /* ══════ PAGES ══════ */ .pg{display:none;} .pg.show{display:block;} .padtop{padding-top:56px;} /* ══════ HERO ══════ */ .hero{position:relative;height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden;} .hbg{position:absolute;inset:0;background-size:cover;background-position:center;animation:zoom 22s ease-in-out infinite alternate;filter:brightness(.4);} @keyframes zoom{from{transform:scale(1)}to{transform:scale(1.07)}} .hov{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,10,10,.92) 0%,transparent 65%);} .hcnt{position:relative;z-index:2;text-align:center;animation:fu 1.2s ease both;} @keyframes fu{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}} .heye{font-size:12px;letter-spacing:6px;text-transform:uppercase;color:var(--gold);margin-bottom:16px;} .httl{font-family:'Playfair Display',serif;font-size:clamp(44px,8vw,100px);font-weight:400;line-height:1.0;margin-bottom:20px;} .httl em{font-style:italic;color:var(--gold2);} .hsub{font-size:16px;font-weight:300;color:rgba(245,240,232,.65);letter-spacing:1px;} .ww{position:absolute;bottom:24px;right:28px;z-index:10;display:flex;flex-direction:column;gap:7px;align-items:flex-end;} .wlbl{font-size:9px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);} .wb{width:40px;height:40px;border:2px solid rgba(201,168,76,.35);border-radius:3px;cursor:pointer;background-size:cover;background-position:center;transition:border-color .3s,transform .2s;} .wb:hover{border-color:var(--gold);transform:scale(1.1);} .wb.cur{border-color:var(--gold);box-shadow:0 0 8px rgba(201,168,76,.4);} /* ══════ 3 GALLERY CARDS (home) ══════ */ .g3{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;} .gc{position:relative;aspect-ratio:4/5;overflow:hidden;cursor:pointer;} .gcbg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .7s,filter .5s;filter:brightness(.5);} .gc:hover .gcbg{transform:scale(1.07);filter:brightness(.32);} .gcinfo{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:32px;background:linear-gradient(to top,rgba(0,0,0,.88) 0%,transparent 55%);} .gccat{font-size:10px;letter-spacing:5px;text-transform:uppercase;color:var(--gold);margin-bottom:7px;} .gcttl{font-family:'Playfair Display',serif;font-size:30px;font-weight:400;line-height:1.1;margin-bottom:10px;} .gccnt{font-size:12px;color:rgba(245,240,232,.55);} /* ══════ ABOUT ══════ */ .about{display:grid;grid-template-columns:1fr 1fr;min-height:65vh;background:var(--cream);color:#1a1a1a;} .aimg{overflow:hidden;background-size:cover;background-position:center;} .acnt{padding:60px;display:flex;flex-direction:column;justify-content:center;} .slbl{font-size:10px;letter-spacing:5px;text-transform:uppercase;color:var(--gold);margin-bottom:16px;display:flex;align-items:center;gap:12px;} .slbl::before{content:'';width:30px;height:1px;background:var(--gold);} .attl{font-family:'Playfair Display',serif;font-size:40px;font-weight:400;line-height:1.15;color:var(--warm);margin-bottom:20px;} .ap{font-size:15px;font-weight:300;line-height:1.9;color:#444;margin-bottom:12px;} .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px;padding-top:28px;border-top:1px solid rgba(0,0,0,.1);} .sn{font-family:'Playfair Display',serif;font-size:36px;color:var(--gold);display:block;} .sl{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--gray);} /* ══════ CONTACT ══════ */ .ctsec{padding:60px 46px;background:var(--warm);display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;} .ctttl{font-family:'Playfair Display',serif;font-size:34px;font-weight:400;margin-bottom:12px;} .ctsub{font-size:14px;font-weight:300;color:rgba(245,240,232,.68);line-height:1.7;} .ctf{display:flex;flex-direction:column;gap:11px;} .ctf input,.ctf textarea{background:rgba(255,255,255,.07);border:1px solid rgba(201,168,76,.3);color:var(--cream);padding:11px 14px;font-family:'Cormorant Garamond',serif;font-size:15px;border-radius:2px;outline:none;transition:border-color .3s;resize:none;} .ctf input:focus,.ctf textarea:focus{border-color:var(--gold);} .btng{background:transparent;border:1px solid var(--gold);color:var(--gold);padding:11px 24px;font-family:'Cormorant Garamond',serif;font-size:13px;letter-spacing:3px;text-transform:uppercase;cursor:pointer;transition:all .3s;align-self:flex-start;} .btng:hover{background:var(--gold);color:#111;} footer{padding:22px 46px;background:#060606;display:flex;justify-content:space-between;align-items:center;border-top:1px solid rgba(201,168,76,.1);} .flogo{font-family:'IM Fell English SC',serif;color:var(--gold);font-size:15px;letter-spacing:3px;} .fcopy{font-size:11px;color:rgba(245,240,232,.3);letter-spacing:1px;} /* ══════ GALLERY PAGES ══════ */ .pghero{height:42vh;display:flex;align-items:flex-end;padding:44px;position:relative;overflow:hidden;background-size:cover;background-position:center;} .pghero::before{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(10,10,10,1) 0%,rgba(10,10,10,.18) 100%);} .phcnt{position:relative;z-index:2;} .pheye{font-size:11px;letter-spacing:5px;text-transform:uppercase;color:var(--gold);margin-bottom:9px;} .phttl{font-family:'Playfair Display',serif;font-size:clamp(38px,5.5vw,72px);font-weight:400;line-height:1.0;} .phttl em{font-style:italic;color:var(--gold2);} .fbar{padding:16px 44px;display:flex;gap:9px;align-items:center;background:rgba(255,255,255,.02);border-bottom:1px solid rgba(201,168,76,.1);flex-wrap:wrap;} .flbl{font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-right:4px;} .fb{padding:6px 15px;background:transparent;border:1px solid rgba(245,240,232,.18);color:rgba(245,240,232,.48);font-family:'Cormorant Garamond',serif;font-size:12px;letter-spacing:2px;text-transform:uppercase;cursor:pointer;border-radius:2px;transition:all .3s;} .fb:hover,.fb.cur{border-color:var(--gold);color:var(--gold);background:rgba(201,168,76,.07);} .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:2px;padding:2px;} /* ══════ PAINTING CARD ══════ */ .card{position:relative;background:#111;overflow:hidden;} .ciw{position:relative;aspect-ratio:4/5;overflow:hidden;background:#1a1a1a;} .cimg{width:100%;height:100%;object-fit:cover;transition:transform .7s,filter .5s;filter:brightness(.87);} .card:hover .cimg{transform:scale(1.06);filter:brightness(.7);} .nopic{width:100%;height:100%;min-height:260px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;color:#555;font-size:13px;background:#1a1a1a;cursor:pointer;} .nopic:hover{background:#222;} .bdg{position:absolute;top:12px;left:12px;padding:5px 10px;font-size:10px;letter-spacing:2px;text-transform:uppercase;border-radius:2px;font-weight:600;} .bav{background:rgba(0,180,80,.9);color:#fff;} .bsold{background:rgba(190,35,35,.9);color:#fff;} .bres{background:rgba(201,168,76,.9);color:#111;} .qvo{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s;} .card:hover .qvo{opacity:1;} .qvb{background:rgba(201,168,76,.92);color:#111;border:none;padding:9px 20px;font-family:'Cormorant Garamond',serif;font-size:12px;letter-spacing:2px;text-transform:uppercase;cursor:pointer;transform:translateY(8px);transition:transform .3s;} .card:hover .qvb{transform:translateY(0);} .ceo{display:none;position:absolute;top:8px;right:8px;flex-direction:column;gap:5px;} .admin-on .ceo{display:flex;} .ceb{padding:6px 10px;border:none;border-radius:3px;cursor:pointer;font-size:11px;font-weight:700;} .cee{background:var(--blue);color:#fff;} .ced{background:var(--red);color:#fff;} .cinfo{padding:17px 20px;background:#111;} .cmed{font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:5px;} .cname{font-family:'Playfair Display',serif;font-size:18px;font-weight:400;margin-bottom:4px;} .csz{font-size:12px;color:var(--gray);margin-bottom:11px;} .cbot{display:flex;justify-content:space-between;align-items:center;} .cprice{font-family:'Playfair Display',serif;font-size:21px;color:var(--gold2);} .cprice.x{text-decoration:line-through;color:var(--gray);font-size:16px;} .iqb{background:transparent;border:1px solid var(--gold);color:var(--gold);padding:6px 14px;font-family:'Cormorant Garamond',serif;font-size:12px;letter-spacing:2px;text-transform:uppercase;cursor:pointer;transition:all .3s;} .iqb:hover{background:var(--gold);color:#111;} .iqb:disabled{border-color:var(--gray);color:var(--gray);cursor:not-allowed;} .addcard{display:none;align-items:center;justify-content:center;flex-direction:column;gap:11px;cursor:pointer;aspect-ratio:4/5;min-height:280px;border:2px dashed rgba(201,168,76,.3);background:rgba(201,168,76,.04);transition:all .3s;} .admin-on .addcard{display:flex;} .addcard:hover{background:rgba(201,168,76,.1);border-color:var(--gold);} .addcard span{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);} /* ══════ ALL MODALS ══════ */ .ov{display:none;position:fixed;inset:0;background:rgba(0,0,0,.9);z-index:5000;align-items:center;justify-content:center;padding:12px;} .ov.show{display:flex;} .box{background:#12122a;border:1px solid rgba(201,168,76,.35);border-radius:6px;width:100%;max-width:500px;max-height:94vh;overflow-y:auto;padding:28px;position:relative;} .box-lg{max-width:560px;} .box-xl{max-width:840px;display:grid;grid-template-columns:1fr 1fr;} .bx{position:absolute;top:12px;right:14px;background:none;border:none;color:var(--cream);font-size:22px;cursor:pointer;} .bx:hover{color:var(--gold);} .mttl{font-family:'Playfair Display',serif;font-size:22px;color:var(--gold);margin-bottom:20px;} .mf{display:flex;flex-direction:column;gap:5px;margin-bottom:13px;} .mf label{font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);} .mf input,.mf select,.mf textarea{background:#0d0d1a;border:1px solid #2a2a4a;color:var(--cream);padding:10px 12px;font-family:'Cormorant Garamond',serif;font-size:15px;border-radius:3px;outline:none;transition:border-color .3s;resize:none;width:100%;} .mf input:focus,.mf select:focus,.mf textarea:focus{border-color:var(--gold);} .mf select option{background:#12122a;} .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px;} .stsw{display:flex;gap:8px;margin-bottom:14px;} .sto{flex:1;padding:9px 4px;border:2px solid #2a2a4a;border-radius:3px;cursor:pointer;text-align:center;font-size:11px;letter-spacing:1px;text-transform:uppercase;transition:all .3s;font-family:'Cormorant Garamond',serif;font-weight:600;} .sto-av{border-color:var(--green);background:rgba(39,174,96,.15);color:var(--green);} .sto-sold{border-color:var(--red);background:rgba(192,57,43,.15);color:var(--red);} .sto-res{border-color:var(--gold);background:rgba(201,168,76,.15);color:var(--gold);} .iarea{width:100%;height:180px;background:#0d0d1a;border:2px dashed rgba(201,168,76,.3);border-radius:4px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:9px;cursor:pointer;overflow:hidden;transition:border-color .3s;position:relative;margin-bottom:12px;} .iarea:hover{border-color:var(--gold);} .iarea img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;} .iarea .ilbl{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:7px;color:rgba(201,168,76,.6);font-size:12px;letter-spacing:1px;} .iarea.hasimg .ilbl{background:rgba(0,0,0,.55);padding:7px 14px;border-radius:3px;} .mbtns{display:flex;gap:10px;margin-top:6px;} .msave{flex:1;padding:11px;background:var(--gold);color:#111;border:none;border-radius:3px;font-family:'Cormorant Garamond',serif;font-size:14px;letter-spacing:2px;text-transform:uppercase;cursor:pointer;font-weight:700;transition:all .3s;} .msave:hover{background:var(--gold2);} .mcancel{padding:11px 18px;background:#2a2a4a;color:var(--cream);border:none;border-radius:3px;font-family:'Cormorant Garamond',serif;font-size:14px;cursor:pointer;transition:all .3s;} .mcancel:hover{background:#3a3a5a;} .qvm .box-xl img{width:100%;min-height:320px;object-fit:cover;} .qvinfo{padding:36px;display:flex;flex-direction:column;justify-content:center;} .qvmed{font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:10px;} .qvttl{font-family:'Playfair Display',serif;font-size:24px;font-weight:400;margin-bottom:5px;} .qvsz{font-size:13px;color:var(--gray);margin-bottom:13px;} .qvpr{font-family:'Playfair Display',serif;font-size:28px;color:var(--gold2);margin-bottom:16px;} .qvds{font-size:14px;font-weight:300;line-height:1.8;color:rgba(245,240,232,.68);margin-bottom:22px;} .qviq{width:100%;padding:11px;background:transparent;border:1px solid var(--gold);color:var(--gold);font-family:'Cormorant Garamond',serif;font-size:13px;letter-spacing:3px;text-transform:uppercase;cursor:pointer;transition:all .3s;} .qviq:hover{background:var(--gold);color:#111;} /* ══════ PASSWORD SCREEN — FIXED ══════ */<br />
#pwScreen{<br />
position:fixed;inset:0;background:#0a0a0a;<br />
z-index:99999;<br />
/* FIX: use visibility+opacity trick so display toggle is reliable */<br />
display:flex;<br />
align-items:center;justify-content:center;<br />
opacity:0;pointer-events:none;<br />
transition:opacity .25s;<br />
}<br />
#pwScreen.show{opacity:1;pointer-events:all;}<br />
.pwbox{background:#12122a;border:2px solid var(--gold);border-radius:10px;padding:44px;width:90%;max-width:400px;text-align:center;} .pwico{font-size:48px;margin-bottom:16px;} .pwttl{font-family:'IM Fell English SC',serif;color:var(--gold);font-size:26px;letter-spacing:3px;margin-bottom:8px;} .pwsub{font-size:14px;color:rgba(245,240,232,.45);margin-bottom:30px;letter-spacing:1px;} #pwIn{width:100%;padding:16px;background:#0d0d1a;border:2px solid rgba(201,168,76,.35);color:var(--cream);font-family:'Cormorant Garamond',serif;font-size:20px;border-radius:5px;outline:none;text-align:center;letter-spacing:6px;margin-bottom:14px;transition:border-color .3s;} #pwIn:focus{border-color:var(--gold);} #pwErr{color:#e74c3c;font-size:13px;margin-bottom:14px;display:none;letter-spacing:1px;} #pwBtn{width:100%;padding:14px;background:var(--gold);color:#111;border:none;border-radius:5px;font-family:'Cormorant Garamond',serif;font-size:16px;font-weight:700;letter-spacing:3px;text-transform:uppercase;cursor:pointer;transition:all .3s;margin-bottom:12px;} #pwBtn:hover{background:var(--gold2);} #pwClose{width:100%;padding:11px;background:#1e1e3a;color:rgba(245,240,232,.5);border:1px solid #333;border-radius:5px;font-family:'Cormorant Garamond',serif;font-size:14px;cursor:pointer;transition:all .3s;} #pwClose:hover{background:#2a2a4a;color:var(--cream);} .pwdefault{margin-top:18px;font-size:11px;color:rgba(245,240,232,.25);letter-spacing:1px;} /* ══════ TOAST ══════ */ .toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--gold);color:#111;padding:10px 24px;border-radius:4px;font-size:13px;font-weight:700;z-index:99998;opacity:0;transition:opacity .35s;pointer-events:none;letter-spacing:1px;white-space:nowrap;} .toast.show{opacity:1;} /* Admin entry button — FIX: higher z-index */ #adminBtn{position:fixed;bottom:22px;right:22px;z-index:10000;background:var(--gold);color:#111;border:none;padding:11px 20px;font-family:'Cormorant Garamond',serif;font-size:13px;letter-spacing:2px;text-transform:uppercase;cursor:pointer;border-radius:4px;font-weight:700;box-shadow:0 4px 18px rgba(201,168,76,.3);transition:all .3s;} #adminBtn:hover{background:var(--gold2);transform:translateY(-2px);} @media(max-width:820px){ .nlinks{display:none;} .hb{display:flex;} nav{padding:14px 18px;} .g3{grid-template-columns:1fr;} .about{grid-template-columns:1fr;} .aimg{height:55vw;} .acnt{padding:34px 18px;} .ctsec{grid-template-columns:1fr;padding:44px 18px;} footer{flex-direction:column;gap:8px;padding:18px;text-align:center;} .pghero{padding:32px 18px;height:34vh;} .fbar{padding:12px 18px;} .grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));} .box-xl{grid-template-columns:1fr;} .qvm .box-xl img{min-height:220px;} .qvinfo{padding:22px;} } @media(max-width:480px){ .grid{grid-template-columns:1fr;} } </style>
<p> </head> <body></p>
<p><!-- WELCOME ANIMATION --></p>
<style>
#welcome{<br />
position:fixed;inset:0;z-index:199999;<br />
background:#060606;<br />
display:flex;flex-direction:column;align-items:center;justify-content:center;<br />
pointer-events:all;<br />
transition:opacity 1s ease, transform 1s ease;<br />
overflow:hidden;<br />
}<br />
#wc-bg{<br />
position:absolute;inset:0;<br />
background-size:cover;background-position:center;<br />
opacity:0;<br />
transition:opacity 1.8s ease;<br />
animation:wc-zoom 22s ease-in-out infinite alternate;<br />
}<br />
#wc-bg.show{opacity:1;}<br />
@keyframes wc-zoom{from{transform:scale(1)}to{transform:scale(1.07)}}<br />
#wc-overlay{<br />
position:absolute;inset:0;<br />
background:linear-gradient(135deg,rgba(6,6,6,.82) 0%,rgba(10,6,2,.75) 50%,rgba(6,6,6,.82) 100%);<br />
}<br />
#welcome.hide{<br />
opacity:0;transform:scale(1.04);pointer-events:none;<br />
}<br />
#wc-canvas{position:absolute;inset:0;width:100%;height:100%;}<br />
.wc-inner{position:relative;z-index:2;text-align:center;display:flex;flex-direction:column;align-items:center;gap:0;}<br />
.wc-line{width:1px;background:linear-gradient(to bottom,transparent,rgba(201,168,76,.6),transparent);<br />
height:0;margin-bottom:28px;<br />
animation:wc-line-grow 1.2s ease 0.2s forwards;}<br />
@keyframes wc-line-grow{to{height:80px;}}<br />
.wc-eye{<br />
font-size:11px;letter-spacing:7px;text-transform:uppercase;color:var(--gold);<br />
opacity:0;transform:translateY(10px);<br />
animation:wc-fade-up .8s ease 0.9s forwards;<br />
margin-bottom:22px;<br />
}<br />
.wc-name{<br />
font-family:'Playfair Display',serif;<br />
font-size:clamp(36px,7vw,88px);<br />
font-weight:400;line-height:1.05;<br />
color:var(--cream);<br />
opacity:0;<br />
animation:wc-fade-up .9s ease 1.2s forwards;<br />
margin-bottom:6px;<br />
}<br />
.wc-name em{font-style:italic;color:var(--gold2);}<br />
.wc-sub{<br />
font-size:13px;letter-spacing:5px;text-transform:uppercase;<br />
color:rgba(245,240,232,.4);<br />
opacity:0;<br />
animation:wc-fade-up .8s ease 1.6s forwards;<br />
margin-top:20px;<br />
}<br />
.wc-bar{<br />
width:0;height:1px;background:var(--gold);<br />
margin-top:32px;<br />
animation:wc-bar-grow 1s ease 2s forwards;<br />
}<br />
@keyframes wc-bar-grow{to{width:120px;}}<br />
.wc-enter{<br />
margin-top:36px;<br />
opacity:0;<br />
animation:wc-fade-up .7s ease 2.6s forwards;<br />
background:transparent;<br />
border:1px solid rgba(201,168,76,.5);<br />
color:var(--gold);<br />
padding:12px 36px;<br />
font-family:'Cormorant Garamond',serif;<br />
font-size:13px;letter-spacing:4px;text-transform:uppercase;<br />
cursor:none;<br />
border-radius:2px;<br />
transition:background .3s,border-color .3s,color .3s;<br />
}<br />
.wc-enter:hover{background:var(--gold);color:#111;border-color:var(--gold);}<br />
@keyframes wc-fade-up{<br />
to{opacity:1;transform:translateY(0);}<br />
from{opacity:0;transform:translateY(14px);}<br />
}<br />
</style>
<div id="welcome">
<div id="wc-bg"></div>
<div id="wc-overlay"></div>
<p> <canvas id="wc-canvas"></canvas></p>
<div class="wc-inner">
<div class="wc-line"></div>
<div class="wc-eye" id="wc-eye">Original Art Gallery</div>
<div class="wc-name"><span id="wc-name1">Your</span><br /><em id="wc-name2">Art Gallery</em></div>
<div class="wc-sub" id="wc-sub">Oil · Watercolor · Color Pen</div>
<div class="wc-bar"></div>
<p> <button class="wc-enter" id="wc-enter" onclick="closeWelcome()">Enter Gallery</button>
</div>
</div>
<p><script><br />
(function(){<br />
// Particle canvas for welcome screen<br />
var wcanvas = document.getElementById('wc-canvas');<br />
var wctx = wcanvas.getContext('2d');<br />
var wW, wH, wParticles = [], wActive = true;</p>
<p> function wResize(){<br />
wW = wcanvas.width = window.innerWidth;<br />
wH = wcanvas.height = window.innerHeight;<br />
}<br />
wResize();<br />
window.addEventListener('resize', wResize);</p>
<p> // Spawn floating gold dust particles<br />
for(var i=0;i<55;i++){
wParticles.push({
x: Math.random()*window.innerWidth,
y: Math.random()*window.innerHeight,
r: .4 + Math.random()*1.8,
vx: (Math.random()-.5)*.25,
vy: -.1 - Math.random()*.3,
life: Math.random(),
maxLife: .4 + Math.random()*.6,
type: Math.random()<.3 ? 'd' : 'c',
rot: Math.random()*6.28,
spin: (Math.random()-.5)*.015
});
}
function wDiamond(x,y,r,rot){
wctx.save(); wctx.translate(x,y); wctx.rotate(rot);
wctx.beginPath();
wctx.moveTo(0,-r*1.6); wctx.lineTo(r*.8,0);
wctx.lineTo(0,r*1.6); wctx.lineTo(-r*.8,0);
wctx.closePath(); wctx.fill(); wctx.restore();
}
function wFrame(){
if(!wActive) return;
requestAnimationFrame(wFrame);
wctx.clearRect(0,0,wW,wH);
for(var i=0;i<wParticles.length;i++){
var p=wParticles[i];
p.x+=p.vx; p.y+=p.vy; p.rot+=p.spin; p.life+=.004;
if(p.y < -10 || p.life > p.maxLife){<br />
p.x=Math.random()*wW; p.y=wH+10; p.life=0;<br />
}<br />
var a = Math.sin((p.life/p.maxLife)*Math.PI)*0.55;<br />
wctx.globalAlpha = a;<br />
wctx.fillStyle = p.life > p.maxLife*.5 ? '#e8d48b' : '#c9a84c';<br />
if(p.type==='d') wDiamond(p.x,p.y,p.r,p.rot);<br />
else { wctx.beginPath(); wctx.arc(p.x,p.y,p.r,0,6.28); wctx.fill(); }<br />
}<br />
wctx.globalAlpha=1;<br />
}<br />
wFrame();</p>
<p> // Update welcome text and background from data<br />
window._updateWelcomeText = function(heroData){<br />
if(!heroData) return;<br />
var nm = heroData.name||'Your Name Art';<br />
var parts = nm.split(' ');<br />
var first = parts.slice(0,-1).join(' ')||parts[0];<br />
var n1 = document.getElementById('wc-name1');<br />
var n2 = document.getElementById('wc-name2');<br />
var ey = document.getElementById('wc-eye');<br />
var sb = document.getElementById('wc-sub');<br />
if(n1) n1.textContent = first;<br />
if(n2) n2.textContent = heroData.gal || parts.slice(-1)[0]||'';<br />
if(ey) ey.textContent = heroData.eye || 'Original Art Gallery';<br />
if(sb) sb.textContent = heroData.sub || 'Oil · Watercolor · Color Pen';<br />
// Apply background image<br />
var bg = document.getElementById('wc-bg');<br />
if(bg && heroData.welcomeBg){<br />
bg.style.backgroundImage = "url('"+heroData.welcomeBg+"')";<br />
setTimeout(function(){ bg.classList.add('show'); }, 100);<br />
}<br />
};</p>
<p> window.closeWelcome = function(){<br />
var wel = document.getElementById('welcome');<br />
wel.classList.add('hide');<br />
wActive = false;<br />
setTimeout(function(){ wel.style.display='none'; }, 1100);<br />
};</p>
<p> // Auto-dismiss after 6s if user doesn't click<br />
setTimeout(function(){<br />
var wel = document.getElementById('welcome');<br />
if(wel && !wel.classList.contains('hide')) closeWelcome();<br />
}, 7000);<br />
})();<br />
</script></p>
<p><!-- PASSWORD SCREEN --></p>
<div id="pwScreen">
<div class="pwbox">
<div class="pwico">🎨</div>
<div class="pwttl">Admin Panel</div>
<div class="pwsub">Enter your password to edit the gallery</div>
<p> <input type="password" id="pwIn" placeholder="••••••••" maxlength="30"></p>
<div id="pwErr">❌ Wrong password — try again</div>
<p> <button id="pwBtn">🔓 Enter</button><br />
<button id="pwClose">← Back to Gallery</button></p>
<div class="pwdefault">Default password: 271187</div>
</p></div>
</div>
<p><!-- ADMIN BAR --></p>
<div id="AP">
<span class="ap-lbl">🎨 ADMIN</span><br />
<button class="ab ab-blue" onclick="openAboutEdit()">✏️ About Me</button><br />
<button class="ab ab-blue" onclick="openHeroEdit()">🖼️ Hero Page</button><br />
<button class="ab ab-gold" onclick="addPainting('oil')">＋ Oil</button><br />
<button class="ab ab-gold" onclick="addPainting('water')">＋ Watercolor</button><br />
<button class="ab ab-gold" onclick="addPainting('pen')">＋ Color Pen</button><br />
<button class="ab ab-grn" onclick="saveData()">💾 Save</button><br />
<button class="ab ab-red" onclick="exitAdmin()">✕ Exit</button><br />
<span class="ap-tip">Click ✏️ or 🗑️ on any painting to edit or delete</span>
</div>
<p><!-- NAVIGATION --></p>
<nav id="nav" class="top">
<button class="logo" id="sitelogo" onclick="goPage('home')">Your Name Art</button></p>
<ul class="nlinks">
<li><a id="n0" class="cur" onclick="goPage('home')">Home</a></li>
<li><a id="n1" onclick="goPage('oil')">Oil Art</a></li>
<li><a id="n2" onclick="goPage('water')">Watercolors</a></li>
<li><a id="n3" onclick="goPage('pen')">Color Pens</a></li>
<li><a id="n4" onclick="goSec('about')">About</a></li>
<li><a id="n5" onclick="goSec('contact')">Contact</a></li>
</ul>
<div style="display:flex;align-items:center;gap:10px;">
<div class="lsw">
<button class="lb cur" id="btnEN" onclick="setLang('en')">🇬🇧 EN</button><br />
<button class="lb" id="btnIT" onclick="setLang('it')">🇮🇹 IT</button>
</div>
<div class="hb" onclick="document.getElementById('mn').classList.toggle('show')">
<span></span><span></span><span></span>
</div>
</p></div>
</nav>
<div class="mnav" id="mn">
<button class="mx" onclick="document.getElementById('mn').classList.remove('show')">✕</button><br />
<a onclick="goPage('home');document.getElementById('mn').classList.remove('show')" id="mn0">Home</a><br />
<a onclick="goPage('oil');document.getElementById('mn').classList.remove('show')" id="mn1">Oil Art</a><br />
<a onclick="goPage('water');document.getElementById('mn').classList.remove('show')" id="mn2">Watercolors</a><br />
<a onclick="goPage('pen');document.getElementById('mn').classList.remove('show')" id="mn3">Color Pens</a><br />
<a onclick="goSec('about');document.getElementById('mn').classList.remove('show')" id="mn4">About</a><br />
<a onclick="goSec('contact');document.getElementById('mn').classList.remove('show')" id="mn5">Contact</a>
</div>
<p><!-- HOME PAGE --></p>
<div class="pg show padtop" id="pg-home">
<section class="hero">
<div class="hbg" id="heroBg"></div>
<div class="hov"></div>
<div class="hcnt">
<div class="heye" id="heye">Original Paintings · Handcrafted Art</div>
<h1 class="httl"><span id="hname">Your</span><br /><em id="hgal">Art Gallery</em></h1>
<p class="hsub" id="hsub">Oil · Watercolor · Color Pen Artworks</p>
</p></div>
<div class="ww">
<div class="wlbl" id="wlbl">Change Wall</div>
<div id="wbtns"></div>
</p></div>
</section>
<section class="g3">
<div class="gc" onclick="goPage('oil')">
<div class="gcbg" id="gcbg1" style="background-image:url('https://images.unsplash.com/photo-1547826039-bfc35e0f1ea8?w=800')"></div>
<div class="gcinfo">
<div class="gccat" id="gc1c">Collection I</div>
<h2 class="gcttl" id="gc1t">Oil<br />Paintings</h2>
<div class="gccnt" id="gc1n">12 Original Works</div>
</div></div>
<div class="gc" onclick="goPage('water')">
<div class="gcbg" id="gcbg2" style="background-image:url('https://images.unsplash.com/photo-1548438294-1ad5d5f4f063?w=800')"></div>
<div class="gcinfo">
<div class="gccat" id="gc2c">Collection II</div>
<h2 class="gcttl" id="gc2t">Water<br />Colors</h2>
<div class="gccnt" id="gc2n">8 Original Works</div>
</div></div>
<div class="gc" onclick="goPage('pen')">
<div class="gcbg" id="gcbg3" style="background-image:url('https://images.unsplash.com/photo-1513364776144-60967b0f800f?w=800')"></div>
<div class="gcinfo">
<div class="gccat" id="gc3c">Collection III</div>
<h2 class="gcttl" id="gc3t">Color<br />Pen Art</h2>
<div class="gccnt" id="gc3n">15 Original Works</div>
</div></div>
</section>
<section class="about" id="about">
<div class="aimg" id="aimg"></div>
<div class="acnt">
<div class="slbl" id="ablbl">About the Artist</div>
<h2 class="attl"><span id="hiim">Hello, I'm</span><br /><span id="aname">Your Name</span></h2>
<p class="ap" id="ab1">Write your story here. Click ✏️ About Me in the admin bar to edit this.</p>
<p class="ap" id="ab2">Add your techniques, favourite subjects, and artistic journey here.</p>
<div class="stats">
<div><span class="sn" id="sn1">10+</span><span class="sl" id="sl1">Years</span></div>
<div><span class="sn" id="sn2">200+</span><span class="sl" id="sl2">Sold</span></div>
<div><span class="sn" id="sn3">15</span><span class="sl" id="sl3">Shows</span></div>
</p></div>
</p></div>
</section>
<section class="ctsec" id="contact">
<div>
<div class="slbl" style="color:var(--gold2)" id="ctlbl">Get in Touch</div>
<h2 class="ctttl" id="ctttl">Commission<br />a Painting</h2>
<p class="ctsub" id="ctsub">Interested in an original piece? I would love to hear from you.</p>
</p></div>
<form class="ctf" onsubmit="sendForm(event)">
<input type="text" id="fn" placeholder="Your Name"><br />
<input type="email" id="fe" placeholder="Your Email"><br />
<input type="text" id="fs" placeholder="Subject"><br />
<textarea rows="4" id="fm" placeholder="Tell me about the painting..."></textarea><br />
<button class="btng" id="sndbtn" type="submit">Send Message</button><br />
</form>
</section>
<footer>
<div class="flogo" id="flogo">Your Name Art</div>
<div class="fcopy" id="fcopy">© 2025 Your Name. All artworks are original.</div>
</footer>
</div>
<p><!-- OIL PAGE --></p>
<div class="pg padtop" id="pg-oil">
<div class="pghero" id="oilHero" style="background-image:url('https://images.unsplash.com/photo-1547826039-bfc35e0f1ea8?w=1600')">
<div class="phcnt">
<div class="pheye" id="oeye">Collection I · Original Works</div>
<h1 class="phttl" id="ottl">Oil<br /><em>Paintings</em></h1>
</div></div>
<div class="fbar"><span class="flbl" id="ofl">Filter:</span><br />
<button class="fb cur" onclick="filt('oil','all',this)" id="ofa">All</button><br />
<button class="fb" onclick="filt('oil','available',this)" id="ofav">Available</button><br />
<button class="fb" onclick="filt('oil','sold',this)" id="ofs">Sold</button><br />
<button class="fb" onclick="filt('oil','reserved',this)" id="ofr">Reserved</button>
</div>
<div class="grid" id="grid-oil"></div>
</div>
<p><!-- WATER PAGE --></p>
<div class="pg padtop" id="pg-water">
<div class="pghero" id="waterHero" style="background-image:url('https://images.unsplash.com/photo-1548438294-1ad5d5f4f063?w=1600')">
<div class="phcnt">
<div class="pheye" id="weye">Collection II · Original Works</div>
<h1 class="phttl" id="wttl">Water<br /><em>Colors</em></h1>
</div></div>
<div class="fbar"><span class="flbl" id="wfl">Filter:</span><br />
<button class="fb cur" onclick="filt('water','all',this)" id="wfa">All</button><br />
<button class="fb" onclick="filt('water','available',this)" id="wfav">Available</button><br />
<button class="fb" onclick="filt('water','sold',this)" id="wfs">Sold</button><br />
<button class="fb" onclick="filt('water','reserved',this)" id="wfr">Reserved</button>
</div>
<div class="grid" id="grid-water"></div>
</div>
<p><!-- PEN PAGE --></p>
<div class="pg padtop" id="pg-pen">
<div class="pghero" id="penHero" style="background-image:url('https://images.unsplash.com/photo-1513364776144-60967b0f800f?w=1600')">
<div class="phcnt">
<div class="pheye" id="peye">Collection III · Original Works</div>
<h1 class="phttl" id="pttl">Color<br /><em>Pen Art</em></h1>
</div></div>
<div class="fbar"><span class="flbl" id="pfl">Filter:</span><br />
<button class="fb cur" onclick="filt('pen','all',this)" id="pfa">All</button><br />
<button class="fb" onclick="filt('pen','available',this)" id="pfav">Available</button><br />
<button class="fb" onclick="filt('pen','sold',this)" id="pfs">Sold</button><br />
<button class="fb" onclick="filt('pen','reserved',this)" id="pfr">Reserved</button>
</div>
<div class="grid" id="grid-pen"></div>
</div>
<p><!-- QUICK VIEW MODAL --></p>
<div class="ov qvm" id="qvOv" onclick="if(event.target===this)closeQV()">
<div class="box box-xl">
<button class="bx" onclick="closeQV()">✕</button><br />
<img id="qvi" src="" alt="" style="width:100%;min-height:300px;object-fit:cover;"></p>
<div class="qvinfo">
<div class="qvmed" id="qvmed"></div>
<h2 class="qvttl" id="qvttl"></h2>
<div class="qvsz" id="qvsz"></div>
<div class="qvpr" id="qvpr"></div>
<p class="qvds" id="qvds">
<p> <button class="qviq" id="qviq">Inquire</button>
</div>
</p></div>
</div>
<p><!-- EDIT PAINTING MODAL --></p>
<div class="ov" id="epOv" onclick="if(event.target===this)closeEP()">
<div class="box box-lg">
<button class="bx" onclick="closeEP()">✕</button></p>
<div class="mttl" id="epTtl">Add Painting</div>
<div class="iarea" id="iarea" onclick="document.getElementById('imgFile').click()">
<input type="file" id="imgFile" accept="image/*" style="display:none" onchange="onImgFile(event)"><br />
<img id="iaimg" src="" alt="" style="display:none"></p>
<div class="ilbl" id="ilbl">
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="m21 15-5-5L5 21"/></svg><br />
<span>📸 Click to Upload Photo</span><br />
<span style="font-size:11px;opacity:.5">or paste URL below</span>
</div>
</p></div>
<div class="mf"><label>Image URL (paste link)</label><input type="text" id="eurl" placeholder="https://..." oninput="onUrlInput(this.value)"></div>
<div class="row2">
<div class="mf"><label>Title (English)</label><input type="text" id="ename" placeholder="e.g. Sunset Coast"></div>
<div class="mf"><label>Title (Italian)</label><input type="text" id="enameit" placeholder="e.g. Costa al Tramonto"></div>
</p></div>
<div class="row2">
<div class="mf"><label>Medium</label><input type="text" id="emed" placeholder="e.g. Oil on Canvas"></div>
<div class="mf"><label>Size (e.g. 60 × 80 cm)</label><input type="text" id="esz" placeholder="60 × 80 cm"></div>
</p></div>
<div class="row2">
<div class="mf"><label>Year</label><input type="text" id="eyr" placeholder="2024"></div>
<div class="mf"><label>Price</label><input type="text" id="epr" placeholder="$450"></div>
</p></div>
<div class="mf"><label>Description (English)</label><textarea id="eds" rows="2" placeholder="Story behind this painting..."></textarea></div>
<div class="mf"><label>Description (Italian)</label><textarea id="edsit" rows="2" placeholder="Storia di questo dipinto..."></textarea></div>
<div class="mf"><label>Status</label></div>
<div class="stsw">
<div class="sto" id="st-available" onclick="setSt('available')">✅ Available</div>
<div class="sto" id="st-sold" onclick="setSt('sold')">❌ Sold</div>
<div class="sto" id="st-reserved" onclick="setSt('reserved')">🔒 Reserved</div>
</p></div>
<div class="mbtns">
<button class="mcancel" onclick="closeEP()">Cancel</button><br />
<button class="msave" onclick="savePainting()">💾 Save Painting</button>
</div>
</p></div>
</div>
<p><!-- ABOUT EDIT MODAL --></p>
<div class="ov" id="aeOv" onclick="if(event.target===this)closeAE()">
<div class="box box-lg">
<button class="bx" onclick="closeAE()">✕</button></p>
<div class="mttl">✏️ Edit About Me</div>
<div class="mf"><label>Singh JASWANT</label><input type="text" id="aen" placeholder="e.g. Maria Rossi"></div>
<div class="mf"><label>Your Photo (URL or upload)</label><input type="text" id="aeph" placeholder="https://..."></div>
<div class="iarea" id="apharea" onclick="document.getElementById('aphFile').click()" style="height:140px;margin-bottom:12px">
<input type="file" id="aphFile" accept="image/*" style="display:none" onchange="onAphFile(event)"><br />
<img id="aphimg" src="" alt="" style="display:none"></p>
<div class="ilbl"><span>📸 Upload Your Photo</span></div>
</p></div>
<div class="mf"><label>About Text (English)</label><textarea id="aet1" rows="3" placeholder="Write about yourself..."></textarea></div>
<div class="mf"><label>More Text (English)</label><textarea id="aet2" rows="3" placeholder="Your style, inspiration..."></textarea></div>
<div class="mf"><label>Testo Bio (Italiano)</label><textarea id="aet1it" rows="3" placeholder="Scrivi di te..."></textarea></div>
<div class="row2">
<div class="mf"><label>Years Painting</label><input type="text" id="aes1" placeholder="10+"></div>
<div class="mf"><label>Paintings Sold</label><input type="text" id="aes2" placeholder="200+"></div>
</p></div>
<div class="mf"><label>Exhibitions</label><input type="text" id="aes3" placeholder="15"></div>
<div class="mbtns">
<button class="mcancel" onclick="closeAE()">Cancel</button><br />
<button class="msave" onclick="saveAbout()">💾 Save</button>
</div>
</p></div>
</div>
<p><!-- HERO EDIT MODAL --></p>
<div class="ov" id="heOv" onclick="if(event.target===this)closeHE()">
<div class="box box-lg">
<button class="bx" onclick="closeHE()">✕</button></p>
<div class="mttl">🖼️ Edit Home Page</div>
<div class="mf"><label>Gallery Name</label><input type="text" id="hen" placeholder="Your Name Art"></div>
<div class="mf"><label>Subtitle under name</label><input type="text" id="heg" placeholder="Art Gallery"></div>
<div class="mf"><label>Top tagline</label><input type="text" id="hee" placeholder="Original Paintings · Handcrafted Art"></div>
<div class="mf"><label>Description line</label><input type="text" id="hes" placeholder="Oil · Watercolor · Color Pen"></div>
<div class="mf"><label>Footer text</label><input type="text" id="hef" placeholder="© 2025 Your Name"></div>
<div class="mf"><label>Welcome Screen Background</label></div>
<div style="margin-bottom:16px;">
<div class="iarea" id="wcbgarea" onclick="document.getElementById('wcbgfile').click()" style="height:160px;margin-bottom:8px;">
<input type="file" id="wcbgfile" accept="image/*" style="display:none" onchange="onWcBgFile(event)"><br />
<img id="wcbgimg" src="" alt="" style="display:none"></p>
<div class="ilbl" id="wcbgilbl">
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="m21 15-5-5L5 21"/></svg><br />
<span>📸 Upload a painting as welcome background</span><br />
<span style="font-size:11px;opacity:.5">or paste URL below</span>
</div>
</p></div>
<div style="display:flex;gap:8px;align-items:center;">
<input type="text" id="hwcbg" placeholder="or paste image URL…" oninput="onWcBgUrl(this.value)" style="flex:1;background:#0d0d1a;border:1px solid #2a2a4a;color:var(--cream);padding:9px 12px;font-family:'Cormorant Garamond',serif;font-size:14px;border-radius:3px;outline:none;"><br />
<button onclick="clearWcBg()" style="padding:9px 14px;background:#2a2a4a;border:none;color:var(--cream);border-radius:3px;font-family:'Cormorant Garamond',serif;font-size:12px;cursor:none;letter-spacing:1px;white-space:nowrap;">✕ Clear</button>
</div>
<div style="font-size:11px;color:rgba(201,168,76,.4);margin-top:6px;letter-spacing:1px;">A dark overlay is applied automatically — any painting looks great here</div>
</p></div>
<div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:16px;">
<div>
<div style="font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:6px;">Oil Page</div>
<div class="iarea" id="pharea0" onclick="document.getElementById('phfile0').click()" style="height:110px;margin-bottom:6px;">
<input type="file" id="phfile0" accept="image/*" style="display:none" onchange="onPageHeroFile(0,event)"><br />
<img id="phimg0" src="" alt="" style="display:none"></p>
<div class="ilbl"><span>📸 Upload</span></div>
</p></div>
<p> <input type="text" id="hph0" placeholder="or paste URL…" oninput="onPageHeroUrl(0,this.value)" style="background:#0d0d1a;border:1px solid #2a2a4a;color:var(--cream);padding:7px 10px;font-family:'Cormorant Garamond',serif;font-size:13px;border-radius:3px;outline:none;width:100%;">
</div>
<div>
<div style="font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:6px;">Watercolor Page</div>
<div class="iarea" id="pharea1" onclick="document.getElementById('phfile1').click()" style="height:110px;margin-bottom:6px;">
<input type="file" id="phfile1" accept="image/*" style="display:none" onchange="onPageHeroFile(1,event)"><br />
<img id="phimg1" src="" alt="" style="display:none"></p>
<div class="ilbl"><span>📸 Upload</span></div>
</p></div>
<p> <input type="text" id="hph1" placeholder="or paste URL…" oninput="onPageHeroUrl(1,this.value)" style="background:#0d0d1a;border:1px solid #2a2a4a;color:var(--cream);padding:7px 10px;font-family:'Cormorant Garamond',serif;font-size:13px;border-radius:3px;outline:none;width:100%;">
</div>
<div>
<div style="font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:6px;">Color Pen Page</div>
<div class="iarea" id="pharea2" onclick="document.getElementById('phfile2').click()" style="height:110px;margin-bottom:6px;">
<input type="file" id="phfile2" accept="image/*" style="display:none" onchange="onPageHeroFile(2,event)"><br />
<img id="phimg2" src="" alt="" style="display:none"></p>
<div class="ilbl"><span>📸 Upload</span></div>
</p></div>
<p> <input type="text" id="hph2" placeholder="or paste URL…" oninput="onPageHeroUrl(2,this.value)" style="background:#0d0d1a;border:1px solid #2a2a4a;color:var(--cream);padding:7px 10px;font-family:'Cormorant Garamond',serif;font-size:13px;border-radius:3px;outline:none;width:100%;">
</div>
</p></div>
<div class="mf"><label>Home Page — Collection Card Images</label></div>
<div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:16px;">
<div>
<div style="font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:6px;">Oil Card</div>
<div class="iarea" id="carea0" onclick="document.getElementById('cfile0').click()" style="height:110px;margin-bottom:6px;">
<input type="file" id="cfile0" accept="image/*" style="display:none" onchange="onCardFile(0,event)"><br />
<img id="cimg0" src="" alt="" style="display:none"></p>
<div class="ilbl"><span>📸 Upload</span></div>
</p></div>
<p> <input type="text" id="hc0" placeholder="or paste URL…" oninput="onCardUrl(0,this.value)" style="background:#0d0d1a;border:1px solid #2a2a4a;color:var(--cream);padding:7px 10px;font-family:'Cormorant Garamond',serif;font-size:13px;border-radius:3px;outline:none;width:100%;">
</div>
<div>
<div style="font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:6px;">Watercolor Card</div>
<div class="iarea" id="carea1" onclick="document.getElementById('cfile1').click()" style="height:110px;margin-bottom:6px;">
<input type="file" id="cfile1" accept="image/*" style="display:none" onchange="onCardFile(1,event)"><br />
<img id="cimg1" src="" alt="" style="display:none"></p>
<div class="ilbl"><span>📸 Upload</span></div>
</p></div>
<p> <input type="text" id="hc1" placeholder="or paste URL…" oninput="onCardUrl(1,this.value)" style="background:#0d0d1a;border:1px solid #2a2a4a;color:var(--cream);padding:7px 10px;font-family:'Cormorant Garamond',serif;font-size:13px;border-radius:3px;outline:none;width:100%;">
</div>
<div>
<div style="font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:6px;">Color Pen Card</div>
<div class="iarea" id="carea2" onclick="document.getElementById('cfile2').click()" style="height:110px;margin-bottom:6px;">
<input type="file" id="cfile2" accept="image/*" style="display:none" onchange="onCardFile(2,event)"><br />
<img id="cimg2" src="" alt="" style="display:none"></p>
<div class="ilbl"><span>📸 Upload</span></div>
</p></div>
<p> <input type="text" id="hc2" placeholder="or paste URL…" oninput="onCardUrl(2,this.value)" style="background:#0d0d1a;border:1px solid #2a2a4a;color:var(--cream);padding:7px 10px;font-family:'Cormorant Garamond',serif;font-size:13px;border-radius:3px;outline:none;width:100%;">
</div>
</p></div>
<div class="mf"><label>Wall Background Photos (Home Hero)</label></div>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px;">
<div>
<div style="font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:6px;">Wall 1</div>
<div class="iarea wall-iarea" id="warea0" onclick="document.getElementById('wfile0').click()" style="height:110px;margin-bottom:6px;">
<input type="file" id="wfile0" accept="image/*" style="display:none" onchange="onWallFile(0,event)"><br />
<img id="wimg0" src="" alt="" style="display:none"></p>
<div class="ilbl"><span>📸 Upload</span></div>
</p></div>
<p> <input type="text" id="hw0" placeholder="or paste URL…" oninput="onWallUrl(0,this.value)" style="background:#0d0d1a;border:1px solid #2a2a4a;color:var(--cream);padding:7px 10px;font-family:'Cormorant Garamond',serif;font-size:13px;border-radius:3px;outline:none;width:100%;">
</div>
<div>
<div style="font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:6px;">Wall 2</div>
<div class="iarea wall-iarea" id="warea1" onclick="document.getElementById('wfile1').click()" style="height:110px;margin-bottom:6px;">
<input type="file" id="wfile1" accept="image/*" style="display:none" onchange="onWallFile(1,event)"><br />
<img id="wimg1" src="" alt="" style="display:none"></p>
<div class="ilbl"><span>📸 Upload</span></div>
</p></div>
<p> <input type="text" id="hw1" placeholder="or paste URL…" oninput="onWallUrl(1,this.value)" style="background:#0d0d1a;border:1px solid #2a2a4a;color:var(--cream);padding:7px 10px;font-family:'Cormorant Garamond',serif;font-size:13px;border-radius:3px;outline:none;width:100%;">
</div>
<div>
<div style="font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:6px;">Wall 3</div>
<div class="iarea wall-iarea" id="warea2" onclick="document.getElementById('wfile2').click()" style="height:110px;margin-bottom:6px;">
<input type="file" id="wfile2" accept="image/*" style="display:none" onchange="onWallFile(2,event)"><br />
<img id="wimg2" src="" alt="" style="display:none"></p>
<div class="ilbl"><span>📸 Upload</span></div>
</p></div>
<p> <input type="text" id="hw2" placeholder="or paste URL…" oninput="onWallUrl(2,this.value)" style="background:#0d0d1a;border:1px solid #2a2a4a;color:var(--cream);padding:7px 10px;font-family:'Cormorant Garamond',serif;font-size:13px;border-radius:3px;outline:none;width:100%;">
</div>
<div>
<div style="font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:6px;">Wall 4</div>
<div class="iarea wall-iarea" id="warea3" onclick="document.getElementById('wfile3').click()" style="height:110px;margin-bottom:6px;">
<input type="file" id="wfile3" accept="image/*" style="display:none" onchange="onWallFile(3,event)"><br />
<img id="wimg3" src="" alt="" style="display:none"></p>
<div class="ilbl"><span>📸 Upload</span></div>
</p></div>
<p> <input type="text" id="hw3" placeholder="or paste URL…" oninput="onWallUrl(3,this.value)" style="background:#0d0d1a;border:1px solid #2a2a4a;color:var(--cream);padding:7px 10px;font-family:'Cormorant Garamond',serif;font-size:13px;border-radius:3px;outline:none;width:100%;">
</div>
</p></div>
<div>
<div style="font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:6px;">Wall 5</div>
<div class="iarea wall-iarea" id="warea4" onclick="document.getElementById('wfile4').click()" style="height:110px;margin-bottom:6px;">
<input type="file" id="wfile4" accept="image/*" style="display:none" onchange="onWallFile(4,event)"><br />
<img id="wimg4" src="" alt="" style="display:none"></p>
<div class="ilbl"><span>📸 Upload</span></div>
</p></div>
<p> <input type="text" id="hw4" placeholder="or paste URL…" oninput="onWallUrl(4,this.value)" style="background:#0d0d1a;border:1px solid #2a2a4a;color:var(--cream);padding:7px 10px;font-family:'Cormorant Garamond',serif;font-size:13px;border-radius:3px;outline:none;width:100%;margin-bottom:14px;">
</div>
<div style="font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:6px;">Wall 5</div>
<div class="iarea wall-iarea" id="warea4" onclick="document.getElementById('wfile4').click()" style="height:110px;margin-bottom:6px;">
<input type="file" id="wfile4" accept="image/*" style="display:none" onchange="onWallFile(4,event)"><br />
<img id="wimg4" src="" alt="" style="display:none"></p>
<div class="ilbl"><span>📸 Upload</span></div>
</p></div>
<p> <input type="text" id="hw4" placeholder="or paste URL…" oninput="onWallUrl(4,this.value)" style="background:#0d0d1a;border:1px solid #2a2a4a;color:var(--cream);padding:7px 10px;font-family:'Cormorant Garamond',serif;font-size:13px;border-radius:3px;outline:none;width:100%;margin-bottom:14px;">
</div>
<div class="mbtns">
<button class="mcancel" onclick="closeHE()">Cancel</button><br />
<button class="msave" onclick="saveHero()">💾 Save</button>
</div>
</p></div>
</div>
<p><!-- Admin button --><br />
<button id="adminBtn">🔑 Admin</button></p>
<p><!-- Toast --></p>
<div class="toast" id="toast"></div>
<p><script><br />
// ═══════════════════════════════<br />
// DATA<br />
// ═══════════════════════════════<br />
var DEFAULT_DATA = {<br />
lang:'en',<br />
hero:{name:'Your Name Art',gal:'Art Gallery',eye:'Original Paintings · Handcrafted Art',sub:'Oil · Watercolor · Color Pen Artworks',foot:'© 2025 Your Name. All artworks are original.',<br />
walls:['https://images.unsplash.com/photo-1578662996442-48f60103fc96?w=1600','https://images.unsplash.com/photo-1541961017774-22349e4a1262?w=1600','https://images.unsplash.com/photo-1579783902614-a3fb3927b6a5?w=1600','https://images.unsplash.com/photo-1547891654-e66ed7ebb968?w=1600','https://images.unsplash.com/photo-1460661419201-fd4cecdf8a8b?w=1600'],<br />
cards:['https://images.unsplash.com/photo-1547826039-bfc35e0f1ea8?w=800','https://images.unsplash.com/photo-1548438294-1ad5d5f4f063?w=800','https://images.unsplash.com/photo-1513364776144-60967b0f800f?w=800'],<br />
pageHeroes:{oil:'https://images.unsplash.com/photo-1547826039-bfc35e0f1ea8?w=1600',water:'https://images.unsplash.com/photo-1548438294-1ad5d5f4f063?w=1600',pen:'https://images.unsplash.com/photo-1513364776144-60967b0f800f?w=1600'},<br />
welcomeBg:''},<br />
about:{name:'Your Name',photo:'https://images.unsplash.com/photo-1513475382585-d06e58bcb0e0?w=800',t1:'Write your story here. Click ✏️ About Me in the admin bar to edit this text.',t1it:'Scrivi la tua storia qui.',t2:'Add your techniques, favourite subjects, and artistic journey.',s1:'10+',s2:'200+',s3:'15'},<br />
paintings:{<br />
oil:[<br />
{id:1,img:'https://images.unsplash.com/photo-1578301978693-85fa9c0320b9?w=600',name:'Painting Title 1',nameit:'Titolo Dipinto 1',med:'Oil on Canvas',sz:'60 × 80 cm',yr:'2024',pr:'$450',st:'available',desc:'Beautiful oil painting.',descit:'Bellissimo dipinto.'},<br />
{id:2,img:'https://images.unsplash.com/photo-1541961017774-22349e4a1262?w=600',name:'Painting Title 2',nameit:'Titolo Dipinto 2',med:'Oil on Canvas',sz:'50 × 70 cm',yr:'2024',pr:'$380',st:'sold',desc:'Description here.',descit:'Descrizione qui.'},<br />
{id:3,img:'https://images.unsplash.com/photo-1547891654-e66ed7ebb968?w=600',name:'Painting Title 3',nameit:'Titolo Dipinto 3',med:'Oil on Board',sz:'40 × 50 cm',yr:'2023',pr:'$320',st:'available',desc:'Description here.',descit:'Descrizione qui.'},<br />
{id:4,img:'https://images.unsplash.com/photo-1460661419201-fd4cecdf8a8b?w=600',name:'Painting Title 4',nameit:'Titolo Dipinto 4',med:'Oil on Canvas',sz:'80 × 100 cm',yr:'2025',pr:'$750',st:'reserved',desc:'Description here.',descit:'Descrizione qui.'}<br />
],<br />
water:[<br />
{id:10,img:'https://images.unsplash.com/photo-1571115764595-644a1f56a55c?w=600',name:'Watercolor 1',nameit:'Acquerello 1',med:'Watercolor on Paper',sz:'30 × 40 cm',yr:'2024',pr:'$220',st:'available',desc:'Description here.',descit:'Descrizione qui.'},<br />
{id:11,img:'https://images.unsplash.com/photo-1518998053901-5348d3961a04?w=600',name:'Watercolor 2',nameit:'Acquerello 2',med:'Watercolor on Paper',sz:'25 × 35 cm',yr:'2025',pr:'$180',st:'available',desc:'Description here.',descit:'Descrizione qui.'},<br />
{id:12,img:'https://images.unsplash.com/photo-1541690090438-3eec5dc8e69b?w=600',name:'Watercolor 3',nameit:'Acquerello 3',med:'Watercolor on Cotton',sz:'50 × 60 cm',yr:'2024',pr:'$340',st:'sold',desc:'Description here.',descit:'Descrizione qui.'}<br />
],<br />
pen:[<br />
{id:20,img:'https://images.unsplash.com/photo-1536924430914-91f9e2041b83?w=600',name:'Color Pen 1',nameit:'Pennarelli 1',med:'Color Pen on Paper',sz:'30 × 42 cm',yr:'2024',pr:'$150',st:'available',desc:'Description here.',descit:'Descrizione qui.'},<br />
{id:21,img:'https://images.unsplash.com/photo-1452860606245-08befc0ff44b?w=600',name:'Color Pen 2',nameit:'Pennarelli 2',med:'Color Pen on Card',sz:'21 × 30 cm',yr:'2023',pr:'$120',st:'sold',desc:'Description here.',descit:'Descrizione qui.'},<br />
{id:22,img:'https://images.unsplash.com/photo-1551913902-c92207136625?w=600',name:'Color Pen 3',nameit:'Pennarelli 3',med:'Color Pen on Canvas',sz:'40 × 50 cm',yr:'2025',pr:'$200',st:'available',desc:'Description here.',descit:'Descrizione qui.'}<br />
]<br />
}<br />
};</p>
<p>// FIX: Safe localStorage load — never crashes even if corrupted<br />
var D;<br />
try {<br />
var saved = localStorage.getItem('gdata');<br />
D = saved ? JSON.parse(saved) : JSON.parse(JSON.stringify(DEFAULT_DATA));<br />
// Validate essential structure<br />
if (!D.paintings || !D.hero || !D.about) throw new Error('bad data');<br />
} catch(e) {<br />
D = JSON.parse(JSON.stringify(DEFAULT_DATA));<br />
}</p>
<p>// ═══════════════════════════════<br />
// TRANSLATIONS<br />
// ═══════════════════════════════<br />
var T={<br />
en:{n0:'Home',n1:'Oil Art',n2:'Watercolors',n3:'Color Pens',n4:'About',n5:'Contact',<br />
gc1c:'Collection I',gc2c:'Collection II',gc3c:'Collection III',<br />
gc1t:'Oil<br />Paintings',gc2t:'Water<br />Colors',gc3t:'Color<br />Pen Art',<br />
ablbl:'About the Artist',hiim:"Hello, I'm",sl1:'Years Painting',sl2:'Paintings Sold',sl3:'Exhibitions',<br />
ctlbl:'Get in Touch',ctttl:'Commission<br />a Painting',<br />
ctsub:'Interested in an original piece? I would love to hear from you.',<br />
wlbl:'Change Wall',sndbtn:'Send Message',<br />
oeye:'Collection I · Original Works',ottl:'Oil<br /><em>Paintings</em>',<br />
weye:'Collection II · Original Works',wttl:'Water<br /><em>Colors</em>',<br />
peye:'Collection III · Original Works',pttl:'Color<br /><em>Pen Art</em>',<br />
flbl:'Filter:',fall:'All',fav:'Available',fsold:'Sold',fres:'Reserved',<br />
bav:'● Available',bsold:'● Sold',bres:'● Reserved',<br />
qvb:'Quick View',iqb:'Inquire',soldb:'Sold',resb:'Reserved',<br />
miq:'Inquire About This Painting'},<br />
it:{n0:'Inizio',n1:'Olio',n2:'Acquerelli',n3:'Pennarelli',n4:'Chi Sono',n5:'Contatti',<br />
gc1c:'Collezione I',gc2c:'Collezione II',gc3c:'Collezione III',<br />
gc1t:'Dipinti<br />a Olio',gc2t:'Acque<br />relli',gc3t:'Arte<br />Pennarelli',<br />
ablbl:"L'Artista",hiim:'Ciao, Sono',sl1:'Anni di Arte',sl2:'Dipinti Venduti',sl3:'Mostre',<br />
ctlbl:'Contattami',ctttl:'Commissiona<br />un Dipinto',<br />
ctsub:"Sei interessato ad acquistare un'opera? Sarò felice di sentirti.",<br />
wlbl:'Cambia Sfondo',sndbtn:'Invia Messaggio',<br />
oeye:'Collezione I · Opere Originali',ottl:'Dipinti<br /><em>a Olio</em>',<br />
weye:'Collezione II · Opere Originali',wttl:'Acque<br /><em>relli</em>',<br />
peye:'Collezione III · Opere Originali',pttl:'Arte<br /><em>Pennarelli</em>',<br />
flbl:'Filtra:',fall:'Tutti',fav:'Disponibili',fsold:'Venduti',fres:'Riservati',<br />
bav:'● Disponibile',bsold:'● Venduto',bres:'● Riservato',<br />
qvb:'Anteprima',iqb:'Richiedi',soldb:'Venduto',resb:'Riservato',<br />
miq:'Richiedi Informazioni'}<br />
};</p>
<p>// ═══════════════════════════════<br />
// PASSWORD — FIX: attach handlers after DOM ready<br />
// ═══════════════════════════════<br />
var PASS = '271187'; // ✏️ CHANGE THIS</p>
<p>function showPwScreen(){<br />
var sc = document.getElementById('pwScreen');<br />
sc.classList.add('show');<br />
document.getElementById('pwIn').value = '';<br />
document.getElementById('pwErr').style.display = 'none';<br />
setTimeout(function(){ document.getElementById('pwIn').focus(); }, 100);<br />
}<br />
function hidePwScreen(){<br />
document.getElementById('pwScreen').classList.remove('show');<br />
}<br />
function checkPassword(){<br />
var v = document.getElementById('pwIn').value;<br />
if(v === PASS){<br />
hidePwScreen();<br />
enterAdmin();<br />
} else {<br />
document.getElementById('pwErr').style.display = 'block';<br />
document.getElementById('pwIn').value = '';<br />
setTimeout(function(){ document.getElementById('pwIn').focus(); }, 100);<br />
}<br />
}<br />
document.getElementById('pwBtn').addEventListener('click', checkPassword);<br />
document.getElementById('pwClose').addEventListener('click', hidePwScreen);<br />
document.getElementById('adminBtn').addEventListener('click', showPwScreen);<br />
document.getElementById('pwIn').addEventListener('keydown', function(e){<br />
if(e.key === 'Enter') checkPassword();<br />
});</p>
<p>// ═══════════════════════════════<br />
// ADMIN<br />
// ═══════════════════════════════<br />
function enterAdmin(){<br />
document.getElementById('AP').classList.add('show');<br />
document.getElementById('adminBtn').style.display = 'none';<br />
document.getElementById('nav').classList.add('push');<br />
document.getElementById('nav').classList.remove('top');<br />
document.body.classList.add('admin-on');<br />
render();<br />
toast('✅ Admin ON — click ✏️ on any painting to edit');<br />
}<br />
function exitAdmin(){<br />
document.getElementById('AP').classList.remove('show');<br />
document.getElementById('adminBtn').style.display = 'block';<br />
document.getElementById('nav').classList.remove('push');<br />
document.getElementById('nav').classList.add('top');<br />
document.body.classList.remove('admin-on');<br />
toast('Exited admin mode');<br />
}</p>
<p>// ═══════════════════════════════<br />
// RENDER<br />
// ═══════════════════════════════<br />
function render(){<br />
var t=T[D.lang], h=D.hero, a=D.about, it=(D.lang==='it');<br />
document.getElementById('btnEN').classList.toggle('cur',D.lang==='en');<br />
document.getElementById('btnIT').classList.toggle('cur',D.lang==='it');<br />
for(var i=0;i<6;i++){
var el=document.getElementById('n'+i); if(el) el.textContent=t['n'+i];
var mel=document.getElementById('mn'+i); if(mel) mel.textContent=t['n'+i];
}
document.getElementById('sitelogo').textContent=h.name;
document.getElementById('flogo').textContent=h.name;
document.getElementById('fcopy').textContent=h.foot;
var nm=h.name.split(' ');
document.getElementById('hname').textContent=nm.slice(0,-1).join(' ')||nm[0];
document.getElementById('hgal').textContent=h.gal;
document.getElementById('heye').textContent=h.eye;
document.getElementById('hsub').textContent=h.sub;
document.getElementById('wlbl').textContent=t.wlbl;
var wb=document.getElementById('wbtns');
wb.style.cssText='display:flex;flex-direction:column;gap:7px;';
wb.innerHTML=h.walls.map(function(u,i){
return '
<div class="wb'+(i===0?' cur':'')+'" onclick="changeWall('+i+')" style="background-image:url(\''+u+'\')"></div>
<p>';<br />
}).join('');<br />
document.getElementById('heroBg').style.backgroundImage="url('"+h.walls[0]+"')";<br />
['gc1c','gc2c','gc3c'].forEach(function(id,i){ document.getElementById(id).textContent=t['gc'+(i+1)+'c']; });<br />
['gc1t','gc2t','gc3t'].forEach(function(id,i){ document.getElementById(id).innerHTML=t['gc'+(i+1)+'t']; });<br />
document.getElementById('gc1n').textContent=D.paintings.oil.length+' '+(it?'Opere Originali':'Original Works');<br />
document.getElementById('gc2n').textContent=D.paintings.water.length+' '+(it?'Opere Originali':'Original Works');<br />
document.getElementById('gc3n').textContent=D.paintings.pen.length+' '+(it?'Opere Originali':'Original Works');<br />
// Update collection card background images<br />
var cards = h.cards || ['https://images.unsplash.com/photo-1547826039-bfc35e0f1ea8?w=800','https://images.unsplash.com/photo-1548438294-1ad5d5f4f063?w=800','https://images.unsplash.com/photo-1513364776144-60967b0f800f?w=800'];<br />
for(var ci=0;ci<3;ci++){
var bgEl = document.getElementById('gcbg'+(ci+1));
if(bgEl && cards[ci]) bgEl.style.backgroundImage = "url('"+cards[ci]+"')";
}
// Update gallery page hero banners
var ph = h.pageHeroes || {oil:'https://images.unsplash.com/photo-1547826039-bfc35e0f1ea8?w=1600',water:'https://images.unsplash.com/photo-1548438294-1ad5d5f4f063?w=1600',pen:'https://images.unsplash.com/photo-1513364776144-60967b0f800f?w=1600'};
var phMap = [{id:'oilHero',key:'oil'},{id:'waterHero',key:'water'},{id:'penHero',key:'pen'}];
phMap.forEach(function(m){
var el=document.getElementById(m.id);
if(el && ph[m.key]) el.style.backgroundImage="url('"+ph[m.key]+"')";
});
document.getElementById('ablbl').textContent=t.ablbl;
document.getElementById('hiim').textContent=t.hiim;
document.getElementById('aname').textContent=a.name;
document.getElementById('ab1').textContent=it&&a.t1it?a.t1it:a.t1;
document.getElementById('ab2').textContent=a.t2;
document.getElementById('sn1').textContent=a.s1;
document.getElementById('sn2').textContent=a.s2;
document.getElementById('sn3').textContent=a.s3;
document.getElementById('sl1').textContent=t.sl1;
document.getElementById('sl2').textContent=t.sl2;
document.getElementById('sl3').textContent=t.sl3;
document.getElementById('aimg').style.backgroundImage="url('"+a.photo+"')";
document.getElementById('ctlbl').textContent=t.ctlbl;
document.getElementById('ctttl').innerHTML=t.ctttl;
document.getElementById('ctsub').textContent=t.ctsub;
document.getElementById('sndbtn').textContent=t.sndbtn;
var pages=['o','w','p'];
pages.forEach(function(p,i){
var k=['oil','water','pen'][i];
var ey=document.getElementById(p+'eye'), tt=document.getElementById(p+'ttl');
if(ey) ey.textContent=t[p+'eye']; if(tt) tt.innerHTML=t[p+'ttl'];
var fl=document.getElementById(p+'fl'); if(fl) fl.textContent=t.flbl;
[['all','fall'],['av','fav'],['s','fsold'],['r','fres']].forEach(function(x){
var btn=document.getElementById(p+'f'+x[0]); if(btn) btn.textContent=t[x[1]];
});
renderGrid(k);
});
}
function renderGrid(type){
var t=T[D.lang], it=(D.lang==='it');
var grid=document.getElementById('grid-'+type);
var ps=D.paintings[type];
var html=ps.map(function(p){
var nm=it&&p.nameit?p.nameit:p.name;
var bdg=p.st==='available'?'
<div class="bdg bav">'+t.bav+'</div>
<p>':<br />
p.st==='sold'?'</p>
<div class="bdg bsold">'+t.bsold+'</div>
<p>':<br />
'</p>
<div class="bdg bres">'+t.bres+'</div>
<p>';<br />
var dis=p.st!=='available';<br />
var ibt=p.st==='sold'?t.soldb:p.st==='reserved'?t.resb:t.iqb;<br />
return '</p>
<div class="card" data-filter="'+p.st+'" data-id="'+p.id+'" data-type="'+type+'">'+<br />
'</p>
<div class="ciw">'+<br />
(p.img?'<img class="cimg" src="'+p.img+'" alt="'+nm+'" loading="lazy">':<br />
'</p>
<div class="nopic" onclick="editById('+p.id+',\''+type+'\')"><svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#555" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="m21 15-5-5L5 21"/></svg><span>Click to add photo</span></div>
<p>')+<br />
bdg+<br />
'</p>
<div class="qvo"><button class="qvb" onclick="openQV('+p.id+',\''+type+'\')">'+t.qvb+'</button></div>
<p>'+<br />
'</p>
<div class="ceo">'+<br />
'<button class="ceb cee" onclick="event.stopPropagation();editById('+p.id+',\''+type+'\')">✏️</button>'+<br />
'<button class="ceb ced" onclick="event.stopPropagation();delPainting('+p.id+',\''+type+'\')">🗑️</button>'+<br />
'</div>
<p>'+<br />
'</p></div>
<p>'+<br />
'</p>
<div class="cinfo">'+<br />
'</p>
<div class="cmed">'+p.med+'</div>
<p>'+<br />
'</p>
<div class="cname">'+nm+'</div>
<p>'+<br />
'</p>
<div class="csz">'+p.sz+' · '+p.yr+'</div>
<p>'+<br />
'</p>
<div class="cbot">'+<br />
'</p>
<div class="cprice'+(p.st==='sold'?' x':'')+'">'+p.pr+'</div>
<p>'+<br />
'<button class="iqb" '+(dis?'disabled':'')+' onclick="goContact()">'+ibt+'</button>'+<br />
'</div>
<p>'+<br />
'</p></div>
<p>'+<br />
'</p></div>
<p>';<br />
}).join('');<br />
html+='</p>
<div class="addcard" onclick="addPainting(\''+type+'\')">'+<br />
'<svg width="38" height="38" viewBox="0 0 24 24" fill="none" stroke="#c9a84c" stroke-width="1.5"><circle cx="12" cy="12" r="10"/><path d="M12 8v8M8 12h8"/></svg>'+<br />
'<span>Add Painting</span></div>
<p>';<br />
grid.innerHTML=html;<br />
}</p>
<p>// ═══════════════════════════════<br />
// NAVIGATION<br />
// ═══════════════════════════════<br />
function goPage(name){<br />
document.querySelectorAll('.pg').forEach(function(p){ p.classList.remove('show'); });<br />
document.getElementById('pg-'+name).classList.add('show');<br />
window.scrollTo({top:0,behavior:'smooth'});<br />
var map={home:0,oil:1,water:2,pen:3};<br />
document.querySelectorAll('.nlinks a').forEach(function(a){ a.classList.remove('cur'); });<br />
var idx=map[name];<br />
if(idx!==undefined){ var el=document.getElementById('n'+idx); if(el) el.classList.add('cur'); }<br />
}<br />
function goSec(id){<br />
goPage('home');<br />
setTimeout(function(){ var el=document.getElementById(id); if(el) el.scrollIntoView({behavior:'smooth'}); },120);<br />
}<br />
function goContact(){ closeQV(); goSec('contact'); }</p>
<p>// ═══════════════════════════════<br />
// WALL CHANGER<br />
// ═══════════════════════════════<br />
function changeWall(i){<br />
document.getElementById('heroBg').style.backgroundImage="url('"+D.hero.walls[i]+"')";<br />
document.querySelectorAll('.wb').forEach(function(b,j){ b.classList.toggle('cur',i===j); });<br />
}</p>
<p>// ═══════════════════════════════<br />
// LANGUAGE<br />
// ═══════════════════════════════<br />
function setLang(l){ D.lang=l; render(); }</p>
<p>// ═══════════════════════════════<br />
// FILTER<br />
// ═══════════════════════════════<br />
function filt(type,val,btn){<br />
var grid=document.getElementById('grid-'+type);<br />
grid.closest('.pg').querySelectorAll('.fb').forEach(function(b){ b.classList.remove('cur'); });<br />
btn.classList.add('cur');<br />
grid.querySelectorAll('.card').forEach(function(c){ c.style.display=(val==='all'||c.dataset.filter===val)?'':'none'; });<br />
}</p>
<p>// ═══════════════════════════════<br />
// QUICK VIEW<br />
// ═══════════════════════════════<br />
function openQV(id,type){<br />
var p=D.paintings[type].find(function(x){ return x.id===id; });<br />
if(!p) return;<br />
var it=(D.lang==='it'), t=T[D.lang];<br />
document.getElementById('qvi').src=p.img||'';<br />
document.getElementById('qvmed').textContent=p.med;<br />
document.getElementById('qvttl').textContent=it&&p.nameit?p.nameit:p.name;<br />
document.getElementById('qvsz').textContent=p.sz+' · '+p.yr;<br />
document.getElementById('qvpr').textContent=p.pr;<br />
document.getElementById('qvds').textContent=it&&p.descit?p.descit:p.desc;<br />
var iq=document.getElementById('qviq');<br />
if(p.st==='sold'){ iq.textContent=t.soldb; iq.disabled=true; iq.style.opacity='.4'; }<br />
else if(p.st==='reserved'){ iq.textContent=t.resb; iq.disabled=true; iq.style.opacity='.4'; }<br />
else{ iq.textContent=t.miq; iq.disabled=false; iq.style.opacity='1'; iq.onclick=function(){ closeQV(); goContact(); }; }<br />
document.getElementById('qvOv').classList.add('show');<br />
document.body.style.overflow='hidden';<br />
}<br />
function closeQV(){ document.getElementById('qvOv').classList.remove('show'); document.body.style.overflow=''; }</p>
<p>// ═══════════════════════════════<br />
// EDIT PAINTING<br />
// ═══════════════════════════════<br />
var editId=null, editType=null, editImgData=null, editSt='available';<br />
function addPainting(type){ editId=null; editType=type; editImgData=null; document.getElementById('epTtl').textContent='Add Painting'; clearEP(); document.getElementById('epOv').classList.add('show'); document.body.style.overflow='hidden'; }<br />
function editById(id,type){<br />
var p=D.paintings[type].find(function(x){ return x.id===id; });<br />
if(!p) return;<br />
editId=id; editType=type; editImgData=null;<br />
document.getElementById('epTtl').textContent='Edit Painting';<br />
document.getElementById('eurl').value=p.img||'';<br />
document.getElementById('ename').value=p.name||'';<br />
document.getElementById('enameit').value=p.nameit||'';<br />
document.getElementById('emed').value=p.med||'';<br />
document.getElementById('esz').value=p.sz||'';<br />
document.getElementById('eyr').value=p.yr||'';<br />
document.getElementById('epr').value=p.pr||'';<br />
document.getElementById('eds').value=p.desc||'';<br />
document.getElementById('edsit').value=p.descit||'';<br />
setSt(p.st||'available');<br />
setIaImg(p.img||'');<br />
document.getElementById('epOv').classList.add('show');<br />
document.body.style.overflow='hidden';<br />
}<br />
function clearEP(){<br />
['eurl','ename','enameit','emed','esz','eyr','epr','eds','edsit'].forEach(function(id){ var el=document.getElementById(id); if(el) el.value=''; });<br />
setSt('available'); setIaImg(''); editImgData=null;<br />
}<br />
function setIaImg(url){<br />
var ia=document.getElementById('iarea'), img=document.getElementById('iaimg');<br />
if(url){ img.src=url; img.style.display='block'; ia.classList.add('hasimg'); }<br />
else { img.src=''; img.style.display='none'; ia.classList.remove('hasimg'); }<br />
}<br />
function onImgFile(e){<br />
var file=e.target.files[0]; if(!file) return;<br />
var r=new FileReader();<br />
r.onload=function(ev){ editImgData=ev.target.result; setIaImg(editImgData); };<br />
r.readAsDataURL(file);<br />
}<br />
function onUrlInput(url){ if(url) setIaImg(url); }<br />
function setSt(s){<br />
editSt=s;<br />
['available','sold','reserved'].forEach(function(x){<br />
var el=document.getElementById('st-'+x);<br />
if(el){ el.className='sto'; if(x===s) el.classList.add('sto-'+x); }<br />
});<br />
}<br />
function savePainting(){<br />
var imgUrl=editImgData||document.getElementById('eurl').value.trim();<br />
var name=document.getElementById('ename').value.trim();<br />
if(!name){ toast('⚠️ Please enter a title'); return; }<br />
var p={ id:editId||Date.now(), img:imgUrl, name:name, nameit:document.getElementById('enameit').value.trim(), med:document.getElementById('emed').value.trim()||'Mixed Media', sz:document.getElementById('esz').value.trim()||'—', yr:document.getElementById('eyr').value.trim()||new Date().getFullYear()+'', pr:document.getElementById('epr').value.trim()||'—', st:editSt, desc:document.getElementById('eds').value.trim(), descit:document.getElementById('edsit').value.trim() };<br />
var arr=D.paintings[editType];<br />
if(editId){ var idx=arr.findIndex(function(x){ return x.id===editId; }); if(idx>-1) arr[idx]=p; } else arr.push(p);<br />
saveData(); closeEP(); renderGrid(editType); toast('✅ Painting saved!');<br />
}<br />
function delPainting(id,type){<br />
if(!confirm('Delete this painting?')) return;<br />
D.paintings[type]=D.paintings[type].filter(function(x){ return x.id!==id; });<br />
saveData(); renderGrid(type); toast('🗑️ Deleted');<br />
}<br />
function closeEP(){ document.getElementById('epOv').classList.remove('show'); document.body.style.overflow=''; editImgData=null; }</p>
<p>// ═══════════════════════════════<br />
// EDIT ABOUT<br />
// ═══════════════════════════════<br />
function openAboutEdit(){<br />
var a=D.about;<br />
document.getElementById('aen').value=a.name||'';<br />
document.getElementById('aeph').value=a.photo&&a.photo.startsWith('http')?a.photo:'';<br />
document.getElementById('aet1').value=a.t1||'';<br />
document.getElementById('aet2').value=a.t2||'';<br />
document.getElementById('aet1it').value=a.t1it||'';<br />
document.getElementById('aes1').value=a.s1||'';<br />
document.getElementById('aes2').value=a.s2||'';<br />
document.getElementById('aes3').value=a.s3||'';<br />
var ai=document.getElementById('apharea'), aim=document.getElementById('aphimg');<br />
if(a.photo){ ai.style.backgroundImage="url('"+a.photo+"')"; aim.src=a.photo; aim.style.display='block'; ai.classList.add('hasimg'); }<br />
else { ai.classList.remove('hasimg'); aim.style.display='none'; }<br />
document.getElementById('aeOv').classList.add('show');<br />
document.body.style.overflow='hidden';<br />
}<br />
function onAphFile(e){<br />
var file=e.target.files[0]; if(!file) return;<br />
var r=new FileReader();<br />
r.onload=function(ev){<br />
var ai=document.getElementById('apharea'), aim=document.getElementById('aphimg');<br />
ai.style.backgroundImage="url('"+ev.target.result+"')";<br />
aim.src=ev.target.result; aim.style.display='block'; ai.classList.add('hasimg');<br />
D.about.photo=ev.target.result;<br />
document.getElementById('aeph').value='[uploaded]';<br />
};<br />
r.readAsDataURL(file);<br />
}<br />
function saveAbout(){<br />
var pu=document.getElementById('aeph').value.trim();<br />
D.about.name=document.getElementById('aen').value||D.about.name;<br />
if(pu&&pu!=='[uploaded]') D.about.photo=pu;<br />
D.about.t1=document.getElementById('aet1').value;<br />
D.about.t2=document.getElementById('aet2').value;<br />
D.about.t1it=document.getElementById('aet1it').value;<br />
D.about.s1=document.getElementById('aes1').value;<br />
D.about.s2=document.getElementById('aes2').value;<br />
D.about.s3=document.getElementById('aes3').value;<br />
saveData(); closeAE(); render(); toast('✅ About Me saved!');<br />
}<br />
function closeAE(){ document.getElementById('aeOv').classList.remove('show'); document.body.style.overflow=''; }</p>
<p>// ═══════════════════════════════<br />
// EDIT HERO<br />
// ═══════════════════════════════<br />
var wallImgData = [null,null,null,null,null];<br />
var cardImgData = [null,null,null];<br />
var pageHeroImgData = [null,null,null];<br />
var welcomeBgImgData = null;<br />
var PAGE_HERO_KEYS = ['oil','water','pen'];</p>
<p>function setWcBgPreview(url){<br />
var area=document.getElementById('wcbgarea');<br />
var img=document.getElementById('wcbgimg');<br />
var lbl=document.getElementById('wcbgilbl');<br />
if(!area) return;<br />
if(url){<br />
img.src=url; img.style.display='block';<br />
area.classList.add('hasimg');<br />
if(lbl) lbl.style.display='flex';<br />
} else {<br />
img.src=''; img.style.display='none';<br />
area.classList.remove('hasimg');<br />
}<br />
}<br />
function onWcBgFile(e){<br />
var file=e.target.files[0]; if(!file) return;<br />
var r=new FileReader();<br />
r.onload=function(ev){<br />
welcomeBgImgData=ev.target.result;<br />
setWcBgPreview(ev.target.result);<br />
document.getElementById('hwcbg').value='[uploaded]';<br />
};<br />
r.readAsDataURL(file);<br />
}<br />
function onWcBgUrl(url){<br />
if(url&&url!=='[uploaded]'){ welcomeBgImgData=null; setWcBgPreview(url); }<br />
}<br />
function clearWcBg(){<br />
welcomeBgImgData=null;<br />
setWcBgPreview('');<br />
document.getElementById('hwcbg').value='';<br />
document.getElementById('wcbgfile').value='';<br />
}</p>
<p>function setWallPreview(i, url){<br />
var area=document.getElementById('warea'+i), img=document.getElementById('wimg'+i);<br />
if(!area) return;<br />
if(url){ img.src=url; img.style.display='block'; area.classList.add('hasimg'); }<br />
else { img.src=''; img.style.display='none'; area.classList.remove('hasimg'); }<br />
}<br />
function onWallFile(i, e){<br />
var file=e.target.files[0]; if(!file) return;<br />
var r=new FileReader();<br />
r.onload=function(ev){ wallImgData[i]=ev.target.result; setWallPreview(i,ev.target.result); document.getElementById('hw'+i).value='[uploaded]'; };<br />
r.readAsDataURL(file);<br />
}<br />
function onWallUrl(i, url){ if(url&&url!=='[uploaded]'){ wallImgData[i]=null; setWallPreview(i,url); } }</p>
<p>function setCardPreview(i, url){<br />
var area=document.getElementById('carea'+i), img=document.getElementById('cimg'+i);<br />
if(!area) return;<br />
if(url){ img.src=url; img.style.display='block'; area.classList.add('hasimg'); }<br />
else { img.src=''; img.style.display='none'; area.classList.remove('hasimg'); }<br />
}<br />
function onCardFile(i, e){<br />
var file=e.target.files[0]; if(!file) return;<br />
var r=new FileReader();<br />
r.onload=function(ev){ cardImgData[i]=ev.target.result; setCardPreview(i,ev.target.result); document.getElementById('hc'+i).value='[uploaded]'; };<br />
r.readAsDataURL(file);<br />
}<br />
function onCardUrl(i, url){ if(url&&url!=='[uploaded]'){ cardImgData[i]=null; setCardPreview(i,url); } }</p>
<p>function setPageHeroPreview(i, url){<br />
var area=document.getElementById('pharea'+i), img=document.getElementById('phimg'+i);<br />
if(!area) return;<br />
if(url){ img.src=url; img.style.display='block'; area.classList.add('hasimg'); }<br />
else { img.src=''; img.style.display='none'; area.classList.remove('hasimg'); }<br />
}<br />
function onPageHeroFile(i, e){<br />
var file=e.target.files[0]; if(!file) return;<br />
var r=new FileReader();<br />
r.onload=function(ev){ pageHeroImgData[i]=ev.target.result; setPageHeroPreview(i,ev.target.result); document.getElementById('hph'+i).value='[uploaded]'; };<br />
r.readAsDataURL(file);<br />
}<br />
function onPageHeroUrl(i, url){ if(url&&url!=='[uploaded]'){ pageHeroImgData[i]=null; setPageHeroPreview(i,url); } }</p>
<p>function openHeroEdit(){<br />
var h=D.hero;<br />
wallImgData=[null,null,null,null,null];<br />
cardImgData=[null,null,null];<br />
pageHeroImgData=[null,null,null];<br />
welcomeBgImgData=null;<br />
document.getElementById('hen').value=h.name||'';<br />
document.getElementById('heg').value=h.gal||'';<br />
document.getElementById('hee').value=h.eye||'';<br />
document.getElementById('hes').value=h.sub||'';<br />
document.getElementById('hef').value=h.foot||'';<br />
// Welcome bg<br />
var wb=h.welcomeBg||'';<br />
document.getElementById('hwcbg').value=(wb&&wb.startsWith('data:'))?'[uploaded]':(wb||'');<br />
setWcBgPreview(wb);<br />
// Page heroes<br />
var ph=h.pageHeroes||{oil:'',water:'',pen:''};<br />
PAGE_HERO_KEYS.forEach(function(k,i){<br />
var u=ph[k]||'';<br />
var urlInput=document.getElementById('hph'+i);<br />
if(urlInput) urlInput.value=(u&&u.startsWith('data:'))?'[uploaded]':(u||'');<br />
setPageHeroPreview(i,u);<br />
});<br />
// Cards<br />
var cards=h.cards||['','',''];<br />
cards.forEach(function(u,i){<br />
var urlInput=document.getElementById('hc'+i);<br />
if(urlInput) urlInput.value=(u&&u.startsWith('data:'))?'[uploaded]':(u||'');<br />
setCardPreview(i,u);<br />
});<br />
// Walls<br />
h.walls.forEach(function(u,i){<br />
var urlInput=document.getElementById('hw'+i);<br />
if(urlInput) urlInput.value=(u&&u.startsWith('data:'))?'[uploaded]':(u||'');<br />
setWallPreview(i,u||'');<br />
});<br />
document.getElementById('heOv').classList.add('show');<br />
document.body.style.overflow='hidden';<br />
}</p>
<p>function saveHero(){<br />
var h=D.hero;<br />
h.name=document.getElementById('hen').value||h.name;<br />
h.gal=document.getElementById('heg').value||h.gal;<br />
h.eye=document.getElementById('hee').value||h.eye;<br />
h.sub=document.getElementById('hes').value||h.sub;<br />
h.foot=document.getElementById('hef').value||h.foot;<br />
// Save welcome bg<br />
if(welcomeBgImgData){ h.welcomeBg=welcomeBgImgData; }<br />
else {<br />
var wv=document.getElementById('hwcbg').value.trim();<br />
if(wv&&wv!=='[uploaded]') h.welcomeBg=wv;<br />
else if(!wv) h.welcomeBg='';<br />
}<br />
// Apply welcome bg live<br />
var wbgEl=document.getElementById('wc-bg');<br />
if(wbgEl){<br />
if(h.welcomeBg){ wbgEl.style.backgroundImage="url('"+h.welcomeBg+"')"; wbgEl.classList.add('show'); }<br />
else { wbgEl.style.backgroundImage=''; wbgEl.classList.remove('show'); }<br />
}<br />
// Save page heroes<br />
if(!h.pageHeroes) h.pageHeroes={oil:'',water:'',pen:''};<br />
PAGE_HERO_KEYS.forEach(function(k,i){<br />
if(pageHeroImgData[i]){ h.pageHeroes[k]=pageHeroImgData[i]; }<br />
else { var v=document.getElementById('hph'+i).value.trim(); if(v&&v!=='[uploaded]') h.pageHeroes[k]=v; }<br />
});<br />
// Save cards<br />
if(!h.cards) h.cards=['','',''];<br />
for(var j=0;j<3;j++){
if(cardImgData[j]){ h.cards[j]=cardImgData[j]; }
else { var c=document.getElementById('hc'+j).value.trim(); if(c&&c!=='[uploaded]') h.cards[j]=c; }
}
// Save walls
for(var i=0;i<5;i++){
if(wallImgData[i]){ h.walls[i]=wallImgData[i]; }
else { var v=document.getElementById('hw'+i).value.trim(); if(v&&v!=='[uploaded]') h.walls[i]=v; }
}
saveData(); closeHE(); render(); toast('✅ Home page saved!');
}
function closeHE(){ document.getElementById('heOv').classList.remove('show'); document.body.style.overflow=''; }
// ═══════════════════════════════
// SAVE
// ═══════════════════════════════
function saveData(){
try { localStorage.setItem('gdata',JSON.stringify(D)); }
catch(e){ toast('⚠️ Storage full — some images may not save'); }
}
// ═══════════════════════════════
// FORM
// ═══════════════════════════════
function sendForm(e){
e.preventDefault();
toast(D.lang==='it'?'✅ Messaggio inviato!':'✅ Message sent!');
e.target.reset();
}
// ═══════════════════════════════
// TOAST
// ═══════════════════════════════
function toast(msg){
var t=document.getElementById('toast');
t.textContent=msg; t.classList.add('show');
setTimeout(function(){ t.classList.remove('show'); },3000);
}
// ESC closes modals
document.addEventListener('keydown',function(e){
if(e.key==='Escape'){ closeQV(); closeEP(); closeAE(); closeHE(); hidePwScreen(); }
});
// INIT
render();
if(window._updateWelcomeText) window._updateWelcomeText(D.hero);
</script></p>
<p><!-- MOUSE EFFECT CANVAS --><br />
<canvas id="mx" style="position:fixed;inset:0;pointer-events:none;z-index:99997;width:100%;height:100%;display:block;"></canvas></p>
<style>
.cur-dot{position:fixed;width:10px;height:10px;border-radius:50%;background:#c9a84c;pointer-events:none;z-index:99999;transform:translate(-50%,-50%);transition:transform .12s;mix-blend-mode:screen;}<br />
.cur-ring{position:fixed;width:36px;height:36px;border-radius:50%;border:1.5px solid rgba(201,168,76,.55);pointer-events:none;z-index:99998;transform:translate(-50%,-50%);transition:left .13s ease,top .13s ease,width .2s,height .2s,border-color .2s,opacity .2s;}<br />
body{cursor:none;}<br />
a,button,.gc,.card,.wb,.addcard,.sto,.fb,.btng,.ab,.lb,.iqb,.qvb,.nopic{cursor:none!important;}<br />
</style>
<div class="cur-dot" id="curDot"></div>
<div class="cur-ring" id="curRing"></div>
<p><script><br />
(function(){<br />
var canvas=document.getElementById('mx');<br />
var ctx=canvas.getContext('2d');<br />
var dot=document.getElementById('curDot');<br />
var ring=document.getElementById('curRing');<br />
var W,H,mx=0,my=0,rx=0,ry=0;<br />
var G='#c9a84c',G2='#e8d48b',G3='#f5e199';<br />
var particles=[],bursts=[];</p>
<p> function resize(){ W=canvas.width=window.innerWidth; H=canvas.height=window.innerHeight; }<br />
resize(); window.addEventListener('resize',resize);</p>
<p> document.addEventListener('mousemove',function(e){<br />
mx=e.clientX; my=e.clientY;<br />
dot.style.left=mx+'px'; dot.style.top=my+'px';<br />
if(Math.random()<0.55){
particles.push({x:mx+(Math.random()-.5)*5,y:my+(Math.random()-.5)*5,
vx:(Math.random()-.5)*.9,vy:(Math.random()-.5)*.9-.5,
r:1.4+Math.random()*2.4,life:1,decay:.03+Math.random()*.025,
type:Math.random()<.35?'d':'c',rot:Math.random()*6.28,spin:(Math.random()-.5)*.14});
}
});
document.addEventListener('click',function(e){
var n=24+Math.floor(Math.random()*8);
for(var i=0;i<n;i++){
var a=(6.28/n)*i+Math.random()*.25;
var spd=2+Math.random()*4;
bursts.push({x:e.clientX,y:e.clientY,
vx:Math.cos(a)*spd,vy:Math.sin(a)*spd,
r:(Math.random()<.25?3:1.2)+Math.random()*2.2,
life:1,decay:.016+Math.random()*.02,
type:['d','s','c'][Math.floor(Math.random()*3)],
rot:a,spin:(Math.random()-.5)*.2,grav:.035+Math.random()*.04,
col:[G,G2,G3][Math.floor(Math.random()*3)]});
}
ring.style.width='62px'; ring.style.height='62px';
ring.style.borderColor='rgba(201,168,76,.95)';
setTimeout(function(){ring.style.width='36px';ring.style.height='36px';ring.style.borderColor='rgba(201,168,76,.55)';},220);
});
document.addEventListener('mouseover',function(e){
var t=e.target,hov=t.tagName==='BUTTON'||t.tagName==='A'||
t.closest('.gc')||t.closest('.card')||t.closest('.wb')||t.closest('.addcard');
if(hov){ring.style.width='52px';ring.style.height='52px';ring.style.borderColor='rgba(232,212,139,.85)';dot.style.transform='translate(-50%,-50%) scale(1.7)';}
else{ring.style.width='36px';ring.style.height='36px';ring.style.borderColor='rgba(201,168,76,.55)';dot.style.transform='translate(-50%,-50%) scale(1)';}
});
function diamond(x,y,r,rot){ctx.save();ctx.translate(x,y);ctx.rotate(rot);ctx.beginPath();ctx.moveTo(0,-r*1.5);ctx.lineTo(r*.75,0);ctx.lineTo(0,r*1.5);ctx.lineTo(-r*.75,0);ctx.closePath();ctx.fill();ctx.restore();}
function star4(x,y,r,rot){ctx.save();ctx.translate(x,y);ctx.rotate(rot);ctx.beginPath();for(var i=0;i<8;i++){var a=i*(3.14159/4),rr=i%2==0?r*1.7:r*.55;i==0?ctx.moveTo(Math.cos(a)*rr,Math.sin(a)*rr):ctx.lineTo(Math.cos(a)*rr,Math.sin(a)*rr);}ctx.closePath();ctx.fill();ctx.restore();}
function lerp(a,b,t){return a+(b-a)*t;}
function frame(){
requestAnimationFrame(frame);
ctx.clearRect(0,0,W,H);
rx=lerp(rx,mx,.14); ry=lerp(ry,my,.14);
ring.style.left=rx+'px'; ring.style.top=ry+'px';
var i,p;
for(i=particles.length-1;i>=0;i--){<br />
p=particles[i];<br />
p.x+=p.vx; p.y+=p.vy; p.vy-=.018; p.life-=p.decay; p.rot+=p.spin;<br />
if(p.life<=0){particles.splice(i,1);continue;}
ctx.globalAlpha=p.life*.8;
ctx.fillStyle=p.life>.55?G2:G;<br />
if(p.type=='d')diamond(p.x,p.y,p.r,p.rot);<br />
else{ctx.beginPath();ctx.arc(p.x,p.y,p.r,0,6.28);ctx.fill();}<br />
}<br />
for(i=bursts.length-1;i>=0;i--){<br />
p=bursts[i];<br />
p.x+=p.vx; p.y+=p.vy; p.vy+=p.grav; p.vx*=.97; p.life-=p.decay; p.rot+=p.spin;<br />
if(p.life<=0){bursts.splice(i,1);continue;}
ctx.globalAlpha=Math.pow(p.life,1.3)*.95;
ctx.fillStyle=p.col;
if(p.type=='d')diamond(p.x,p.y,p.r,p.rot);
else if(p.type=='s')star4(p.x,p.y,p.r,p.rot);
else{ctx.beginPath();ctx.arc(p.x,p.y,p.r,0,6.28);ctx.fill();}
}
ctx.globalAlpha=1;
}
frame();
})();
</script><br />
</body><br />
</html></p>