Spaces:

yandri918
/

agrisensa-api

Running

App Files Files Community

yandri918 commited on Nov 27, 2025

Commit

4dddda3

1 Parent(s): fa943e3

Enhance Price Trend (1-Year), Fix Dashboard, Modernize Home (No Icons)

Browse files

Files changed (10) hide show

AgriSensa_Portfolio.html +277 -0
agrisensa-portfolio +1 -0
api/index.py +5 -0
app/routes/legacy.py +3 -1
app/routes/main.py +0 -19
fix_encoding.py +38 -0
list_models.py +12 -0
templates/home.html +160 -105
templates/modules/analisis_tren_harga.html +11 -1
vercel.json +5 -5

AgriSensa_Portfolio.html ADDED Viewed

	@@ -0,0 +1,277 @@

+<!DOCTYPE html>
+<html lang="id">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AgriSensa - Portfolio Project | Yandri918</title>
+    <link
+        href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Poppins:wght@600;700;800&display=swap"
+        rel="stylesheet">
+    <style>
+        /* Minimized CSS for file size */
+        :root {
+            --primary: #10b981;
+            --dark: #0f172a;
+            --gray-50: #f8fafc;
+            --gray-600: #475569;
+            --gray-700: #334155;
+        }
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: 'Inter', sans-serif;
+            line-height: 1.6;
+            color: #1e293b;
+            background: var(--gray-50);
+        }
+        nav {
+            position: fixed;
+            top: 0;
+            width: 100%;
+            background: rgba(255, 255, 255, 0.95);
+            backdrop-filter: blur(10px);
+            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+            z-index: 1000;
+        }
+        .nav-container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 1rem 2rem;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .logo {
+            font-family: 'Poppins', sans-serif;
+            font-size: 1.5rem;
+            font-weight: 700;
+            color: var(--primary);
+            text-decoration: none;
+        }
+        .nav-links {
+            display: flex;
+            gap: 2rem;
+            list-style: none;
+        }
+        .nav-links a {
+            color: var(--gray-700);
+            text-decoration: none;
+            font-weight: 500;
+            transition: color 0.3s;
+        }
+        .nav-links a:hover {
+            color: var(--primary);
+        }
+        .hero {
+            padding: 8rem 2rem 4rem;
+            background: linear-gradient(135deg, var(--dark) 0%, #1e293b 100%);
+            color: white;
+            text-align: center;
+        }
+        .hero h1 {
+            font-family: 'Poppins', sans-serif;
+            font-size: 3.5rem;
+            font-weight: 800;
+            margin-bottom: 1rem;
+            background: linear-gradient(to right, #34d399, #60a5fa);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 4rem 2rem;
+        }
+        .section {
+            margin-bottom: 4rem;
+        }
+        .section-title {
+            font-family: 'Poppins', sans-serif;
+            font-size: 2.5rem;
+            font-weight: 700;
+            margin-bottom: 1rem;
+        }
+        .grid {
+            display: grid;
+            gap: 2rem;
+        }
+        .grid-4 {
+            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+        }
+        .grid-3 {
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+        }
+        .card {
+            background: white;
+            padding: 2rem;
+            border-radius: 12px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
+        }
+        .card:hover {
+            transform: translateY(-5px);
+            transition: all 0.3s;
+        }
+        .btn {
+            padding: 1rem 2rem;
+            border-radius: 8px;
+            text-decoration: none;
+            font-weight: 600;
+            transition: all 0.3s;
+            display: inline-flex;
+            gap: 0.5rem;
+        }
+        .btn-primary {
+            background: var(--primary);
+            color: white;
+        }
+        footer {
+            background: var(--dark);
+            color: white;
+            padding: 3rem 2rem;
+            text-align: center;
+        }
+    </style>
+</head>
+<body>
+    <nav>
+        <div class="nav-container"><a href="#" class="logo">🌾 AgriSensa</a></div>
+    </nav>
+    <section class="hero">
+        <h1>🌾 AgriSensa</h1>
+        <p style="font-size: 1.5rem; margin-bottom: 2rem;">Platform Pertanian Cerdas Berbasis AI</p>
+        <p style="max-width: 800px; margin: 0 auto 2rem;">Platform komprehensif dengan 25+ modul AI untuk memberdayakan
+            petani Indonesia</p>
+        <a href="https://huggingface.co/spaces/yandri918/agrisensa-api" class="btn btn-primary" target="_blank">🚀 Live
+            Demo</a>
+    </section>
+    <div class="container">
+        <section class="section">
+            <h2 class="section-title">Project Overview</h2>
+            <div class="grid grid-4">
+                <div class="card" style="text-align: center;">
+                    <div style="font-size: 3rem; font-weight: 800; color: var(--primary);">25+</div>
+                    <div>Modul AI</div>
+                </div>
+                <div class="card" style="text-align: center;">
+                    <div style="font-size: 3rem; font-weight: 800; color: var(--primary);">7</div>
+                    <div>ML Models</div>
+                </div>
+                <div class="card" style="text-align: center;">
+                    <div style="font-size: 3rem; font-weight: 800; color: var(--primary);">20+</div>
+                    <div>Komoditas</div>
+                </div>
+                <div class="card" style="text-align: center;">
+                    <div style="font-size: 3rem; font-weight: 800; color: var(--primary);">99.5%</div>
+                    <div>Uptime</div>
+                </div>
+            </div>
+        </section>
+        <section class="section">
+            <h2 class="section-title">Key Features</h2>
+            <div class="grid grid-3">
+                <div class="card">
+                    <div style="font-size: 3rem;">🤖</div>
+                    <h3>AgriBot AI</h3>
+                    <p>Chatbot cerdas berbasis Google Gemini AI</p>
+                </div>
+                <div class="card">
+                    <div style="font-size: 3rem;">🌾</div>
+                    <h3>Crop Recommendation</h3>
+                    <p>Analisis 7 parameter untuk rekomendasi optimal</p>
+                </div>
+                <div class="card">
+                    <div style="font-size: 3rem;">🔬</div>
+                    <h3>Disease Detection</h3>
+                    <p>Computer Vision dengan Roboflow</p>
+                </div>
+                <div class="card">
+                    <div style="font-size: 3rem;">📊</div>
+                    <h3>Market Intelligence</h3>
+                    <p>Prediksi harga dengan ML</p>
+                </div>
+                <div class="card">
+                    <div style="font-size: 3rem;">🧮</div>
+                    <h3>Fertilizer Calculator</h3>
+                    <p>Perhitungan pupuk presisi</p>
+                </div>
+                <div class="card">
+                    <div style="font-size: 3rem;">📚</div>
+                    <h3>Knowledge Base</h3>
+                    <p>Database lengkap SOP budidaya</p>
+                </div>
+            </div>
+        </section>
+        <section class="section">
+            <h2 class="section-title">Technology Stack</h2>
+            <div class="grid grid-3">
+                <div class="card">
+                    <h3 style="color: var(--primary);">Backend</h3>
+                    <ul style="list-style: none;">
+                        <li>✓ Python 3.12</li>
+                        <li>✓ Flask 3.0</li>
+                        <li>✓ SQLAlchemy</li>
+                    </ul>
+                </div>
+                <div class="card">
+                    <h3 style="color: var(--primary);">Machine Learning</h3>
+                    <ul style="list-style: none;">
+                        <li>✓ scikit-learn</li>
+                        <li>✓ TensorFlow</li>
+                        <li>✓ SHAP (XAI)</li>
+                    </ul>
+                </div>
+                <div class="card">
+                    <h3 style="color: var(--primary);">AI Services</h3>
+                    <ul style="list-style: none;">
+                        <li>✓ Google Gemini</li>
+                        <li>✓ Roboflow CV</li>
+                        <li>✓ Custom Models</li>
+                    </ul>
+                </div>
+            </div>
+        </section>
+    </div>
+    <footer>
+        <h2 style="font-family: 'Poppins', sans-serif; margin-bottom: 1rem;">Get In Touch</h2>
+        <div style="display: flex; justify-content: center; gap: 2rem; margin: 2rem 0;">
+            <a href="https://github.com/yandri918" style="color: white; text-decoration: none;" target="_blank">📂
+                GitHub</a>
+            <a href="https://linkedin.com/in/yandri918" style="color: white; text-decoration: none;" target="_blank">💼
+                LinkedIn</a>
+        </div>
+        <p>&copy; 2025 Yandri918. Built with ❤️ for Indonesian Farmers</p>
+    </footer>
+</body>
+</html>

agrisensa-portfolio ADDED Viewed

	@@ -0,0 +1 @@


1	+ Subproject commit bcf4b4a3f222c1a1191b1dbf22849bca718561f0

api/index.py ADDED Viewed

	@@ -0,0 +1,5 @@

+from app import create_app
+app = create_app()
+# Vercel expects a variable named 'app' to be exposed

app/routes/legacy.py CHANGED Viewed

@@ -621,10 +621,12 @@ def get_historical_prices_endpoint():
     try:
         data = request.get_json()
         commodity = data.get('commodity')
         if not commodity:
             return jsonify({'success': False, 'error': 'Komoditas tidak dipilih'}), 400
-        history = market_service.get_historical_prices(commodity, days=30)
         if not history:
              return jsonify({'success': False, 'error': 'Data tidak ditemukan'}), 404

     try:
         data = request.get_json()
         commodity = data.get('commodity')
+        days = int(data.get('range', 30))  # Default to 30 days if not specified
         if not commodity:
             return jsonify({'success': False, 'error': 'Komoditas tidak dipilih'}), 400
+        history = market_service.get_historical_prices(commodity, days=days)
         if not history:
              return jsonify({'success': False, 'error': 'Data tidak ditemukan'}), 404

app/routes/main.py CHANGED Viewed

@@ -11,25 +11,6 @@ def home():
     return render_template('home.html')
-@main_bp.route('/dashboard')
-def dashboard():
-    """Render the new main dashboard page."""
-    return render_template('home.html')
-@main_bp.route('/fruit-guide')
-def fruit_guide():
-    """Render the fruit guide page."""
-    return render_template('fruit_guide.html')
-@main_bp.route('/modules/analis-risiko-keberhasilan-ai')
-def analis_risiko_keberhasilan_ai():
-    return render_template('modules/analis_risiko_keberhasilan_ai.html')
-@main_bp.route('/modules/analisis-npk-manual')
-def analisis_npk_manual():
-    return render_template('modules/analisis_npk_manual.html')
 @main_bp.route('/modules/analisis-tren-harga')
 def analisis_tren_harga():

     return render_template('home.html')
 @main_bp.route('/modules/analisis-tren-harga')
 def analisis_tren_harga():

fix_encoding.py ADDED Viewed

	@@ -0,0 +1,38 @@

+import codecs
+# Read the original file from git
+import subprocess
+result = subprocess.run(['git', 'show', '686dcb4:templates/home.html'],
+                       capture_output=True, text=False, cwd=r'c:\Users\yandr\OneDrive\Desktop\agrisensa-api')
+content = result.stdout.decode('utf-8')
+# Add PWA support
+# Find and add manifest link after the font link
+content = content.replace(
+    '        rel="stylesheet" />',
+    '        rel="stylesheet" />\n    <link rel="manifest" href="/static/manifest.json">\n    <meta name="theme-color" content="#10b981">',
+    1
+)
+# Add service worker registration before the ticker update
+sw_code = '''        // Register Service Worker for PWA
+        if ('serviceWorker' in navigator) {
+            window.addEventListener('load', () => {
+                navigator.serviceWorker.register('/sw.js')
+                    .then(registration => {
+                        console.log('ServiceWorker registration successful');
+                    })
+                    .catch(err => {
+                        console.log('ServiceWorker registration failed: ', err);
+                    });
+            });
+        }
+        '''
+content = content.replace('        // Init\n        updateTicker();', sw_code + '// Init\n        updateTicker();')
+# Write with UTF-8 encoding
+with codecs.open(r'c:\Users\yandr\OneDrive\Desktop\agrisensa-api\templates\home.html', 'w', encoding='utf-8') as f:
+    f.write(content)
+print("File restored with correct UTF-8 encoding and PWA support added!")

list_models.py ADDED Viewed

	@@ -0,0 +1,12 @@

+import google.generativeai as genai
+API_KEY = "AIzaSyBsO07f4MK3Sg7EPynrFmrriZgScmFBiQU"
+genai.configure(api_key=API_KEY)
+try:
+    print("Listing models...")
+    for m in genai.list_models():
+        if 'generateContent' in m.supported_generation_methods:
+            print(m.name)
+except Exception as e:
+    print(f"Error: {e}")

templates/home.html CHANGED Viewed

@@ -8,33 +8,28 @@
     <link href="https://fonts.googleapis.com" rel="preconnect" />
     <link href="https://fonts.gstatic.com" crossorigin="" rel="preconnect" />
     <link
-        href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Inter:wght@400;500;600&display=swap"
         rel="stylesheet" />
     <link rel="manifest" href="/static/manifest.json">
     <meta name="theme-color" content="#10b981">
     <style>
         :root {
             --primary: #10b981;
-            /* Emerald 500 */
             --primary-dark: #059669;
-            /* Emerald 600 */
             --secondary: #3b82f6;
-            /* Blue 500 */
             --accent: #f59e0b;
-            /* Amber 500 */
-            --bg-body: #f8fafc;
-            /* Slate 50 */
-            --bg-card: #ffffff;
-            --text-main: #1e293b;
-            /* Slate 800 */
             --text-muted: #64748b;
-            /* Slate 500 */
-            --border: #e2e8f0;
-            /* Slate 200 */
             --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
             --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-            --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-            --radius: 16px;
         }
         * {
@@ -48,6 +43,12 @@
             background-color: var(--bg-body);
             color: var(--text-main);
             -webkit-font-smoothing: antialiased;
         }
         h1,
@@ -61,73 +62,71 @@
         /* Hero Section */
         .hero {
-            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
-            color: white;
-            padding: 80px 20px 60px;
-            text-align: center;
             position: relative;
             overflow: hidden;
         }
-        .hero::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background: radial-gradient(circle at 20% 150%, rgba(16, 185, 129, 0.3) 0%, transparent 50%),
-                radial-gradient(circle at 80% -50%, rgba(59, 130, 246, 0.3) 0%, transparent 50%);
-            z-index: 1;
-        }
         .hero-content {
             position: relative;
             z-index: 2;
-            max-width: 800px;
             margin: 0 auto;
         }
         .hero h1 {
-            font-size: 3.5rem;
-            font-weight: 700;
-            margin-bottom: 15px;
-            letter-spacing: -1px;
-            background: linear-gradient(to right, #34d399, #60a5fa);
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
         }
         .hero p {
             font-size: 1.25rem;
-            color: #94a3b8;
-            margin-bottom: 30px;
             line-height: 1.6;
         }
         .hero-badge {
             display: inline-flex;
             align-items: center;
-            gap: 8px;
-            background: rgba(255, 255, 255, 0.1);
-            backdrop-filter: blur(10px);
-            padding: 8px 16px;
             border-radius: 50px;
-            border: 1px solid rgba(255, 255, 255, 0.2);
-            font-size: 0.9rem;
-            color: #e2e8f0;
         }
         /* Ticker */
         .ticker-wrap {
-            background: #10b981;
-            color: white;
             overflow: hidden;
-            height: 40px;
-            line-height: 40px;
-            position: relative;
-            z-index: 10;
-            box-shadow: var(--shadow-md);
         }
         .ticker {
@@ -141,6 +140,7 @@
             display: inline-block;
             padding: 0 2rem;
             font-weight: 500;
         }
         @keyframes ticker {
@@ -157,93 +157,129 @@
         .container {
             max-width: 1280px;
             margin: 0 auto;
-            padding: 40px 20px;
         }
         .section-header {
-            margin-bottom: 40px;
             text-align: center;
         }
         .section-title {
-            font-size: 2rem;
             font-weight: 700;
             color: var(--text-main);
-            margin-bottom: 10px;
         }
         .section-subtitle {
             color: var(--text-muted);
         }
         /* Grid */
         .module-grid {
             display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-            gap: 24px;
         }
         /* Module Card */
         .module-card {
-            background: var(--bg-card);
             border-radius: var(--radius);
-            padding: 24px;
-            border: 1px solid var(--border);
-            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
             display: flex;
             flex-direction: column;
             position: relative;
             overflow: hidden;
             text-decoration: none;
             color: inherit;
         }
         .module-card:hover {
-            transform: translateY(-5px);
             box-shadow: var(--shadow-lg);
-            border-color: var(--primary);
         }
         .module-icon {
-            font-size: 2.5rem;
-            margin-bottom: 16px;
-            background: var(--bg-body);
-            width: 60px;
-            height: 60px;
             display: flex;
             align-items: center;
             justify-content: center;
-            border-radius: 12px;
-            transition: transform 0.3s ease;
         }
         .module-card:hover .module-icon {
             transform: scale(1.1) rotate(5deg);
-            background: #ecfdf5;
         }
         .module-title {
-            font-size: 1.1rem;
             font-weight: 700;
-            margin-bottom: 8px;
             color: var(--text-main);
         }
         .module-desc {
-            font-size: 0.9rem;
             color: var(--text-muted);
-            line-height: 1.5;
-            margin-bottom: 20px;
             flex-grow: 1;
         }
         .module-link {
-            font-size: 0.9rem;
             font-weight: 600;
             color: var(--primary-dark);
             display: flex;
             align-items: center;
-            gap: 5px;
         }
         .module-link::after {
@@ -252,61 +288,87 @@
         }
         .module-card:hover .module-link::after {
-            transform: translateX(5px);
         }
         /* Badges */
         .badge {
             position: absolute;
-            top: 12px;
-            right: 12px;
-            padding: 4px 10px;
             border-radius: 20px;
             font-size: 0.75rem;
             font-weight: 700;
             text-transform: uppercase;
             letter-spacing: 0.5px;
         }
         .badge-new {
-            background: #dbeafe;
             color: #1e40af;
         }
         .badge-hot {
-            background: #fef3c7;
             color: #92400e;
         }
         /* Footer */
         .footer {
             text-align: center;
-            padding: 40px 20px;
             color: var(--text-muted);
-            font-size: 0.9rem;
-            border-top: 1px solid var(--border);
-            margin-top: 60px;
-            background: white;
         }
         /* Responsive */
         @media (max-width: 768px) {
             .hero h1 {
-                font-size: 2.5rem;
             }
             .hero p {
-                font-size: 1rem;
             }
             .module-grid {
                 grid-template-columns: 1fr;
             }
         }
     </style>
 </head>
 <body>
     <!-- Hero -->
     <div class="hero">
         <div class="hero-content">
@@ -316,13 +378,6 @@
         </div>
     </div>
-    <!-- Ticker -->
-    <div class="ticker-wrap">
-        <div class="ticker" id="price-ticker">
-            <div class="ticker-item">Memuat data harga pasar terkini...</div>
-        </div>
-    </div>
     <!-- Main Content -->
     <div class="container">
         <div class="section-header">
@@ -333,7 +388,7 @@
         <div class="module-grid">
             <!-- Featured Modules -->
-            <a href="/modules/katalog-pupuk" class="module-card" style="border-color: var(--primary);">
                 <span class="badge badge-new">Baru</span>
                 <div class="module-icon">📋</div>
                 <h3 class="module-title">Katalog Pupuk</h3>
@@ -341,11 +396,11 @@
                 <span class="module-link">Buka Katalog</span>
             </a>
-            <a href="/modules/chatbot" class="module-card" style="border-color: var(--primary);">
                 <span class="badge badge-hot">AI</span>
                 <div class="module-icon">🤖</div>
                 <h3 class="module-title">AgriBot</h3>
-                <p class="module-desc">Asisten pertanian cerdas siap menjawab pertanyaan Anda.</p>
                 <span class="module-link">Chat Sekarang</span>
             </a>
@@ -390,7 +445,7 @@
             <a href="/modules/analisis-tren-harga" class="module-card">
                 <div class="module-icon">📈</div>
                 <h3 class="module-title">Analisis Tren</h3>
-                <p class="module-desc">Visualisasi dan prediksi tren harga komoditas.</p>
                 <span class="module-link">Lihat Tren</span>
             </a>
@@ -551,7 +606,7 @@
                     items.forEach(item => {
                         html += `<div class="ticker-item">
-                            ${item.name}: <span style="color: #a7f3d0; font-weight: 700;">${new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR', minimumFractionDigits: 0 }).format(item.price)}</span> / ${item.unit}
                         </div>`;
                     });
                     ticker.innerHTML = html;

     <link href="https://fonts.googleapis.com" rel="preconnect" />
     <link href="https://fonts.gstatic.com" crossorigin="" rel="preconnect" />
     <link
+        href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Inter:wght@400;500;600&display=swap"
         rel="stylesheet" />
     <link rel="manifest" href="/static/manifest.json">
     <meta name="theme-color" content="#10b981">
     <style>
         :root {
             --primary: #10b981;
             --primary-dark: #059669;
             --secondary: #3b82f6;
             --accent: #f59e0b;
+            --bg-body: #f0fdf4;
+            --bg-card: rgba(255, 255, 255, 0.8);
+            --text-main: #0f172a;
             --text-muted: #64748b;
+            --border: rgba(226, 232, 240, 0.8);
             --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
             --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+            --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+            --radius: 24px;
+            --glass-border: 1px solid rgba(255, 255, 255, 0.5);
+            --glass-bg: rgba(255, 255, 255, 0.7);
+            --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
         }
         * {
             background-color: var(--bg-body);
             color: var(--text-main);
             -webkit-font-smoothing: antialiased;
+            background-image:
+                radial-gradient(at 0% 0%, rgba(16, 185, 129, 0.15) 0px, transparent 50%),
+                radial-gradient(at 100% 0%, rgba(59, 130, 246, 0.15) 0px, transparent 50%),
+                radial-gradient(at 100% 100%, rgba(245, 158, 11, 0.1) 0px, transparent 50%);
+            background-attachment: fixed;
+            min-height: 100vh;
         }
         h1,
         /* Hero Section */
         .hero {
             position: relative;
+            padding: 100px 20px 80px;
+            text-align: center;
             overflow: hidden;
         }
         .hero-content {
             position: relative;
             z-index: 2;
+            max-width: 900px;
             margin: 0 auto;
         }
         .hero h1 {
+            font-size: 4rem;
+            font-weight: 800;
+            margin-bottom: 20px;
+            line-height: 1.1;
+            background: linear-gradient(135deg, #059669 0%, #2563eb 100%);
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
+            letter-spacing: -0.02em;
+            animation: fadeUp 0.8s ease-out;
         }
         .hero p {
             font-size: 1.25rem;
+            color: var(--text-muted);
+            margin-bottom: 40px;
             line-height: 1.6;
+            max-width: 700px;
+            margin-left: auto;
+            margin-right: auto;
+            animation: fadeUp 0.8s ease-out 0.2s backwards;
         }
         .hero-badge {
             display: inline-flex;
             align-items: center;
+            gap: 10px;
+            background: white;
+            padding: 10px 24px;
             border-radius: 50px;
+            border: var(--glass-border);
+            box-shadow: var(--shadow-md);
+            font-size: 0.95rem;
+            font-weight: 600;
+            color: var(--text-main);
+            animation: fadeUp 0.8s ease-out 0.4s backwards;
         }
         /* Ticker */
         .ticker-wrap {
+            background: rgba(255, 255, 255, 0.9);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid rgba(0, 0, 0, 0.05);
+            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+            color: var(--text-main);
             overflow: hidden;
+            height: 50px;
+            line-height: 50px;
+            position: sticky;
+            top: 0;
+            z-index: 100;
+            box-shadow: var(--shadow-sm);
         }
         .ticker {
             display: inline-block;
             padding: 0 2rem;
             font-weight: 500;
+            font-size: 0.95rem;
         }
         @keyframes ticker {
         .container {
             max-width: 1280px;
             margin: 0 auto;
+            padding: 60px 20px;
         }
         .section-header {
+            margin-bottom: 50px;
             text-align: center;
+            animation: fadeUp 0.8s ease-out 0.6s backwards;
         }
         .section-title {
+            font-size: 2.5rem;
             font-weight: 700;
             color: var(--text-main);
+            margin-bottom: 12px;
         }
         .section-subtitle {
+            font-size: 1.1rem;
             color: var(--text-muted);
         }
         /* Grid */
         .module-grid {
             display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+            gap: 30px;
         }
         /* Module Card */
         .module-card {
+            background: var(--glass-bg);
+            backdrop-filter: blur(12px);
+            border: var(--glass-border);
             border-radius: var(--radius);
+            padding: 30px;
+            box-shadow: var(--glass-shadow);
+            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
             display: flex;
             flex-direction: column;
             position: relative;
             overflow: hidden;
             text-decoration: none;
             color: inherit;
+            height: 100%;
+            animation: fadeUp 0.8s ease-out backwards;
+        }
+        /* Staggered animation for cards */
+        .module-card:nth-child(1) {
+            animation-delay: 0.1s;
+        }
+        .module-card:nth-child(2) {
+            animation-delay: 0.15s;
+        }
+        .module-card:nth-child(3) {
+            animation-delay: 0.2s;
+        }
+        .module-card:nth-child(4) {
+            animation-delay: 0.25s;
         }
+        .module-card:nth-child(5) {
+            animation-delay: 0.3s;
+        }
+        .module-card:nth-child(6) {
+            animation-delay: 0.35s;
+        }
+        /* ... add more if needed or use JS */
         .module-card:hover {
+            transform: translateY(-8px) scale(1.02);
             box-shadow: var(--shadow-lg);
+            background: rgba(255, 255, 255, 0.9);
+            border-color: rgba(16, 185, 129, 0.3);
         }
         .module-icon {
+            font-size: 3rem;
+            margin-bottom: 20px;
+            background: linear-gradient(135deg, #ecfdf5 0%, #eff6ff 100%);
+            width: 70px;
+            height: 70px;
             display: flex;
             align-items: center;
             justify-content: center;
+            border-radius: 20px;
+            transition: transform 0.4s ease;
+            box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.8), 0 4px 6px rgba(0, 0, 0, 0.05);
         }
         .module-card:hover .module-icon {
             transform: scale(1.1) rotate(5deg);
         }
         .module-title {
+            font-size: 1.25rem;
             font-weight: 700;
+            margin-bottom: 10px;
             color: var(--text-main);
+            letter-spacing: -0.01em;
         }
         .module-desc {
+            font-size: 0.95rem;
             color: var(--text-muted);
+            line-height: 1.6;
+            margin-bottom: 24px;
             flex-grow: 1;
         }
         .module-link {
+            font-size: 0.95rem;
             font-weight: 600;
             color: var(--primary-dark);
             display: flex;
             align-items: center;
+            gap: 6px;
+            margin-top: auto;
         }
         .module-link::after {
         }
         .module-card:hover .module-link::after {
+            transform: translateX(6px);
         }
         /* Badges */
         .badge {
             position: absolute;
+            top: 16px;
+            right: 16px;
+            padding: 6px 12px;
             border-radius: 20px;
             font-size: 0.75rem;
             font-weight: 700;
             text-transform: uppercase;
             letter-spacing: 0.5px;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
         }
         .badge-new {
+            background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
             color: #1e40af;
         }
         .badge-hot {
+            background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
             color: #92400e;
         }
         /* Footer */
         .footer {
             text-align: center;
+            padding: 60px 20px;
             color: var(--text-muted);
+            font-size: 0.95rem;
+            border-top: 1px solid rgba(0, 0, 0, 0.05);
+            margin-top: 80px;
+            background: rgba(255, 255, 255, 0.5);
+            backdrop-filter: blur(5px);
+        }
+        /* Animations */
+        @keyframes fadeUp {
+            from {
+                opacity: 0;
+                transform: translateY(20px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
         }
         /* Responsive */
         @media (max-width: 768px) {
             .hero h1 {
+                font-size: 2.75rem;
             }
             .hero p {
+                font-size: 1.1rem;
             }
             .module-grid {
                 grid-template-columns: 1fr;
             }
+            .container {
+                padding: 40px 20px;
+            }
         }
     </style>
 </head>
 <body>
+    <!-- Ticker -->
+    <div class="ticker-wrap">
+        <div class="ticker" id="price-ticker">
+            <div class="ticker-item">Memuat data harga pasar terkini...</div>
+        </div>
+    </div>
     <!-- Hero -->
     <div class="hero">
         <div class="hero-content">
         </div>
     </div>
     <!-- Main Content -->
     <div class="container">
         <div class="section-header">
         <div class="module-grid">
             <!-- Featured Modules -->
+            <a href="/modules/katalog-pupuk" class="module-card">
                 <span class="badge badge-new">Baru</span>
                 <div class="module-icon">📋</div>
                 <h3 class="module-title">Katalog Pupuk</h3>
                 <span class="module-link">Buka Katalog</span>
             </a>
+            <a href="/modules/chatbot" class="module-card">
                 <span class="badge badge-hot">AI</span>
                 <div class="module-icon">🤖</div>
                 <h3 class="module-title">AgriBot</h3>
+                <p class="module-desc">Asisten pertanian cerdas siap menjawab pertanyaan Anda 24/7.</p>
                 <span class="module-link">Chat Sekarang</span>
             </a>
             <a href="/modules/analisis-tren-harga" class="module-card">
                 <div class="module-icon">📈</div>
                 <h3 class="module-title">Analisis Tren</h3>
+                <p class="module-desc">Visualisasi dan prediksi tren harga komoditas dengan AI.</p>
                 <span class="module-link">Lihat Tren</span>
             </a>
                     items.forEach(item => {
                         html += `<div class="ticker-item">
+                            ${item.name}: <span style="color: #10b981; font-weight: 700;">${new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR', minimumFractionDigits: 0 }).format(item.price)}</span> / ${item.unit}
                         </div>`;
                     });
                     ticker.innerHTML = html;

templates/modules/analisis_tren_harga.html CHANGED Viewed

@@ -198,6 +198,11 @@
                     <option value="telur_ayam">Telur Ayam</option>
                     <option value="daging_ayam">Daging Ayam</option>
                 </select>
                 <button class="btn btn-primary" onclick="predictTrend()" id="predict-btn">
                     <span>🔮</span> Prediksi Tren 7 Hari
                 </button>
@@ -227,17 +232,22 @@
                 loadHistoricalData();
                 document.getElementById('insight-box').style.display = 'none';
             });
         });
         async function loadHistoricalData() {
             const commodity = document.getElementById('commodity-select').value;
             showLoading(true);
             try {
                 const response = await fetch('/get-historical-prices', {
                     method: 'POST',
                     headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ commodity: commodity })
                 });
                 const data = await response.json();

                     <option value="telur_ayam">Telur Ayam</option>
                     <option value="daging_ayam">Daging Ayam</option>
                 </select>
+                <select id="range-select">
+                    <option value="30">1 Bulan Terakhir</option>
+                    <option value="180">6 Bulan Terakhir</option>
+                    <option value="365" selected>1 Tahun Terakhir</option>
+                </select>
                 <button class="btn btn-primary" onclick="predictTrend()" id="predict-btn">
                     <span>🔮</span> Prediksi Tren 7 Hari
                 </button>
                 loadHistoricalData();
                 document.getElementById('insight-box').style.display = 'none';
             });
+            document.getElementById('range-select').addEventListener('change', () => {
+                loadHistoricalData();
+            });
         });
         async function loadHistoricalData() {
             const commodity = document.getElementById('commodity-select').value;
+            const range = document.getElementById('range-select').value;
             showLoading(true);
             try {
                 const response = await fetch('/get-historical-prices', {
                     method: 'POST',
                     headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ commodity: commodity, range: range })
                 });
                 const data = await response.json();

vercel.json CHANGED Viewed

@@ -2,14 +2,14 @@
     "version": 2,
     "builds": [
         {
-            "src": "run.py",
-            "use": "@vercel/python"
         }
     ],
     "routes": [
         {
-            "src": "/(.*)",
-            "dest": "run.py"
         }
     ]
-}

     "version": 2,
     "builds": [
         {
+            "src": "AgriSensa_Portfolio.html",
+            "use": "@vercel/static"
         }
     ],
     "routes": [
         {
+            "src": "/",
+            "dest": "/AgriSensa_Portfolio.html"
         }
     ]
+}