uppal/3pmonitor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mobile support

Browse Source
This commit is contained in:
Junaid Saeed Uppal
2026-02-22 20:41:47 +05:00
parent 46ffb3b61d
commit 9239fd7a05
1 changed files with 86 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
static/index.html
View File

@@ -451,42 +451,6 @@
box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
/* ── Mobile Responsive ── */
@media (max-width: 768px) {
.header {
flex-wrap: wrap; gap: 6px;
padding: 8px 12px;
}
.header h1 { font-size: 14px; }
.header .round-info { font-size: 12px; }
.grid {
grid-template-columns: 1fr;
height: auto;
}
.panel {
padding: 10px;
overflow-y: visible;
}
.chairs { gap: 4px; }
.chair { padding: 8px 4px; }
.chair-bet { font-size: 15px; }
.chair-label { font-size: 11px; }
.bets-feed { max-height: 180px; }
.bet-user { max-width: 90px; }
.hc-grid { grid-template-columns: 1fr; }
.history-table { font-size: 11px; display: block; overflow-x: auto; white-space: nowrap; }
.history-table th, .history-table td { padding: 3px 4px; }
.modal { width: 95vw; max-height: 90vh; padding: 14px; border-radius: 8px; }
.modal-stats { grid-template-columns: repeat(2, 1fr); }
.modal-header { gap: 8px; }
.modal-name { font-size: 14px; }
}
.modal-close {
float: right; background: none; border: none; color: var(--text2);
font-size: 20px; cursor: pointer; padding: 0 4px;
@@ -539,6 +503,92 @@
.modal-bets-table td { padding: 3px 6px; border-bottom: 1px solid #2d314830; }
.bet-won { color: var(--green); }
.bet-lost { color: var(--red); }
/* ── Mobile ── */
@media (max-width: 768px) {
.header {
flex-wrap: wrap; gap: 6px; padding: 8px 12px;
}
.header h1 { font-size: 13px; order: 1; }
.header .round-info { font-size: 11px; order: 2; }
.header .status { order: 3; width: 100%; justify-content: flex-end; }
.grid {
grid-template-columns: 1fr;
height: auto;
min-height: 100vh;
}
.panel {
padding: 10px;
overflow-y: visible;
}
.timer { font-size: 22px; }
.total-pot { font-size: 11px; }
.total-pot span { font-size: 13px; }
.chairs { gap: 4px; }
.chair { padding: 8px 4px; border-radius: 6px; }
.chair-bet { font-size: 14px; }
.chair-label { font-size: 11px; }
.chair-rank { font-size: 8px; }
.chair-predict { font-size: 7px; }
.top-bettors .tb-row { padding: 3px 4px; font-size: 11px; }
.tb-name { font-size: 11px; }
.tb-chip { font-size: 9px; padding: 1px 3px; }
.tb-total { font-size: 11px; min-width: 45px; }
.whale-trend-row { gap: 4px; font-size: 11px; }
.whale-trend-chair { font-size: 13px; min-width: 18px; }
.whale-trend-bar-bg { height: 16px; }
.whale-trend-pct { font-size: 11px; min-width: 34px; }
.whale-trend-amt { font-size: 9px; min-width: 40px; }
.bets-feed { max-height: 200px; font-size: 11px; }
.bet-user { max-width: 80px; font-size: 11px; }
.bet-amount { font-size: 11px; }
.bet-session { font-size: 9px; min-width: 40px; }
.lb-row { padding: 4px 2px; font-size: 11px; }
.lb-pnl { min-width: 50px; font-size: 11px; }
.hc-grid { grid-template-columns: 1fr; gap: 6px; }
.hc-player { font-size: 10px; }
.hc-name { font-size: 10px; }
.chart-container { height: 100px; }
.dist-row { gap: 4px; }
.dist-item { padding: 6px 2px; }
.dist-value { font-size: 16px; }
.dist-label { font-size: 9px; }
.dist-pct { font-size: 9px; }
.history-table { font-size: 10px; }
.history-table th, .history-table td { padding: 3px 3px; }
.hand-cards { font-size: 13px; }
.hand-tag { font-size: 8px; padding: 0px 3px; }
.history-hand { font-size: 10px; }
.history-pot { font-size: 8px; }
.biggest-winner { padding: 8px 10px; gap: 8px; }
.bw-crown { font-size: 16px; }
.bw-name { font-size: 12px; }
.bw-stats { font-size: 10px; }
.bw-pnl { font-size: 14px; }
.modal { width: 95vw; max-height: 90vh; padding: 14px; border-radius: 8px; }
.modal-stats { grid-template-columns: repeat(2, 1fr); gap: 6px; }
.modal-stat { padding: 6px; }
.modal-stat-value { font-size: 14px; }
.modal-header { gap: 8px; }
.modal-name { font-size: 14px; }
.modal-avatar { width: 40px; height: 40px; }
.modal-bets-table { font-size: 10px; }
.panel-title { font-size: 9px; margin-bottom: 8px; }
}
</style>
</head>
<body>