diff --git a/app/assets/css/app.css b/app/assets/css/app.css index b5ed0f7..3551806 100644 --- a/app/assets/css/app.css +++ b/app/assets/css/app.css @@ -1,5 +1,518 @@ body { background-color: #fff; color: #000; - font-family: sans-serif; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; + margin: 0; + padding: 0; +} + +/* Navigation */ +.main-nav { + background-color: #2d5a27; + color: white; + padding: 1rem 2rem; + display: flex; + justify-content: space-between; + align-items: center; + box-shadow: 0 2px 4px rgba(0,0,0,0.1); +} + +.nav-brand a { + color: white; + text-decoration: none; + font-size: 1.5rem; + font-weight: bold; +} + +.nav-links { + display: flex; + gap: 1.5rem; +} + +.nav-links a { + color: white; + text-decoration: none; + opacity: 0.9; + transition: opacity 0.2s; +} + +.nav-links a:hover { + opacity: 1; +} + +.nav-user { + display: flex; + gap: 1rem; + align-items: center; +} + +.nav-user span { + opacity: 0.8; +} + +.nav-user a { + color: white; + text-decoration: none; + opacity: 0.9; +} + +/* Main Content */ +.main-content { + max-width: 1200px; + margin: 0 auto; + padding: 2rem; +} + +/* Tables */ +table { + width: 100%; + border-collapse: collapse; + margin: 1rem 0; +} + +th, td { + padding: 0.75rem; + text-align: left; + border-bottom: 1px solid #ddd; +} + +th { + background-color: #f5f5f5; + font-weight: 600; +} + +tr:hover { + background-color: #f9f9f9; +} + +/* Links */ +a { + color: #2d5a27; + text-decoration: none; +} + +a:hover { + text-decoration: underline; +} + +/* Headings */ +h1, h2, h3 { + color: #2d5a27; +} + +/* Buttons */ +button, .btn { + background-color: #2d5a27; + color: white; + border: none; + padding: 0.5rem 1rem; + border-radius: 4px; + cursor: pointer; + text-decoration: none; + display: inline-block; +} + +button:hover, .btn:hover { + background-color: #1e3d1a; +} + +/* Forms */ +input, select, textarea { + padding: 0.5rem; + border: 1px solid #ddd; + border-radius: 4px; + font-size: 1rem; +} + +input:focus, select:focus, textarea:focus { + outline: none; + border-color: #2d5a27; +} + +/* Profile Stats Grid */ +.profile-stats { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); + gap: 1rem; + margin: 1rem 0; +} + +.stat { + background: #f9f9f9; + padding: 1rem; + border-radius: 8px; + text-align: center; +} + +.stat .label { + display: block; + font-size: 0.875rem; + color: #666; + margin-bottom: 0.5rem; +} + +.stat .value { + font-size: 1.5rem; + font-weight: bold; + color: #2d5a27; +} + +/* Partnership Table */ +.partnerships-table { + margin: 1rem 0; +} + +.confidence-high { + color: #2d5a27; +} + +.confidence-medium { + color: #c9a227; +} + +.confidence-low { + color: #999; +} + +/* Game Cards */ +.recent-games { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.game { + padding: 1rem; + border-radius: 8px; + border-left: 4px solid #999; +} + +.game.won { + background-color: #e8f5e9; + border-left-color: #2d5a27; +} + +.game.lost { + background-color: #ffebee; + border-left-color: #c62828; +} + +.game-date { + font-size: 0.875rem; + color: #666; + margin-bottom: 0.5rem; +} + +.game-teams { + display: flex; + align-items: center; + gap: 1rem; + font-weight: 500; +} + +.game-score { + font-weight: bold; + color: #333; +} + +.game-partner { + font-size: 0.875rem; + color: #666; + margin-top: 0.5rem; +} + +/* Schedule Styles */ +.schedule-container { + display: flex; + flex-direction: column; + gap: 2rem; +} + +section { + margin-bottom: 2rem; +} + +section h2 { + border-bottom: 2px solid #2d5a27; + padding-bottom: 0.5rem; + margin-bottom: 1rem; +} + +/* Match Cards */ +.matches-list { + display: flex; + flex-direction: column; + gap: 1rem; +} + +.match-card { + display: flex; + align-items: center; + padding: 1rem; + background: #f9f9f9; + border-radius: 8px; + gap: 1rem; +} + +.match-date { + min-width: 120px; + font-size: 0.875rem; + color: #666; +} + +.match-details { + flex: 1; +} + +.teams { + display: flex; + align-items: center; + gap: 1rem; +} + +.team { + padding: 0.5rem 1rem; + border-radius: 4px; +} + +.your-team { + background-color: #e8f5e9; + color: #2d5a27; + font-weight: 500; +} + +.opponent-team { + background-color: #f5f5f5; +} + +.vs { + color: #999; + font-size: 0.875rem; +} + +.match-actions { + min-width: 120px; + text-align: right; +} + +.btn-small { + padding: 0.25rem 0.75rem; + font-size: 0.875rem; +} + +/* Tournament Cards */ +.tournaments-list { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + gap: 1rem; +} + +.tournament-card { + display: flex; + align-items: center; + padding: 1rem; + background: #f9f9f9; + border-radius: 8px; + gap: 1rem; +} + +.tournament-info { + flex: 1; +} + +.tournament-info h3 { + margin: 0 0 0.25rem 0; + font-size: 1rem; +} + +.tournament-format { + margin: 0; + color: #666; + font-size: 0.875rem; +} + +.tournament-status { + min-width: 80px; +} + +.status-badge { + padding: 0.25rem 0.5rem; + border-radius: 12px; + font-size: 0.75rem; + font-weight: 500; + text-transform: uppercase; +} + +.status-badge.active { + background-color: #e8f5e9; + color: #2d5a27; +} + +.status-badge.pending { + background-color: #fff3e0; + color: #e65100; +} + +/* Schedule by Tournament */ +.schedule-by-tournament { + display: flex; + flex-direction: column; + gap: 1.5rem; +} + +.tournament-schedule-item { + background: #f9f9f9; + padding: 1rem; + border-radius: 8px; +} + +.tournament-schedule-item h3 { + margin: 0 0 1rem 0; + font-size: 1.1rem; +} + +.rounds { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; +} + +.round { + display: flex; + flex-direction: column; + padding: 0.5rem 1rem; + background: white; + border-radius: 4px; + border: 1px solid #ddd; +} + +.round-number { + font-weight: 500; +} + +.round-status { + font-size: 0.75rem; + color: #666; + text-transform: capitalize; +} + +/* No matches/tournaments message */ +.no-matches, +.no-tournaments, +.no-schedule { + color: #666; + font-style: italic; + padding: 2rem; + text-align: center; + background: #f9f9f9; + border-radius: 8px; +} + +/* Auth Pages */ +.auth-container { + display: flex; + justify-content: center; + align-items: center; + min-height: calc(100vh - 200px); + padding: 2rem; +} + +.auth-card { + background: white; + padding: 2rem; + border-radius: 12px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + width: 100%; + max-width: 400px; +} + +.auth-card h1 { + text-align: center; + margin-bottom: 1.5rem; + color: #2d5a27; +} + +.form-group { + margin-bottom: 1.25rem; +} + +.form-group label { + display: block; + margin-bottom: 0.5rem; + font-weight: 500; + color: #333; +} + +.form-group input[type="email"], +.form-group input[type="password"], +.form-group input[type="text"] { + width: 100%; + padding: 0.75rem; + border: 1px solid #ddd; + border-radius: 6px; + font-size: 1rem; + box-sizing: border-box; +} + +.form-group input:focus { + outline: none; + border-color: #2d5a27; + box-shadow: 0 0 0 2px rgba(45, 90, 39, 0.2); +} + +.remember-me label { + display: flex; + align-items: center; + gap: 0.5rem; + font-weight: normal; + cursor: pointer; +} + +.btn-block { + width: 100%; + padding: 0.75rem; + font-size: 1rem; + margin-top: 0.5rem; +} + +.btn-primary { + background-color: #2d5a27; + color: white; + border: none; + border-radius: 6px; + cursor: pointer; + transition: background-color 0.2s; +} + +.btn-primary:hover { + background-color: #1e3d1a; +} + +.auth-links { + margin-top: 1.5rem; + text-align: center; + font-size: 0.9rem; +} + +.auth-links p { + margin: 0.5rem 0; +} + +/* Alerts */ +.alert { + padding: 1rem; + border-radius: 6px; + margin-bottom: 1rem; +} + +.alert-error { + background-color: #ffebee; + color: #c62828; + border: 1px solid #ef9a9a; +} + +.alert-success { + background-color: #e8f5e9; + color: #2d5a27; + border: 1px solid #a5d6a7; } diff --git a/app/templates/layouts/app.html.erb b/app/templates/layouts/app.html.erb index ef1b667..534783f 100644 --- a/app/templates/layouts/app.html.erb +++ b/app/templates/layouts/app.html.erb @@ -3,12 +3,38 @@
-