diff --git a/assets/css/index.css b/assets/css/index.css index 77b6fa8..cea7b03 100644 --- a/assets/css/index.css +++ b/assets/css/index.css @@ -130,3 +130,43 @@ body { 70% { transform: scale(1.2); opacity: 1; } 100% { transform: scale(0.95); opacity: 0.7; } } + +@media (max-width: 768px) { + .carousel-content { + height: 400px !important; + padding: 20px !important; + } + .display-3 { + font-size: 1.8rem !important; + } + .lead { + font-size: 1rem !important; + } + .btn-lg { + padding: 10px 20px !important; + font-size: 14px !important; + } + .market-section h2 { + font-size: 1.5rem; + } + .col-md-3 { + width: 50% !important; + flex: 0 0 auto; + } + .coin-card .card-body { + padding: 15px !important; + } + .price-display { + font-size: 1.2rem !important; + } + .icon-box { + width: 50px; + height: 50px; + } + .icon-box i { + font-size: 1.5rem !important; + } + .why-us h2 { + font-size: 1.8rem !important; + } +} diff --git a/assets/css/style.css b/assets/css/style.css index 9306bdf..64a5780 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -3,22 +3,78 @@ --bg: #0b0e11; --surface: #1e2329; --text: #eaecef; - --text-muted: #9ba3af; /* Improved contrast from #888888 */ + --text-muted: #9ba3af; --border: #2b3139; --success: #26a69a; --danger: #ef5350; + --warning: #f0b90b; } - body { background-color: var(--bg); color: var(--text); - font-family: 'Inter', system-ui, -apple-system, sans-serif; + font-family: 'Noto Sans SC', 'Inter', system-ui, -apple-system, sans-serif; margin: 0; padding: 0; line-height: 1.5; } +/* Background Utilities */ +.bg-surface { background-color: var(--surface) !important; } +.bg-black { background-color: #000000 !important; } +.bg-dark { background-color: var(--bg) !important; } + +/* Border Utilities */ +.border-secondary { border-color: var(--border) !important; } + +/* Text Utilities */ +.text-white-50 { color: rgba(255, 255, 255, 0.5) !important; } +.text-primary { color: var(--primary) !important; } +.text-warning { color: var(--warning) !important; } + +/* Card Overrides */ +.card { + background-color: var(--surface); + border-color: var(--border); +} + +.card-header { + background-color: rgba(0, 0, 0, 0.2); + border-bottom: 1px solid var(--border); +} + +/* List Group Overrides */ +.list-group-item { + background-color: transparent; + border-color: var(--border); + color: var(--text); +} + +.list-group-item-action:hover { + background-color: rgba(255, 255, 255, 0.05); + color: var(--primary); +} + +/* Form Overrides */ +.form-control, .form-select { + background-color: #000000; + border-color: var(--border); + color: #ffffff; +} + +.form-control:focus, .form-select:focus { + background-color: #121212; + border-color: var(--primary); + color: #ffffff; + box-shadow: 0 0 0 0.25rem rgba(0, 98, 255, 0.25); +} + +/* Table Overrides */ +.table-dark { + --bs-table-bg: var(--surface); + --bs-table-border-color: var(--border); +} + * { box-sizing: border-box; } @@ -65,12 +121,54 @@ a:hover { padding: 80px 0; } -/* Auth related */ -.auth-container { - max-width: 440px; - margin: 80px auto; - padding: 40px; - background: var(--surface); - border: 1px solid var(--border); - border-radius: 8px; +/* Mobile Enhancements */ +@media (max-width: 768px) { + .container { + padding-left: 15px; + padding-right: 15px; + } + .display-3 { + font-size: 2.5rem; + } + .display-4 { + font-size: 2rem; + } + .card { + border-radius: 12px !important; + } + .btn { + padding: 12px 20px; + border-radius: 10px; + } + header { + height: 60px; + padding: 0 15px; + } + .logo-text { + font-size: 20px; + } +} + +/* Custom Scrollbar */ +::-webkit-scrollbar { + width: 6px; + height: 6px; +} +::-webkit-scrollbar-track { + background: var(--bg); +} +::-webkit-scrollbar-thumb { + background: var(--border); + border-radius: 10px; +} +::-webkit-scrollbar-thumb:hover { + background: var(--text-muted); +} + +.shadow-primary { + box-shadow: 0 8px 20px rgba(0, 98, 255, 0.3) !important; +} + +.transition-all { + transition: all 0.3s ease; } diff --git a/assets/css/terminal.css b/assets/css/terminal.css index f7ce835..f065c71 100644 --- a/assets/css/terminal.css +++ b/assets/css/terminal.css @@ -12,13 +12,44 @@ --orderbook-width: 300px; } +/* Global Terminal Layout */ .terminal-container { display: flex; flex-direction: column; - height: 100vh; + min-height: calc(100vh - 70px); + height: auto; background: var(--term-bg); color: var(--term-text); - overflow: hidden; +} + +.terminal-main { + display: flex; + flex: 1; + min-height: calc(100vh - 70px); +} + +.terminal-sidebar { + width: var(--sidebar-width); + border-right: 1px solid var(--term-border); + display: flex; + flex-direction: column; + background: var(--term-surface); + height: 100%; +} + +.terminal-content { + flex: 1; + display: flex; + flex-direction: column; + border-right: 1px solid var(--term-border); + background: var(--term-bg); +} + +.terminal-right-sidebar { + width: var(--orderbook-width); + border-left: 1px solid var(--term-border); + background: var(--term-surface); + height: 100%; } .sidebar-tabs { @@ -80,29 +111,45 @@ } .content-header { - height: 50px; + height: 65px; border-bottom: 1px solid var(--term-border); display: flex; align-items: center; - padding: 0 15px; - gap: 20px; + padding: 0 20px; + gap: 30px; background: var(--term-surface); } -.terminal-sidebar { - width: var(--sidebar-width); - border-right: 1px solid var(--term-border); - display: flex; - flex-direction: column; - background: var(--term-surface); +.kline-container { + flex: 1; + min-height: 500px; /* Increased height for better preview */ + background: #000; + position: relative; + border-bottom: 1px solid var(--term-border); + padding: 5px 0; /* Added a bit of padding to avoid edges */ } -.terminal-right-sidebar { - width: var(--orderbook-width); - border-left: 1px solid var(--term-border); +.trading-panels { + padding: 15px 20px; background: var(--term-surface); + border-bottom: 1px solid var(--term-border); } +.binary-order-panel .cycle-grid { + display: grid; + grid-template-columns: repeat(5, 1fr); + gap: 10px; + margin-bottom: 15px; +} + +.cycle-btn { + min-height: 55px; + padding: 8px 4px; + /* ... existing styles ... */ +} + + + .sidebar-search input { background: #0b0e11; @@ -255,20 +302,169 @@ border-bottom: 2px solid var(--term-primary); } -.terminal-main { - display: flex; - flex: 1; - overflow: hidden; +/* Mobile Responsive Adjustments */ +@media (max-width: 768px) { + .terminal-main { + flex-direction: column; + height: auto; + overflow-y: auto; + padding-bottom: 120px; /* Ensure records are not covered by bottom nav */ + } + + .terminal-sidebar { + position: fixed; + left: -100%; + top: 0; + width: 80%; + height: 100%; + z-index: 1050; + transition: left 0.3s ease; + box-shadow: 10px 0 20px rgba(0,0,0,0.5); + } + + .terminal-sidebar.active { + left: 0; + } + + .terminal-sidebar-overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0,0,0,0.7); + z-index: 1040; + display: none; + } + + .terminal-sidebar-overlay.active { + display: block; + } + + .terminal-right-sidebar { + display: none; /* Hide order book on mobile by default to save space */ + } + + .terminal-content { + width: 100%; + border-right: none; + } + + .content-header { + padding: 10px; + gap: 10px; + height: auto; + flex-wrap: wrap; + } + + .header-pair { + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 5px; + } + + .header-stat { + font-size: 11px; + } + + .kline-container { + min-height: 350px; + height: 350px; + } + + .trading-panels { + padding: 10px; + } + + .cycle-grid { + grid-template-columns: repeat(3, 1fr); + } + + .order-history { + height: auto; + min-height: 400px; + } + + .sidebar-tabs { + display: none; /* We will use a different top switcher on mobile */ + } + + /* Mobile Top Switcher */ + .mobile-type-switcher { + display: flex; + background: var(--term-surface); + padding: 5px; + gap: 5px; + border-bottom: 1px solid var(--term-border); + } + + .mobile-type-switcher a { + flex: 1; + text-align: center; + padding: 8px 0; + font-size: 12px; + color: var(--term-muted); + text-decoration: none; + border-radius: 4px; + background: rgba(255,255,255,0.03); + } + + .mobile-type-switcher a.active { + background: var(--term-primary); + color: #fff; + } + + .mobile-pair-toggle { + display: flex; + align-items: center; + gap: 10px; + cursor: pointer; + } + + /* Make trading panels more mobile-friendly */ + .order-form-container .col-6 { + width: 100%; /* Stack Buy/Sell on very small screens or keep as is? */ + } + + @media (max-width: 576px) { + .order-form-container .col-6 { + width: 100%; + } + .binary-order-panel .col-6 { + width: 100%; + } + .binary-order-panel .btn-buy-sell { + margin-bottom: 10px; + } + } + + .btn-buy-sell { + font-size: 18px !important; + padding: 15px !important; + text-transform: uppercase; + letter-spacing: 1px; + } + + .cycle-grid { + gap: 5px; + } + + .cycle-btn { + padding: 8px 2px; + } } -.terminal-sidebar { - width: var(--sidebar-width); - border-right: 1px solid var(--term-border); - display: flex; - flex-direction: column; - background: var(--term-surface); +@media (min-width: 769px) { + .mobile-type-switcher { + display: none; + } } + + + .sidebar-search { padding: 12px; border-bottom: 1px solid var(--term-border); @@ -328,12 +524,7 @@ font-weight: 500; } -.terminal-content { - flex: 1; - display: flex; - flex-direction: column; - border-right: 1px solid var(--term-border); -} + .content-header { height: 60px; @@ -346,22 +537,29 @@ .kline-container { flex: 1; - min-height: 400px; + min-height: 450px; background: #000; + position: relative; + border-bottom: 1px solid var(--term-border); } .trading-panels { - padding: 20px; + padding: 15px 20px; background: var(--term-surface); } -.order-history { - flex: 1; - overflow-y: auto; - scrollbar-width: none; +.terminal-content { + display: flex; + flex-direction: column; + height: 100%; + overflow: hidden; } -.order-history::-webkit-scrollbar { - display: none; + +.order-history { + height: 350px; + border-top: 1px solid var(--term-border); + background: var(--term-surface); + overflow-y: auto; } /* Binary Order Panel Improvements */ @@ -389,6 +587,8 @@ align-items: center; justify-content: center; gap: 2px; + min-height: 55px; + cursor: pointer; } .cycle-btn:hover { @@ -460,7 +660,7 @@ } .order-history { - height: 300px; /* Fixed height for scrollable area */ + height: 450px; /* Increased height as requested */ border-top: 1px solid var(--term-border); background: var(--term-surface); } @@ -573,7 +773,5 @@ color: #5e6673; } -.terminal-main { - height: calc(100vh - var(--header-height)); -} + diff --git a/assets/pasted-20260216-073240-3f7af956.png b/assets/pasted-20260216-073240-3f7af956.png new file mode 100644 index 0000000..6e0a4ee Binary files /dev/null and b/assets/pasted-20260216-073240-3f7af956.png differ diff --git a/assets/pasted-20260216-074521-ef811661.png b/assets/pasted-20260216-074521-ef811661.png new file mode 100644 index 0000000..90a3b0b Binary files /dev/null and b/assets/pasted-20260216-074521-ef811661.png differ diff --git a/assets/pasted-20260216-075108-e35a11f4.png b/assets/pasted-20260216-075108-e35a11f4.png new file mode 100644 index 0000000..5e1cd2d Binary files /dev/null and b/assets/pasted-20260216-075108-e35a11f4.png differ diff --git a/auth/login.php b/auth/login.php index 7470042..573fa36 100644 --- a/auth/login.php +++ b/auth/login.php @@ -48,7 +48,7 @@ include __DIR__ . '/../includes/header.php'; BYRO
Welcome back to Byro Exchange
+= __('welcome_back') ?>
@@ -59,14 +59,14 @@ include __DIR__ . '/../includes/header.php'; diff --git a/auth/register.php b/auth/register.php index c2957dc..e9b5bf6 100644 --- a/auth/register.php +++ b/auth/register.php @@ -81,7 +81,7 @@ include __DIR__ . '/../includes/header.php'; BYROJoin the most secure digital asset exchange
+= __('join_secure') ?>
@@ -126,7 +126,7 @@ include __DIR__ . '/../includes/header.php';