BG FAME GLOBAL MAP | Professional Edition

BG FAME

Global Mapping | Expert Solutions

Loading geospatial data...

::-webkit-scrollbar{width:4px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:rgba(245,200,66,0.2);border-radius:4px} /* ══════════════════════════════ AUTH SCREEN ══════════════════════════════ */ #authScreen{ position:fixed;inset:0;z-index:1000; background:var(--bg); display:flex;align-items:center;justify-content:center; padding:1.5rem; } #authScreen::before{ content:'';position:absolute;inset:0; background:radial-gradient(ellipse 800px 600px at 50% 40%,rgba(0,212,255,0.05) 0%,transparent 70%), radial-gradient(ellipse 600px 400px at 80% 80%,rgba(245,200,66,0.06) 0%,transparent 70%); pointer-events:none; } .auth-box{ position:relative;z-index:1; background:var(--bg2); border:1px solid var(--border); border-radius:24px; padding:2.5rem; width:100%;max-width:420px; box-shadow:0 40px 100px rgba(0,0,0,0.6),0 0 0 1px rgba(0,212,255,0.05); } .auth-logo{display:flex;align-items:center;gap:.75rem;margin-bottom:2rem;justify-content:center} .auth-logo img{width:40px;height:40px;border-radius:10px;object-fit:cover;border:1px solid var(--border)} .auth-logo-text{font-family:'Syne',sans-serif;font-weight:800;font-size:1.4rem;letter-spacing:-.03em} .auth-logo-text span{color:var(--gold)} .auth-logo-text em{color:var(--cyan);font-style:normal} .auth-title{font-family:'Syne',sans-serif;font-size:1.5rem;font-weight:700;text-align:center;margin-bottom:.4rem} .auth-sub{font-size:.85rem;color:var(--muted2);text-align:center;margin-bottom:2rem} .auth-btn{ width:100%;padding:.75rem 1rem;border-radius:12px; border:1px solid var(--border);background:rgba(245,200,66,0.05); color:var(--white);font-family:'DM Sans',sans-serif;font-size:.9rem;font-weight:400; cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.6rem; transition:all .2s;margin-bottom:.6rem; } .auth-btn:hover{background:rgba(245,200,66,0.1);border-color:rgba(245,200,66,0.3);transform:translateY(-1px)} .auth-btn.github{border-color:rgba(255,255,255,0.1);background:rgba(255,255,255,0.03)} .auth-btn.github:hover{background:rgba(255,255,255,0.07);border-color:rgba(255,255,255,0.2)} .auth-divider{display:flex;align-items:center;gap:.75rem;margin:1rem 0;color:var(--muted);font-size:.78rem} .auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--border)} .auth-input{ width:100%;padding:.7rem 1rem;border-radius:10px; border:1px solid var(--border);background:rgba(255,255,255,0.03); color:var(--white);font-family:'DM Sans',sans-serif;font-size:.9rem; outline:none;margin-bottom:.6rem;transition:border-color .2s; } .auth-input:focus{border-color:rgba(0,212,255,0.4)} .auth-input::placeholder{color:var(--muted)} .auth-submit{ width:100%;padding:.75rem;border-radius:12px;border:none; background:linear-gradient(135deg,var(--gold-dim),var(--gold)); color:#000;font-family:'Syne',sans-serif;font-weight:700;font-size:.95rem; cursor:pointer;transition:all .2s;margin-top:.3rem; } .auth-submit:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(245,200,66,0.3)} .auth-toggle{text-align:center;font-size:.82rem;color:var(--muted2);margin-top:1rem} .auth-toggle a{color:var(--cyan);cursor:pointer;text-decoration:none} .auth-toggle a:hover{text-decoration:underline} .auth-error{color:var(--danger);font-size:.8rem;text-align:center;margin-top:.5rem;display:none} /* ══════════════════════════════ MAIN APP ══════════════════════════════ */ #app{display:none;flex:1;height:100vh;overflow:hidden;flex-direction:row} #app.visible{display:flex} /* ── SIDEBAR ── */ .sidebar{ width:260px;min-width:260px; background:var(--sidebar); border-right:1px solid var(--border); display:flex;flex-direction:column; height:100vh;overflow:hidden; transition:width .3s ease,min-width .3s ease; } .sidebar.collapsed{width:0;min-width:0;border-right:none} .sidebar-head{ padding:1.25rem 1rem; border-bottom:1px solid var(--border); display:flex;align-items:center;gap:.6rem; } .sidebar-logo{display:flex;align-items:center;gap:.6rem;flex:1;min-width:0} .sidebar-logo img{width:30px;height:30px;border-radius:8px;object-fit:cover;border:1px solid var(--border);flex-shrink:0} .sidebar-logo-text{font-family:'Syne',sans-serif;font-weight:800;font-size:1rem;letter-spacing:-.02em;white-space:nowrap;overflow:hidden} .sidebar-logo-text span{color:var(--gold)} .sidebar-logo-text em{color:var(--cyan);font-style:normal} .new-chat-btn{ margin:.75rem; padding:.65rem 1rem; border-radius:10px; border:1px solid rgba(0,212,255,0.25); background:rgba(0,212,255,0.07); color:var(--cyan); font-family:'DM Sans',sans-serif;font-size:.85rem;font-weight:500; cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.5rem; transition:all .2s;flex-shrink:0; } .new-chat-btn:hover{background:rgba(0,212,255,0.14);transform:translateY(-1px)} .sidebar-section-label{ padding:.5rem 1rem .3rem; font-size:.68rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase; color:var(--muted); } .conv-list{flex:1;overflow-y:auto;padding:0 .5rem} .conv-item{ padding:.6rem .75rem;border-radius:8px; cursor:pointer;display:flex;align-items:center;gap:.5rem; transition:background .15s;font-size:.83rem;color:var(--muted2); position:relative;group:true; } .conv-item:hover{background:rgba(255,255,255,0.04);color:var(--white)} .conv-item.active{background:rgba(245,200,66,0.08);color:var(--gold)} .conv-item-icon{font-size:.9rem;flex-shrink:0} .conv-item-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .conv-item-del{ opacity:0;font-size:.75rem;color:var(--muted);cursor:pointer; padding:.1rem .3rem;border-radius:4px;transition:all .15s;flex-shrink:0; } .conv-item:hover .conv-item-del{opacity:1} .conv-item-del:hover{background:rgba(239,68,68,0.15);color:var(--danger)} .sidebar-user{ padding:1rem;border-top:1px solid var(--border); display:flex;align-items:center;gap:.6rem; } .user-avatar{ width:32px;height:32px;border-radius:50%; background:linear-gradient(135deg,var(--gold-dim),var(--cyan-dim)); display:flex;align-items:center;justify-content:center; font-family:'Syne',sans-serif;font-weight:700;font-size:.85rem;color:#000; flex-shrink:0; } .user-info{flex:1;min-width:0} .user-name{font-size:.82rem;font-weight:500;color:var(--white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .user-email{font-size:.72rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .signout-btn{ background:none;border:none;color:var(--muted);cursor:pointer; font-size:.85rem;padding:.25rem;border-radius:4px;transition:color .15s; } .signout-btn:hover{color:var(--danger)} /* ── MAIN CHAT AREA ── */ .main{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative} .topbar{ padding:.9rem 1.25rem; border-bottom:1px solid var(--border); display:flex;align-items:center;gap:.75rem; background:rgba(8,11,18,0.8);backdrop-filter:blur(12px); flex-shrink:0; } .toggle-sidebar-btn{ background:none;border:none;color:var(--muted2);cursor:pointer; font-size:1.1rem;padding:.25rem;border-radius:6px;transition:color .15s; } .toggle-sidebar-btn:hover{color:var(--gold)} .topbar-title{font-family:'Syne',sans-serif;font-weight:700;font-size:1rem;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .model-select{ background:rgba(255,255,255,0.05);border:1px solid var(--border); color:var(--muted2);font-family:'DM Sans',sans-serif;font-size:.78rem; padding:.3rem .6rem;border-radius:8px;cursor:pointer;outline:none; } .model-select:focus{border-color:rgba(0,212,255,0.3)} .model-select option{background:var(--bg2)} /* ── MESSAGES ── */ .messages{flex:1;overflow-y:auto;padding:1.5rem 1rem;display:flex;flex-direction:column;gap:1.2rem} .welcome{ display:flex;flex-direction:column;align-items:center;justify-content:center; flex:1;text-align:center;padding:2rem; } .welcome-icon{font-size:3rem;margin-bottom:1rem} .welcome-title{font-family:'Syne',sans-serif;font-size:1.6rem;font-weight:700;margin-bottom:.5rem} .welcome-title span{color:var(--gold)} .welcome-title em{color:var(--cyan);font-style:normal} .welcome-sub{font-size:.9rem;color:var(--muted2);max-width:400px;line-height:1.6;margin-bottom:1.5rem} .welcome-chips{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center} .chip{ padding:.45rem .9rem;border-radius:100px; border:1px solid var(--border-cyan);background:var(--cyan-glow); color:var(--cyan);font-size:.78rem;cursor:pointer;transition:all .2s; } .chip:hover{background:rgba(0,212,255,0.18);transform:translateY(-1px)} .msg{display:flex;gap:.75rem;align-items:flex-start;animation:msgIn .3s ease} @keyframes msgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}} .msg.user{flex-direction:row-reverse} .msg-avatar{ width:30px;height:30px;border-radius:50%;flex-shrink:0;margin-top:.15rem; display:flex;align-items:center;justify-content:center;font-size:.85rem; } .msg-avatar.ai{background:linear-gradient(135deg,rgba(0,212,255,0.2),rgba(245,200,66,0.2));border:1px solid var(--border-cyan)} .msg-avatar.user-av{background:linear-gradient(135deg,var(--gold-dim),var(--cyan-dim));font-family:'Syne',sans-serif;font-weight:700;font-size:.75rem;color:#000} .msg-bubble{ max-width:72%;padding:.85rem 1.1rem;border-radius:16px; font-size:.88rem;line-height:1.7; } .msg.user .msg-bubble{ background:var(--user-bubble);border:1px solid rgba(45,111,255,0.3); border-bottom-right-radius:4px; } .msg.ai .msg-bubble{ background:var(--ai-bubble);border:1px solid var(--border); border-bottom-left-radius:4px; } .msg-bubble pre{ background:rgba(0,0,0,0.4);border:1px solid rgba(255,255,255,0.08); border-radius:8px;padding:.75rem 1rem;overflow-x:auto;margin:.5rem 0; font-family:'JetBrains Mono',monospace;font-size:.78rem;line-height:1.6; } .msg-bubble code{ font-family:'JetBrains Mono',monospace;font-size:.82em; background:rgba(0,212,255,0.08);padding:.1em .35em;border-radius:4px; color:var(--cyan); } .msg-bubble pre code{background:none;padding:0;color:var(--white)} .msg-bubble strong{color:var(--gold);font-weight:500} .msg-bubble h1,.msg-bubble h2,.msg-bubble h3{font-family:'Syne',sans-serif;font-weight:700;color:var(--white);margin:.5rem 0 .3rem} .msg-bubble ul,.msg-bubble ol{padding-left:1.25rem;margin:.3rem 0} .msg-bubble li{margin:.2rem 0} .msg-bubble a{color:var(--cyan);text-decoration:none} .msg-bubble a:hover{text-decoration:underline} .img-result{max-width:280px;border-radius:12px;border:1px solid var(--border);margin-top:.5rem;display:block} .typing-indicator{display:flex;gap:.3rem;align-items:center;padding:.5rem 0} .typing-indicator span{width:7px;height:7px;background:var(--cyan);border-radius:50%;animation:bounce .9s ease infinite} .typing-indicator span:nth-child(2){animation-delay:.15s} .typing-indicator span:nth-child(3){animation-delay:.3s} @keyframes bounce{0%,80%,100%{transform:translateY(0)}40%{transform:translateY(-6px)}} /* ── INPUT AREA ── */ .input-wrap{ padding:.9rem 1rem 1rem; border-top:1px solid var(--border); background:rgba(8,11,18,0.9);backdrop-filter:blur(12px); flex-shrink:0; } .input-row{ display:flex;align-items:flex-end;gap:.6rem; background:var(--card);border:1px solid var(--border); border-radius:16px;padding:.6rem .75rem; transition:border-color .2s; } .input-row:focus-within{border-color:rgba(0,212,255,0.35)} .chat-input{ flex:1;background:none;border:none;outline:none; color:var(--white);font-family:'DM Sans',sans-serif;font-size:.9rem; resize:none;max-height:140px;line-height:1.5;padding:.2rem 0; } .chat-input::placeholder{color:var(--muted)} .send-btn{ width:36px;height:36px;border-radius:10px;border:none;flex-shrink:0; background:linear-gradient(135deg,var(--gold-dim),var(--gold)); color:#000;font-size:1rem;cursor:pointer; display:flex;align-items:center;justify-content:center; transition:all .2s; } .send-btn:hover{transform:scale(1.05);box-shadow:0 4px 16px rgba(245,200,66,0.35)} .send-btn:disabled{opacity:.4;cursor:not-allowed;transform:none} .input-hints{ display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.5rem;padding:0 .25rem; } .hint-tag{ font-size:.72rem;color:var(--muted); border:1px solid rgba(255,255,255,0.07); border-radius:6px;padding:.15rem .5rem;cursor:pointer;transition:all .15s; } .hint-tag:hover{color:var(--cyan);border-color:var(--border-cyan)} .input-footer{display:flex;align-items:center;justify-content:space-between;margin-top:.4rem;padding:0 .25rem} .input-footer-left{font-size:.7rem;color:var(--muted)} .input-footer-left span{color:var(--gold)} /* ── TOAST ── */ .toast{ position:fixed;bottom:2rem;left:50%;transform:translateX(-50%) translateY(20px); background:var(--card);border:1px solid var(--border);border-radius:10px; padding:.6rem 1.2rem;font-size:.82rem;color:var(--white); opacity:0;transition:all .3s;pointer-events:none;z-index:9999; } .toast.show{opacity:1;transform:translateX(-50%) translateY(0)} /* ── CONFIG MODAL ── */ .modal-overlay{ position:fixed;inset:0;z-index:500; background:rgba(0,0,0,0.7);backdrop-filter:blur(6px); display:none;align-items:center;justify-content:center;padding:1.5rem; } .modal-overlay.open{display:flex} .modal-box{ background:var(--bg2);border:1px solid var(--border); border-radius:20px;padding:2rem;width:100%;max-width:440px; box-shadow:0 32px 80px rgba(0,0,0,0.6); } .modal-title{font-family:'Syne',sans-serif;font-weight:700;font-size:1.2rem;margin-bottom:1.2rem;display:flex;align-items:center;gap:.5rem} .modal-label{font-size:.78rem;color:var(--muted2);margin-bottom:.35rem;font-weight:500;letter-spacing:.05em} .modal-input{ width:100%;padding:.65rem .9rem;border-radius:10px; border:1px solid var(--border);background:rgba(255,255,255,0.03); color:var(--white);font-family:'JetBrains Mono',monospace;font-size:.8rem; outline:none;margin-bottom:1rem;transition:border-color .2s; } .modal-input:focus{border-color:rgba(0,212,255,0.35)} .modal-input::placeholder{color:var(--muted)} .modal-actions{display:flex;gap:.6rem;margin-top:.5rem} .modal-save{ flex:1;padding:.65rem;border-radius:10px;border:none; background:linear-gradient(135deg,var(--gold-dim),var(--gold)); color:#000;font-family:'Syne',sans-serif;font-weight:700;font-size:.88rem; cursor:pointer;transition:all .2s; } .modal-save:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(245,200,66,0.3)} .modal-cancel{ padding:.65rem 1.2rem;border-radius:10px; border:1px solid var(--border);background:transparent; color:var(--muted2);font-family:'DM Sans',sans-serif;font-size:.88rem; cursor:pointer;transition:all .2s; } .modal-cancel:hover{border-color:rgba(255,255,255,0.2);color:var(--white)} @media(max-width:640px){ .sidebar{position:absolute;z-index:200;height:100vh} .msg-bubble{max-width:88%} }

BG Fame

Welcome Back 👋

Don't have an account? Sign up

🤖

Hello, I'm BG Fame

Your expert AI assistant for coding, debugging, and image generation. What shall we build today?

🐍 Python code

🐛 Debug code

🎨 Generate image

📚 Explain concept

💻 HTML/CSS

🚀 Node.js API

⌨ /code 🐛 /debug 🎨 /image 📖 /explain