index.html

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GIS và Viễn thám Rừng</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css" />
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="#home" class="active">Trang chủ</a></li>
                <li><a href="#map">Bản đồ</a></li>
                <li><a href="#weather">Thời tiết</a></li>
                <li><a href="#analysis">Phân tích</a></li>
                <li><a href="#blog">Blog</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section id="home" class="tab-content active">
            <h1>Chào mừng đến với GIS và Viễn thám Rừng</h1>
            <p>Đây là trang tổng quan về dự án của chúng tôi.</p>
            <div id="latest-posts-widget">
                <h3>Bài viết mới nhất</h3>
                <ul id="latest-posts-list"></ul>
            </div>
        </section>

        <section id="map" class="tab-content">
            <h2>Bản đồ GIS</h2>
            <div id="gis-map" style="height: 400px;"></div>
        </section>

        <section id="weather" class="tab-content">
            <h2>Thời tiết</h2>
            <div id="windy"></div>
            <div class="map-controls">
                <button onclick="changeOverlay('rain')">Mưa</button>
                <button onclick="changeOverlay('wind')">Gió</button>
                <button onclick="changeOverlay('temp')">Nhiệt độ</button>
                <button onclick="toggleForestLayer()">Ẩn/Hiện Rừng</button>
            </div>
        </section>

        <section id="analysis" class="tab-content">
            <h2>Phân tích dữ liệu</h2>
            <div id="analysis-results"></div>
        </section>

        <section id="blog" class="tab-content">
            <h2>Blog GIS và Viễn thám Rừng</h2>
            <div id="blog-container"></div>
        </section>
    </main>

    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>
    <script src="https://api.windy.com/assets/map-forecast/libBoot.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="script.js"></script>
</body>
</html>