Hugging Face's logo

Spaces:
ajeetkumar01
/
Agri-App
Running

App Files Community
ajeetkumar01 commited on
Commit
2e55175
·
verified ·
1 Parent(s): 384eba3

updated index.html

Browse files
Files changed (1) hide show
  1. index.html +216 -18
index.html CHANGED
@@ -1,19 +1,217 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="mr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>भक्ती कृषी केंद्र, आसरडोह</title>
7
+ <!-- Include Leaflet CSS -->
8
+ <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
9
+ <style>
10
+ body {
11
+ font-family: Arial, sans-serif;
12
+ margin: 0;
13
+ padding: 0;
14
+ background-color: #f5f5f5;
15
+ color: #333;
16
+ }
17
+
18
+ header {
19
+ background-color: #333;
20
+ color: #fff;
21
+ padding: 20px;
22
+ text-align: center;
23
+ }
24
+
25
+ header h1 {
26
+ margin: 0;
27
+ font-size: 36px;
28
+ }
29
+
30
+ nav ul {
31
+ list-style-type: none;
32
+ padding: 0;
33
+ margin: 0;
34
+ text-align: center;
35
+ }
36
+
37
+ nav ul li {
38
+ display: inline;
39
+ margin-right: 20px;
40
+ }
41
+
42
+ nav ul li a {
43
+ color: #fff;
44
+ text-decoration: none;
45
+ font-size: 18px;
46
+ }
47
+
48
+ main {
49
+ padding: 20px;
50
+ text-align: center;
51
+ }
52
+
53
+ h2 {
54
+ font-size: 28px;
55
+ margin-top: 40px;
56
+ color: #333;
57
+ }
58
+
59
+ .product-category {
60
+ display: inline-block;
61
+ margin: 20px;
62
+ padding: 20px;
63
+ background-color: #fff;
64
+ border-radius: 10px;
65
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
66
+ text-align: left;
67
+ max-width: 300px;
68
+ }
69
+
70
+ .product-category img {
71
+ width: 100%;
72
+ height: 200px; /* Adjust the height as needed */
73
+ border-radius: 5px;
74
+ margin-bottom: 10px;
75
+ object-fit: cover; /* Ensure images maintain aspect ratio */
76
+ }
77
+
78
+ .contact {
79
+ margin-top: 20px;
80
+ background-color: #333;
81
+ color: #fff;
82
+ padding: 20px;
83
+ border-radius: 10px;
84
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
85
+ text-align: left;
86
+ }
87
+
88
+ footer {
89
+ background-color: #333;
90
+ color: #fff;
91
+ text-align: center;
92
+ padding: 10px;
93
+ position: fixed;
94
+ width: 100%;
95
+ bottom: 0;
96
+ }
97
+
98
+ /* Style for the map container */
99
+ #mapid {
100
+ height: 400px;
101
+ margin-top: 20px;
102
+ }
103
+
104
+ /* Style for the image carousel container */
105
+ .image-carousel {
106
+ overflow: hidden;
107
+ width: 100%;
108
+ margin-top: 20px;
109
+ }
110
+
111
+ /* Style for the image carousel inner container */
112
+ .image-carousel-inner {
113
+ display: flex;
114
+ animation: slide 15s linear infinite; /* Change duration and timing function as needed */
115
+ }
116
+
117
+ /* Keyframe animation for the image carousel */
118
+ @keyframes slide {
119
+ 0% {
120
+ transform: translateX(0%);
121
+ }
122
+ 100% {
123
+ transform: translateX(-100%);
124
+ }
125
+ }
126
+ </style>
127
+ </head>
128
+ <body>
129
+ <header>
130
+ <h1>भक्ती कृषी केंद्र, आसरडोह</h1>
131
+ <nav>
132
+ <ul>
133
+ <li><a href="#products">उत्पादन</a></li>
134
+ <li><a href="#map">नकाशा</a></li>
135
+ <li><a href="#contact">संपर्क</a></li>
136
+ </ul>
137
+ </nav>
138
+ </header>
139
+ <main>
140
+ <section id="products">
141
+ <h2>उत्पादन</h2>
142
+ <div class="product-category">
143
+ <span style="color: #FF9933; font-size: 24px;">&#x1F33D;</span> <!-- Symbol for plants -->
144
+ <img src="{{ url_for('static', filename='images/seeds.jpg') }}" alt="बियाणे">
145
+ <h3>बियाणे</h3>
146
+ <p>विविध फसलांसाठी उच्च गुणवत्ता असलेले बियाणे।</p>
147
+ </div>
148
+ <div class="product-category">
149
+ <span style="color: #FF9933; font-size: 24px;">&#x1F33F;</span> <!-- Symbol for flowers -->
150
+ <img src="{{ url_for('static', filename='images/fertilizers.jpg') }}" alt="खते">
151
+ <h3>खत��</h3>
152
+ <p>आपल्या शेतीवरील उत्पन्नाचा वाढ प्राप्त करण्यासाठी आम्ही विशेष रूपात तयार केलेले खते।</p>
153
+ </div>
154
+ <div class="product-category">
155
+ <span style="color: #FF9933; font-size: 24px;">&#x1F528;</span> <!-- Symbol for hammer -->
156
+ <img src="{{ url_for('static', filename='images/tools.jpg') }}" alt="उपकरणे">
157
+ <h3>उपकरणे</h3>
158
+ <p>आमच्या शेतीसाठी विविध उपकरणे आणि उपकरणे आहेत।</p>
159
+ </div>
160
+ </section>
161
+ <section id="map">
162
+ <h2>नकाशा</h2>
163
+ <!-- Add a div element for the map with an ID -->
164
+ <div id="mapid"></div>
165
+ </section>
166
+ <section id="contact" class="contact">
167
+ <h2>संपर्क</h2>
168
+ <p>आमच्याशी संपर्क साधा:</p>
169
+ <p>भक्ती कृषी केंद्र, आसरडोह</p>
170
+ <p>आसरडोह, पिन कोड: 431124</p> <!-- Added pin code in Marathi -->
171
+ <p>महाराष्ट्र, भारत</p>
172
+ <p>ईमेल: [email protected]</p> <!-- Added email -->
173
+ <p>फोन: +९१ ९६३७९८४६४७, +९१ ९९२३८३०४२२</p>
174
+ <p>पत्ता: असरडोह, तालुका-धारूर, जिल्हा-बीड, मुख्य रोड, आसरडोह।</p>
175
+ </section>
176
+ <!-- Image carousel section -->
177
+ <div class="image-carousel">
178
+ <div class="image-carousel-inner">
179
+ <img src="{{ url_for('static', filename='images/shop1.jpg') }}" alt="Shop 1">
180
+ <img src="{{ url_for('static', filename='images/shop2.jpg') }}" alt="Shop 2">
181
+ <img src="{{ url_for('static', filename='images/shop3.jpg') }}" alt="Shop 3">
182
+ <img src="{{ url_for('static', filename='images/shop4.jpg') }}" alt="Shop 4">
183
+ <img src="{{ url_for('static', filename='images/shop5.jpg') }}" alt="Shop 5">
184
+ <img src="{{ url_for('static', filename='images/shop6.jpg') }}" alt="Shop 6">
185
+ <img src="{{ url_for('static', filename='images/shop7.jpg') }}" alt="Shop 7">
186
+ <!-- Add more images as needed -->
187
+ </div>
188
+ </div>
189
+ </main>
190
+ <footer>
191
+ <p>&copy; २०२४ भक्ती कृषी केंद्र, आसरडोह. सर्व हक्क राखीव.</p>
192
+ </footer>
193
+ <!-- Include Leaflet.js -->
194
+ <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
195
+ <script>
196
+ // Initialize the map
197
+ var map = L.map('mapid').setView([18.8209914, 76.2551534], 13); // Set initial coordinates and zoom level
198
+
199
+ // Add OpenStreetMap as the base layer
200
+ L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
201
+ attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
202
+ }).addTo(map);
203
+
204
+ // Add a custom icon for the marker
205
+ var customIcon = L.icon({
206
+ iconUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon.png',
207
+ iconSize: [25, 41], // size of the icon
208
+ iconAnchor: [12, 41], // point of the icon which will correspond to marker's location
209
+ popupAnchor: [1, -34] // point from which the popup should open relative to the iconAnchor
210
+ });
211
+
212
+ // Add a marker for the location with a popup
213
+ L.marker([18.8209914, 76.2551534], { icon: customIcon }).addTo(map)
214
+ .bindPopup("भक्ती कृषी केंद्र, आसरडोह").openPopup();
215
+ </script>
216
+ </body>
217
  </html>