intialized dash app

app.py

@@ -0,0 +1,11 @@
+from dash import Dash
+from index import layout, register_callbacks
+
+app = Dash(__name__, suppress_callback_exceptions=True)
+app.layout = layout
+
+# Register callbacks
+register_callbacks(app)
+
+if __name__ == "__main__":
+ app.run_server(debug=True)

assets/navbar.css

@@ -0,0 +1,24 @@
+/* assets/styles.css */
+.navbar {
+ background-color: #333;
+ padding: 10px;
+}
+
+.nav-link {
+ color: white;
+ margin-right: 15px;
+ text-decoration: none;
+}
+
+.nav-link:hover {
+ text-decoration: underline;
+}
+
+.home-content, .explorer-content {
+ padding: 20px;
+}
+
+.logo {
+ max-width: 200px;
+ margin-top: 20px;
+}

index.py

@@ -0,0 +1,22 @@
+from dash import dcc, html
+from dash.dependencies import Input, Output
+from pages import home, explorer, comparison, team_builder
+
+def layout():
+ return html.Div([
+ dcc.Location(id='url', refresh=False),
+ html.Div(id='page-content')
+ ])
+
+def register_callbacks(app):
+ @app.callback(Output('page-content', 'children'),
+ [Input('url', 'pathname')])
+ def display_page(pathname):
+ if pathname == '/explorer':
+ return explorer.layout()
+ elif pathname == '/comparison':
+ return comparison.layout()
+ elif pathname == '/team-builder':
+ return team_builder.layout()
+ else:
+ return home.layout()

pages/home.py

@@ -0,0 +1,15 @@
+from dash import html
+from pages.utils import navbar
+
+def layout():
+ return html.Div([
+ # Navbar
+ navbar(),
+
+ # Home Page Content
+ html.Div([
+ html.H1("Welcome to the Pokémon Dashboard"),
+ html.P("Explore detailed Pokémon data, compare stats, and build your ultimate team."),
+ html.Img(src="assets/pokemon_logo.jpeg", alt="Pokémon Logo", className="logo"),
+ ], className='home-content')
+ ])

pages/utils.py

@@ -0,0 +1,11 @@
+# utils/navbar.py
+import dash_bootstrap_components as dbc
+from dash import html, dcc
+
+def navbar():
+ return html.Nav([
+ dcc.Link('Home', href='/', className='nav-link'),
+ dcc.Link('Data Explorer', href='/explorer', className='nav-link'),
+ dcc.Link('Comparison Tool', href='/comparison', className='nav-link'),
+ dcc.Link('Team Builder', href='/team-builder', className='nav-link'),
+ ], className='navbar')