Spaces:
Sleeping
Sleeping
Upload 12 files
Browse files- templates/base.html +3 -3
- templates/components/dark_toggle.html +1 -0
- templates/components/header.html +51 -0
- templates/components/sidebar.html +10 -0
- templates/index.html +7 -7
- templates/pages/analyze.html +33 -0
- templates/pages/contact.html +42 -0
- templates/pages/dashboard.html +17 -0
- templates/pages/features.html +15 -0
- templates/pages/gallery.html +15 -0
- templates/pages/home.html +32 -0
- templates/pages/login.html +13 -0
templates/base.html
CHANGED
|
@@ -10,9 +10,9 @@
|
|
| 10 |
<script src="https://cdn.jsdelivr.net/npm/qrcode@1.5.3/build/qrcode.min.js"></script>
|
| 11 |
</head>
|
| 12 |
<body class="bg-gray-50">
|
| 13 |
-
{% include '
|
| 14 |
-
{% include '
|
| 15 |
-
{% include '
|
| 16 |
{% block content %}{% endblock %}
|
| 17 |
<script src="/static/translations.js"></script>
|
| 18 |
<script type="module" src="/static/js/main.js"></script>
|
|
|
|
| 10 |
<script src="https://cdn.jsdelivr.net/npm/qrcode@1.5.3/build/qrcode.min.js"></script>
|
| 11 |
</head>
|
| 12 |
<body class="bg-gray-50">
|
| 13 |
+
{% include 'components/dark_toggle.html' %}
|
| 14 |
+
{% include 'components/sidebar.html' %}
|
| 15 |
+
{% include 'components/header.html' %}
|
| 16 |
{% block content %}{% endblock %}
|
| 17 |
<script src="/static/translations.js"></script>
|
| 18 |
<script type="module" src="/static/js/main.js"></script>
|
templates/components/dark_toggle.html
ADDED
|
@@ -0,0 +1 @@
|
|
|
|
|
|
|
| 1 |
+
<div class="dark-mode-toggle" onclick="toggleDarkMode()" title="Toggle Dark Mode"><span id="dark-mode-icon">π</span></div>
|
templates/components/header.html
ADDED
|
@@ -0,0 +1,51 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<header class="fixed top-0 left-0 right-0 bg-white/95 backdrop-blur-sm shadow-sm z-50">
|
| 2 |
+
<nav class="max-w-7xl mx-auto px-4 md:px-6 py-4">
|
| 3 |
+
<div class="flex justify-between items-center">
|
| 4 |
+
<div class="flex items-center space-x-2">
|
| 5 |
+
<div class="w-10 h-10 bg-gradient-to-br from-green-500 to-orange-500 rounded-lg flex items-center justify-center text-white text-xl font-bold">A</div><span id="nav-title" class="text-xl md:text-2xl font-bold gradient-text">Agrovision</span>
|
| 6 |
+
</div>
|
| 7 |
+
<div class="hidden md:flex items-center space-x-8"><a href="#home" class="nav-item text-gray-700 font-medium" data-i18n="nav.home" onclick="navigateTo('home', event)">Home</a> <a href="#features" class="nav-item text-gray-700 font-medium" data-i18n="nav.features" onclick="navigateTo('features', event)">Features</a> <a href="#analyze" class="nav-item text-gray-700 font-medium" data-i18n="nav.analyze" onclick="navigateTo('analyze', event)">Analyze</a> <a href="#dashboard" class="nav-item text-gray-700 font-medium" data-i18n="nav.dashboard" onclick="navigateTo('dashboard', event)">Dashboard</a> <a href="#gallery" class="nav-item text-gray-700 font-medium" data-i18n="nav.gallery" onclick="navigateTo('gallery', event)">Gallery</a> <a href="#contact" class="nav-item text-gray-700 font-medium" data-i18n="nav.contact" onclick="navigateTo('contact', event)">Contact</a></div>
|
| 8 |
+
<div class="hidden md:flex items-center space-x-4">
|
| 9 |
+
<div class="relative">
|
| 10 |
+
<button id="lang-switcher" class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-4 py-2 rounded-full font-semibold transition flex items-center space-x-2" onclick="toggleLanguageMenu()"><span id="current-lang">EN</span><span>βΌ</span></button>
|
| 11 |
+
<div id="lang-menu" class="hidden absolute right-0 mt-2 bg-white rounded-xl shadow-lg border border-gray-200 py-2 z-50 min-w-[120px]">
|
| 12 |
+
<button class="w-full text-left px-4 py-2 hover:bg-gray-100 text-gray-700 font-medium" onclick="switchLanguage('en')">π¬π§ English</button>
|
| 13 |
+
<button class="w-full text-left px-4 py-2 hover:bg-gray-100 text-gray-700 font-medium" onclick="switchLanguage('az')">π¦πΏ AzΙrbaycanca</button>
|
| 14 |
+
</div>
|
| 15 |
+
</div>
|
| 16 |
+
<div class="relative">
|
| 17 |
+
<button id="sign-in-btn" class="btn-gradient-orange text-white px-6 py-2.5 rounded-full font-semibold" onclick="navigateTo('login', event)"> Sign In </button>
|
| 18 |
+
<div id="account-menu" class="hidden absolute right-0 mt-2 bg-white rounded-xl shadow-lg border border-gray-200 py-2 z-50 min-w-[160px]">
|
| 19 |
+
<button class="w-full text-left px-4 py-2 hover:bg-gray-100 text-gray-700 font-medium" data-i18n="nav.dashboard" onclick="navigateTo('dashboard', event)">Dashboard</button>
|
| 20 |
+
<button class="w-full text-left px-4 py-2 hover:bg-gray-100 text-red-600 font-medium" data-i18n="nav.signout" onclick="handleLogout()">Sign out</button>
|
| 21 |
+
</div>
|
| 22 |
+
</div>
|
| 23 |
+
</div>
|
| 24 |
+
<button id="mobile-menu-btn" class="md:hidden p-2 rounded-lg text-gray-700 hover:bg-gray-100 transition" onclick="toggleMobileMenu()" aria-label="Toggle menu">
|
| 25 |
+
<svg id="menu-icon" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
|
| 26 |
+
<svg id="close-icon" class="w-6 h-6 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
|
| 27 |
+
</button>
|
| 28 |
+
</div>
|
| 29 |
+
<div id="mobile-menu" class="hidden md:hidden absolute top-full left-0 right-0 bg-white shadow-lg border-t border-gray-200 py-4 z-40">
|
| 30 |
+
<div class="px-4 space-y-2">
|
| 31 |
+
<a href="#home" class="block px-4 py-3 rounded-lg text-gray-700 font-medium hover:bg-gray-100 transition" data-i18n="nav.home" onclick="navigateTo('home', event); closeMobileMenu();">Home</a>
|
| 32 |
+
<a href="#features" class="block px-4 py-3 rounded-lg text-gray-700 font-medium hover:bg-gray-100 transition" data-i18n="nav.features" onclick="navigateTo('features', event); closeMobileMenu();">Features</a>
|
| 33 |
+
<a href="#analyze" class="block px-4 py-3 rounded-lg text-gray-700 font-medium hover:bg-gray-100 transition" data-i18n="nav.analyze" onclick="navigateTo('analyze', event); closeMobileMenu();">Analyze</a>
|
| 34 |
+
<a href="#dashboard" class="block px-4 py-3 rounded-lg text-gray-700 font-medium hover:bg-gray-100 transition" data-i18n="nav.dashboard" onclick="navigateTo('dashboard', event); closeMobileMenu();">Dashboard</a>
|
| 35 |
+
<a href="#gallery" class="block px-4 py-3 rounded-lg text-gray-700 font-medium hover:bg-gray-100 transition" data-i18n="nav.gallery" onclick="navigateTo('gallery', event); closeMobileMenu();">Gallery</a>
|
| 36 |
+
<a href="#contact" class="block px-4 py-3 rounded-lg text-gray-700 font-medium hover:bg-gray-100 transition" data-i18n="nav.contact" onclick="navigateTo('contact', event); closeMobileMenu();">Contact</a>
|
| 37 |
+
<div class="border-t border-gray-200 my-2"></div>
|
| 38 |
+
<div class="px-4 py-2">
|
| 39 |
+
<div class="relative mb-3">
|
| 40 |
+
<button id="mobile-lang-switcher" class="w-full bg-gray-100 hover:bg-gray-200 text-gray-700 px-4 py-2 rounded-lg font-semibold transition flex items-center justify-between" onclick="toggleMobileLanguageMenu()"><span>Language</span><span id="mobile-current-lang">EN</span></button>
|
| 41 |
+
<div id="mobile-lang-menu" class="hidden absolute top-full left-0 right-0 mt-2 bg-white rounded-lg shadow-lg border border-gray-200 py-2 z-50">
|
| 42 |
+
<button class="w-full text-left px-4 py-2 hover:bg-gray-100 text-gray-700 font-medium" onclick="switchLanguage('en'); closeMobileMenu();">π¬π§ English</button>
|
| 43 |
+
<button class="w-full text-left px-4 py-2 hover:bg-gray-100 text-gray-700 font-medium" onclick="switchLanguage('az'); closeMobileMenu();">π¦πΏ AzΙrbaycanca</button>
|
| 44 |
+
</div>
|
| 45 |
+
</div>
|
| 46 |
+
<button class="w-full btn-gradient-orange text-white px-6 py-3 rounded-lg font-semibold" onclick="navigateTo('login', event); closeMobileMenu();"> Sign In </button>
|
| 47 |
+
</div>
|
| 48 |
+
</div>
|
| 49 |
+
</div>
|
| 50 |
+
</nav>
|
| 51 |
+
</header>
|
templates/components/sidebar.html
ADDED
|
@@ -0,0 +1,10 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<div class="sidebar-nav hidden md:block">
|
| 2 |
+
<div class="flex flex-col space-y-4">
|
| 3 |
+
<div class="sidebar-dot active" onclick="navigateTo('home', event)" data-title-en="Home" data-title-az="Ana SΙhifΙ" title="Home"></div>
|
| 4 |
+
<div class="sidebar-dot" onclick="navigateTo('features', event)" data-title-en="Features" data-title-az="XΓΌsusiyyΙtlΙr" title="Features"></div>
|
| 5 |
+
<div class="sidebar-dot" onclick="navigateTo('analyze', event)" data-title-en="Analyze" data-title-az="TΙhlil" title="Analyze"></div>
|
| 6 |
+
<div class="sidebar-dot" onclick="navigateTo('gallery', event)" data-title-en="Gallery" data-title-az="Qalereya" title="Gallery"></div>
|
| 7 |
+
<div class="sidebar-dot" onclick="navigateTo('contact', event)" data-title-en="Contact" data-title-az="ΖlaqΙ" title="Contact"></div>
|
| 8 |
+
<div class="sidebar-dot" onclick="navigateTo('login', event)" data-title-en="Login" data-title-az="Daxil Ol" title="Login"></div>
|
| 9 |
+
</div>
|
| 10 |
+
</div>
|
templates/index.html
CHANGED
|
@@ -1,10 +1,10 @@
|
|
| 1 |
{% extends 'base.html' %}
|
| 2 |
{% block content %}
|
| 3 |
-
{% include '
|
| 4 |
-
{% include '
|
| 5 |
-
{% include '
|
| 6 |
-
{% include '
|
| 7 |
-
{% include '
|
| 8 |
-
{% include '
|
| 9 |
-
{% include '
|
| 10 |
{% endblock %}
|
|
|
|
| 1 |
{% extends 'base.html' %}
|
| 2 |
{% block content %}
|
| 3 |
+
{% include 'pages/home.html' %}
|
| 4 |
+
{% include 'pages/features.html' %}
|
| 5 |
+
{% include 'pages/analyze.html' %}
|
| 6 |
+
{% include 'pages/dashboard.html' %}
|
| 7 |
+
{% include 'pages/gallery.html' %}
|
| 8 |
+
{% include 'pages/contact.html' %}
|
| 9 |
+
{% include 'pages/login.html' %}
|
| 10 |
{% endblock %}
|
templates/pages/analyze.html
ADDED
|
@@ -0,0 +1,33 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<div id="analyze-page" class="page pt-20">
|
| 2 |
+
<section class="py-20 min-h-screen">
|
| 3 |
+
<div class="max-w-5xl mx-auto px-6">
|
| 4 |
+
<div class="text-center mb-12"><h1 class="text-5xl font-extrabold text-gray-900 mb-4"><span class="gradient-text" data-i18n="analyze.title">AI Analysis</span> <span data-i18n="analyze.studio">Studio</span></h1><p class="text-xl text-gray-600" data-i18n="analyze.subtitle">Upload your crop images for instant professional analysis</p></div>
|
| 5 |
+
<div class="bg-white rounded-3xl shadow-2xl p-10 border-2 border-gray-100">
|
| 6 |
+
<div id="upload-area" class="upload-area rounded-2xl p-16 text-center cursor-pointer">
|
| 7 |
+
<div id="upload-prompt">
|
| 8 |
+
<div class="w-24 h-24 bg-gradient-to-br from-green-400 to-orange-400 rounded-full flex items-center justify-center text-5xl mx-auto mb-6">π·</div>
|
| 9 |
+
<h3 class="text-2xl font-bold text-gray-900 mb-3" data-i18n="analyze.dropImage">Drop Your Image Here</h3>
|
| 10 |
+
<p class="text-gray-600 mb-6 text-lg" data-i18n="analyze.clickBrowse">or click to browse from your device</p><input type="file" id="file-input" accept="image/*" class="hidden"> <button onclick="document.getElementById('file-input').click()" class="btn-gradient text-white px-8 py-4 rounded-full font-bold text-lg" data-i18n="analyze.chooseFile"> Choose File </button>
|
| 11 |
+
<p class="text-sm text-gray-500 mt-4" data-i18n="analyze.supports">Supports: JPG, PNG, WebP (Max 10MB)</p>
|
| 12 |
+
</div>
|
| 13 |
+
<div id="preview-section" class="hidden"><img id="image-preview" class="max-w-full max-h-96 mx-auto rounded-xl shadow-lg mb-6"><div class="flex justify-center gap-4"><button onclick="resetUpload()" class="bg-gray-200 text-gray-700 px-6 py-3 rounded-full font-semibold hover:bg-gray-300 transition" data-i18n="analyze.removeImage"> Remove Image </button> <button onclick="analyzeImage()" class="btn-gradient-orange text-white px-8 py-3 rounded-full font-bold" data-i18n="analyze.analyzeNow"> π Analyze Now </button></div></div>
|
| 14 |
+
</div>
|
| 15 |
+
<div id="results-section" class="hidden mt-10">
|
| 16 |
+
<div class="bg-gradient-to-br from-green-50 to-orange-50 rounded-2xl p-8 border-2 border-green-200">
|
| 17 |
+
<div class="flex items-center justify-between mb-6"><h3 class="text-2xl font-bold text-gray-900" data-i18n="analyze.analysisComplete">Analysis Complete β</h3><span id="confidence-badge" class="bg-green-500 text-white px-4 py-2 rounded-full text-sm font-bold">98% Confidence</span></div>
|
| 18 |
+
<div class="grid md:grid-cols-3 gap-6 mb-6">
|
| 19 |
+
<div class="bg-white rounded-xl p-6 shadow"><div class="flex items-center justify-between mb-2"><span class="text-gray-700 font-semibold" data-i18n="analyze.cropHealth">Crop Health</span> <span class="text-2xl">π</span></div><div class="text-3xl font-bold text-green-600" id="health-status">Excellent</div><div class="w-full bg-gray-200 rounded-full h-3 mt-3"><div class="bg-gradient-to-r from-green-400 to-green-600 h-3 rounded-full" style="width: 92%"></div></div></div>
|
| 20 |
+
<div class="bg-white rounded-xl p-6 shadow"><div class="flex items-center justify-between mb-2"><span class="text-gray-700 font-semibold" data-i18n="analyze.diseaseRisk">Disease Risk</span> <span class="text-2xl">π‘οΈ</span></div><div class="text-3xl font-bold text-green-600" id="disease-risk">Low</div><div class="w-full bg-gray-200 rounded-full h-3 mt-3"><div class="bg-gradient-to-r from-green-400 to-green-600 h-3 rounded-full" style="width: 15%"></div></div></div>
|
| 21 |
+
<div class="bg-white rounded-xl p-6 shadow text-center"><h4 class="font-bold text-gray-900 mb-3" data-i18n="analyze.shareQR">Share Analysis</h4><div id="qrcode" class="flex justify-center mb-3" style="min-height: 200px;"></div><p class="text-sm text-gray-600" data-i18n="analyze.scanQR">Scan to view analysis</p></div>
|
| 22 |
+
</div>
|
| 23 |
+
<div class="grid md:grid-cols-2 gap-6 mb-6">
|
| 24 |
+
<div class="bg-white rounded-xl p-6 shadow"><div class="text-gray-700 font-semibold mb-2" data-i18n="analyze.growthStage">Growth Stage</div><div class="text-xl font-bold text-gray-900">π± Vegetative Phase</div></div>
|
| 25 |
+
<div class="bg-white rounded-xl p-6 shadow"><div class="text-gray-700 font-semibold mb-2" data-i18n="analyze.estimatedYield">Estimated Yield</div><div class="text-xl font-bold text-gray-900">π Above Average</div></div>
|
| 26 |
+
</div>
|
| 27 |
+
<div class="bg-white rounded-xl p-6 shadow"><h4 class="font-bold text-gray-900 mb-3 flex items-center"><span class="text-2xl mr-2">π‘</span> <span data-i18n="analyze.aiRecommendations">AI Recommendations</span></h4><ul class="space-y-2 text-gray-700"><li class="flex items-start"><span class="text-green-500 mr-2">β</span> <span>Continue current irrigation schedule - soil moisture levels are optimal</span></li><li class="flex items-start"><span class="text-green-500 mr-2">β</span> <span>Consider nitrogen-rich fertilizer application in 7-10 days</span></li><li class="flex items-start"><span class="text-green-500 mr-2">β</span> <span>Monitor for pest activity - conditions are favorable for aphids</span></li></ul></div>
|
| 28 |
+
</div>
|
| 29 |
+
</div>
|
| 30 |
+
</div>
|
| 31 |
+
</div>
|
| 32 |
+
</section>
|
| 33 |
+
</div>
|
templates/pages/contact.html
ADDED
|
@@ -0,0 +1,42 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<div id="contact-page" class="page pt-20">
|
| 2 |
+
<section class="py-20 min-h-screen">
|
| 3 |
+
<div class="max-w-6xl mx-auto px-6">
|
| 4 |
+
<div class="text-center mb-16"><h1 class="text-5xl font-extrabold text-gray-900 mb-4"><span data-i18n="contact.title">Get In</span> <span class="gradient-text">Touch</span></h1><p class="text-xl text-gray-600" data-i18n="contact.subtitle">We're here to help you grow</p></div>
|
| 5 |
+
<div class="grid md:grid-cols-5 gap-8">
|
| 6 |
+
<div class="md:col-span-3">
|
| 7 |
+
<div class="bg-white rounded-3xl shadow-2xl p-10 border-2 border-gray-100">
|
| 8 |
+
<h2 class="text-3xl font-bold text-gray-900 mb-8" data-i18n="contact.sendMessage">Send us a message</h2>
|
| 9 |
+
<form id="contact-form" onsubmit="handleContactSubmit(event)">
|
| 10 |
+
<div class="grid md:grid-cols-2 gap-6 mb-6">
|
| 11 |
+
<div><label for="name" class="block text-gray-700 font-semibold mb-3" data-i18n="contact.fullName">Full Name</label> <input type="text" id="name" required data-i18n-placeholder="contact.placeholderName" placeholder="John Doe" class="w-full px-5 py-4 border-2 border-gray-200 rounded-xl focus:outline-none focus:border-green-500 transition"></div>
|
| 12 |
+
<div><label for="email" class="block text-gray-700 font-semibold mb-3" data-i18n="contact.emailAddress">Email Address</label> <input type="email" id="email" required data-i18n-placeholder="contact.placeholderEmail" placeholder="your.email@example.com" class="w-full px-5 py-4 border-2 border-gray-200 rounded-xl focus:outline-none focus:border-green-500 transition"></div>
|
| 13 |
+
</div>
|
| 14 |
+
<div class="mb-6"><label for="subject" class="block text-gray-700 font-semibold mb-3" data-i18n="contact.subject">Subject</label> <input type="text" id="subject" required data-i18n-placeholder="contact.placeholderSubject" placeholder="How can we help?" class="w-full px-5 py-4 border-2 border-gray-200 rounded-xl focus:outline-none focus:border-green-500 transition"></div>
|
| 15 |
+
<div class="mb-6"><label for="message" class="block text-gray-700 font-semibold mb-3" data-i18n="contact.message">Message</label> <textarea id="message" required rows="5" data-i18n-placeholder="contact.placeholderMessage" placeholder="Tell us more about your inquiry..." class="w-full px-5 py-4 border-2 border-gray-200 rounded-xl focus:outline-none focus:border-green-500 transition"></textarea></div>
|
| 16 |
+
<button type="submit" class="btn-gradient text-white w-full py-4 rounded-xl font-bold text-lg" data-i18n="contact.sendButton"> Send Message π </button>
|
| 17 |
+
</form>
|
| 18 |
+
<div id="contact-success" class="hidden mt-6 p-5 bg-green-100 text-green-700 rounded-xl text-center font-semibold" data-i18n="contact.messageSent">β Message sent successfully! We'll respond within 24 hours.</div>
|
| 19 |
+
</div>
|
| 20 |
+
</div>
|
| 21 |
+
<div class="md:col-span-2 space-y-6">
|
| 22 |
+
<div class="bg-gradient-to-br from-green-500 to-green-600 rounded-3xl shadow-2xl p-8 text-white">
|
| 23 |
+
<h3 class="text-2xl font-bold mb-6" data-i18n="contact.contactInfo">Contact Info</h3>
|
| 24 |
+
<div class="space-y-6">
|
| 25 |
+
<div class="flex items-start"><div class="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center text-2xl mr-4">π§</div><div><div class="font-semibold mb-1" data-i18n="contact.email">Email</div><div id="contact-email-display" class="text-white/90">hello@agrovision.io</div></div></div>
|
| 26 |
+
<div class="flex items-start"><div class="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center text-2xl mr-4">π</div><div><div class="font-semibold mb-1" data-i18n="contact.phone">Phone</div><div id="contact-phone-display" class="text-white/90">+994 50 705 26 16</div></div></div>
|
| 27 |
+
<div class="flex items-start"><div class="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center text-2xl mr-4">π</div><div><div class="font-semibold mb-1" data-i18n="contact.location">Location</div><div class="text-white/90" data-i18n="contact.locationAddress">Baku, Azerbaijan</div></div></div>
|
| 28 |
+
</div>
|
| 29 |
+
</div>
|
| 30 |
+
<div class="bg-gradient-to-br from-orange-500 to-orange-600 rounded-3xl shadow-2xl p-8 text-white">
|
| 31 |
+
<h3 class="text-2xl font-bold mb-4" data-i18n="contact.officeHours">Office Hours</h3>
|
| 32 |
+
<div class="space-y-3"><div class="flex justify-between"><span data-i18n="contact.mondayFriday">Monday - Friday</span> <span class="font-bold">8AM - 8PM</span></div><div class="flex justify-between"><span data-i18n="contact.saturday">Saturday</span> <span class="font-bold">9AM - 5PM</span></div><div class="flex justify-between"><span data-i18n="contact.sunday">Sunday</span> <span class="font-bold" data-i18n="contact.closed">Closed</span></div></div>
|
| 33 |
+
</div>
|
| 34 |
+
<div class="bg-white rounded-3xl shadow-2xl p-8 border-2 border-gray-100">
|
| 35 |
+
<h3 class="text-xl font-bold text-gray-900 mb-4" data-i18n="contact.followUs">Follow Us</h3>
|
| 36 |
+
<div class="flex gap-4"><div class="w-12 h-12 bg-gradient-to-br from-green-400 to-green-600 rounded-xl flex items-center justify-center text-white text-xl cursor-pointer hover:scale-110 transition">f</div><div class="w-12 h-12 bg-gradient-to-br from-blue-400 to-blue-600 rounded-xl flex items-center justify-center text-white text-xl cursor-pointer hover:scale-110 transition">t</div><div class="w-12 h-12 bg-gradient-to-br from-pink-400 to-pink-600 rounded-xl flex items-center justify-center text-white text-xl cursor-pointer hover:scale-110 transition">in</div></div>
|
| 37 |
+
</div>
|
| 38 |
+
</div>
|
| 39 |
+
</div>
|
| 40 |
+
</div>
|
| 41 |
+
</section>
|
| 42 |
+
</div>
|
templates/pages/dashboard.html
ADDED
|
@@ -0,0 +1,17 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<div id="dashboard-page" class="page pt-20">
|
| 2 |
+
<section class="py-20 min-h-screen">
|
| 3 |
+
<div class="max-w-7xl mx-auto px-6">
|
| 4 |
+
<div class="mb-12"><h1 class="text-5xl font-extrabold text-gray-900 mb-4"><span data-i18n="dashboard.title">Your</span> <span class="gradient-text">Dashboard</span></h1><p class="text-xl text-gray-600" data-i18n="dashboard.subtitle">Track your crop analysis history and insights</p></div>
|
| 5 |
+
<div class="grid md:grid-cols-4 gap-6 mb-12">
|
| 6 |
+
<div class="bg-white rounded-2xl shadow-lg p-6 border border-gray-100"><div class="flex items-center justify-between mb-3"><span class="text-gray-600 font-semibold" data-i18n="dashboard.totalScans">Total Scans</span> <span class="text-3xl">π</span></div><div class="text-4xl font-bold gradient-text">24</div><div class="text-sm text-gray-500 mt-2" data-i18n="dashboard.thisWeek">+3 this week</div></div>
|
| 7 |
+
<div class="bg-white rounded-2xl shadow-lg p-6 border border-gray-100"><div class="flex items-center justify-between mb-3"><span class="text-gray-600 font-semibold" data-i18n="dashboard.healthyCrops">Healthy Crops</span> <span class="text-3xl">β
</span></div><div class="text-4xl font-bold text-green-600">18</div><div class="text-sm text-gray-500 mt-2" data-i18n="dashboard.successRate">75% success rate</div></div>
|
| 8 |
+
<div class="bg-white rounded-2xl shadow-lg p-6 border border-gray-100"><div class="flex items-center justify-between mb-3"><span class="text-gray-600 font-semibold" data-i18n="dashboard.issuesFound">Issues Found</span> <span class="text-3xl">β οΈ</span></div><div class="text-4xl font-bold text-orange-600">6</div><div class="text-sm text-gray-500 mt-2" data-i18n="dashboard.needsAttention">Needs attention</div></div>
|
| 9 |
+
<div class="bg-white rounded-2xl shadow-lg p-6 border border-gray-100"><div class="flex items-center justify-between mb-3"><span class="text-gray-600 font-semibold" data-i18n="dashboard.avgHealth">Avg Health</span> <span class="text-3xl">π</span></div><div class="text-4xl font-bold text-green-600">87%</div><div class="text-sm text-gray-500 mt-2" data-i18n="dashboard.excellentOverall">Excellent overall</div></div>
|
| 10 |
+
</div>
|
| 11 |
+
<div class="bg-white rounded-3xl shadow-2xl p-8 border-2 border-gray-100">
|
| 12 |
+
<div class="flex items-center justify-between mb-8"><h2 class="text-3xl font-bold text-gray-900" data-i18n="dashboard.recentAnalysis">Recent Analysis</h2><button class="btn-gradient text-white px-6 py-3 rounded-full font-semibold" onclick="navigateTo('analyze', event)" data-i18n="dashboard.newScan"> + New Scan </button></div>
|
| 13 |
+
<div class="space-y-6"></div>
|
| 14 |
+
</div>
|
| 15 |
+
</div>
|
| 16 |
+
</section>
|
| 17 |
+
</div>
|
templates/pages/features.html
ADDED
|
@@ -0,0 +1,15 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<div id="features-page" class="page pt-20">
|
| 2 |
+
<section class="py-20 min-h-screen">
|
| 3 |
+
<div class="max-w-7xl mx-auto px-6">
|
| 4 |
+
<div class="text-center mb-16"><h1 class="text-5xl font-extrabold text-gray-900 mb-4"><span data-i18n="features.title">Powerful</span> <span class="gradient-text">Features</span></h1><p class="text-xl text-gray-600" data-i18n="features.subtitle">Everything you need to transform your farm</p></div>
|
| 5 |
+
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
| 6 |
+
<div class="card-hover bg-white p-8 rounded-2xl shadow-lg border border-gray-100"><div class="w-16 h-16 bg-gradient-to-br from-green-400 to-green-600 rounded-xl flex items-center justify-center text-3xl mb-6">π¬</div><h3 class="text-2xl font-bold text-gray-900 mb-4" data-i18n="features.diseaseDetection">Disease Detection</h3><p class="text-gray-600 leading-relaxed" data-i18n="features.diseaseDetectionDesc">Identify plant diseases instantly with 98% accuracy using advanced computer vision</p></div>
|
| 7 |
+
<div class="card-hover bg-white p-8 rounded-2xl shadow-lg border border-gray-100"><div class="w-16 h-16 bg-gradient-to-br from-blue-400 to-blue-600 rounded-xl flex items-center justify-center text-3xl mb-6">π§</div><h3 class="text-2xl font-bold text-gray-900 mb-4" data-i18n="features.smartIrrigation">Smart Irrigation</h3><p class="text-gray-600 leading-relaxed" data-i18n="features.smartIrrigationDesc">Optimize water usage with AI-driven irrigation scheduling and soil moisture analysis</p></div>
|
| 8 |
+
<div class="card-hover bg-white p-8 rounded-2xl shadow-lg border border-gray-100"><div class="w-16 h-16 bg-gradient-to-br from-orange-400 to-orange-600 rounded-xl flex items-center justify-center text-3xl mb-6">π‘οΈ</div><h3 class="text-2xl font-bold text-gray-900 mb-4" data-i18n="features.weatherForecasting">Weather Forecasting</h3><p class="text-gray-600 leading-relaxed" data-i18n="features.weatherForecastingDesc">Hyperlocal weather predictions to plan your farming activities perfectly</p></div>
|
| 9 |
+
<div class="card-hover bg-white p-8 rounded-2xl shadow-lg border border-gray-100"><div class="w-16 h-16 bg-gradient-to-br from-purple-400 to-purple-600 rounded-xl flex items-center justify-center text-3xl mb-6">π</div><h3 class="text-2xl font-bold text-gray-900 mb-4" data-i18n="features.yieldAnalytics">Yield Analytics</h3><p class="text-gray-600 leading-relaxed" data-i18n="features.yieldAnalyticsDesc">Predict harvest outcomes and optimize crop rotation strategies</p></div>
|
| 10 |
+
<div class="card-hover bg-white p-8 rounded-2xl shadow-lg border border-gray-100"><div class="w-16 h-16 bg-gradient-to-br from-pink-400 to-pink-600 rounded-xl flex items-center justify-center text-3xl mb-6">π°οΈ</div><h3 class="text-2xl font-bold text-gray-900 mb-4" data-i18n="features.satelliteMapping">Satellite Mapping</h3><p class="text-gray-600 leading-relaxed" data-i18n="features.satelliteMappingDesc">Monitor large-scale farms with satellite imagery and drone integration</p></div>
|
| 11 |
+
<div class="card-hover bg-white p-8 rounded-2xl shadow-lg border border-gray-100"><div class="w-16 h-16 bg-gradient-to-br from-yellow-400 to-yellow-600 rounded-xl flex items-center justify-center text-3xl mb-6">π€</div><h3 class="text-2xl font-bold text-gray-900 mb-4" data-i18n="features.expertSupport">Expert Support</h3><p class="text-gray-600 leading-relaxed" data-i18n="features.expertSupportDesc">24/7 access to agricultural experts and AI-powered recommendations</p></div>
|
| 12 |
+
</div>
|
| 13 |
+
</div>
|
| 14 |
+
</section>
|
| 15 |
+
</div>
|
templates/pages/gallery.html
ADDED
|
@@ -0,0 +1,15 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<div id="gallery-page" class="page pt-20">
|
| 2 |
+
<section class="py-20 min-h-screen">
|
| 3 |
+
<div class="max-w-7xl mx-auto px-6">
|
| 4 |
+
<div class="text-center mb-16"><h1 class="text-5xl font-extrabold text-gray-900 mb-4"><span data-i18n="gallery.title">Success</span> <span class="gradient-text">Stories</span></h1><p class="text-xl text-gray-600" data-i18n="gallery.subtitle">Real results from farms around the world</p></div>
|
| 5 |
+
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
| 6 |
+
<div class="gallery-item rounded-2xl overflow-hidden shadow-xl cursor-pointer"><div class="h-80 bg-gradient-to-br from-green-300 via-green-400 to-green-600 flex flex-col items-center justify-center p-8 text-white"><span class="text-8xl mb-4">π½</span><h3 class="text-2xl font-bold mb-2" data-i18n="gallery.cornExcellence">Corn Excellence</h3><p class="text-center" data-i18n="gallery.yieldIncrease">+45% yield increase</p></div></div>
|
| 7 |
+
<div class="gallery-item rounded-2xl overflow-hidden shadow-xl cursor-pointer"><div class="h-80 bg-gradient-to-br from-red-300 via-red-400 to-red-600 flex flex-col items-center justify-center p-8 text-white"><span class="text-8xl mb-4">π
</span><h3 class="text-2xl font-bold mb-2" data-i18n="gallery.tomatoPerfection">Tomato Perfection</h3><p class="text-center" data-i18n="gallery.zeroDisease">Zero disease detected</p></div></div>
|
| 8 |
+
<div class="gallery-item rounded-2xl overflow-hidden shadow-xl cursor-pointer"><div class="h-80 bg-gradient-to-br from-green-400 via-green-500 to-green-700 flex flex-col items-center justify-center p-8 text-white"><span class="text-8xl mb-4">π₯¬</span><h3 class="text-2xl font-bold mb-2" data-i18n="gallery.lettuceSuccess">Lettuce Success</h3><p class="text-center" data-i18n="gallery.premiumQuality">Premium quality grade</p></div></div>
|
| 9 |
+
<div class="gallery-item rounded-2xl overflow-hidden shadow-xl cursor-pointer"><div class="h-80 bg-gradient-to-br from-yellow-300 via-yellow-400 to-orange-500 flex flex-col items-center justify-center p-8 text-white"><span class="text-8xl mb-4">πΎ</span><h3 class="text-2xl font-bold mb-2" data-i18n="gallery.wheatTriumph">Wheat Triumph</h3><p class="text-center" data-i18n="gallery.recordHarvest">Record harvest 2024</p></div></div>
|
| 10 |
+
<div class="gallery-item rounded-2xl overflow-hidden shadow-xl cursor-pointer"><div class="h-80 bg-gradient-to-br from-pink-300 via-red-400 to-red-600 flex flex-col items-center justify-center p-8 text-white"><span class="text-8xl mb-4">π</span><h3 class="text-2xl font-bold mb-2" data-i18n="gallery.berryBrilliance">Berry Brilliance</h3><p class="text-center" data-i18n="gallery.organicCertified">Organic certified</p></div></div>
|
| 11 |
+
<div class="gallery-item rounded-2xl overflow-hidden shadow-xl cursor-pointer"><div class="h-80 bg-gradient-to-br from-green-500 via-green-600 to-green-800 flex flex-col items-center justify-center p-8 text-white"><span class="text-8xl mb-4">π₯</span><h3 class="text-2xl font-bold mb-2" data-i18n="gallery.cucumberChampion">Cucumber Champion</h3><p class="text-center" data-i18n="gallery.yearRoundProduction">Year-round production</p></div></div>
|
| 12 |
+
</div>
|
| 13 |
+
</div>
|
| 14 |
+
</section>
|
| 15 |
+
</div>
|
templates/pages/home.html
ADDED
|
@@ -0,0 +1,32 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<main id="home-page" class="page active pt-20">
|
| 2 |
+
<section class="hero-pattern min-h-screen flex items-center py-20">
|
| 3 |
+
<div class="max-w-7xl mx-auto px-6 grid md:grid-cols-2 gap-12 items-center">
|
| 4 |
+
<div>
|
| 5 |
+
<div class="inline-block bg-green-100 text-green-700 px-4 py-2 rounded-full text-sm font-semibold mb-6">π AI-Powered Agriculture</div>
|
| 6 |
+
<h1 id="hero-tagline" class="text-6xl font-extrabold text-gray-900 mb-6 leading-tight">Future of <span class="gradient-text">Farming</span></h1>
|
| 7 |
+
<p id="hero-description" class="text-xl text-gray-600 mb-8 leading-relaxed" data-i18n="home.heroDescription">Revolutionize your agricultural practices with cutting-edge AI technology. Monitor, analyze, and optimize your crops like never before.</p>
|
| 8 |
+
<div class="flex flex-wrap gap-4"><button id="cta-button" class="btn-gradient text-white px-8 py-4 rounded-full font-bold text-lg" onclick="navigateTo('analyze', event)" data-i18n="home.startTrial"> Start Free Trial </button> <button class="bg-white text-gray-700 px-8 py-4 rounded-full font-bold text-lg border-2 border-gray-200 hover:border-green-500 transition" onclick="navigateTo('features', event)" data-i18n="home.learnMore"> Learn More </button></div>
|
| 9 |
+
<div class="grid grid-cols-3 gap-6 mt-12">
|
| 10 |
+
<div><div class="stat-number gradient-text">50K+</div><div class="text-gray-600 font-medium" data-i18n="home.activeFarms">Active Farms</div></div>
|
| 11 |
+
<div><div class="stat-number gradient-text">98%</div><div class="text-gray-600 font-medium" data-i18n="home.accuracy">Accuracy</div></div>
|
| 12 |
+
<div><div class="stat-number gradient-text">24/7</div><div class="text-gray-600 font-medium" data-i18n="home.monitoring">Monitoring</div></div>
|
| 13 |
+
</div>
|
| 14 |
+
</div>
|
| 15 |
+
<div class="relative">
|
| 16 |
+
<div class="w-full h-96 bg-gradient-to-br from-green-400 via-green-500 to-orange-500 rounded-3xl shadow-2xl flex items-center justify-center transform rotate-3 hover:rotate-0 transition duration-500"><span class="text-9xl">πΎ</span></div>
|
| 17 |
+
<div class="absolute -bottom-6 -left-6 w-32 h-32 bg-orange-400 rounded-2xl shadow-xl flex items-center justify-center text-5xl transform -rotate-12">π</div>
|
| 18 |
+
<div class="absolute -top-6 -right-6 w-32 h-32 bg-green-400 rounded-2xl shadow-xl flex items-center justify-center text-5xl transform rotate-12">π€</div>
|
| 19 |
+
</div>
|
| 20 |
+
</div>
|
| 21 |
+
</section>
|
| 22 |
+
<section class="py-20 bg-white">
|
| 23 |
+
<div class="max-w-7xl mx-auto px-6">
|
| 24 |
+
<div class="text-center mb-16"><h2 class="text-4xl font-bold text-gray-900 mb-4" data-i18n="homeFeatures.title">Why Farmers Choose Us</h2><p class="text-xl text-gray-600" data-i18n="homeFeatures.subtitle">Powerful tools designed for modern agriculture</p></div>
|
| 25 |
+
<div class="grid md:grid-cols-3 gap-8">
|
| 26 |
+
<div class="card-hover bg-gradient-to-br from-green-50 to-green-100 p-8 rounded-2xl border-2 border-green-200"><div class="feature-icon text-6xl mb-4">π―</div><h3 class="text-2xl font-bold text-gray-900 mb-3" data-i18n="homeFeatures.precisionAnalysis">Precision Analysis</h3><p class="text-gray-700" data-i18n="homeFeatures.precisionAnalysisDesc">Advanced AI algorithms detect issues before they become problems</p></div>
|
| 27 |
+
<div class="card-hover bg-gradient-to-br from-orange-50 to-orange-100 p-8 rounded-2xl border-2 border-orange-200"><div class="feature-icon text-6xl mb-4">β‘</div><h3 class="text-2xl font-bold text-gray-900 mb-3" data-i18n="homeFeatures.realTimeInsights">Real-Time Insights</h3><p class="text-gray-700" data-i18n="homeFeatures.realTimeInsightsDesc">Get instant feedback and actionable recommendations</p></div>
|
| 28 |
+
<div class="card-hover bg-gradient-to-br from-green-50 to-orange-100 p-8 rounded-2xl border-2 border-green-200"><div class="feature-icon text-6xl mb-4">π°</div><h3 class="text-2xl font-bold text-gray-900 mb-3" data-i18n="homeFeatures.maximizeProfits">Maximize Profits</h3><p class="text-gray-700" data-i18n="homeFeatures.maximizeProfitsDesc">Increase yields by up to 40% with smart farming</p></div>
|
| 29 |
+
</div>
|
| 30 |
+
</div>
|
| 31 |
+
</section>
|
| 32 |
+
</main>
|
templates/pages/login.html
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<div id="login-page" class="page pt-20">
|
| 2 |
+
<section class="py-20 min-h-screen flex items-center">
|
| 3 |
+
<div class="max-w-md mx-auto px-6 w-full">
|
| 4 |
+
<div class="bg-white rounded-3xl shadow-2xl p-10 border-2 border-gray-100">
|
| 5 |
+
<div class="text-center mb-8"><div class="w-20 h-20 bg-gradient-to-br from-green-500 to-orange-500 rounded-2xl flex items-center justify-center text-white text-3xl font-bold mx-auto mb-4">A</div><h1 class="text-3xl font-extrabold text-gray-900 mb-2" data-i18n="login.welcomeBack">Welcome Back!</h1><p class="text-gray-600" data-i18n="login.signInContinue">Sign in to continue to Agrovision</p></div>
|
| 6 |
+
<div class="flex mb-8 bg-gray-100 rounded-xl p-1.5"><button id="login-tab" class="flex-1 py-3 rounded-lg font-bold transition bg-white shadow-sm text-green-600" onclick="switchAuthTab('login')" data-i18n="login.login"> Login </button> <button id="signup-tab" class="flex-1 py-3 rounded-lg font-bold transition text-gray-600" onclick="switchAuthTab('signup')" data-i18n="login.signUp"> Sign Up </button></div>
|
| 7 |
+
<form id="login-form" onsubmit="handleLogin(event)"><div class="mb-5"><label for="login-email" class="block text-gray-700 font-semibold mb-3" data-i18n="login.email">Email</label> <input type="email" id="login-email" required class="w-full px-5 py-4 border-2 border-gray-200 rounded-xl focus:outline-none focus:border-green-500 transition"></div><div class="mb-6"><label for="login-password" class="block text-gray-700 font-semibold mb-3" data-i18n="login.password">Password</label> <input type="password" id="login-password" required class="w-full px-5 py-4 border-2 border-gray-200 rounded-xl focus:outline-none focus:border-green-500 transition"></div><button type="submit" class="btn-gradient text-white w-full py-4 rounded-xl font-bold text-lg mb-4" data-i18n="login.signIn"> Sign In </button><p class="text-center text-gray-600"><a href="#" class="text-green-600 font-semibold hover:underline" data-i18n="login.forgotPassword">Forgot password?</a></p></form>
|
| 8 |
+
<form id="signup-form" class="hidden" onsubmit="handleSignup(event)"><div class="mb-5"><label for="signup-name" class="block text-gray-700 font-semibold mb-3" data-i18n="login.fullName">Full Name</label> <input type="text" id="signup-name" required class="w-full px-5 py-4 border-2 border-gray-200 rounded-xl focus:outline-none focus:border-green-500 transition"></div><div class="mb-5"><label for="signup-email" class="block text-gray-700 font-semibold mb-3" data-i18n="login.email">Email</label> <input type="email" id="signup-email" required class="w-full px-5 py-4 border-2 border-gray-200 rounded-xl focus:outline-none focus:border-green-500 transition"></div><div class="mb-5"><label for="signup-password" class="block text-gray-700 font-semibold mb-3" data-i18n="login.password">Password</label> <input type="password" id="signup-password" required class="w-full px-5 py-4 border-2 border-gray-200 rounded-xl focus:outline-none focus:border-green-500 transition"></div><div class="mb-6"><label for="signup-confirm" class="block text-gray-700 font-semibold mb-3" data-i18n="login.confirmPassword">Confirm Password</label> <input type="password" id="signup-confirm" required class="w-full px-5 py-4 border-2 border-gray-200 rounded-xl focus:outline-none focus:border-green-500 transition"></div><button type="submit" class="btn-gradient-orange text-white w-full py-4 rounded-xl font-bold text-lg" data-i18n="login.createAccount"> Create Account </button></form>
|
| 9 |
+
<div id="auth-success" class="hidden mt-6 p-5 bg-green-100 text-green-700 rounded-xl text-center font-semibold" data-i18n="login.successRedirect">β Success! Redirecting to dashboard...</div>
|
| 10 |
+
</div>
|
| 11 |
+
</div>
|
| 12 |
+
</section>
|
| 13 |
+
</div>
|