/* ========================================================= */ /* GLOBAL BODY STYLES - APPLIES TO ALL PAGES BY DEFAULT */ /* (This sets the dark background for the main dashboard) */ /* ========================================================= */ html, body { height: 100%; margin: 0; padding: 0; font-family: Arial, sans-serif; /* Updated font-family */ background-color: #1E1E1E; /* Updated background color */ color: white; /* Updated text color */ display: flex; flex-direction: column; min-height: 100vh; /* Make body at least viewport height */ overflow-x: hidden; /* Prevent horizontal scrolling */ overflow-y: auto; /* Allow vertical scrolling on the body if content overflows */ } /* ========================================================= */ /* LOGIN & REGISTER PAGE SPECIFIC STYLES */ /* (These ONLY apply when the tag has class="login-page") */ /* ========================================================= */ body.login-page { justify-content: center; /* Centers content horizontally */ align-items: center; /* Centers content vertically */ min-height: 100vh; /* Ensure it takes full viewport height */ padding: 20px; overflow: hidden; /* Prevent scroll if not needed */ /* Background: Layer the linear gradient OVER the image */ background: linear-gradient(to bottom right, rgba(0, 128, 0, 0.7), rgba(0, 0, 128, 0.7)), /* Semi-transparent Green to Blue gradient */ url('../static/background_image.jpg') no-repeat center center fixed; /* Your background image */ background-size: cover; /* Ensures the image covers the entire background area */ } /* Main wrapper for all login page content (logo, text box, bottom links) */ .login-wrapper { display: flex; flex-direction: column; align-items: center; /* Center items horizontally within the wrapper */ width: 100%; max-width: 450px; /* Limit the width of the login area */ padding: 30px; /* Padding around the entire login content */ } /* Container for the logo */ .logo-container { margin-bottom: 30px; /* Space between logo and the text box below */ } /* Softened circular logo */ .login-logo { width: 300px; height: 300px; border-radius: 50%; /* Make it perfectly circular */ object-fit: cover; /* Ensures image fills the circle */ display: block; /* Allows margin auto for centering */ margin: 0 auto; /* Center the image */ box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4); /* Shadow for the logo */ border: 4px solid rgba(0, 191, 255, 0.3); /* Softened circle effect with a subtle blue border */ } /* Container for all text content, including form, which will have the background box */ .text-content { background-color: rgba(0, 0, 0, 0.4); /* Semi-transparent black background for the box */ border-radius: 15px; /* Rounded corners for the box */ padding: 30px; /* Padding inside the box */ text-align: center; /* Center all text within this container */ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* Subtle shadow for the box */ width: 100%; /* Take full width of the login wrapper */ box-sizing: border-box; /* Include padding in width calculation */ } /* App Title (e.g., "My Crypto Genius") */ h1.app-title { /* Make sure your HTML has

/ color: #00BFFF; / Bright blue, consistent with dashboard headers / font-size: 2.5em; margin-top: 0; margin-bottom: 10px; font-weight: bold; } / Sub-heading (e.g., "Login to Your Account") / .text-content h2 { color: #E0E0E0; / Lighter gray / font-size: 1.6em; margin-bottom: 15px; font-weight: normal; } / Description text (e.g., "Please log in...") / .text-content p.description { / Make sure your HTML has
/ color: #AAAAAA; / Softer gray / font-size: 0.95em; margin-bottom: 25px; / Space before form fields / line-height: 1.5; } / Form group (labels and inputs) / .form-group { margin-bottom: 15px; / Reduced space between form groups / width: 100%; text-align: left; / Keep labels left-aligned for readability / } .form-group label { display: block; margin-bottom: 8px; font-weight: bold; color: #E0E0E0; / Lighter gray for labels / text-align: left; / Ensure label itself is left-aligned / } / Input fields / .form-group input[type="text"], .form-group input[type="password"], .form-group input[type="email"] { width: 100%; / Take full width of parent / padding: 12px 15px; / Adjusted padding / border: 1px solid #6A6A6A; / Slightly lighter border / border-radius: 8px; / More rounded inputs / background-color: #000000; / Black background for inputs / color: white; / White text color / font-size: 1em; box-sizing: border-box; / Include padding in width / } .form-group input[type="text"]:focus, .form-group input[type="password"]:focus, .form-group input[type="email"]:focus { outline: none; border-color: #00BFFF; box-shadow: 0 0 8px rgba(0, 191, 255, 0.5); } / Login button / .login-button { background-color: #007bff; / Vibrant blue / color: white; border: none; padding: 14px 25px; / Adjusted padding / border-radius: 8px; / Rounded button / font-size: 1.1em; font-weight: bold; cursor: pointer; transition: background-color 0.3s ease, transform 0.1s ease; width: 100%; margin-top: 20px; / Space above the button / box-shadow: 0 4px 10px rgba(0, 123, 255, 0.3); / Blue shadow for the button / } .login-button:hover { background-color: #0056b3; transform: translateY(-2px); } / Flash messages for login/register pages / .flashes { list-style: none; padding: 0; margin: -10px 0 20px 0; / Adjust margin / text-align: center; width: 100%; } .flashes li { padding: 10px 15px; margin-bottom: 10px; border-radius: 5px; font-weight: bold; font-size: 0.9em; background-color: rgba(255, 255, 255, 0.1); / Subtle background / color: #E0E0E0; / Default text color / } .flashes .success { background-color: rgba(40, 167, 69, 0.2); color: #90EE90; border: 1px solid rgba(40, 167, 69, 0.4); } .flashes .danger { background-color: rgba(220, 53, 69, 0.2); color: #FFA07A; border: 1px solid rgba(220, 53, 69, 0.4); } .flashes .info { background-color: rgba(23, 162, 184, 0.2); color: #ADD8E6; border: 1px solid rgba(23, 162, 184, 0.4); } / Container for "Don't have an account?" and "Terms & Conditions" links / .bottom-links { width: 100%; / Take full width / text-align: center; / Center the links / margin-top: 25px; / Space above these links / } / Register link / .register-link { font-size: 0.95em; color: #AAAAAA; display: block; / Make it a block to take its own line / margin-bottom: 10px; / Space between register and terms / } .register-link a { color: #00BFFF; text-decoration: none; font-weight: bold; transition: color 0.3s ease; } .register-link a:hover { color: #0099CC; text-decoration: underline; } / Terms & Conditions link for login/register pages / .terms-container { / Renamed from .terms-container.login-terms for simplicity / font-size: 0.85em; color: #888888; } .terms-container a.terms-link { color: #00BFFF; text-decoration: none; transition: color 0.3s ease; } .terms-container a.terms-link:hover { text-decoration: underline; } / Demo Credentials (if you have them) / .demo-creds { font-size: 12px; color: gray; margin-top: 15px; } .demo-creds a { color: #87CEEB; text-decoration: none; } .demo-creds a:hover { text-decoration: underline; } / ========================================================= / / DASHBOARD (index.html) SPECIFIC STYLES / / ========================================================= / / Header styles (overriding global header if needed, but mostly consistent) / header { background-color: #1a1a1a; / Kept from previous Canvas for consistency with dashboard / padding: 15px 20px; border-bottom: 1px solid #333; / Kept from previous Canvas / box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); / Kept from previous Canvas / display: flex; justify-content: space-between; align-items: center; } header h1 { color: #5D5FEF; / Accent color for dashboard title / margin: 0; font-size: 1.8em; font-weight: 700; } .header-right { display: flex; align-items: center; gap: 15px; / Space between elements in header-right / } .user-info { font-size: 0.9em; color: #B0B0B0; } .user-info strong { color: #00BFFF; / Bright blue for username / } .logout-button { background-color: #dc3545; / Red for logout button / color: white; padding: 8px 15px; border: none; border-radius: 5px; text-decoration: none; font-size: 0.9em; transition: background-color 0.3s ease; } .logout-button:hover { background-color: #c82333; } / Main content area for dashboard / main { padding: 20px; max-width: 1200px; margin: 20px auto; display: flex; flex-direction: column; gap: 20px; } / General status (if used) / #general-status { font-size: 14px; color: lightgray; } / Card styles - Primarily for dashboard sections / .card { background-color: #1a1a1a; / Darker background for cards / border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); / Subtle shadow for depth / padding: 20px; / Adjusted padding for consistency / margin: 0; / Removed margin here, use gap in main flex container / } .ohlc-display { display: flex; / Make it a flex container / justify-content: space-around; / Space out the two currency-pair-info blocks / align-items: flex-start; / Align items to the top (or center if you prefer vertical centering) / padding: 10px 20px; margin: 10px 20px; flex-wrap: wrap; / Allow wrapping on smaller screens / gap: 20px; / Space between the two currency-pair-info blocks / } .currency-pair-info { flex: 1; / Allows each currency-pair-info to grow and shrink / min-width: 45%; / Ensures they don't get too small before wrapping / display: flex; flex-direction: column; / Stack symbol info and OHLC group vertically / align-items: flex-start; / Align text to the left within its container / padding-right: 10px; / Add some padding on the right for separator / border-right: 1px solid #4A4A4A; / Separator line between pairs / } / Remove border from the last item / .currency-pair-info:last-child { border-right: none; padding-right: 0; / No right padding on the last item / } .ohlc-group { display: flex; gap: 25px; / Space between OHLC items / } .ohlc-item { font-size: 16px; font-weight: bold; } .ohlc-item span { font-weight: normal; color: #99FFFF; / Light blue for values / } .symbol-info { font-size: 16px; font-weight: bold; color: #00BFFF; margin-bottom: 5px; / Space between symbol/tf and current price / } .symbol-info span { font-weight: normal; color: #99FFFF; } .symbol-info .price-label { margin-left: 20px; / Space between symbol/tf and price label / color: white; } .signal-display { margin: 10px 20px; padding: 15px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.3); } .signal-display h2 { color: #00BFFF; margin-top: 0; margin-bottom: 15px; font-size: 20px; text-align: center; } .signal-grid { display: flex; / This is the key change to make them side-by-side / justify-content: center; / Center the two sections horizontally / gap: 30px; / Increased space between the trend and buy/sell sections / flex-wrap: wrap; / Allow wrapping on smaller screens / align-items: flex-start; / Align items to the top / } .symbol-section { flex: 1; background-color: #3A3A3A; border-radius: 6px; padding: 10px; box-shadow: inset 0 0 5px rgba(0,0,0,0.2); } .symbol-section h3 { text-align: center; color: #00BFFF; margin-top: 0; margin-bottom: 10px; font-size: 18px; } .signal-item { padding: 8px 12px; margin-bottom: 8px; border-radius: 5px; font-size: 14px; font-weight: bold; text-align: center; color: lightgray; / Default / background-color: #4A4A4A; / Default / } / Signal styles / .hot-trend { background-color: orange; color: black; } .cool-trend { background-color: blue; color: white; } .buy-signal { background-color: green; color: white; } .sell-signal { background-color: red; color: white; } .neutral-signal { background-color: #4A4A4A; color: lightgray; } .warning-signal { background-color: #FFA500; color: black; } / New: for insufficient data / .error-signal { background-color: darkred; color: white; } .chart-section { flex-grow: 1; / Allow charts to take up available space / margin: 10px 20px; padding: 15px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.3); display: flex; flex-direction: column; } .chart-section h2 { color: #00BFFF; / Reverted to blue as per your preference / margin-top: 0; margin-bottom: 15px; font-size: 20px; text-align: center; } .chart-tabs { display: flex; justify-content: center; margin-bottom: 20px; } .tab-button { background-color: #4A4A4A; color: white; border: none; padding: 10px 20px; cursor: pointer; font-size: 16px; border-radius: 5px; margin: 0 5px; transition: background-color 0.3s ease; } .tab-button:hover { background-color: #555555; } .tab-button.active { background-color: #00BFFF; color: white; / Kept white as it was in the previous correct version / font-weight: bold; } .tab-content { display: none; / Hidden by default / flex-wrap: wrap; / Allow charts to wrap / gap: 20px; / Space between chart containers / justify-content: center; flex-grow: 1; / Make tab content fill available space / } .tab-content.active { display: flex; / Show active tab content as flex container / } .chart-container { background-color: #000000; / Set to black / border: 1px solid #4A4A4A; border-radius: 8px; padding: 10px; box-shadow: 0 2px 5px rgba(0,0,0,0.3); text-align: center; / Explicitly define width for two columns, accounting for gap / width: calc(50% - 10px); / 50% width minus half of the 20px gap / box-sizing: border-box; / Include padding and border in the width / min-width: 300px; / Minimum width before wrapping / max-width: 600px; / Max width to prevent charts from becoming too wide / display: flex; flex-direction: column; align-items: center; position: relative; / For loading message positioning / } .chart-container h3 { color: white; font-size: 16px; margin-top: 0; margin-bottom: 10px; } / Wrapper for image and loading message / .chart-wrapper { position: relative; width: 100%; padding-bottom: 75%; / 4:3 aspect ratio (height is 75% of width) - adjust as needed / overflow: hidden; } .chart-wrapper img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; / Ensure image fits without cropping / border-radius: 5px; } .chart-loading-message { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: gray; font-size: 18px; text-align: center; display: flex; / Centering text / align-items: center; justify-content: center; width: 100%; height: 100%; background-color: #000000; / Set to black / border-radius: 5px; } .trade-controls { display: flex; justify-content: space-around; align-items: center; background-color: #2E2E2E; padding: 15px 20px; margin: 10px 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.3); margin-bottom: 20px; } .invest-amount, .trade-duration { text-align: center; padding: 10px; border: 1px solid #4A4A4A; border-radius: 5px; background-color: #3A3A3A; flex: 1; margin: 0 10px; } .invest-amount .value, .trade-duration .value { font-size: 28px; font-weight: bold; color: #99FFFF; } .invest-amount .label, .trade-duration .label { font-size: 12px; color: gray; } .buttons { display: flex; gap: 20px; flex: 2; / Make buttons section wider / justify-content: center; } .trade-button { padding: 15px 30px; font-size: 18px; font-weight: bold; border-radius: 8px; border: none; cursor: pointer; color: white; transition: background-color 0.3s ease; min-width: 120px; line-height: 1.2; } .buy-button { background-color: #28a745; / Green / } .buy-button:hover { background-color: #218838; } .sell-button { background-color: #dc3545; / Red / } .sell-button:hover { background-color: #c82333; } / ========================================================= / / TERMS & CONDITIONS STYLES / / ========================================================= / .terms-container { margin-top: 15px; font-size: 0.9em; color: #87CEEB; / Changed to a brighter blue / } .terms-link { color: #87CEEB; / Changed to a brighter blue / text-decoration: none; } .terms-link:hover { text-decoration: underline; } / NEW: CSS for the audio toggle button / .audio-toggle-button { background-color: #6c757d; / A neutral gray / color: white; padding: 8px 15px; border: none; border-radius: 5px; cursor: pointer; font-size: 0.9em; margin-left: 15px; / Space from other header elements / transition: background-color 0.3s ease; } .audio-toggle-button.active { background-color: #28a745; / Green when active (sound on) / } .audio-toggle-button.inactive { background-color: #dc3545; / Red when inactive (sound off) / } / NEW: Styles for the MEX CTA section / .cta-container { text-align: center; margin-top: 40px; padding: 20px; background-color: #1a1a1a; / Match card background / border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); / Match card shadow / } .referral-text { color: #ccc; font-size: 1em; margin-bottom: 20px; / Increased space below the text / } .referral-button { background-color: #5D5FEF; / Your preferred blue / color: white; padding: 12px 25px; font-size: 1.6em; / Increased font size / font-weight: bold; text-decoration: none; border-radius: 8px; transition: background-color 0.3s ease; } .referral-button:hover { background-color: #4344AF; / Darker shade on hover */ }