index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Maryam's Forecaster</title>
    <!-- Link to the CSS file -->
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
    <div class="container">
        <h1> Maryam's Forecaster</h1>
<p>Woman, Life, Freedom</p>

        <form method="POST" action="/">
            <input type="text" name="city" placeholder="Enter city name" required>
            <button type="submit">Search</button>
        </form>
        {% if weather %}
            <div class="weather-info">
                <h2>Weather in {{ weather.city }}</h2>
                <p>Temperature: {{ weather.temperature }} °C</p>
                <p>Humidity: {{ weather.humidity }}%</p>
                <p>Wind Speed: {{ weather.wind_speed }} m/s</p>
                <p>Description: {{ weather.description }}</p>
                <img src="{{ weather.icon }}" alt="Weather icon">
            </div>
        {% elif error %}
            <p class="error">{{ error }}</p>
        {% endif %}
    </div>
</body>
</html>