Upload 46 files

README.md

@@ -1,10 +1,10 @@
----
-title: My Flask App
-emoji: 🚀
-colorFrom: green
-colorTo: yellow
-sdk: docker
-pinned: false
----
-
-# Flask app running with Docker on Hugging Face Spaces
+---
+title: My Flask App
+emoji: 🚀
+colorFrom: green
+colorTo: yellow
+sdk: docker
+pinned: false
+---
+
+# Flask app running with Docker on Hugging Face Spaces

static/js/analysis.js

@@ -1,7 +1,17 @@
 import { getCurrentLanguage, translate } from './i18n.js';
 import { getCurrentImageFile } from './upload.js';
+import { apiCall } from './auth.js';
+import { navigateTo } from './navigation.js';
 
 async function analyzeImage() {
+  // Check authentication first
+  const authResult = await apiCall('/api/check-auth');
+  if (!authResult.success || !authResult.data.authenticated) {
+    alert(getCurrentLanguage() === 'az' ? 'Zəhmət olmasa əvvəlcə daxil olun' : 'Please sign in first to analyze images');
+    navigateTo('login', { preventDefault: () => {} });
+    return;
+  }
+  
   const currentImageFile = getCurrentImageFile();
   if (!currentImageFile) {
     alert(getCurrentLanguage() === 'az' ? 'Zəhmət olmasa əvvəlcə şəkil seçin' : 'Please select an image first');

static/js/auth.js

@@ -37,6 +37,9 @@ function toggleAccountMenu() {
 function updateUIForLoggedIn(email) {
   const signInBtn = document.getElementById('sign-in-btn');
   const accountMenu = document.getElementById('account-menu');
+  const mobileSignInBtn = document.getElementById('mobile-sign-in-btn');
+  const mobileAccountMenu = document.getElementById('mobile-account-menu');
+  
   if (signInBtn) {
     signInBtn.textContent = email || 'Dashboard';
     signInBtn.onclick = (event) => {
@@ -48,19 +51,56 @@ function updateUIForLoggedIn(email) {
     accountMenu.classList.remove('hidden');
     accountMenu.classList.add('hidden');
   }
+  
+  if (mobileSignInBtn) {
+    mobileSignInBtn.textContent = email || 'Dashboard';
+    mobileSignInBtn.onclick = (event) => {
+      event.preventDefault && event.preventDefault();
+      if (mobileAccountMenu) {
+        mobileAccountMenu.classList.toggle('hidden');
+      }
+    };
+  }
+  if (mobileAccountMenu) {
+    mobileAccountMenu.classList.add('hidden');
+  }
+  
   updateTranslations();
 }
 
 function updateUIForLoggedOut() {
   const signInBtn = document.getElementById('sign-in-btn');
   const accountMenu = document.getElementById('account-menu');
+  const mobileSignInBtn = document.getElementById('mobile-sign-in-btn');
+  const mobileAccountMenu = document.getElementById('mobile-account-menu');
+  
   if (signInBtn) {
     signInBtn.textContent = 'Sign In';
-    signInBtn.onclick = (event) => navigateTo('login', event);
+    signInBtn.onclick = (event) => {
+      if (typeof window.navigateTo === 'function') {
+        window.navigateTo('login', event);
+      }
+    };
   }
   if (accountMenu) {
     accountMenu.classList.add('hidden');
   }
+  
+  if (mobileSignInBtn) {
+    mobileSignInBtn.textContent = 'Sign In';
+    mobileSignInBtn.onclick = (event) => {
+      if (typeof window.navigateTo === 'function') {
+        window.navigateTo('login', event);
+        if (typeof window.closeMobileMenu === 'function') {
+          window.closeMobileMenu();
+        }
+      }
+    };
+  }
+  if (mobileAccountMenu) {
+    mobileAccountMenu.classList.add('hidden');
+  }
+  
   updateTranslations();
 }
 
@@ -68,7 +108,9 @@ async function handleLogout() {
   const result = await apiCall('/api/logout', { method: 'POST' });
   if (result.success) {
     updateUIForLoggedOut();
-    navigateTo('home', { preventDefault: () => {} });
+    if (typeof window.navigateTo === 'function') {
+      window.navigateTo('home', { preventDefault: () => {} });
+    }
   } else {
     alert(result.data?.message || (getCurrentLanguage() === 'az' ? 'Sistemdən çıxışda xəta.' : 'Error logging out.'));
   }
@@ -90,7 +132,9 @@ async function handleLogin(event) {
     successDiv.classList.add('bg-green-100', 'text-green-700');
     updateUIForLoggedIn(email);
     setTimeout(() => {
-      navigateTo('dashboard', event);
+      if (typeof window.navigateTo === 'function') {
+        window.navigateTo('dashboard', event);
+      }
       successDiv.classList.add('hidden');
       document.getElementById('login-form').reset();
     }, 1500);

static/js/dashboard.js

@@ -1,9 +1,15 @@
 import { apiCall } from './auth.js';
 import { updateDarkModeGradients } from './darkmode.js';
+import { getCurrentLanguage } from './i18n.js';
 
 async function loadDashboard() {
   const authResult = await apiCall('/api/check-auth');
   if (!authResult.success || !authResult.data.authenticated) {
+    alert(getCurrentLanguage() === 'az' ? 'Zəhmət olmasa əvvəlcə daxil olun' : 'Please sign in first to access the dashboard');
+    // Use global navigateTo function (defined in main.js)
+    if (typeof window.navigateTo === 'function') {
+      window.navigateTo('login', { preventDefault: () => {} });
+    }
     return;
   }
   const imagesResult = await apiCall('/api/my-images');

static/js/main.js

@@ -31,17 +31,10 @@ initMenuEvents();
 initUpload();
 if (window.location.hash) {
   const page = window.location.hash.substring(1);
-  const pageElement = document.getElementById(`${page}-page`);
-  if (pageElement) {
-    document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
-    pageElement.classList.add('active');
-    const pages = ['home', 'features', 'analyze', 'dashboard', 'gallery', 'contact', 'login'];
-    const index = pages.indexOf(page);
-    if (index >= 0) {
-      document.querySelectorAll('.sidebar-dot').forEach(dot => dot.classList.remove('active'));
-      const dots = document.querySelectorAll('.sidebar-dot');
-      if (dots[index]) dots[index].classList.add('active');
-    }
-  }
+  // Use navigateTo to ensure authentication checks are performed
+  navigateTo(page, { preventDefault: () => {} });
+} else {
+  // If no hash, ensure home page is shown
+  navigateTo('home', { preventDefault: () => {} });
 }
 initElementSdk();

static/js/menu.js

@@ -59,6 +59,11 @@ function initMenuEvents() {
     if (accountBtn && accountMenu && !accountBtn.contains(e.target) && !accountMenu.contains(e.target)) {
       accountMenu.classList.add('hidden');
     }
+    const mobileAccountBtn = document.getElementById('mobile-sign-in-btn');
+    const mobileAccountMenu = document.getElementById('mobile-account-menu');
+    if (mobileAccountBtn && mobileAccountMenu && !mobileAccountBtn.contains(e.target) && !mobileAccountMenu.contains(e.target)) {
+      mobileAccountMenu.classList.add('hidden');
+    }
   });
 }
 

static/js/navigation.js

@@ -1,9 +1,22 @@
 import { loadDashboard } from './dashboard.js';
+import { apiCall } from './auth.js';
+import { getCurrentLanguage } from './i18n.js';
 
-function navigateTo(page, event) {
+async function navigateTo(page, event) {
   if (event && event.preventDefault) {
     event.preventDefault();
   }
+  
+  // Check authentication for protected pages
+  const protectedPages = ['analyze', 'dashboard'];
+  if (protectedPages.includes(page)) {
+    const authResult = await apiCall('/api/check-auth');
+    if (!authResult.success || !authResult.data.authenticated) {
+      alert(getCurrentLanguage() === 'az' ? 'Zəhmət olmasa əvvəlcə daxil olun' : 'Please sign in first to access this page');
+      page = 'login';
+    }
+  }
+  
   document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
   const pageElement = document.getElementById(`${page}-page`);
   if (pageElement) {

templates/base.html

@@ -1,19 +1,19 @@
-<!doctype html>
-<html lang="en">
- <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Agrovision - Future of Farming</title>
-  <link rel="stylesheet" href="/static/styles.css">
-  <script src="/_sdk/element_sdk.js"></script>
-  <script src="https://cdn.tailwindcss.com"></script>
-  <script src="https://cdn.jsdelivr.net/npm/qrcode@1.5.3/build/qrcode.min.js"></script>
- </head>
- <body class="bg-gray-50">
-  {% include 'components/dark_toggle.html' %}
-  {% include 'components/header.html' %}
-  {% block content %}{% endblock %}
-  <script src="/static/translations.js"></script>
-  <script type="module" src="/static/js/main.js"></script>
- </body>
-</html>
+<!doctype html>
+<html lang="en">
+ <head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Agrovision - Future of Farming</title>
+  <link rel="stylesheet" href="/static/styles.css">
+  <script src="/_sdk/element_sdk.js"></script>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script src="https://cdn.jsdelivr.net/npm/qrcode@1.5.3/build/qrcode.min.js"></script>
+ </head>
+ <body class="bg-gray-50">
+  {% include 'components/dark_toggle.html' %}
+  {% include 'components/header.html' %}
+  {% block content %}{% endblock %}
+  <script src="/static/translations.js"></script>
+  <script type="module" src="/static/js/main.js"></script>
+ </body>
+</html>

templates/components/header.html

@@ -1,9 +1,9 @@
 <header class="fixed top-0 left-0 right-0 bg-white/95 backdrop-blur-sm shadow-sm z-50">
  <nav class="max-w-7xl mx-auto px-4 md:px-6 py-4">
   <div class="flex justify-between items-center">
-   <div class="flex items-center space-x-2">
+   <a href="#home" class="flex items-center space-x-2 cursor-pointer hover:opacity-80 transition-opacity" onclick="navigateTo('home', event)">
     <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>
-   </div>
+   </a>
    <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>
    <div class="hidden md:flex items-center space-x-4">
     <div class="relative">
@@ -26,26 +26,6 @@
     <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>
    </button>
   </div>
-  <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">
-   <div class="px-4 space-y-2">
-    <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>
-    <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>
-    <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>
-    <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>
-    <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>
-    <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>
-    <div class="border-t border-gray-200 my-2"></div>
-    <div class="px-4 py-2">
-     <div class="relative mb-3">
-      <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>
-      <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">
-       <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>
-       <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>
-      </div>
-     </div>
-     <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>
-    </div>
-   </div>
-  </div>
+  {% include 'components/mobile_menu.html' %}
  </nav>
 </header>

templates/components/mobile_menu.html

@@ -0,0 +1,26 @@
+<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">
+ <div class="px-4 space-y-2">
+  <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>
+  <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>
+  <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>
+  <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>
+  <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>
+  <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>
+  <div class="border-t border-gray-200 my-2"></div>
+  <div class="px-4 py-2">
+   <div class="relative mb-3">
+    <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>
+    <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">
+     <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>
+     <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>
+    </div>
+   </div>
+   <button id="mobile-sign-in-btn" class="w-full btn-gradient-orange text-white px-6 py-3 rounded-lg font-semibold" onclick="navigateTo('login', event); closeMobileMenu();"> Sign In </button>
+   <div id="mobile-account-menu" class="hidden mt-2 space-y-2">
+    <button class="w-full text-left 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</button>
+    <button class="w-full text-left px-4 py-3 rounded-lg text-red-600 font-medium hover:bg-red-50 transition" data-i18n="nav.signout" onclick="handleLogout(); closeMobileMenu();">Sign out</button>
+   </div>
+  </div>
+ </div>
+</div>
+