adicao da taça do inter freguesias , tenho que fazer alterações , ainda so mostra dados , quero organizalos !!!!!
This commit is contained in:
856
design-mockup/vdcscore_dark_android_mockup.html
Normal file
856
design-mockup/vdcscore_dark_android_mockup.html
Normal file
@@ -0,0 +1,856 @@
|
||||
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@300;400;500;600;700&display=swap');
|
||||
*{box-sizing:border-box;margin:0;padding:0}
|
||||
:root{
|
||||
--bg-base:#0a0e1a;
|
||||
--bg-surface:#111827;
|
||||
--bg-elevated:#1a2235;
|
||||
--bg-overlay:#243047;
|
||||
--brand:#22c55e;
|
||||
--brand-dim:rgba(34,197,94,0.12);
|
||||
--brand-border:rgba(34,197,94,0.25);
|
||||
--accent:#3b82f6;
|
||||
--danger:#ef4444;
|
||||
--warning:#f59e0b;
|
||||
--text-1:#f9fafb;
|
||||
--text-2:#9ca3af;
|
||||
--text-3:#4b5563;
|
||||
--border:#1e2d45;
|
||||
--border-active:#22c55e;
|
||||
--ff-display:'Bebas Neue',Impact,sans-serif;
|
||||
--ff-body:'IBM Plex Sans',system-ui,sans-serif;
|
||||
--ff-mono:'IBM Plex Mono',monospace;
|
||||
}
|
||||
body{font-family:var(--ff-body);background:transparent}
|
||||
.wrap{width:390px;margin:20px auto;position:relative}
|
||||
.phone{
|
||||
width:390px;height:820px;background:var(--bg-base);
|
||||
border-radius:44px;border:1.5px solid #1e2d45;
|
||||
overflow:hidden;position:relative;
|
||||
box-shadow:0 0 0 1px #0a0e1a,0 20px 60px rgba(0,0,0,0.7),0 0 80px rgba(34,197,94,0.04);
|
||||
}
|
||||
.notch{
|
||||
position:absolute;top:0;left:50%;transform:translateX(-50%);
|
||||
width:120px;height:34px;background:#0a0e1a;border-radius:0 0 20px 20px;z-index:100;
|
||||
display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px;
|
||||
}
|
||||
.notch-cam{width:12px;height:12px;border-radius:50%;background:#111827;border:1px solid #1e2d45}
|
||||
.screen{width:100%;height:100%;display:flex;flex-direction:column;padding-top:38px;position:relative}
|
||||
|
||||
/* DRAWER */
|
||||
.drawer-bg{
|
||||
position:absolute;inset:0;background:rgba(0,0,0,0.6);z-index:80;
|
||||
display:none;backdrop-filter:blur(2px);
|
||||
}
|
||||
.drawer-bg.open{display:block}
|
||||
.drawer{
|
||||
position:absolute;left:0;top:0;bottom:0;width:260px;
|
||||
background:var(--bg-surface);border-right:1px solid var(--border);
|
||||
z-index:90;transform:translateX(-100%);transition:transform 0.28s cubic-bezier(.4,0,.2,1);
|
||||
display:flex;flex-direction:column;
|
||||
}
|
||||
.drawer.open{transform:translateX(0)}
|
||||
.drawer-logo{
|
||||
padding:20px 20px 16px;
|
||||
border-bottom:1px solid var(--border);
|
||||
display:flex;align-items:center;gap:10px;
|
||||
}
|
||||
.drawer-icon-wrap{
|
||||
width:38px;height:38px;border-radius:10px;
|
||||
background:var(--brand);display:flex;align-items:center;justify-content:center;
|
||||
font-size:18px;flex-shrink:0;
|
||||
}
|
||||
.drawer-brand{font-family:var(--ff-display);font-size:22px;letter-spacing:2px;color:var(--text-1)}
|
||||
.drawer-brand span{color:var(--brand)}
|
||||
.drawer-nav{flex:1;padding:12px 8px;overflow-y:auto}
|
||||
.d-item{
|
||||
display:flex;align-items:center;gap:10px;padding:11px 12px;
|
||||
border-radius:8px;cursor:pointer;font-size:14px;font-weight:500;
|
||||
color:var(--text-2);transition:all 0.15s;margin-bottom:2px;
|
||||
border-left:3px solid transparent;
|
||||
}
|
||||
.d-item:hover{background:var(--bg-overlay);color:var(--text-1)}
|
||||
.d-item.active{
|
||||
background:var(--brand-dim);color:var(--brand);
|
||||
border-left-color:var(--brand);border-radius:0 8px 8px 0;
|
||||
}
|
||||
.d-item i{font-size:18px;width:20px;text-align:center;flex-shrink:0}
|
||||
.drawer-footer{padding:12px 8px;border-top:1px solid var(--border)}
|
||||
|
||||
/* TOPBAR */
|
||||
.topbar{
|
||||
background:rgba(17,24,39,0.8);backdrop-filter:blur(12px);
|
||||
border-bottom:1px solid var(--border);
|
||||
padding:0 16px;height:56px;
|
||||
display:flex;align-items:center;justify-content:space-between;
|
||||
flex-shrink:0;position:relative;z-index:10;
|
||||
}
|
||||
.topbar-left{display:flex;align-items:center;gap:10px}
|
||||
.menu-btn{
|
||||
width:36px;height:36px;border-radius:8px;border:1px solid var(--border);
|
||||
background:var(--bg-elevated);display:flex;align-items:center;justify-content:center;
|
||||
cursor:pointer;color:var(--text-2);
|
||||
}
|
||||
.menu-btn:hover{border-color:var(--brand);color:var(--brand)}
|
||||
.menu-btn i{font-size:20px}
|
||||
.topbar-title{font-family:var(--ff-display);font-size:20px;letter-spacing:1.5px;color:var(--text-1)}
|
||||
.topbar-right{display:flex;align-items:center;gap:8px}
|
||||
.top-btn{
|
||||
width:34px;height:34px;border-radius:8px;border:1px solid var(--border);
|
||||
background:transparent;display:flex;align-items:center;justify-content:center;
|
||||
cursor:pointer;color:var(--text-2);position:relative;
|
||||
}
|
||||
.top-btn i{font-size:18px}
|
||||
.notif-dot{
|
||||
position:absolute;top:4px;right:4px;width:6px;height:6px;
|
||||
border-radius:50%;background:var(--danger);border:1px solid var(--bg-surface);
|
||||
}
|
||||
.live-pill{
|
||||
display:flex;align-items:center;gap:5px;
|
||||
background:var(--brand-dim);border:1px solid var(--brand-border);
|
||||
border-radius:20px;padding:4px 10px;
|
||||
font-size:10px;font-weight:700;color:var(--brand);letter-spacing:0.1em;text-transform:uppercase;
|
||||
font-family:var(--ff-mono);
|
||||
}
|
||||
.live-dot-anim{
|
||||
width:6px;height:6px;border-radius:50%;background:var(--brand);
|
||||
animation:ping 1.5s ease infinite;
|
||||
}
|
||||
@keyframes ping{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.5;transform:scale(0.9)}}
|
||||
|
||||
/* PAGES */
|
||||
.page{display:none;flex-direction:column;flex:1;overflow:hidden}
|
||||
.page.active{display:flex}
|
||||
.scroll{flex:1;overflow-y:auto;padding:16px}
|
||||
.scroll::-webkit-scrollbar{width:0}
|
||||
|
||||
/* SECTION TITLE */
|
||||
.sec-head{margin-bottom:16px}
|
||||
.sec-title{font-family:var(--ff-display);font-size:28px;letter-spacing:1px;color:var(--text-1);line-height:1}
|
||||
.sec-sub{font-size:12px;color:var(--text-2);margin-top:4px;font-weight:400}
|
||||
|
||||
/* STAT CARDS */
|
||||
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
|
||||
.stat-card{
|
||||
background:var(--bg-surface);border:1px solid var(--border);
|
||||
border-radius:12px;padding:14px;cursor:pointer;transition:border-color 0.2s;
|
||||
}
|
||||
.stat-card:hover{border-color:var(--brand-border)}
|
||||
.stat-icon{
|
||||
width:36px;height:36px;border-radius:8px;background:var(--bg-elevated);
|
||||
display:flex;align-items:center;justify-content:center;
|
||||
font-size:18px;margin-bottom:12px;
|
||||
}
|
||||
.stat-label{font-size:10px;font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:4px}
|
||||
.stat-value{font-family:var(--ff-display);font-size:32px;color:var(--text-1);line-height:1}
|
||||
.stat-card.live-card-stat{border-color:var(--brand-border);background:var(--brand-dim)}
|
||||
.stat-card.live-card-stat .stat-icon{background:rgba(34,197,94,0.15)}
|
||||
.stat-card.live-card-stat .stat-value{color:var(--brand)}
|
||||
|
||||
/* ACTIVITY */
|
||||
.activity-block{
|
||||
background:var(--bg-surface);border:1px solid var(--border);
|
||||
border-radius:12px;padding:14px;margin-bottom:10px;
|
||||
}
|
||||
.activity-title{
|
||||
font-size:12px;font-weight:700;color:var(--text-2);
|
||||
text-transform:uppercase;letter-spacing:0.1em;
|
||||
display:flex;align-items:center;gap:6px;margin-bottom:12px;
|
||||
}
|
||||
.activity-title i{font-size:16px;color:var(--brand)}
|
||||
.act-item{
|
||||
display:flex;align-items:flex-start;justify-content:space-between;
|
||||
padding:9px 10px;border-radius:8px;background:rgba(36,48,71,0.4);
|
||||
border:1px solid rgba(30,45,69,0.5);margin-bottom:6px;
|
||||
}
|
||||
.act-item:last-child{margin-bottom:0}
|
||||
.act-text{font-size:12px;font-weight:500;color:var(--text-1);flex:1;line-height:1.3}
|
||||
.act-time{font-size:9px;font-weight:700;color:var(--text-3);text-transform:uppercase;margin-left:8px;white-space:nowrap;font-family:var(--ff-mono)}
|
||||
|
||||
/* MATCH CARD */
|
||||
.match-card{
|
||||
background:var(--bg-surface);border:1px solid var(--border);
|
||||
border-radius:12px;overflow:hidden;margin-bottom:10px;
|
||||
}
|
||||
.match-header{
|
||||
background:var(--bg-elevated);padding:8px 14px;
|
||||
display:flex;align-items:center;justify-content:space-between;
|
||||
border-bottom:1px solid var(--border);
|
||||
}
|
||||
.match-meta-text{font-size:10px;font-family:var(--ff-mono);color:var(--text-2);display:flex;align-items:center;gap:6px}
|
||||
.badge-live{
|
||||
display:flex;align-items:center;gap:4px;
|
||||
background:var(--brand-dim);border:1px solid var(--brand-border);
|
||||
border-radius:20px;padding:2px 8px;
|
||||
font-size:9px;font-weight:700;color:var(--brand);letter-spacing:0.1em;text-transform:uppercase;font-family:var(--ff-mono);
|
||||
}
|
||||
.badge-played{
|
||||
font-size:9px;font-weight:700;color:var(--accent);
|
||||
background:rgba(59,130,246,0.12);border:1px solid rgba(59,130,246,0.2);
|
||||
border-radius:20px;padding:2px 8px;text-transform:uppercase;letter-spacing:0.05em;font-family:var(--ff-mono);
|
||||
}
|
||||
.badge-sched{
|
||||
font-size:9px;font-weight:700;color:var(--text-3);
|
||||
background:rgba(75,85,99,0.2);border:1px solid rgba(75,85,99,0.2);
|
||||
border-radius:20px;padding:2px 8px;text-transform:uppercase;letter-spacing:0.05em;font-family:var(--ff-mono);
|
||||
}
|
||||
.match-body{padding:14px}
|
||||
.teams-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
|
||||
.team-block{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
|
||||
.team-logo-circle{
|
||||
width:44px;height:44px;border-radius:50%;background:var(--bg-elevated);
|
||||
border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:20px;
|
||||
}
|
||||
.team-name{font-size:11px;font-weight:600;color:var(--text-1);line-height:1.2;max-width:80px}
|
||||
.score-block{display:flex;align-items:center;gap:8px;flex-shrink:0}
|
||||
.score-num{font-family:var(--ff-display);font-size:36px;color:var(--text-1);line-height:1}
|
||||
.score-sep{font-size:18px;color:var(--text-3)}
|
||||
.score-live{color:var(--brand)}
|
||||
.match-footer{
|
||||
padding:8px 14px;background:rgba(36,48,71,0.3);
|
||||
display:flex;gap:6px;border-top:1px solid var(--border);
|
||||
}
|
||||
.btn-detail{
|
||||
flex:1;background:var(--bg-elevated);border:1px solid var(--border);
|
||||
border-radius:6px;padding:7px 0;
|
||||
font-size:9px;font-weight:700;color:var(--text-2);text-transform:uppercase;
|
||||
letter-spacing:0.08em;cursor:pointer;text-align:center;
|
||||
}
|
||||
.btn-live-edit{
|
||||
flex:1;background:var(--brand);border:none;border-radius:6px;padding:7px 0;
|
||||
font-size:9px;font-weight:700;color:#0a0e1a;text-transform:uppercase;
|
||||
letter-spacing:0.08em;cursor:pointer;text-align:center;
|
||||
display:flex;align-items:center;justify-content:center;gap:4px;
|
||||
}
|
||||
|
||||
/* LIVE GAME CARD */
|
||||
.live-game-card{
|
||||
background:var(--bg-surface);border:2px solid var(--brand);
|
||||
border-radius:12px;overflow:hidden;margin-bottom:10px;
|
||||
}
|
||||
.live-top{
|
||||
background:var(--brand-dim);padding:8px 14px;
|
||||
display:flex;align-items:center;justify-content:space-between;
|
||||
}
|
||||
.live-top-label{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:0.15em;color:var(--brand);font-family:var(--ff-mono)}
|
||||
.live-game-body{padding:16px 14px}
|
||||
.live-time-badge{
|
||||
display:flex;align-items:center;gap:5px;justify-content:center;margin-bottom:14px;
|
||||
font-family:var(--ff-mono);font-size:13px;font-weight:500;color:var(--brand);
|
||||
}
|
||||
|
||||
/* STANDINGS TABLE */
|
||||
.table-wrap{
|
||||
background:var(--bg-surface);border:1px solid var(--border);
|
||||
border-radius:12px;overflow:hidden;
|
||||
}
|
||||
.table-head{
|
||||
display:flex;align-items:center;padding:10px 12px;
|
||||
background:rgba(26,34,53,0.6);border-bottom:1px solid var(--border);
|
||||
font-size:9px;font-weight:700;color:var(--text-3);
|
||||
text-transform:uppercase;letter-spacing:0.1em;font-family:var(--ff-mono);
|
||||
}
|
||||
.th-pos{width:30px;text-align:center}
|
||||
.th-logo{width:36px}
|
||||
.th-name{flex:1}
|
||||
.th-num{width:24px;text-align:center}
|
||||
.th-pts{width:36px;text-align:right;color:var(--brand)}
|
||||
.st-row{
|
||||
display:flex;align-items:center;padding:10px 12px;
|
||||
border-bottom:1px solid rgba(30,45,69,0.4);cursor:pointer;transition:background 0.15s;
|
||||
}
|
||||
.st-row:hover{background:rgba(36,48,71,0.4)}
|
||||
.st-row:last-child{border-bottom:none}
|
||||
.st-row.leader{background:rgba(34,197,94,0.04)}
|
||||
.pos-badge{
|
||||
width:26px;height:26px;border-radius:50%;
|
||||
display:flex;align-items:center;justify-content:center;
|
||||
font-size:11px;font-weight:700;font-family:var(--ff-mono);
|
||||
background:var(--bg-elevated);color:var(--text-2);
|
||||
}
|
||||
.pos-badge.first{background:var(--brand);color:#0a0e1a}
|
||||
.st-logo-cell{width:36px;display:flex;justify-content:center;font-size:18px}
|
||||
.st-name-cell{flex:1;font-size:13px;font-weight:600;color:var(--text-1)}
|
||||
.st-num-cell{width:24px;text-align:center;font-size:11px;font-family:var(--ff-mono);color:var(--text-2)}
|
||||
.st-v{color:var(--brand)!important}
|
||||
.st-d{color:var(--danger)!important}
|
||||
.st-pts-cell{width:36px;text-align:right;font-family:var(--ff-display);font-size:20px;color:var(--brand)}
|
||||
|
||||
/* CLUBS */
|
||||
.club-row{
|
||||
display:flex;align-items:center;gap:12px;padding:13px 14px;
|
||||
background:var(--bg-surface);border-bottom:1px solid var(--border);
|
||||
cursor:pointer;transition:background 0.15s;
|
||||
}
|
||||
.club-row:hover{background:var(--bg-elevated)}
|
||||
.club-logo{
|
||||
width:42px;height:42px;border-radius:50%;background:var(--bg-elevated);
|
||||
border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:20px;
|
||||
}
|
||||
.club-info{flex:1}
|
||||
.club-name{font-size:14px;font-weight:600;color:var(--text-1)}
|
||||
.club-stad{font-size:11px;color:var(--text-2);margin-top:2px}
|
||||
|
||||
/* SCORERS */
|
||||
.scorer-row{
|
||||
display:flex;align-items:center;gap:12px;padding:12px 14px;
|
||||
background:var(--bg-surface);border-bottom:1px solid var(--border);
|
||||
}
|
||||
.scorer-pos{
|
||||
width:28px;height:28px;border-radius:50%;background:var(--bg-elevated);
|
||||
display:flex;align-items:center;justify-content:center;
|
||||
font-size:11px;font-weight:700;color:var(--text-2);font-family:var(--ff-mono);flex-shrink:0;
|
||||
}
|
||||
.scorer-pos.top{background:var(--brand);color:#0a0e1a}
|
||||
.scorer-name{font-size:14px;font-weight:600;color:var(--text-1)}
|
||||
.scorer-club{font-size:11px;color:var(--text-2)}
|
||||
.scorer-goals{font-family:var(--ff-display);font-size:26px;color:var(--brand);margin-left:auto}
|
||||
.scorer-lbl{font-size:9px;color:var(--text-3);text-align:right;font-family:var(--ff-mono);text-transform:uppercase}
|
||||
|
||||
/* TOGGLE */
|
||||
.toggle-row{
|
||||
display:flex;background:var(--bg-surface);border:1px solid var(--border);
|
||||
border-radius:8px;padding:3px;margin-bottom:14px;
|
||||
}
|
||||
.toggle-btn{
|
||||
flex:1;padding:7px 0;font-size:12px;font-weight:700;text-align:center;
|
||||
border-radius:6px;cursor:pointer;color:var(--text-2);transition:all 0.15s;
|
||||
letter-spacing:0.05em;text-transform:uppercase;
|
||||
}
|
||||
.toggle-btn.active{background:var(--brand);color:#0a0e1a}
|
||||
|
||||
/* JORNADA NAV */
|
||||
.jornada-nav{
|
||||
display:flex;align-items:center;justify-content:space-between;
|
||||
padding:10px 16px;background:var(--bg-surface);border-bottom:1px solid var(--border);flex-shrink:0;
|
||||
}
|
||||
.jnav-btn{
|
||||
width:32px;height:32px;border:1px solid var(--border);border-radius:6px;
|
||||
background:var(--bg-elevated);display:flex;align-items:center;justify-content:center;
|
||||
cursor:pointer;color:var(--text-2);
|
||||
}
|
||||
.jnav-btn:hover{border-color:var(--brand);color:var(--brand)}
|
||||
.jnav-label{font-family:var(--ff-display);font-size:16px;letter-spacing:1px;color:var(--text-1)}
|
||||
|
||||
/* SEARCH BAR */
|
||||
.search-bar{
|
||||
display:flex;align-items:center;gap:8px;
|
||||
background:var(--bg-elevated);border:1px solid var(--border);
|
||||
border-radius:20px;padding:8px 14px;margin-bottom:14px;
|
||||
}
|
||||
.search-bar i{font-size:16px;color:var(--text-3)}
|
||||
.search-bar span{font-size:13px;color:var(--text-3)}
|
||||
|
||||
/* SETTINGS */
|
||||
.settings-group{margin-bottom:14px}
|
||||
.settings-label{font-size:10px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:0.1em;padding:0 0 6px;font-family:var(--ff-mono)}
|
||||
.settings-block{background:var(--bg-surface);border:1px solid var(--border);border-radius:12px;overflow:hidden}
|
||||
.settings-item{
|
||||
display:flex;align-items:center;gap:12px;padding:13px 14px;
|
||||
border-bottom:1px solid rgba(30,45,69,0.4);cursor:pointer;transition:background 0.15s;
|
||||
}
|
||||
.settings-item:last-child{border-bottom:none}
|
||||
.settings-item:hover{background:var(--bg-elevated)}
|
||||
.settings-item i{font-size:18px;color:var(--text-2);width:20px;text-align:center}
|
||||
.settings-text{flex:1;font-size:14px;color:var(--text-1)}
|
||||
.settings-val{font-size:12px;color:var(--text-3);font-family:var(--ff-mono)}
|
||||
.settings-item.danger i,.settings-item.danger .settings-text{color:var(--danger)}
|
||||
|
||||
/* EMPTY STATE */
|
||||
.empty-state{
|
||||
display:flex;flex-direction:column;align-items:center;justify-content:center;
|
||||
padding:48px 24px;text-align:center;
|
||||
}
|
||||
.empty-icon{
|
||||
width:64px;height:64px;border-radius:50%;background:var(--bg-elevated);
|
||||
border:1px solid var(--border);display:flex;align-items:center;justify-content:center;
|
||||
font-size:28px;margin-bottom:16px;opacity:0.4;
|
||||
}
|
||||
.empty-title{font-size:16px;font-weight:700;color:var(--text-1);margin-bottom:6px}
|
||||
.empty-sub{font-size:13px;color:var(--text-2);line-height:1.5}
|
||||
</style>
|
||||
|
||||
<div class="wrap">
|
||||
<div class="phone">
|
||||
<div class="notch"><div class="notch-cam"></div></div>
|
||||
<div class="screen">
|
||||
|
||||
<div class="drawer-bg" id="dBg" onclick="closeDrawer()"></div>
|
||||
<div class="drawer" id="drawer">
|
||||
<div class="drawer-logo">
|
||||
<div class="drawer-icon-wrap">⚡</div>
|
||||
<div class="drawer-brand">VDC<span>Score</span></div>
|
||||
</div>
|
||||
<div class="drawer-nav">
|
||||
<div class="d-item active" onclick="go('dashboard');closeDrawer()"><i class="ti ti-layout-dashboard" aria-hidden="true"></i> Dashboard</div>
|
||||
<div class="d-item" onclick="go('live');closeDrawer()"><i class="ti ti-bolt" aria-hidden="true"></i> Jogos Live</div>
|
||||
<div class="d-item" onclick="go('games');closeDrawer()"><i class="ti ti-calendar-event" aria-hidden="true"></i> Jornadas</div>
|
||||
<div class="d-item" onclick="go('standings');closeDrawer()"><i class="ti ti-trophy" aria-hidden="true"></i> Classificação</div>
|
||||
<div class="d-item" onclick="go('clubs');closeDrawer()"><i class="ti ti-shield" aria-hidden="true"></i> Clubes</div>
|
||||
<div class="d-item" onclick="go('scorers');closeDrawer()"><i class="ti ti-chart-bar" aria-hidden="true"></i> Melhores Marcadores</div>
|
||||
</div>
|
||||
<div class="drawer-footer">
|
||||
<div class="d-item" onclick="go('settings');closeDrawer()"><i class="ti ti-settings" aria-hidden="true"></i> Definições</div>
|
||||
<div class="d-item" style="color:var(--danger)"><i class="ti ti-logout" style="color:var(--danger)" aria-hidden="true"></i> Sair</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="topbar">
|
||||
<div class="topbar-left">
|
||||
<div class="menu-btn" onclick="openDrawer()"><i class="ti ti-menu-2" aria-hidden="true"></i></div>
|
||||
<div class="topbar-title" id="topTitle">DASHBOARD</div>
|
||||
</div>
|
||||
<div class="topbar-right">
|
||||
<div class="live-pill" id="livePill">
|
||||
<div class="live-dot-anim"></div>
|
||||
LIVE
|
||||
</div>
|
||||
<div class="top-btn"><i class="ti ti-bell" aria-hidden="true"></i><div class="notif-dot"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- DASHBOARD -->
|
||||
<div class="page active" id="page-dashboard">
|
||||
<div class="scroll">
|
||||
<div class="sec-head">
|
||||
<div class="sec-title">PAINEL DE CONTROLO</div>
|
||||
<div class="sec-sub">Bem-vindo ao VdcScore Live Score.</div>
|
||||
</div>
|
||||
<div class="stat-grid">
|
||||
<div class="stat-card" onclick="go('clubs')">
|
||||
<div class="stat-icon" style="color:var(--brand)"><i class="ti ti-users" style="font-size:18px" aria-hidden="true"></i></div>
|
||||
<div class="stat-label">Clubes Ativos</div>
|
||||
<div class="stat-value">8</div>
|
||||
</div>
|
||||
<div class="stat-card live-card-stat" onclick="go('live')">
|
||||
<div class="stat-icon" style="color:var(--brand)">
|
||||
<i class="ti ti-bolt" style="font-size:18px" aria-hidden="true"></i>
|
||||
</div>
|
||||
<div class="stat-label">Em Direto</div>
|
||||
<div class="stat-value">2</div>
|
||||
</div>
|
||||
<div class="stat-card" onclick="go('games')">
|
||||
<div class="stat-icon" style="color:var(--text-2)"><i class="ti ti-calendar" style="font-size:18px" aria-hidden="true"></i></div>
|
||||
<div class="stat-label">Próximos Jogos</div>
|
||||
<div class="stat-value">5</div>
|
||||
</div>
|
||||
<div class="stat-card" onclick="go('standings')">
|
||||
<div class="stat-icon" style="color:var(--warning)"><i class="ti ti-trophy" style="font-size:18px" aria-hidden="true"></i></div>
|
||||
<div class="stat-label">Jornada Atual</div>
|
||||
<div class="stat-value">22</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="activity-block">
|
||||
<div class="activity-title"><i class="ti ti-trending-up" aria-hidden="true"></i> ATIVIDADE RECENTE</div>
|
||||
<div class="act-item">
|
||||
<div class="act-text">Classificação dos Juniores atualizada</div>
|
||||
<div class="act-time">2H</div>
|
||||
</div>
|
||||
<div class="act-item">
|
||||
<div class="act-text">Bagunte F.C. atualizou o plantel</div>
|
||||
<div class="act-time">5H</div>
|
||||
</div>
|
||||
<div class="act-item">
|
||||
<div class="act-text">Resultados da 22ª Jornada validados</div>
|
||||
<div class="act-time">1D</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="match-card" style="border-color:var(--brand-border);background:rgba(34,197,94,0.04)">
|
||||
<div style="padding:14px 14px 10px">
|
||||
<div style="font-family:var(--ff-display);font-size:18px;letter-spacing:1px;color:var(--text-1);margin-bottom:6px">PRONTO PARA O DIRETO?</div>
|
||||
<div style="font-size:12px;color:var(--text-2);line-height:1.5;margin-bottom:12px">Inicia um acompanhamento em tempo real de qualquer jogo. A app recebe as notificações instantaneamente.</div>
|
||||
<div class="btn-live-edit" style="border-radius:8px;padding:9px 0;font-size:11px" onclick="go('games')">
|
||||
<i class="ti ti-bolt" style="font-size:14px" aria-hidden="true"></i> GERIR JORNADAS
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- LIVE GAMES -->
|
||||
<div class="page" id="page-live">
|
||||
<div class="scroll">
|
||||
<div class="sec-head">
|
||||
<div class="sec-title" style="display:flex;align-items:center;gap:8px">
|
||||
<i class="ti ti-bolt" style="font-size:24px;color:var(--brand)" aria-hidden="true"></i> JOGOS LIVE
|
||||
</div>
|
||||
<div class="sec-sub">Jogos a decorrer neste momento.</div>
|
||||
</div>
|
||||
<div class="live-game-card">
|
||||
<div class="live-top">
|
||||
<div class="live-top-label">Seniores · Jornada 22</div>
|
||||
<div class="badge-live"><div class="live-dot-anim"></div> DIRETO</div>
|
||||
</div>
|
||||
<div class="live-game-body">
|
||||
<div class="live-time-badge">
|
||||
<div class="live-dot-anim"></div>
|
||||
75'
|
||||
</div>
|
||||
<div class="teams-row">
|
||||
<div class="team-block">
|
||||
<div class="team-logo-circle">⚽</div>
|
||||
<div class="team-name">J.U. MOSTEIRÓ</div>
|
||||
</div>
|
||||
<div class="score-block">
|
||||
<div class="score-num score-live">2</div>
|
||||
<div class="score-sep">:</div>
|
||||
<div class="score-num score-live">1</div>
|
||||
</div>
|
||||
<div class="team-block">
|
||||
<div class="team-logo-circle">🔴</div>
|
||||
<div class="team-name">SC ESPINHO</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="match-footer">
|
||||
<div class="btn-live-edit" style="border-radius:6px;padding:8px 0">
|
||||
<i class="ti ti-bolt" style="font-size:12px" aria-hidden="true"></i> LIVE EDITOR
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="live-game-card">
|
||||
<div class="live-top">
|
||||
<div class="live-top-label">Juniores · Jornada 20</div>
|
||||
<div class="badge-live"><div class="live-dot-anim"></div> DIRETO</div>
|
||||
</div>
|
||||
<div class="live-game-body">
|
||||
<div class="live-time-badge">
|
||||
<div class="live-dot-anim"></div>
|
||||
38'
|
||||
</div>
|
||||
<div class="teams-row">
|
||||
<div class="team-block">
|
||||
<div class="team-logo-circle">⭐</div>
|
||||
<div class="team-name">FC GUILHABREU</div>
|
||||
</div>
|
||||
<div class="score-block">
|
||||
<div class="score-num score-live">0</div>
|
||||
<div class="score-sep">:</div>
|
||||
<div class="score-num score-live">0</div>
|
||||
</div>
|
||||
<div class="team-block">
|
||||
<div class="team-logo-circle">🛡️</div>
|
||||
<div class="team-name">G.D.C. RIO MAU</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="match-footer">
|
||||
<div class="btn-live-edit" style="border-radius:6px;padding:8px 0">
|
||||
<i class="ti ti-bolt" style="font-size:12px" aria-hidden="true"></i> LIVE EDITOR
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- GAMES / JORNADAS -->
|
||||
<div class="page" id="page-games">
|
||||
<div class="jornada-nav">
|
||||
<div class="jnav-btn"><i class="ti ti-chevron-left" style="font-size:18px" aria-hidden="true"></i></div>
|
||||
<div class="jnav-label">JORNADA 22 · SENIORES</div>
|
||||
<div class="jnav-btn"><i class="ti ti-chevron-right" style="font-size:18px" aria-hidden="true"></i></div>
|
||||
</div>
|
||||
<div class="scroll" style="padding-top:14px">
|
||||
<div class="match-card" style="border-color:var(--brand);border-width:2px">
|
||||
<div class="match-header">
|
||||
<div class="match-meta-text"><i class="ti ti-calendar" style="font-size:13px" aria-hidden="true"></i> 08/05/2026 · 10:00</div>
|
||||
<div class="badge-live"><div class="live-dot-anim"></div> LIVE</div>
|
||||
</div>
|
||||
<div class="match-body">
|
||||
<div class="teams-row">
|
||||
<div class="team-block">
|
||||
<div class="team-logo-circle">⚽</div>
|
||||
<div class="team-name">J.U. MOSTEIRÓ</div>
|
||||
</div>
|
||||
<div class="score-block">
|
||||
<div class="score-num score-live">2</div>
|
||||
<div class="score-sep">:</div>
|
||||
<div class="score-num score-live">1</div>
|
||||
</div>
|
||||
<div class="team-block">
|
||||
<div class="team-logo-circle">🔴</div>
|
||||
<div class="team-name">SC ESPINHO</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;justify-content:center;gap:16px;margin-top:10px">
|
||||
<div style="display:flex;align-items:center;gap:4px;font-size:10px;color:var(--text-2);font-family:var(--ff-mono)"><i class="ti ti-clock" style="font-size:12px" aria-hidden="true"></i> 75'</div>
|
||||
<div style="display:flex;align-items:center;gap:4px;font-size:10px;color:var(--text-2);font-family:var(--ff-mono)"><i class="ti ti-map-pin" style="font-size:12px" aria-hidden="true"></i> Campo Mosteiró</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="match-footer">
|
||||
<div class="btn-detail">VER DETALHES</div>
|
||||
<div class="btn-live-edit"><i class="ti ti-bolt" style="font-size:12px" aria-hidden="true"></i> LIVE EDITOR</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="match-card">
|
||||
<div class="match-header">
|
||||
<div class="match-meta-text"><i class="ti ti-calendar" style="font-size:13px" aria-hidden="true"></i> 08/05/2026 · 15:00</div>
|
||||
<div class="badge-played">TERMINADO</div>
|
||||
</div>
|
||||
<div class="match-body">
|
||||
<div class="teams-row">
|
||||
<div class="team-block">
|
||||
<div class="team-logo-circle">⭐</div>
|
||||
<div class="team-name">FC GUILHABREU</div>
|
||||
</div>
|
||||
<div class="score-block">
|
||||
<div class="score-num">3</div>
|
||||
<div class="score-sep">:</div>
|
||||
<div class="score-num">1</div>
|
||||
</div>
|
||||
<div class="team-block">
|
||||
<div class="team-logo-circle">🔵</div>
|
||||
<div class="team-name">SC MATOSINHOS</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;justify-content:center;gap:16px;margin-top:10px">
|
||||
<div style="display:flex;align-items:center;gap:4px;font-size:10px;color:var(--text-2);font-family:var(--ff-mono)"><i class="ti ti-clock" style="font-size:12px" aria-hidden="true"></i> 15:00</div>
|
||||
<div style="display:flex;align-items:center;gap:4px;font-size:10px;color:var(--text-2);font-family:var(--ff-mono)"><i class="ti ti-map-pin" style="font-size:12px" aria-hidden="true"></i> Campo Guilhabreu</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="match-footer">
|
||||
<div class="btn-detail">VER DETALHES</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="match-card">
|
||||
<div class="match-header">
|
||||
<div class="match-meta-text"><i class="ti ti-calendar" style="font-size:13px" aria-hidden="true"></i> 09/05/2026 · 11:00</div>
|
||||
<div class="badge-sched">AGENDADO</div>
|
||||
</div>
|
||||
<div class="match-body">
|
||||
<div class="teams-row">
|
||||
<div class="team-block">
|
||||
<div class="team-logo-circle">🟡</div>
|
||||
<div class="team-name">AD CANIDELO</div>
|
||||
</div>
|
||||
<div class="score-block">
|
||||
<div class="score-num" style="color:var(--text-3)">—</div>
|
||||
<div class="score-sep">:</div>
|
||||
<div class="score-num" style="color:var(--text-3)">—</div>
|
||||
</div>
|
||||
<div class="team-block">
|
||||
<div class="team-logo-circle">🛡️</div>
|
||||
<div class="team-name">G.D.C. RIO MAU</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;justify-content:center;gap:16px;margin-top:10px">
|
||||
<div style="display:flex;align-items:center;gap:4px;font-size:10px;color:var(--text-2);font-family:var(--ff-mono)"><i class="ti ti-clock" style="font-size:12px" aria-hidden="true"></i> 11:00</div>
|
||||
<div style="display:flex;align-items:center;gap:4px;font-size:10px;color:var(--text-2);font-family:var(--ff-mono)"><i class="ti ti-map-pin" style="font-size:12px" aria-hidden="true"></i> AD Canidelo</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="match-footer">
|
||||
<div class="btn-detail">VER DETALHES</div>
|
||||
<div class="btn-live-edit"><i class="ti ti-bolt" style="font-size:12px" aria-hidden="true"></i> LIVE EDITOR</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- STANDINGS -->
|
||||
<div class="page" id="page-standings">
|
||||
<div class="scroll">
|
||||
<div class="sec-head">
|
||||
<div class="sec-title">CLASSIFICAÇÃO</div>
|
||||
<div class="sec-sub">Tabela classificativa em tempo real.</div>
|
||||
</div>
|
||||
<div class="toggle-row">
|
||||
<div class="toggle-btn active" onclick="selectToggle(this)">SENIORES</div>
|
||||
<div class="toggle-btn" onclick="selectToggle(this)">JUNIORES</div>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<div class="table-head">
|
||||
<div class="th-pos">Pos</div>
|
||||
<div class="th-logo"></div>
|
||||
<div class="th-name">Clube</div>
|
||||
<div class="th-num">J</div>
|
||||
<div class="th-num">V</div>
|
||||
<div class="th-num">D</div>
|
||||
<div class="th-pts">Pts</div>
|
||||
</div>
|
||||
<div class="st-row leader">
|
||||
<div class="pos-badge first">1</div>
|
||||
<div class="st-logo-cell">⚽</div>
|
||||
<div class="st-name-cell" style="color:var(--brand)">J.U. Mosteiró</div>
|
||||
<div class="st-num-cell">22</div>
|
||||
<div class="st-num-cell st-v">16</div>
|
||||
<div class="st-num-cell st-d">3</div>
|
||||
<div class="st-pts-cell">52</div>
|
||||
</div>
|
||||
<div class="st-row">
|
||||
<div class="pos-badge">2</div>
|
||||
<div class="st-logo-cell">🛡️</div>
|
||||
<div class="st-name-cell">G.D.C. Rio Mau</div>
|
||||
<div class="st-num-cell">22</div>
|
||||
<div class="st-num-cell st-v">13</div>
|
||||
<div class="st-num-cell st-d">5</div>
|
||||
<div class="st-pts-cell">44</div>
|
||||
</div>
|
||||
<div class="st-row">
|
||||
<div class="pos-badge">3</div>
|
||||
<div class="st-logo-cell">⭐</div>
|
||||
<div class="st-name-cell">FC Guilhabreu</div>
|
||||
<div class="st-num-cell">22</div>
|
||||
<div class="st-num-cell st-v">12</div>
|
||||
<div class="st-num-cell st-d">6</div>
|
||||
<div class="st-pts-cell">41</div>
|
||||
</div>
|
||||
<div class="st-row">
|
||||
<div class="pos-badge">4</div>
|
||||
<div class="st-logo-cell">🔵</div>
|
||||
<div class="st-name-cell">SC Matosinhos</div>
|
||||
<div class="st-num-cell">22</div>
|
||||
<div class="st-num-cell st-v">11</div>
|
||||
<div class="st-num-cell st-d">6</div>
|
||||
<div class="st-pts-cell">38</div>
|
||||
</div>
|
||||
<div class="st-row">
|
||||
<div class="pos-badge">5</div>
|
||||
<div class="st-logo-cell">🟡</div>
|
||||
<div class="st-name-cell">AD Canidelo</div>
|
||||
<div class="st-num-cell">22</div>
|
||||
<div class="st-num-cell st-v">10</div>
|
||||
<div class="st-num-cell st-d">8</div>
|
||||
<div class="st-pts-cell">34</div>
|
||||
</div>
|
||||
<div class="st-row">
|
||||
<div class="pos-badge">6</div>
|
||||
<div class="st-logo-cell">🔴</div>
|
||||
<div class="st-name-cell">SC Espinho</div>
|
||||
<div class="st-num-cell">22</div>
|
||||
<div class="st-num-cell st-v">9</div>
|
||||
<div class="st-num-cell st-d">9</div>
|
||||
<div class="st-pts-cell">31</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CLUBS -->
|
||||
<div class="page" id="page-clubs">
|
||||
<div class="scroll">
|
||||
<div class="sec-head">
|
||||
<div class="sec-title">CLUBES</div>
|
||||
<div class="sec-sub">8 clubes na divisão</div>
|
||||
</div>
|
||||
<div class="search-bar">
|
||||
<i class="ti ti-search" aria-hidden="true"></i>
|
||||
<span>Pesquisar clube...</span>
|
||||
</div>
|
||||
<div style="background:var(--bg-surface);border:1px solid var(--border);border-radius:12px;overflow:hidden">
|
||||
<div class="club-row"><div class="club-logo">⚽</div><div class="club-info"><div class="club-name">J.U. Mosteiró</div><div class="club-stad">Campo de Mosteiró</div></div><i class="ti ti-chevron-right" style="font-size:16px;color:var(--text-3)" aria-hidden="true"></i></div>
|
||||
<div class="club-row"><div class="club-logo">🛡️</div><div class="club-info"><div class="club-name">G.D.C. Rio Mau</div><div class="club-stad">Campo de Rio Mau</div></div><i class="ti ti-chevron-right" style="font-size:16px;color:var(--text-3)" aria-hidden="true"></i></div>
|
||||
<div class="club-row"><div class="club-logo">⭐</div><div class="club-info"><div class="club-name">FC Guilhabreu</div><div class="club-stad">Campo de Guilhabreu</div></div><i class="ti ti-chevron-right" style="font-size:16px;color:var(--text-3)" aria-hidden="true"></i></div>
|
||||
<div class="club-row"><div class="club-logo">🔵</div><div class="club-info"><div class="club-name">SC Matosinhos</div><div class="club-stad">Estádio Municipal</div></div><i class="ti ti-chevron-right" style="font-size:16px;color:var(--text-3)" aria-hidden="true"></i></div>
|
||||
<div class="club-row"><div class="club-logo">🟡</div><div class="club-info"><div class="club-name">AD Canidelo</div><div class="club-stad">Campo da AD</div></div><i class="ti ti-chevron-right" style="font-size:16px;color:var(--text-3)" aria-hidden="true"></i></div>
|
||||
<div class="club-row" style="border-bottom:none"><div class="club-logo">🔴</div><div class="club-info"><div class="club-name">SC Espinho</div><div class="club-stad">Estádio de Espinho</div></div><i class="ti ti-chevron-right" style="font-size:16px;color:var(--text-3)" aria-hidden="true"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SCORERS -->
|
||||
<div class="page" id="page-scorers">
|
||||
<div class="scroll">
|
||||
<div class="sec-head">
|
||||
<div class="sec-title">MELHORES MARCADORES</div>
|
||||
<div class="sec-sub">Temporada 2025/26</div>
|
||||
</div>
|
||||
<div class="toggle-row">
|
||||
<div class="toggle-btn active" onclick="selectToggle(this)">SENIORES</div>
|
||||
<div class="toggle-btn" onclick="selectToggle(this)">JUNIORES</div>
|
||||
</div>
|
||||
<div style="background:var(--bg-surface);border:1px solid var(--border);border-radius:12px;overflow:hidden">
|
||||
<div class="scorer-row">
|
||||
<div class="scorer-pos top">1</div>
|
||||
<div><div class="scorer-name">Marco Silva</div><div class="scorer-club">J.U. Mosteiró</div></div>
|
||||
<div style="margin-left:auto;text-align:right"><div class="scorer-goals">18</div><div class="scorer-lbl">GOLOS</div></div>
|
||||
</div>
|
||||
<div class="scorer-row">
|
||||
<div class="scorer-pos top">2</div>
|
||||
<div><div class="scorer-name">João Ferreira</div><div class="scorer-club">FC Guilhabreu</div></div>
|
||||
<div style="margin-left:auto;text-align:right"><div class="scorer-goals">14</div><div class="scorer-lbl">GOLOS</div></div>
|
||||
</div>
|
||||
<div class="scorer-row">
|
||||
<div class="scorer-pos top">3</div>
|
||||
<div><div class="scorer-name">Rui Costa</div><div class="scorer-club">SC Matosinhos</div></div>
|
||||
<div style="margin-left:auto;text-align:right"><div class="scorer-goals">12</div><div class="scorer-lbl">GOLOS</div></div>
|
||||
</div>
|
||||
<div class="scorer-row">
|
||||
<div class="scorer-pos">4</div>
|
||||
<div><div class="scorer-name">Carlos Matos</div><div class="scorer-club">G.D.C. Rio Mau</div></div>
|
||||
<div style="margin-left:auto;text-align:right"><div class="scorer-goals">9</div><div class="scorer-lbl">GOLOS</div></div>
|
||||
</div>
|
||||
<div class="scorer-row" style="border-bottom:none">
|
||||
<div class="scorer-pos">5</div>
|
||||
<div><div class="scorer-name">Pedro Nunes</div><div class="scorer-club">AD Canidelo</div></div>
|
||||
<div style="margin-left:auto;text-align:right"><div class="scorer-goals">8</div><div class="scorer-lbl">GOLOS</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SETTINGS -->
|
||||
<div class="page" id="page-settings">
|
||||
<div class="scroll">
|
||||
<div class="sec-head">
|
||||
<div class="sec-title">DEFINIÇÕES</div>
|
||||
</div>
|
||||
<div class="settings-group">
|
||||
<div class="settings-label">CONTA</div>
|
||||
<div class="settings-block">
|
||||
<div class="settings-item"><i class="ti ti-user" aria-hidden="true"></i><span class="settings-text">Perfil</span><span class="settings-val">Admin</span><i class="ti ti-chevron-right" style="font-size:14px;color:var(--text-3)" aria-hidden="true"></i></div>
|
||||
<div class="settings-item"><i class="ti ti-lock" aria-hidden="true"></i><span class="settings-text">Palavra-passe</span><i class="ti ti-chevron-right" style="font-size:14px;color:var(--text-3)" aria-hidden="true"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="settings-group">
|
||||
<div class="settings-label">SISTEMA</div>
|
||||
<div class="settings-block">
|
||||
<div class="settings-item"><i class="ti ti-bell" aria-hidden="true"></i><span class="settings-text">Notificações</span><span class="settings-val" style="color:var(--brand)">Ativas</span><i class="ti ti-chevron-right" style="font-size:14px;color:var(--text-3)" aria-hidden="true"></i></div>
|
||||
<div class="settings-item"><i class="ti ti-wifi" aria-hidden="true"></i><span class="settings-text">Estado Online</span><span class="settings-val" style="color:var(--brand)">Online</span></div>
|
||||
<div class="settings-item"><i class="ti ti-database" aria-hidden="true"></i><span class="settings-text">Sincronização</span><span class="settings-val">Firebase</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="settings-group">
|
||||
<div class="settings-label">APLICAÇÃO</div>
|
||||
<div class="settings-block">
|
||||
<div class="settings-item"><i class="ti ti-info-circle" aria-hidden="true"></i><span class="settings-text">Versão</span><span class="settings-val">v2.1.0</span></div>
|
||||
<div class="settings-item danger"><i class="ti ti-logout" aria-hidden="true"></i><span class="settings-text">Terminar sessão</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var titles={dashboard:'DASHBOARD',live:'JOGOS LIVE',games:'JORNADAS',standings:'CLASSIFICAÇÃO',clubs:'CLUBES',scorers:'MARCADORES',settings:'DEFINIÇÕES'};
|
||||
var livePages=['dashboard','live','games'];
|
||||
function go(page){
|
||||
document.querySelectorAll('.page').forEach(function(p){p.classList.remove('active')});
|
||||
var el=document.getElementById('page-'+page);
|
||||
if(el)el.classList.add('active');
|
||||
document.getElementById('topTitle').textContent=titles[page]||page.toUpperCase();
|
||||
var lp=document.getElementById('livePill');
|
||||
lp.style.display=livePages.indexOf(page)>-1?'flex':'none';
|
||||
document.querySelectorAll('.d-item').forEach(function(item){
|
||||
item.classList.remove('active');
|
||||
var oc=item.getAttribute('onclick')||'';
|
||||
if(oc.indexOf("'"+page+"'")>-1)item.classList.add('active');
|
||||
});
|
||||
}
|
||||
function openDrawer(){
|
||||
document.getElementById('drawer').classList.add('open');
|
||||
document.getElementById('dBg').classList.add('open');
|
||||
}
|
||||
function closeDrawer(){
|
||||
document.getElementById('drawer').classList.remove('open');
|
||||
document.getElementById('dBg').classList.remove('open');
|
||||
}
|
||||
function selectToggle(el){
|
||||
var parent=el.parentElement;
|
||||
parent.querySelectorAll('.toggle-btn').forEach(function(b){b.classList.remove('active')});
|
||||
el.classList.add('active');
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user