ai-experiments/WeatherApp/templates/index.html at 38273bcd13d53429fc81572d6ffadec01385c8bc · SweetCodey/ai-experiments · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Weather App</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
</head>
<body>
    <div class="container">
        <!-- Main heading -->
        <h2>🌤️ Weather App</h2>
        <p class="subtitle">Get current weather for any city</p>

        <!-- Weather search form -->
        <form method="POST" class="search-form">
            <div class="input-group">
                <input
                    type="text"
                    name="city"
                    placeholder="Enter city name (e.g., London, Tokyo, New York)"
                    value="{{ city_searched or '' }}"
                    required
                    class="city-input"
                >
                <button type="submit" class="search-btn">Get Weather</button>
            </div>
        </form>

        <!-- Flash messages for errors -->
        {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
                <div class="messages">
                    {% for category, message in messages %}
                        <div class="alert alert-{{ category }}">
                            {{ message }}
                        </div>
                    {% endfor %}
                </div>
            {% endif %}
        {% endwith %}

        <!-- Weather results section -->
        {% if weather %}
            <div class="weather-card">
                <div class="weather-header">
                    <h1>{{ weather.name }}, {{ weather.sys.country }}</h1>
                </div>

                <div class="weather-content">
                    <!-- Weather icon and main info -->
                    <div class="weather-main">
                        <img
                            src="https://openweathermap.org/img/wn/{{ weather.weather[0].icon }}@2x.png"
                            alt="{{ weather.weather[0].description }}"
                            class="weather-icon"
                        >
                        <div class="temperature">
                            {{ weather.main.temp|round|int }}°C
                        </div>
                    </div>

                    <!-- Weather description -->
                    <div class="weather-description">
                        {{ weather.weather[0].description.title() }}
                    </div>

                    <!-- Additional weather details -->
                    <div class="weather-details">
                        <div class="detail-item">
                            <span class="detail-label">Feels like:</span>
                            <span class="detail-value">{{ weather.main.feels_like|round|int }}°C</span>
                        </div>
                        <div class="detail-item">
                            <span class="detail-label">Humidity:</span>
                            <span class="detail-value">{{ weather.main.humidity }}%</span>
                        </div>
                        <div class="detail-item">
                            <span class="detail-label">Pressure:</span>
                            <span class="detail-value">{{ weather.main.pressure }} hPa</span>
                        </div>
                        {% if weather.wind %}
                        <div class="detail-item">
                            <span class="detail-label">Wind:</span>
                            <span class="detail-value">{{ weather.wind.speed }} m/s</span>
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        {% elif city_searched %}
            <!-- Show this when a city was searched but no results -->
            <div class="no-results">
                <p>No weather data found for "{{ city_searched }}". Please try again.</p>
            </div>
        {% else %}
            <!-- Show this when page first loads -->
            <div class="welcome-message">
                <p>👋 Enter a city name above to get started!</p>
                <p class="help-text">
                    Examples: London, Tokyo, New York, Paris, Sydney
                </p>
            </div>
        {% endif %}

        <!-- Footer with attribution -->
        <footer class="footer">
            <p>
                Powered by
                <a href="https://openweathermap.org/" target="_blank" rel="noopener">
                    OpenWeatherMap API
                </a>
            </p>
        </footer>
    </div>
</body>
</html>