Spaces:
Sleeping
Sleeping
File size: 4,489 Bytes
d91c61a | 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 118 119 120 121 122 123 124 125 126 127 128 129 130 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Production Analysis</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Outfit', sans-serif;
background-color: #f8f9fa;
min-height: 100vh;
padding: 0;
padding-bottom: 2rem;
}
/* Hero Header */
.hero-header {
background-color: #1a5d3a;
color: white;
padding: 2rem 0 4rem 0;
box-shadow: 0 4px 20px rgba(26, 93, 58, 0.2);
}
.navbar {
background-color: transparent;
padding: 1rem 3rem;
}
.navbar-nav {
flex-direction: row;
justify-content: center;
width: 100%;
gap: 3rem;
}
.nav-item {
padding: 0;
}
.nav-link {
color: white !important;
font-weight: 500;
font-size: 1rem;
padding: 0.5rem 1.5rem !important;
border-radius: 50px;
transition: all 0.3s ease;
border: 1px solid transparent;
}
.nav-link:hover {
background-color: #ffffff;
color: #198754 !important;
border-color: #198754;
}
/* Main Container */
.main-container {
max-width: 1400px;
margin: -3rem auto 3rem auto;
padding: 0 1.5rem;
}
.content-card {
background: #ffffff;
border-radius: 20px;
padding: 3rem;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
border: none;
}
.heading {
font-weight: 700;
color: #212529;
font-size: 2rem;
margin-bottom: 2rem;
}
iframe {
width: 100%;
height: 600px;
border: 1px solid #dee2e6;
border-radius: 8px;
}
</style>
</head>
<body>
<!-- Navbar with Heading -->
<nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #1a5d3a; padding: 1rem 3rem;">
<div class="container-fluid justify-content-center">
<h1 class="navbar-brand mb-0" style="font-size: 1.75rem; font-weight: 700;">Crop Production Analysis</h1>
</div>
</nav>
<!-- Hero Section with Navigation -->
<div class="hero-header">
<div class="container">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="/prodction_analysis"><i class="bi bi-graph-up"></i> Production Analysis</a></li>
<li class="nav-item"><a class="nav-link" href="/heatmap_analysis"><i class="bi bi-map"></i> Heatmap Analysis</a></li>
<li class="nav-item"><a class="nav-link" href="/season_analysis"><i class="bi bi-calendar3"></i> Season Analysis</a></li>
<li class="nav-item"><a class="nav-link" href="/crop_analysis"><i class="bi bi-geo-alt"></i> Geospatial Analysis</a></li>
</ul>
</div>
</div>
<!-- Floating Content Card -->
<div class="main-container">
<div class="content-card">
<h2 class="heading">📊 Production Analysis</h2>
<iframe src="{{ map_url }}"></iframe>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>
|