import dash
from dash import dcc, html
import pytz
from datetime import datetime
import random
import dash.dependencies as dd
app = dash.Dash(__name__)
def get_current_time_in_timezone(tz_name):
tz = pytz.timezone(tz_name)
return datetime.now(tz)
timezones = {
"New York": "America/New_York", "Amsterdam": "Europe/Amsterdam",
"Brasilia": "America/Sao_Paulo", "Tokyo": "Asia/Tokyo",
"London": "Europe/London", "Paris": "Europe/Paris",
"Berlin": "Europe/Berlin", "Ottawa": "America/Toronto",
"Moscow": "Europe/Moscow", "Canberra": "Australia/Sydney",
"Budapest": "Europe/Budapest", "Vienna": "Europe/Vienna",
"Madrid": "Europe/Madrid", "Brussels": "Europe/Brussels",
"Buenos Aires": "America/Argentina/Buenos_Aires", "Washington": "America/New_York"
}
# Függvény véletlenszerű gradiens generálásához
def random_gradient():
c1 = f'#{random.randint(0, 0xFFFFFF):06x}'
c2 = f'#{random.randint(0, 0xFFFFFF):06x}'
return f'linear-gradient(135deg, {c1}, {c2})'
app.layout = html.Div([
html.H1("Current Times in World Capitals", style={'textAlign': 'center', 'color': 'white', 'padding': '20px'}),
html.Div([
dcc.Dropdown(
id='city-dropdown',
options=[{'label': city, 'value': city} for city in timezones.keys()],
multi=True,
value=['Budapest', 'Tokyo'],
style={'width': '50%', 'margin': '0 auto', 'color': 'black'}
)
], style={'padding': '20px'}),
html.Div(id='city-cards-container', style={'display': 'flex', 'flexWrap': 'wrap', 'justifyContent': 'center', 'padding': '20px'})
], style={'backgroundColor': '#121212', 'minHeight': '100vh', 'fontFamily': 'sans-serif'})
@app.callback(
dd.Output('city-cards-container', 'children'),
[dd.Input('city-dropdown', 'value')]
)
def update_city_cards(selected_cities):
if not selected_cities:
return []
city_cards = []
for city in selected_cities:
current_time = get_current_time_in_timezone(timezones[city])
formatted_time = current_time.strftime('%H:%M:%S')
date_str = current_time.strftime('%Y-%m-%d')
city_cards.append(
html.Div([
html.H3(city, style={'color': 'white', 'marginBottom': '10px', 'fontSize': '20px'}),
html.P(formatted_time, style={'fontSize': '24px', 'fontWeight': 'bold', 'color': 'white', 'margin': '0'}),
html.P(date_str, style={'fontSize': '14px', 'color': 'rgba(255,255,255,0.8)'})
], style={
'display': 'flex',
'flexDirection': 'column',
'justifyContent': 'center',
'alignItems': 'center',
'width': '180px',
'height': '180px',
'borderRadius': '50%',
'background': random_gradient(), # Itt kapja meg a gradienst
'margin': '15px',
'boxShadow': '0px 10px 20px rgba(0, 0, 0, 0.3)',
'transition': 'transform 0.3s'
})
)
return city_cards
if __name__ == '__main__':
app.run_server(debug=True)