millaguie/trenes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Initial commit - Train tracking system
Some checks failed
Auto Tag on Merge to Main / auto-tag (push) Successful in 27s
Details
CI - Lint and Build / lint-backend (push) Failing after 30s
Details
CI - Lint and Build / lint-frontend (push) Failing after 2s
Details
CI - Lint and Build / build-frontend (push) Has been skipped
Details
CI - Lint and Build / docker-build-test (push) Has been skipped
Details

Browse Source 
Complete real-time train tracking system for Spanish railways (Renfe/Cercanías):

- Backend API (Node.js/Express) with GTFS-RT polling workers
- Frontend dashboard (React/Vite) with Leaflet maps
- Real-time updates via Socket.io WebSocket
- PostgreSQL/PostGIS database with Flyway migrations
- Redis caching layer
- Docker Compose configuration for development and production
- Gitea CI/CD workflows (lint, auto-tag, release)
- Production deployment with nginx + Let's Encrypt SSL

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Millaguie
2025-11-28 00:21:15 +01:00
commit 34c0cb50c7
64 changed files with 15577 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

857
frontend/src/styles/index.css Normal file
View File

@@ -0,0 +1,857 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow: hidden;
}
#root {
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
}
.app {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.header {
height: 60px;
background: #1a1a2e;
color: white;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
z-index: 1000;
}
.header-title {
font-size: 1.5rem;
font-weight: bold;
display: flex;
align-items: center;
gap: 10px;
}
.header-stats {
display: flex;
gap: 20px;
font-size: 0.9rem;
}
.stat {
display: flex;
flex-direction: column;
align-items: flex-end;
}
.stat-label {
opacity: 0.7;
font-size: 0.8rem;
}
.stat-value {
font-weight: bold;
font-size: 1.1rem;
}
.main-content {
flex: 1;
display: flex;
position: relative;
overflow: hidden;
}
.map-container {
flex: 1;
position: relative;
}
.leaflet-container {
width: 100%;
height: 100%;
}
.sidebar {
width: 350px;
background: white;
border-left: 1px solid #e0e0e0;
display: flex;
flex-direction: column;
overflow: hidden;
}
.sidebar-header {
padding: 15px 20px;
border-bottom: 1px solid #e0e0e0;
background: #f5f5f5;
}
.sidebar-header h2 {
font-size: 1.2rem;
margin-bottom: 5px;
}
.sidebar-subtitle {
font-size: 0.85rem;
color: #666;
}
.sidebar-content {
flex: 1;
overflow-y: auto;
padding: 20px;
}
.train-info {
display: flex;
flex-direction: column;
gap: 15px;
}
.info-section {
background: #f9f9f9;
padding: 15px;
border-radius: 8px;
border: 1px solid #e0e0e0;
}
.info-section h3 {
font-size: 1rem;
margin-bottom: 10px;
color: #333;
}
.info-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.info-item {
display: flex;
flex-direction: column;
}
.info-label {
font-size: 0.75rem;
color: #666;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.info-value {
font-size: 1rem;
font-weight: 500;
color: #333;
margin-top: 2px;
}
.timeline-container {
position: absolute;
bottom: 20px;
left: 20px;
right: 370px;
background: white;
border-radius: 12px;
padding: 20px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
z-index: 1000;
}
.timeline-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}
.timeline-title {
font-size: 1rem;
font-weight: bold;
color: #333;
}
.timeline-controls {
display: flex;
gap: 10px;
}
.timeline-btn {
background: #1a1a2e;
color: white;
border: none;
border-radius: 6px;
padding: 8px 16px;
cursor: pointer;
font-size: 0.9rem;
display: flex;
align-items: center;
gap: 5px;
transition: background 0.2s;
}
.timeline-btn:hover {
background: #2a2a3e;
}
.timeline-btn:disabled {
background: #ccc;
cursor: not-allowed;
}
.timeline-slider {
width: 100%;
height: 6px;
border-radius: 3px;
background: #e0e0e0;
outline: none;
-webkit-appearance: none;
appearance: none;
cursor: pointer;
}
.timeline-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 18px;
height: 18px;
border-radius: 50%;
background: #1a1a2e;
cursor: pointer;
}
.timeline-slider::-moz-range-thumb {
width: 18px;
height: 18px;
border-radius: 50%;
background: #1a1a2e;
cursor: pointer;
border: none;
}
.timeline-time {
text-align: center;
margin-top: 10px;
font-size: 0.9rem;
color: #666;
}
.loading {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
font-size: 1.2rem;
color: #666;
}
.error {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
flex-direction: column;
gap: 10px;
color: #d32f2f;
}
.empty-state {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
flex-direction: column;
gap: 10px;
color: #666;
font-size: 1rem;
}
.status-indicator {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
margin-right: 8px;
}
.status-indicator.active {
background: #4caf50;
box-shadow: 0 0 4px #4caf50;
}
.status-indicator.inactive {
background: #9e9e9e;
}
.status-indicator.timeline {
background: #ff9800;
box-shadow: 0 0 4px #ff9800;
}
/* Timeline Styles */
.timeline-realtime {
display: flex;
justify-content: space-between;
align-items: center;
}
.timeline-realtime-info {
display: flex;
align-items: center;
gap: 8px;
color: #666;
}
.timeline-title-section {
display: flex;
align-items: center;
gap: 10px;
}
.timeline-btn-primary {
background: #ff9800;
}
.timeline-btn-primary:hover {
background: #f57c00;
}
.timeline-btn-close {
background: transparent;
color: #666;
padding: 6px;
}
.timeline-btn-close:hover {
background: #f0f0f0;
color: #333;
}
.timeline-btn-play {
background: #4caf50;
padding: 8px 20px;
}
.timeline-btn-play:hover {
background: #43a047;
}
.timeline-slider-container {
position: relative;
margin: 15px 0;
}
.timeline-progress {
position: absolute;
top: 0;
left: 0;
height: 6px;
background: #ff9800;
border-radius: 3px;
pointer-events: none;
}
.timeline-time-display {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.85rem;
}
.timeline-time-label {
color: #999;
}
.timeline-time-current {
font-size: 1.1rem;
font-weight: bold;
color: #ff9800;
}
.timeline-speed {
display: flex;
align-items: center;
gap: 8px;
margin-left: 10px;
padding-left: 10px;
border-left: 1px solid #e0e0e0;
}
.timeline-speed span {
font-size: 0.85rem;
color: #666;
}
.timeline-speed select {
padding: 4px 8px;
border: 1px solid #e0e0e0;
border-radius: 4px;
background: white;
font-size: 0.85rem;
cursor: pointer;
}
.timeline-loading {
animation: spin 1s linear infinite;
}
.timeline-loading-message {
text-align: center;
color: #999;
font-size: 0.85rem;
margin-top: 10px;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Navigation */
.nav-tabs {
display: flex;
gap: 5px;
background: rgba(255, 255, 255, 0.1);
padding: 4px;
border-radius: 8px;
}
.nav-tab {
background: transparent;
border: none;
color: rgba(255, 255, 255, 0.7);
padding: 8px 16px;
border-radius: 6px;
cursor: pointer;
font-size: 0.9rem;
display: flex;
align-items: center;
gap: 6px;
transition: all 0.2s;
}
.nav-tab:hover {
background: rgba(255, 255, 255, 0.1);
color: white;
}
.nav-tab.active {
background: white;
color: #1a1a2e;
}
/* Dashboard Styles */
.dashboard {
flex: 1;
overflow-y: auto;
padding: 20px;
background: #f5f6fa;
}
.dashboard-loading,
.dashboard-error {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
gap: 15px;
color: #666;
}
.dashboard-error {
color: #E74C3C;
}
.spinner {
width: 40px;
height: 40px;
border: 3px solid #e0e0e0;
border-top-color: #3498DB;
border-radius: 50%;
animation: spin 1s linear infinite;
}
/* Time Control */
.time-control {
background: white;
border-radius: 12px;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.time-control-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
flex-wrap: wrap;
gap: 15px;
}
.time-display {
display: flex;
align-items: center;
gap: 10px;
font-size: 1.1rem;
color: #333;
}
.current-time {
font-weight: 600;
}
.live-badge {
display: flex;
align-items: center;
gap: 5px;
background: #E74C3C;
color: white;
padding: 4px 10px;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 600;
animation: pulse-live 2s ease-in-out infinite;
}
@keyframes pulse-live {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
.time-buttons {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.time-buttons button {
background: #f0f0f0;
border: none;
padding: 8px 12px;
border-radius: 6px;
cursor: pointer;
font-size: 0.85rem;
display: flex;
align-items: center;
gap: 4px;
transition: all 0.2s;
color: #333;
}
.time-buttons button:hover {
background: #e0e0e0;
}
.time-buttons .live-button {
background: #E74C3C;
color: white;
}
.time-buttons .live-button:hover {
background: #c0392b;
}
.time-buttons .live-button.active {
background: #27AE60;
}
.time-slider-container {
margin-top: 10px;
}
.time-slider {
width: 100%;
height: 8px;
border-radius: 4px;
background: #e0e0e0;
outline: none;
-webkit-appearance: none;
cursor: pointer;
}
.time-slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: #3498DB;
cursor: pointer;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.time-slider::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: #3498DB;
cursor: pointer;
border: none;
}
.time-range-labels {
display: flex;
justify-content: space-between;
font-size: 0.75rem;
color: #999;
margin-top: 5px;
}
/* Stats Row */
.stats-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
margin-bottom: 20px;
}
.stat-card {
background: white;
border-radius: 12px;
padding: 20px;
display: flex;
align-items: flex-start;
gap: 15px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.stat-card-icon {
width: 50px;
height: 50px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.stat-card-content {
display: flex;
flex-direction: column;
}
.stat-card-label {
font-size: 0.85rem;
color: #666;
}
.stat-card-value {
font-size: 1.8rem;
font-weight: 700;
color: #333;
line-height: 1.2;
}
.stat-card-subvalue {
font-size: 0.75rem;
color: #999;
}
.stat-card-trend {
font-size: 0.85rem;
font-weight: 600;
}
.stat-card-trend.positive {
color: #27AE60;
}
.stat-card-trend.negative {
color: #E74C3C;
}
/* Dashboard Grid */
.dashboard-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 20px;
}
.dashboard-card {
background: white;
border-radius: 12px;
padding: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.dashboard-card.wide {
grid-column: 1 / -1;
}
.dashboard-card h3 {
font-size: 1rem;
color: #333;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 8px;
}
/* Progress Bars */
.progress-bar-container {
margin-bottom: 12px;
}
.progress-bar-header {
display: flex;
justify-content: space-between;
margin-bottom: 5px;
}
.progress-bar-label {
font-size: 0.85rem;
color: #666;
}
.progress-bar-value {
font-size: 0.85rem;
font-weight: 600;
color: #333;
}
.progress-bar-track {
height: 8px;
background: #e0e0e0;
border-radius: 4px;
overflow: hidden;
}
.progress-bar-fill {
height: 100%;
border-radius: 4px;
transition: width 0.3s ease;
}
/* Donut Chart */
.donut-chart {
display: flex;
align-items: center;
gap: 20px;
}
.donut-chart svg {
width: 120px;
height: 120px;
flex-shrink: 0;
}
.donut-legend {
flex: 1;
}
.donut-legend-item {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
font-size: 0.85rem;
}
.donut-legend-color {
width: 12px;
height: 12px;
border-radius: 3px;
flex-shrink: 0;
}
.donut-legend-label {
flex: 1;
color: #666;
}
.donut-legend-value {
font-weight: 600;
color: #333;
}
/* Timeline Charts */
.timeline-charts {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.timeline-chart {
text-align: center;
}
.timeline-chart .chart-label {
font-size: 0.8rem;
color: #666;
margin-bottom: 5px;
display: block;
}
/* Lines Table */
.lines-table {
font-size: 0.85rem;
}
.lines-table-header {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
padding: 10px 0;
border-bottom: 2px solid #e0e0e0;
font-weight: 600;
color: #666;
}
.lines-table-row {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
padding: 10px 0;
border-bottom: 1px solid #f0f0f0;
align-items: center;
}
.lines-table-row:hover {
background: #f9f9f9;
}
.line-code {
font-weight: 600;
color: #3498DB;
}
.line-nucleo {
font-weight: 400;
color: #999;
font-size: 0.8em;
}
/* Responsive */
@media (max-width: 768px) {
.sidebar {
position: absolute;
right: 0;
top: 0;
bottom: 0;
z-index: 1001;
transform: translateX(100%);
transition: transform 0.3s;
}
.sidebar.open {
transform: translateX(0);
}
.timeline-container {
right: 20px;
}
}