diff --git a/convert.html b/convert.html
index b7648fb..23dfdd1 100644
--- a/convert.html
+++ b/convert.html
@@ -1,1965 +1,2029 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    
-    <!-- Primary Meta Tags -->
-    <title>Convert Recipe - BakeGenius.ai | AI-Powered Recipe Conversion Tool</title>
-    <link rel="icon" href="Favicon.png" type="image/x-icon" />
-    <meta name="title" content="Convert Recipe - BakeGenius.ai | AI-Powered Recipe Conversion Tool" />
-    <meta name="description" content="Convert your baking recipes with AI precision. Transform cups to grams, scale recipes, and get exact measurements for perfect baking results. Free recipe conversion tool." />
-    <meta name="keywords" content="recipe converter, baking conversion, cups to grams, recipe scaling, AI recipe tool, baking calculator, convert measurements, precise baking" />
-    <meta name="robots" content="index, follow" />
-    <meta name="language" content="English" />
-    <meta name="author" content="Supriya Pandey" />
-    <meta name="theme-color" content="#3e2723" />
-    
-    <!-- Canonical URL -->
-    <link rel="canonical" href="https://bakegenius-ai.vercel.app/convert.html" />
-    
-    <!-- Open Graph / Facebook -->
-    <meta property="og:type" content="website" />
-    <meta property="og:url" content="https://bakegenius-ai.vercel.app/convert.html" />
-    <meta property="og:title" content="Convert Recipe - BakeGenius.ai | AI-Powered Recipe Conversion Tool" />
-    <meta property="og:description" content="Convert your baking recipes with AI precision. Transform cups to grams, scale recipes, and get exact measurements for perfect baking results." />
-    <meta property="og:image" content="https://bakegenius-ai.vercel.app/og-image.png" />
-    <meta property="og:image:width" content="1200" />
-    <meta property="og:image:height" content="630" />
-    <meta property="og:site_name" content="BakeGenius.ai" />
-    <meta property="og:locale" content="en_US" />
-    
-    <!-- Twitter -->
-    <meta property="twitter:card" content="summary_large_image" />
-    <meta property="twitter:url" content="https://bakegenius-ai.vercel.app/convert.html" />
-    <meta property="twitter:title" content="Convert Recipe - BakeGenius.ai | AI-Powered Recipe Conversion Tool" />
-    <meta property="twitter:description" content="Convert your baking recipes with AI precision. Transform cups to grams, scale recipes, and get exact measurements for perfect baking results." />
-    <meta property="twitter:image" content="https://bakegenius-ai.vercel.app/og-image.png" />
-    
-    <!-- Additional SEO Meta Tags -->
-    <meta name="application-name" content="BakeGenius.ai" />
-    <meta name="apple-mobile-web-app-title" content="BakeGenius.ai" />
-    <meta name="apple-mobile-web-app-capable" content="yes" />
-    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
-    <meta name="format-detection" content="telephone=no" />
-    <meta name="mobile-web-app-capable" content="yes" />
-    <meta name="msapplication-TileColor" content="#3e2723" />
-    <meta name="msapplication-tap-highlight" content="no" />
-    
-    <!-- Structured Data -->
-    <script type="application/ld+json">
-    {
-        "@context": "https://schema.org",
-        "@type": "WebApplication",
-        "name": "BakeGenius.ai Recipe Converter",
-        "description": "AI-powered recipe conversion tool for precise baking measurements",
-        "url": "https://bakegenius-ai.vercel.app/convert.html",
-        "applicationCategory": "FoodApplication",
-        "operatingSystem": "Web Browser",
-        "offers": {
-            "@type": "Offer",
-            "price": "0",
-            "priceCurrency": "USD"
-        },
-        "featureList": [
-            "Recipe conversion",
-            "Cups to grams conversion",
-            "Recipe scaling",
-            "AI-powered precision",
-            "Custom measurements"
-        ]
-    }
-    </script>
-    
-    <link href="https://fonts.googleapis.com/css2?family=Comic+Neue:wght@300;400;700&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
-    <style>
-        :root {
-            --candy-red: #ffabab;
-            --sky-blue: #249e96;
-            --sunny-yellow: #fcd124;
-            --soft-pink: #FFB6C1;
-            --mint-green: #9af89a;
-            --lavender: #E6E6FA;
-            --dark-bg: #1a1a1a;
-            --dark-card: #2d2d2d;
-            --dark-text: #e7e3e3;
-            --dark-border: #404040;
-            --white: #FFFFFF;
-            --dark-gray: #1A1A1A;
-            --light-gray: #F8F9FA;
-            --shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
-            --glass: rgba(255, 255, 255, 0.15);
-        }
-
-        /* Footer Modern Multi-Column */
-
-        .footer {
-            background: radial-gradient(circle at center, #e9b4b6, #e5c5b3);
-            backdrop-filter: blur(15px);
-            position: relative;
-            z-index: 2;
-            border-top: 1px solid rgba(255, 255, 255, 0.3);
-            margin-top: 4rem;
-        }
-
-        body.dark-mode .footer {
-            background: #1e1e1e;
-        }
-
-        .footer-content {
-            max-width: 1500px;
-            margin: 0 auto;
-            display: grid;
-            grid-template-columns: 2fr 1fr 1fr 1fr;
-            gap: 3rem;
-            padding: 3rem 2rem 2rem;
-        }
-
-        .footer-section h3.footer-title {
-            color: #3e2723;
-            font-size: 1.2rem;
-            font-weight: 700;
-            margin-bottom: 1.5rem;
-            position: relative;
-        }
-
-        .footer-section h3.footer-title::after {
-            content: '';
-            position: absolute;
-            bottom: -8px;
-            left: 0;
-            width: 30px;
-            height: 3px;
-            background: #3e2723;
-            border-radius: 2px;
-        }
-
-        body.dark-mode .footer-section h3.footer-title::after {
-            background: #e0e0e0;
-        }
-
-        .footer-logo {
-            display: flex;
-            align-items: center;
-            gap: 0.8rem;
-            margin-bottom: 1.5rem;
-            font-size: 1.8rem;
-            font-weight: 700;
-            color: #3e2723;
-        }
-
-        .footer-logo-icon {
-            font-size: 2rem;
-        }
-
-        .footer-description {
-            color: #333;
-            line-height: 1.6;
-            margin-bottom: 2rem;
-            font-size: 0.95rem;
-        }
-
-        .footer-links {
-            list-style: none;
-            padding: 0;
-            margin: 0;
-        }
-
-        .footer-links li {
-            margin-bottom: 0.8rem;
-        }
-
-        .footer-links a {
-            color: #333;
-            text-decoration: none;
-            display: flex;
-            align-items: center;
-            gap: 0.8rem;
-            font-weight: 500;
-            transition: all 0.3s ease;
-            padding: 0.3rem 0;
-            border-radius: 5px;
-        }
-
-        .footer-links a:hover {
-            color: black;
-            transform: translateX(4px);
-            background: rgba(255, 107, 107, 0.1);
-            padding-left: 0.8rem;
-        }
-
-        .footer-links i {
-            font-size: 0.9rem;
-            width: 16px;
-            opacity: 0.7;
-        }
-
-        .social-links {
-            display: flex;
-            gap: 1rem;
-            margin-top: 1rem;
-        }
-
-        .social-link {
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            width: 45px;
-            height: 45px;
-            background:linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
-            color: white;
-            text-decoration: none;
-            border-radius: 50%;
-            font-size: 1.2rem;
-            transition: all 0.3s ease;
-            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
-        }
-
-        .social-link:hover {
-            transform: translateY(-3px) scale(1.1);
-            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
-        }
-
-
-
-        .footer-bottom {
-            background: rgba(0, 0, 0, 0.05);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid rgba(255, 255, 255, 0.1);
-            padding: 1.5rem 0;
-        }
-
-        .footer-bottom-content {
-            max-width: 1500px;
-            margin: 0 auto;
-            padding: 0 2rem;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            flex-wrap: wrap;
-            gap: 1rem;
-        }
-
-        .copyright {
-            color: #333;
-            font-size: 0.9rem;
-            margin: 0;
-        }
-
-        .copyright .name {
-            color: #3e2723;
-            font-weight: 600;
-        }
-
-        .copyright a:hover {
-            text-decoration: underline;
-        }
-
-        .footer-badges {
-            display: flex;
-            gap: 0.8rem;
-            flex-wrap: wrap;
-        }
-
-        .badge {
-            display: inline-flex;
-            align-items: center;
-            gap: 0.4rem;
-            padding: 0.4rem 0.8rem;
-            border-radius: 20px;
-            font-size: 0.8rem;
-            font-weight: 600;
-            color: white;
-            text-decoration: none;
-            transition: all 0.3s ease;
-        }
-
-        .badge:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
-        }
-
-        .badge-green {
-            background: linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
-        }
-
-        .badge-blue {
-            background: linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
-        }
-
-        .badge-purple {
-            background: linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
-        }
-
-        body.dark-mode .badge-blue {
-            background: #e0e0e0;
-            color: #0d0d0d;
-        }
-
-        body.dark-mode .badge-green {
-            background: #e0e0e0;
-            color: #0d0d0d;
-        }
-
-        body.dark-mode .badge-purple {
-            background: #e0e0e0;
-            color: #0d0d0d;
-        }
-
-        @media (max-width: 1024px) {
-            .footer-content {
-                grid-template-columns: 1fr 1fr;
-                gap: 2rem;
-            }
-        }
-
-        @media (max-width: 768px) {
-            .footer-content {
-                grid-template-columns: 1fr;
-                gap: 2rem;
-                text-align: center;
-            }
-
-            .footer-bottom-content {
-                flex-direction: column;
-                text-align: center;
-                gap: 1rem;
-            }
-
-            .footer-badges {
-                justify-content: center;
-            }
-        }
-
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-
-        body {
-            font-family: 'Comic Neue', cursive;
-            background-color: #f5f3f1;
-            min-height: 100vh;
-            color: var(--white);
-            transition: all 0.3s ease;
-        }
-
-        body.dark-mode {
-            background-color: #0d0d0d;
-        }
-
-        /* Navigation */
-        /* ===== STANDARDIZED NAVIGATION BAR ===== */
-        .navbar {
-            background: radial-gradient(circle at center, #e5c5b3, #e9b4b6);
-            backdrop-filter: blur(15px);
-            padding: 1rem 2rem;
-            position: fixed;
-            top: 0;
-            width: 100%;
-            z-index: 1000;
-            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
-            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
-            transition: all 0.3s ease;
-        }
-
-        body.dark-mode .navbar {
-            background: #1e1e1e !important;
-            border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
-        }
-
-        .nav-container {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            max-width: 1500px;
-            margin: 0 auto;
-        }
-
-        .logo {
-            font-size: 2rem;
-            font-weight: 600;
-            color: #3e2723;
-            text-decoration: none;
-            transition: all 0.3s ease;
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-            font-family: "Comic Neue", cursive;
-            min-width: 150px;
-            padding-right: 50px;
-        }
-
-        .logo-icon {
-            font-size: 2rem;
-            transition: transform 0.3s ease;
-        }
-
-        .logo-text {
-            font-weight: 600;
-            letter-spacing: -0.5px;
-        }
-
-        .logo:hover {
-            transform: scale(1.05);
-            color: #3e2723;
-        }
-
-        .logo:hover .logo-icon {
-            transform: rotate(10deg);
-        }
-
-        body.dark-mode .logo {
-            color: #e0e0e0;
-        }
-
-        body.dark-mode .logo:hover {
-            color: #e0e0e0;
-        }
-
-        .nav-links {
-            display: flex;
-            list-style: none;
-            gap: 1.5rem;
-            align-items: center;
-        }
-
-        .nav-links a {
-            text-decoration: none;
-            color: #3e2723;
-            font-weight: 600;
-            font-size: 1.1rem;
-            padding: 0.7rem 1rem;
-            border-radius: 25px;
-            transition: all 0.3s ease;
-            position: relative;
-            background: rgba(255, 255, 255, 0.1);
-            border: 2px solid transparent;
-        }
-
-        body.dark-mode .nav-links a {
-            color: #e0e0e0 !important;
-            background: rgba(111, 100, 91, 0.133) !important;
-            border: 2px solid transparent !important;
-        }
-
-        .nav-links a:hover {
-            background-color: #f3e0d6;
-            transform: translateY(-2px);
-            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
-            border-color: rgba(228, 191, 180, 0.3);
-            color: #3e2723;
-        }
-
-        body.dark-mode .nav-links a:hover {
-            background-color: #0d0d0d !important;
-            transform: translateY(-2px);
-            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
-            border-color: #1e1e1e !important;
-            color: #e0e0e0 !important;
-        }
-
-        /* Navigation Actions */
-        .nav-actions {
-            display: flex;
-            align-items: center;
-            gap: 1rem;
-        }
-
-        .dark-mode-btn {
-            background-color: #3e2723;
-            border: none;
-            color: white;
-            padding: 0.7rem;
-            border-radius: 50%;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            font-size: 1rem;
-            width: 45px;
-            height: 45px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
-        }
-
-        .dark-mode-btn:hover {
-            transform: scale(1.1) rotate(360deg);
-            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
-        }
-
-        body.dark-mode .dark-mode-btn {
-            background-color: #e0e0e0;
-            color: #1e1e1e;
-        }
-
-        .login-btn {
-            background: linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
-            color: white;
-            text-decoration: none;
-            padding: 0.7rem 1.5rem;
-            border-radius: 25px;
-            font-weight: 600;
-            transition: all 0.3s ease;
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-            box-shadow: 0 4px 15px #402a26;
-            border: 2px solid transparent;
-        }
-
-        .login-btn:hover {
-            transform: translateY(-3px);
-            box-shadow: 0 8px 25px #624844;
-            background: linear-gradient(90deg, #543732, #3d2b28, #341d19);
-        }
-
-        body.dark-mode .login-btn {
-            background: #e0e0e0;
-            color: #0d0d0d;
-            text-decoration: none;
-            padding: 0.7rem 1.5rem;
-            border-radius: 25px;
-            font-weight: 600;
-            transition: all 0.3s ease;
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-            box-shadow: 0 2px 2px #e0e0e0;
-            border: 2px solid transparent;
-        }
-
-        body.dark-mode .login-btn:hover {
-            transform: translateY(-3px);
-            background: #e0e0e0;
-            box-shadow: 0 2px 2px #e0e0e0;
-        }
-
-        .hamburger {
-            display: none;
-            flex-direction: column;
-            cursor: pointer;
-            padding: 0.5rem;
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-
-        .hamburger:hover {
-            background: rgba(255, 255, 255, 0.1);
-        }
-
-        .hamburger span {
-            width: 25px;
-            height: 3px;
-            background: linear-gradient(45deg, #a4766a, #5d4037);
-            margin: 3px 0;
-            transition: 0.3s;
-            border-radius: 2px;
-        }
-
-        body.dark-mode .hamburger span {
-            background: #e0e0e0;
-        }
-
-        .hamburger.active span:nth-child(1) {
-            transform: rotate(-45deg) translate(-5px, 6px);
-        }
-
-        .hamburger.active span:nth-child(2) {
-            opacity: 0;
-        }
-
-        .hamburger.active span:nth-child(3) {
-            transform: rotate(45deg) translate(-5px, -6px);
-        }
-
-        /* ===== STANDARDIZED MOBILE NAVIGATION ===== */
-        @media (max-width: 768px) {
-            .navbar {
-                padding: 0.8rem 1rem;
-            }
-
-            .nav-links {
-                display: flex;
-                position: fixed;
-                top: 0;
-                left: 0;
-                width: 100%;
-                height: 100vh;
-                background: #1a1a1a;
-                flex-direction: column;
-                justify-content: flex-start;
-                align-items: center;
-                padding-top: 6rem;
-                transition: transform 0.3s ease;
-                transform: translateX(-100%);
-                gap: 0;
-                z-index: 999;
-            }
-
-            body.dark-mode .nav-links {
-                background: #1a1a1a !important;
-            }
-
-            .nav-links.active {
-                transform: translateX(0);
-            }
-
-            .nav-links li {
-                width: 90%;
-                margin: 0;
-                padding: 0;
-                border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-            }
-
-            body.dark-mode .nav-links li {
-                border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-            }
-
-            .nav-links a {
-                width: 100%;
-                padding: 1.5rem 2rem;
-                font-size: 1.2rem;
-                margin-bottom: 0;
-                background: #2a2a2a !important;
-                color: #e0e0e0 !important;
-                border-radius: 0;
-                display: flex;
-                align-items: center;
-                gap: 1rem;
-                transition: all 0.3s ease;
-            }
-
-            .nav-links a:hover {
-                background: #3a3a3a !important;
-                color: #ffffff !important;
-            }
-
-            .nav-actions {
-                gap: 0.5rem;
-                position: relative;
-                z-index: 1001;
-            }
-
-            .login-btn {
-                padding: 0.5rem 1rem;
-                font-size: 0.9rem;
-            }
-
-            .dark-mode-btn {
-                width: 40px;
-                height: 40px;
-                font-size: 0.9rem;
-            }
-
-            .hamburger {
-                display: flex;
-                position: relative;
-                z-index: 1001;
-            }
-
-            .logo {
-                font-size: 1.5rem;
-            }
-
-            .logo-icon {
-                font-size: 1.7rem;
-            }
-        }
-
-        /* ===== STANDARDIZED SMALL MOBILE NAVIGATION ===== */
-        @media (max-width: 480px) {
-            .navbar {
-                padding: 0.5rem;
-            }
-
-            .logo {
-                font-size: 1.3rem;
-            }
-
-            .logo-icon {
-                font-size: 1.5rem;
-            }
-
-            .nav-actions {
-                gap: 0.3rem;
-            }
-
-            .login-btn {
-                padding: 0.4rem 0.8rem;
-                font-size: 0.8rem;
-            }
-
-            .dark-mode-btn {
-                width: 35px;
-                height: 35px;
-                font-size: 0.8rem;
-            }
-        }
-
-        .logo {
-            font-size: 2rem;
-            font-weight: 600;
-            color: #3e2723;
-            text-decoration: none;
-            transition: all 0.3s ease;
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-            font-family: "Comic Neue", cursive;
-            min-width: 150px;
-            padding-right: 50px;
-        }
-
-        .logo-icon {
-            font-size: 2rem;
-            transition: transform 0.3s ease;
-        }
-
-        .logo-text {
-            font-weight: 600;
-            letter-spacing: -0.5px;
-        }
-
-        .logo:hover {
-            transform: scale(1.05);
-            color: #3e2723;
-        }
-
-        .logo:hover .logo-icon {
-            transform: rotate(10deg);
-        }
-
-        body.dark-mode .logo {
-            color: #e0e0e0;
-        }
-
-        body.dark-mode .logo:hover {
-            color: #e0e0e0;
-        }
-
-        .dark-mode-btn {
-            background-color: #3e2723;
-            border: none;
-            color: white;
-            padding: 0.7rem;
-            border-radius: 50%;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            font-size: 1rem;
-            width: 45px;
-            height: 45px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
-        }
-
-        .dark-mode-btn:hover {
-            transform: scale(1.1) rotate(360deg);
-            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
-        }
-
-        body.dark-mode .dark-mode-btn {
-            background-color: #e0e0e0;
-            color: #1e1e1e;
-        }
-
-        .login-btn {
-
-            background-color: #5C4033;
-            color: white;
-            text-decoration: none;
-            padding: 0.7rem 1.5rem;
-            border-radius: 25px;
-            font-weight: 600;
-            transition: all 0.3s ease;
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-            box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
-            border: 2px solid transparent;
-        }
-
-        .login-btn:hover {
-            transform: translateY(-3px);
-            box-shadow: 0 8px 25px #cf622f;
-            background-color:#5C4033;
-            border-color: rgba(255, 255, 255, 0.3);
-        }
-
-        body.dark-mode .login-btn {
-            background-color: #e0e0e0;
-            color: #0d0d0d;
-            text-decoration: none;
-            padding: 0.7rem 1.5rem;
-            border-radius: 25px;
-            font-weight: 600;
-            transition: all 0.3s ease;
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-            box-shadow: 0 2px 2px #e0e0e0;
-            border: 2px solid transparent;
-        }
-
-        body.dark-mode .login-btn:hover {
-            transform: translateY(-3px);
-            background: #e0e0e0;
-            box-shadow: 0 2px 2px #e0e0e0;
-        }
-
-
-        /* Dark Mode Styles for Content */
-        body.dark-mode .input-label {
-            color: #e0e0e0;
-        }
-
-        body.dark-mode .recipe-input {
-            background: rgba(255, 255, 255, 0.1);
-        }
-
-        body.dark-mode .unit-toggle button {
-            color: var(--dark-text);
-        }
-
-        body.dark-mode .unit-toggle {
-            background: rgba(255, 255, 255, 0.1);
-        }
-
-        /*dark mode*/
-
-        body.dark-mode .footer-content {
-            background-color: #1e1e1e;
-            border-top: 1px solid rgba(255, 255, 255, 0.1);
-        }
-
-        body.dark-mode .footer-section h3.footer-title {
-            color: #e0e0e0;
-        }
-
-        body.dark-mode .footer-logo {
-            color: #e0e0e0;
-        }
-
-        body.dark-mode .footer-description {
-            color: #a0a0a0;
-        }
-
-        body.dark-mode .footer-links a {
-            color: #e0e0e0;
-        }
-
-        body.dark-mode .footer-links a:hover {
-            color: #a0a0a0;
-            background: rgba(255, 138, 128, 0.1);
-        }
-
-        body.dark-mode .footer-bottom {
-            background: #1e1e1e;
-        }
-
-        body.dark-mode .copyright {
-            color: #a0a0a0;
-        }
-
-        body.dark-mode .copyright .name {
-            color: #ef6154;
-        }
-
-        /* ===== STANDARDIZED SMALL MOBILE NAVIGATION ===== */
-        @media (max-width: 480px) {
-            .navbar {
-                padding: 0.5rem;
-            }
-
-            .logo {
-                font-size: 1.3rem;
-            }
-
-            .logo-icon {
-                font-size: 1.5rem;
-            }
-
-            .nav-actions {
-                gap: 0.3rem;
-            }
-
-            .login-btn {
-                padding: 0.4rem 0.8rem;
-                font-size: 0.8rem;
-            }
-
-            .dark-mode-btn {
-                width: 35px;
-                height: 35px;
-                font-size: 0.8rem;
-            }
-        }
-
-        /* Main Content */
-        main {
-            padding: 6rem 2rem 2rem;
-            max-width: 1200px;
-            margin: 0 auto;
-        }
-
-        .page-header {
-            text-align: center;
-            margin-bottom: 3rem;
-        }
-
-        .page-title {
-            font-size: clamp(2rem, 6vw, 3rem);
-            font-weight: 700;
-            margin-bottom: 1rem;
-            color: #3e2723;
-            animation: bounce 2s ease-in-out infinite;
-        }
-
-        body.dark-mode .page-title {
-            color: #e0e0e0 !important;
-        }
-
-        .page-subtitle {
-            font-size: 1.2rem;
-            opacity: 0.9;
-            margin-bottom: 2rem;
-            color: #6b6767;
-        }
-
-        body.dark-mode .page-subtitle {
-            color: #e0e0e0 !important;
-        }
-
-        @keyframes bounce {
-
-            0%,
-            20%,
-            50%,
-            80%,
-            100% {
-                transform: translateY(0);
-            }
-
-            40% {
-                transform: translateY(-10px);
-            }
-
-            60% {
-                transform: translateY(-5px);
-            }
-        }
-
-        .converter-container {
-            display: grid;
-            grid-template-columns: 1fr;
-            gap: 2rem;
-            max-width: 800px;
-            margin: 0 auto;
-        }
-
-        .input-section {
-            background: rgba(255, 255, 255, 0.1);
-            backdrop-filter: blur(20px);
-            border-radius: 20px;
-            padding: 2rem;
-            border: 1px solid rgba(255, 255, 255, 0.2);
-        }
-
-        .input-group {
-            margin-bottom: 1.5rem;
-        }
-
-        .input-label {
-            display: block;
-            font-size: 1.1rem;
-            font-weight: 600;
-            margin-bottom: 0.5rem;
-            color: #3e2723;
-
-        }
-
-        .recipe-input {
-            width: 100%;
-            min-height: 200px;
-            padding: 1rem;
-            border: none;
-            border-radius: 15px;
-            background: rgba(255, 255, 255, 0.1);
-            backdrop-filter: blur(10px);
-            color: black !important;
-            font-family: 'Comic Neue', cursive;
-            font-size: 1rem;
-            resize: vertical;
-            border: 2px solid #6b6767;
-            transition: all 0.3s ease;
-        }
-
-        .recipe-input:focus {
-            outline: none;
-            border-color: #3e2723;
-            box-shadow: 0 0 2px rgba(255, 165, 2, 0.3);
-        }
-
-        body.dark-mode .recipe-input:focus {
-            outline: none;
-            border-color: #0D0D0D;
-            box-shadow: 0 0 2px #0d0d0d;
-        }
-
-        .recipe-input::placeholder {
-
-
-            color: #000;
-            /* color: rgba(255, 255, 255, 0.7);*/
-        }
-
-        /* Animated Background Elements */
-        .floating-elements {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            pointer-events: none;
-            z-index: 1;
-        }
-
-        .floating-cupcake {
-            position: absolute;
-            font-size: 2rem;
-            animation: float 6s ease-in-out infinite;
-        }
-
-        .floating-cupcake:nth-child(1) {
-            top: 10%;
-            left: 10%;
-            animation-delay: 0s;
-        }
-
-        .floating-cupcake:nth-child(2) {
-            top: 20%;
-            right: 15%;
-            animation-delay: 2s;
-        }
-
-        .floating-cupcake:nth-child(3) {
-            bottom: 20%;
-            left: 20%;
-            animation-delay: 4s;
-        }
-
-        .floating-cupcake:nth-child(4) {
-            bottom: 30%;
-            right: 10%;
-            animation-delay: 1s;
-        }
-
-        @keyframes float {
-
-            0%,
-            100% {
-                transform: translateY(0px) rotate(0deg);
-            }
-
-            50% {
-                transform: translateY(-20px) rotate(5deg);
-            }
-
-
-        }
-
-        .file-upload {
-            display: none;
-        }
-
-        .file-upload-label {
-            display: inline-block;
-            padding: 1rem 2rem;
-            background: linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
-            color: white;
-            border-radius: 25px;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            font-weight: 600;
-            margin-right: 1rem;
-        }
-
-        body.dark-mode .file-upload-label {
-            background: rgba(220, 121, 63, 0.893);
-            color: #e0e0e0;
-        }
-
-        .file-upload-label:hover {
-            transform: translateY(-2px);
-            box-shadow: var(--shadow);
-        }
-
-        .convert-button {
-            width: 100%;
-            padding: 1.5rem;
-            background: linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
-            color: white;
-            border: none;
-            border-radius: 25px;
-            font-size: 1.3rem;
-            font-weight: 700;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            position: relative;
-            overflow: hidden;
-            margin-top: 1rem;
-        }
-
-        body.dark-mode .convert-button {
-            background: rgba(220, 121, 63, 0.893);
-            color: #e0e0e0;
-        }
-
-        .convert-button:hover {
-            transform: translateY(-3px);
-            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
-        }
-
-        .convert-button:disabled {
-            opacity: 0.6;
-            cursor: not-allowed;
-            transform: none;
-        }
-
-        .loading-spinner {
-            display: none;
-            width: 20px;
-            height: 20px;
-            border: 2px solid transparent;
-            border-top: 2px solid var(--white);
-            border-radius: 50%;
-            animation: spin 1s linear infinite;
-            margin-right: 10px;
-        }
-
-        /* Dual Scroll Buttons */
-        .scroll-btn {
-            position: fixed;
-            right: 2.5rem;
-            z-index: 2000;
-            background: linear-gradient(45deg, #a4766a, #5d4037);
-            color: #fff;
-            border: none;
-            border-radius: 50%;
-            width: 56px;
-            height: 56px;
-            font-size: 2rem;
-            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
-            cursor: pointer;
-            opacity: 0;
-            pointer-events: none;
-            transition: opacity 0.4s, transform 0.2s;
-        }
-
-        .scroll-btn.show {
-            opacity: 1;
-            pointer-events: auto;
-            transform: scale(1.08);
-        }
-
-        #backToTop:hover {
-            background: linear-gradient(45deg, #a4766a, #5d4037);
-            transform: scale(1.15);
-            background: linear-gradient(45deg, #5d4037, #a4766a);
-        }
-
-        /* Positioning individually */
-        #scrollTopBtn {
-            bottom: 6.5rem;
-        }
-
-        /* Above bottom button */
-        #scrollBottomBtn {
-            bottom: 2.5rem;
-        }
-
-
-        @keyframes spin {
-            0% {
-                transform: rotate(0deg);
-            }
-
-            100% {
-                transform: rotate(360deg);
-            }
-        }
-
-        .results-section {
-            background: rgba(255, 255, 255, 0.1);
-            backdrop-filter: blur(20px);
-            border-radius: 20px;
-            padding: 2rem;
-            border: 1px solid rgba(255, 255, 255, 0.2);
-            display: none;
-        }
-
-        .results-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: 2rem;
-        }
-
-        .results-title {
-            font-size: 1.5rem;
-            font-weight: 700;
-        }
-
-        .unit-toggle {
-            display: flex;
-            background: rgba(255, 255, 255, 0.1);
-            border-radius: 25px;
-            padding: 0.2rem;
-        }
-
-        .unit-toggle button {
-            padding: 0.5rem 1rem;
-            border: none;
-            background: transparent;
-            color: #333;
-            border-radius: 20px;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            font-family: 'Comic Neue', cursive;
-            font-weight: 600;
-        }
-
-        .unit-toggle button.active {
-            background: var(--sunny-yellow);
-            color: var(--dark-gray);
-        }
-
-        .results-table {
-            width: 100%;
-            border-collapse: collapse;
-            margin-top: 1rem;
-        }
-
-        .results-table th,
-        .results-table td {
-            padding: 1rem;
-            text-align: left;
-            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-        }
-
-        .results-table th {
-            background: rgba(255, 255, 255, 0.1);
-            font-weight: 700;
-            color: var(--sunny-yellow);
-        }
-
-        .ingredient-row {
-            transition: all 0.3s ease;
-        }
-
-        .ingredient-row:hover {
-            background: rgba(255, 255, 255, 0.05);
-        }
-
-        .ingredient-icon {
-            font-size: 1.5rem;
-            margin-right: 0.5rem;
-        }
-
-        .tooltip {
-            position: relative;
-            cursor: help;
-        }
-
-        .tooltip::after {
-            content: attr(data-tooltip);
-            position: absolute;
-            bottom: 125%;
-            left: 50%;
-            transform: translateX(-50%);
-            background: var(--dark-gray);
-            color: var(--white);
-            padding: 0.5rem;
-            border-radius: 8px;
-            font-size: 0.8rem;
-            white-space: nowrap;
-            opacity: 0;
-            pointer-events: none;
-            transition: opacity 0.3s;
-            z-index: 1001;
-        }
-
-        .tooltip:hover::after {
-            opacity: 1;
-        }
-
-        .warning-popup {
-            position: fixed;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            background: rgba(255, 71, 87, 0.95);
-            backdrop-filter: blur(20px);
-            padding: 2rem;
-            border-radius: 20px;
-            border: 2px solid var(--candy-red);
-            z-index: 1002;
-            display: none;
-            max-width: 400px;
-            text-align: center;
-        }
-
-        .warning-popup h3 {
-            margin-bottom: 1rem;
-            font-size: 1.3rem;
-        }
-
-        .warning-popup button {
-            padding: 0.8rem 1.5rem;
-            background: var(--white);
-            color: var(--candy-red);
-            border: none;
-            border-radius: 15px;
-            font-weight: 600;
-            cursor: pointer;
-            margin: 0.5rem;
-            transition: all 0.3s ease;
-        }
-
-        .warning-popup button:hover {
-            transform: translateY(-2px);
-        }
-
-        .overlay {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background: rgba(0, 0, 0, 0.5);
-            backdrop-filter: blur(5px);
-            z-index: 1001;
-            display: none;
-        }
-
-        /* Responsive Design */
-        @media (max-width: 768px) {
-            main {
-                padding: 5rem 1rem 2rem;
-            }
-
-            .results-table {
-                font-size: 0.9rem;
-            }
-
-            .results-table th,
-            .results-table td {
-                padding: 0.5rem;
-            }
-
-            .file-upload-label {
-                display: block;
-                text-align: center;
-                margin-bottom: 1rem;
-                margin-right: 0;
-            }
-        }
-
-        @media (max-width: 480px) {
-            nav {
-                padding: 1rem;
-            }
-
-            .input-section,
-            .results-section {
-                padding: 1.5rem;
-            }
-
-            .warning-popup {
-                margin: 1rem;
-                max-width: calc(100% - 2rem);
-            }
-        }
-
-    </style>
-</head>
-
-<body>
-    <div class="floating-elements">
-        <div class="floating-cupcake">🧁</div>
-        <div class="floating-cupcake">🍰</div>
-        <div class="floating-cupcake">🥧</div>
-        <div class="floating-cupcake">🍪</div>
-    </div>
-    <!-- Navigation -->
-    <nav class="navbar">
-        <div class="nav-container">
-            <a href="index.html" class="logo">
-                <span class="logo-icon">🍰</span>
-                <span class="logo-text">BakeGenius.ai</span>
-            </a>
-
-            <ul class="nav-links" id="navLinks">
-                
-                <li>
-                    <a href="convert.html">
-                        <i class="fas fa-exchange-alt" style="margin-right:8px;"></i>
-                        Convert Recipe
-                    </a>
-                </li>
-                <li>
-                    <a href="customize.html">
-                        <i class="fas fa-cog" style="margin-right:8px;"></i>
-                        Customize
-                    </a>
-                </li>
-                <li>
-                    <a href="scale.html">
-                        <i class="fas fa-balance-scale" style="margin-right:8px;"></i>
-                        Scale Recipes
-                    </a>
-                </li>
-                <li>
-                    <a href="about.html">
-                        <i class="fas fa-info-circle" style="margin-right:8px;"></i>
-                        About
-                    </a>
-                </li>
-                  <li>
-                    <a href="faq.html">
-                        <i class="fas fa-question-circle" style="margin-right:8px;"></i>
-                        FAQs
-                    </a>
-                </li>
-            </ul>
-            <div class="nav-actions">
-                <button id="darkModeToggle" class="dark-mode-btn" title="Toggle Dark Mode">
-                    <i class="fas fa-moon"></i>
-                </button>
-                <a href="#" class="login-btn" id="openLoginModal">
-                    <i class="fas fa-user"></i>
-                    Login
-                </a>
-                <a href="#" class="login-btn" id="logoutBtn" style="display: none;">
-                    <i class="fas fa-sign-out-alt"></i>
-                    Logout
-                </a>
-            </div>
-            <div class="hamburger" id="hamburger">
-                <span></span>
-                <span></span>
-                <span></span>
-            </div>
-        </div>
-    </nav>
-
-
-    <!-- Main Content -->
-    <main>
-        <div class="page-header">
-            <h1 class="page-title"> 🍪Recipe Converter</h1>
-            <p class="page-subtitle">Transform your recipes into precise gram measurements with AI magic✨</p>
-        </div>
-
-        <div class="converter-container">
-            <!-- Input Section -->
-            <div class="input-section">
-                <div class="input-group">
-                    <label for="recipeInput" class="input-label">📝 Paste your recipe here:</label>
-                    <textarea id="recipeInput" class="recipe-input" placeholder="Example:
-2 cups all-purpose flour
-1 cup packed brown sugar
-1/2 cup melted butter
-2 large eggs
-1 tsp vanilla extract
-1/2 tsp baking powder
-1/4 tsp salt"></textarea>
-                </div>
-
-                <div class="input-group">
-                    <label for="fileUpload" class="file-upload-label">
-                        📁 Or upload a recipe file
-                    </label>
-                    <input type="file" id="fileUpload" class="file-upload" accept=".txt,.doc,.docx"
-                        onchange="handleFileUpload(event)">
-                </div>
-
-                <button class="convert-button" onclick="convertRecipe()">
-                    <div class="loading-spinner" id="loadingSpinner"></div>
-                    <span id="buttonText">Magically Convert ✨</span>
-                </button>
-            </div>
-
-            <!-- Results Section -->
-            <div class="results-section" id="resultsSection">
-                <div class="results-header">
-                    <h2 class="results-title">🎯 Conversion Results</h2>
-                    <div class="unit-toggle">
-                        <button class="active" onclick="toggleUnits('metric')">Metric (g)</button>
-                        <button onclick="toggleUnits('imperial')">Imperial</button>
-                    </div>
-                </div>
-
-                <table class="results-table" id="resultsTable">
-                    <thead>
-                        <tr>
-                            <th>Ingredient</th>
-                            <th>Original</th>
-                            <th>Grams</th>
-                            <th>Notes</th>
-                        </tr>
-                    </thead>
-                    <tbody id="resultsBody">
-                        <!-- Results will be populated here -->
-                    </tbody>
-                </table>
-            </div>
-        </div>
-    </main>
-
-    <!-- Warning Popup -->
-    <div class="overlay" id="overlay" onclick="closeWarning()"></div>
-    <div class="warning-popup" id="warningPopup">
-        <h3>⚠️ Ambiguous Measurement</h3>
-        <p id="warningMessage"></p>
-        <button onclick="closeWarning()">Got it!</button>
-    </div>
-    <!-- Back to Top Button -->
-    <button id="backToTop" title="Back to Top">⬆</button>
-    <!-- footer startes here -->
-
-    <footer class="footer">
-        <div class="footer-content">
-            <div class="footer-section footer-brand">
-                <div class="footer-logo">
-                    <span class="footer-logo-icon">🍰</span>
-                    <span class="footer-logo-text">BakeGenius.ai</span>
-                </div>
-                <p class="footer-description">
-                    Transform your baking with AI-powered recipe conversions. Making baking accessible, precise, and
-                    delightful for everyone.
-                </p>
-                <div class="social-links">
-                    <a href="https://www.linkedin.com/in/supriyapandey595/" class="social-link linkedin" target="_blank"
-                        rel="noopener" title="LinkedIn">
-                        <i class="fab fa-linkedin-in"></i>
-                    </a>
-                    <a href="https://github.com/supriya46788/BakeGenuis-AI" class="social-link github" target="_blank"
-                        rel="noopener" title="GitHub">
-                        <i class="fab fa-github"></i>
-                    </a>
-                    <a href="mailto:supriyadpandey502@gmail.com" class="social-link email" target="_blank"
-                        rel="noopener" title="Email">
-                        <i class="fas fa-envelope"></i>
-                    </a>
-                </div>
-            </div>
-
-            <div class="footer-section">
-                <h3 class="footer-title">Quick Links</h3>
-                <ul class="footer-links">
-                    <li><a href="index.html"><i class="fas fa-home"></i>Home</a></li>
-                    <li><a href="convert.html"><i class="fas fa-exchange-alt"></i>Convert Recipe</a></li>
-                    <li><a href="customize.html"><i class="fas fa-cog"></i>Customize</a></li>
-                    <li><a href="scale.html"><i class="fas fa-balance-scale"></i>Scale Recipes</a></li>
-                    <li><a href="about.html"><i class="fas fa-info-circle"></i>About Us</a></li>
-                </ul>
-            </div>
-
-            <div class="footer-section">
-                <h3 class="footer-title">Features</h3>
-                <ul class="footer-links">
-                    <li><a href="#"><i class="fas fa-calculator"></i>Unit Conversion</a></li>
-                    <li><a href="#"><i class="fas fa-chart-line"></i>Nutritional Analysis</a></li>
-                    <li><a href="#"><i class="fas fa-balance-scale"></i>Recipe Scaling</a></li>
-                    <li><a href="#"><i class="fas fa-magic"></i>AI Optimization</a></li>
-                    <li><a href="#"><i class="fas fa-mobile-alt"></i>Mobile Friendly</a></li>
-                </ul>
-            </div>
-
-            <div class="footer-section">
-                <h3 class="footer-title">Support</h3>
-                <ul class="footer-links">
-                    <li><a href="contact.html"><i class="fas fa-question-circle"></i>Contact Us</a></li>
-                    <li><a href="feedback.html"><i class="fas fa-comment"></i>Feedback</a></li>
-                    <li><a href="faq.html"><i class="fas fa-info-circle"></i>FAQ</a></li>
-                    <li><a href="privacypolicy.html"><i class="fas fa-shield-alt"></i>Privacy Policy</a></li>
-                    <li><a href="toc.html"><i class="fas fa-file-contract"></i>Terms of Service</a></li>
-                </ul>
-            </div>
-        </div>
-
-        <div class="footer-bottom">
-            <div class="footer-bottom-content">
-                <p class="copyright">
-                    © 2025 BakeGenius.ai. Made with <span style="color:#FF6B6B;">❤️</span> by <span class="name">Supriya
-                        Pandey</span>
-                </p>
-                <div class="footer-badges">
-                    <span class="badge badge-green"><i class="fas fa-heart"></i> Open Source</span>
-                    <span class="badge badge-blue"><i class="fas fa-leaf"></i> Eco Friendly</span>
-                    <span class="badge badge-purple"><i class="fas fa-robot"></i> AI Powered</span>
-                </div>
-            </div>
-        </div>
-    </footer>
-
-    <script src="assets/js/theme.js"></script>
-    <script>
-
-        // Mobile Navigation Toggle
-        const hamburger = document.getElementById('hamburger');
-        const navLinks = document.getElementById('navLinks');
-
-        hamburger.addEventListener('click', () => {
-            navLinks.classList.toggle('active');
-            hamburger.classList.toggle('active');
-        });
-
-        // Close mobile menu when clicking on a link
-        const navItems = document.querySelectorAll('.nav-links a');
-        navItems.forEach(item => {
-            item.addEventListener('click', () => {
-                navLinks.classList.remove('active');
-                hamburger.classList.remove('active');
-            });
-        });
-
-        // Close mobile menu when clicking outside
-        document.addEventListener('click', (e) => {
-            if (!hamburger.contains(e.target) && !navLinks.contains(e.target)) {
-                navLinks.classList.remove('active');
-                hamburger.classList.remove('active');
-            }
-        });
-
-        // Recipe Conversion Logic
-        const GEMINI_API_KEY = 'API_KEY';
-        const GEMINI_API_URL = 'API_URL';
-
-        let currentUnit = 'metric';
-        let convertedData = [];
-
-        // Ingredient to emoji mapping
-        const ingredientEmojis = {
-            'flour': '🌾',
-            'sugar': '🍯',
-            'butter': '🧈',
-            'egg': '🥚',
-            'milk': '🥛',
-            'vanilla': '🌿',
-            'baking powder': '⚡',
-            'salt': '🧂',
-            'chocolate': '🍫',
-            'cocoa': '🍫',
-            'oil': '🫒',
-            'honey': '🍯',
-            'cream': '🥛',
-            'cheese': '🧀',
-            'nuts': '🥜',
-            'fruit': '🍓',
-            'lemon': '🍋',
-            'orange': '🍊',
-            'cinnamon': '🌿',
-            'default': '🥄'
-        };
-
-        function toggleMobileMenu() {
-            const navLinks = document.getElementById('navLinks');
-            navLinks.classList.toggle('active');
-        }
-
-        function handleFileUpload(event) {
-            const file = event.target.files[0];
-            if (file) {
-                const reader = new FileReader();
-                reader.onload = function (e) {
-                    document.getElementById('recipeInput').value = e.target.result;
-                };
-                reader.readAsText(file);
-            }
-        }
-
-        function getIngredientEmoji(ingredient) {
-            const lower = ingredient.toLowerCase();
-            for (const [key, emoji] of Object.entries(ingredientEmojis)) {
-                if (lower.includes(key)) {
-                    return emoji;
-                }
-            }
-            return ingredientEmojis.default;
-        }
-
-        async function convertRecipe() {
-            const recipeText = document.getElementById('recipeInput').value.trim();
-
-            if (!recipeText) {
-                showWarning('Please enter a recipe to convert!');
-                return;
-            }
-
-            setLoading(true);
-
-            try {
-                const response = await fetch(`${GEMINI_API_URL}?key=${GEMINI_API_KEY}`, {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                    },
-                    body: JSON.stringify({
-                        contents: [{
-                            parts: [{
-                                text: `Convert this recipe to precise gram measurements. For each ingredient, provide:
-1. Normalized ingredient name
-2. Original measurement
-3. Gram equivalent
-4. Any relevant notes about the conversion
-
-Please format the response as JSON with this structure:
-{
-  "ingredients": [
-    {
-      "ingredient": "All-purpose flour",
-      "original": "2 cups",
-      "grams": 240,
-      "notes": "Sifted measurement"
-    }
-  ],
-  "warnings": ["Any ambiguous measurements that need clarification"]
-}
-
-Recipe to convert:
-${recipeText}`
-                            }]
-                        }]
-                    })
-                });
-
-                if (!response.ok) {
-                    throw new Error('API request failed');
-                }
-
-                const data = await response.json();
-                const aiResponse = data.candidates[0].content.parts[0].text;
-
-                // Parse the AI response
-                try {
-                    const jsonMatch = aiResponse.match(/\{[\s\S]*\}/);
-                    if (jsonMatch) {
-                        const parsedData = JSON.parse(jsonMatch[0]);
-                        convertedData = parsedData.ingredients || [];
-                        displayResults(convertedData);
-
-                        // Show warnings if any
-                        if (parsedData.warnings && parsedData.warnings.length > 0) {
-                            showWarning(parsedData.warnings.join('\n'));
-                        }
-                    } else {
-                        throw new Error('Could not parse AI response');
-                    }
-                } catch (parseError) {
-                    console.error('Parse error:', parseError);
-                    // Fallback: create results from plain text
-                    convertedData = parseTextResponse(aiResponse);
-                    displayResults(convertedData);
-                }
-
-            } catch (error) {
-                console.error('Conversion error:', error);
-                showWarning('Sorry, there was an error converting your recipe. Please try again.');
-            } finally {
-                setLoading(false);
-            }
-        }
-
-        function parseTextResponse(text) {
-            // Simple fallback parser for plain text responses
-            const lines = text.split('\n').filter(line => line.trim());
-            const ingredients = [];
-
-            lines.forEach(line => {
-                if (line.includes('cup') || line.includes('tbsp') || line.includes('tsp') || line.includes('pound') || line.includes('oz')) {
-                    const parts = line.split(/[:;-]/);
-                    if (parts.length >= 2) {
-                        ingredients.push({
-                            ingredient: parts[0].trim(),
-                            original: parts[1].trim(),
-                            grams: Math.round(Math.random() * 200 + 50), // Placeholder
-                            notes: 'Estimated conversion'
-                        });
-                    }
-                }
-            });
-
-            return ingredients;
-        }
-
-        function displayResults(ingredients) {
-            const resultsSection = document.getElementById('resultsSection');
-            const resultsBody = document.getElementById('resultsBody');
-
-            resultsBody.innerHTML = '';
-
-            ingredients.forEach(item => {
-                const row = document.createElement('tr');
-                row.className = 'ingredient-row';
-
-                const emoji = getIngredientEmoji(item.ingredient);
-
-                row.innerHTML = `
-                    <td>
-                        <span class="ingredient-icon">${emoji}</span>
-                        ${item.ingredient}
-                    </td>
-                    <td>${item.original}</td>
-                    <td class="tooltip" data-tooltip="${item.notes || 'Standard conversion'}">
-                        <strong>${item.grams}g</strong>
-                    </td>
-                    <td><small>${item.notes || 'Standard'}</small></td>
-                `;
-
-                resultsBody.appendChild(row);
-            });
-
-            resultsSection.style.display = 'block';
-            resultsSection.scrollIntoView({ behavior: 'smooth' });
-        }
-
-        function toggleUnits(unit) {
-            currentUnit = unit;
-
-            // Update active button
-            document.querySelectorAll('.unit-toggle button').forEach(btn => {
-                btn.classList.remove('active');
-            });
-            event.target.classList.add('active');
-
-            // Update display (for now, just refresh the current data)
-            if (convertedData.length > 0) {
-                displayResults(convertedData);
-            }
-        }
-
-        function setLoading(isLoading) {
-            const button = document.querySelector('.convert-button');
-            const spinner = document.getElementById('loadingSpinner');
-            const buttonText = document.getElementById('buttonText');
-
-            if (isLoading) {
-                button.disabled = true;
-                spinner.style.display = 'inline-block';
-                buttonText.textContent = 'Converting...';
-            } else {
-                button.disabled = false;
-                spinner.style.display = 'none';
-                buttonText.textContent = 'Magically Convert ✨';
-            }
-        }
-
-        function showWarning(message) {
-            const overlay = document.getElementById('overlay');
-            const popup = document.getElementById('warningPopup');
-            const messageEl = document.getElementById('warningMessage');
-
-            messageEl.textContent = message;
-            overlay.style.display = 'block';
-            popup.style.display = 'block';
-        }
-
-        function closeWarning() {
-            const overlay = document.getElementById('overlay');
-            const popup = document.getElementById('warningPopup');
-
-            overlay.style.display = 'none';
-            popup.style.display = 'none';
-        }
-
-        // Dual Scroll Buttons
-        const scrollTopBtn = document.getElementById('scrollTopBtn');
-        const scrollBottomBtn = document.getElementById('scrollBottomBtn');
-
-        window.addEventListener('scroll', () => {
-            if (window.scrollY > 300) {
-                scrollTopBtn.classList.add('show');
-            } else {
-                scrollTopBtn.classList.remove('show');
-            }
-
-            if (window.innerHeight + window.scrollY < document.body.offsetHeight - 300) {
-                scrollBottomBtn.classList.add('show');
-            } else {
-                scrollBottomBtn.classList.remove('show');
-            }
-        });
-
-        scrollTopBtn.addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-
-        scrollBottomBtn.addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-
-
-        // Function to update login state
-        function updateLoginState() {
-            const isLoggedIn = localStorage.getItem("isLoggedIn") === "true";
-            const loginBtn = document.getElementById("openLoginModal");
-            const logoutBtn = document.getElementById("logoutBtn");
-
-            if (isLoggedIn) {
-                loginBtn.style.display = "none";
-                logoutBtn.style.display = "flex";
-            } else {
-                loginBtn.style.display = "flex";
-                logoutBtn.style.display = "none";
-            }
-        }
-
-        // Logout functionality
-        const logoutBtn = document.getElementById("logoutBtn");
-        if (logoutBtn) {
-            logoutBtn.addEventListener("click", (e) => {
-                e.preventDefault();
-                localStorage.removeItem("isLoggedIn");
-                localStorage.removeItem("currentUser");
-                updateLoginState();
-                alert("You have been logged out successfully!");
-            });
-        }
-
-        // Check login state on page load
-        document.addEventListener("DOMContentLoaded", () => {
-            updateLoginState();
-        });
-
-        // Add some sample data for demo purposes
-        document.addEventListener('DOMContentLoaded', function () {
-            // Add floating animation to page elements
-            const animateElements = document.querySelectorAll('.input-section, .results-section');
-            animateElements.forEach((el, index) => {
-                el.style.animation = `fadeInUp 0.6s ease forwards ${index * 0.2}s`;
-                el.style.opacity = '0';
-                el.style.transform = 'translateY(30px)';
-            });
-        });
-
-        // Add fadeInUp animation
-        const style = document.createElement('style');
-        style.textContent = `
-            @keyframes fadeInUp {
-                to {
-                    opacity: 1;
-                    transform: translateY(0);
-                }
-            }
-        `;
-        document.head.appendChild(style);
-    </script>
-</body>
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    
+    <!-- Primary Meta Tags -->
+    <title>Convert Recipe - BakeGenius.ai | AI-Powered Recipe Conversion Tool</title>
+    <link rel="icon" href="Favicon.png" type="image/x-icon" />
+    <meta name="title" content="Convert Recipe - BakeGenius.ai | AI-Powered Recipe Conversion Tool" />
+    <meta name="description" content="Convert your baking recipes with AI precision. Transform cups to grams, scale recipes, and get exact measurements for perfect baking results. Free recipe conversion tool." />
+    <meta name="keywords" content="recipe converter, baking conversion, cups to grams, recipe scaling, AI recipe tool, baking calculator, convert measurements, precise baking" />
+    <meta name="robots" content="index, follow" />
+    <meta name="language" content="English" />
+    <meta name="author" content="Supriya Pandey" />
+    <meta name="theme-color" content="#3e2723" />
+    
+    <!-- Canonical URL -->
+    <link rel="canonical" href="https://bakegenius-ai.vercel.app/convert.html" />
+    
+    <!-- Open Graph / Facebook -->
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://bakegenius-ai.vercel.app/convert.html" />
+    <meta property="og:title" content="Convert Recipe - BakeGenius.ai | AI-Powered Recipe Conversion Tool" />
+    <meta property="og:description" content="Convert your baking recipes with AI precision. Transform cups to grams, scale recipes, and get exact measurements for perfect baking results." />
+    <meta property="og:image" content="https://bakegenius-ai.vercel.app/og-image.png" />
+    <meta property="og:image:width" content="1200" />
+    <meta property="og:image:height" content="630" />
+    <meta property="og:site_name" content="BakeGenius.ai" />
+    <meta property="og:locale" content="en_US" />
+    
+    <!-- Twitter -->
+    <meta property="twitter:card" content="summary_large_image" />
+    <meta property="twitter:url" content="https://bakegenius-ai.vercel.app/convert.html" />
+    <meta property="twitter:title" content="Convert Recipe - BakeGenius.ai | AI-Powered Recipe Conversion Tool" />
+    <meta property="twitter:description" content="Convert your baking recipes with AI precision. Transform cups to grams, scale recipes, and get exact measurements for perfect baking results." />
+    <meta property="twitter:image" content="https://bakegenius-ai.vercel.app/og-image.png" />
+    
+    <!-- Additional SEO Meta Tags -->
+    <meta name="application-name" content="BakeGenius.ai" />
+    <meta name="apple-mobile-web-app-title" content="BakeGenius.ai" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
+    <meta name="format-detection" content="telephone=no" />
+    <meta name="mobile-web-app-capable" content="yes" />
+    <meta name="msapplication-TileColor" content="#3e2723" />
+    <meta name="msapplication-tap-highlight" content="no" />
+    
+    <!-- Structured Data -->
+    <script type="application/ld+json">
+    {
+        "@context": "https://schema.org",
+        "@type": "WebApplication",
+        "name": "BakeGenius.ai Recipe Converter",
+        "description": "AI-powered recipe conversion tool for precise baking measurements",
+        "url": "https://bakegenius-ai.vercel.app/convert.html",
+        "applicationCategory": "FoodApplication",
+        "operatingSystem": "Web Browser",
+        "offers": {
+            "@type": "Offer",
+            "price": "0",
+            "priceCurrency": "USD"
+        },
+        "featureList": [
+            "Recipe conversion",
+            "Cups to grams conversion",
+            "Recipe scaling",
+            "AI-powered precision",
+            "Custom measurements"
+        ]
+    }
+    </script>
+    
+    <link href="https://fonts.googleapis.com/css2?family=Comic+Neue:wght@300;400;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+    <style>
+        :root {
+            --candy-red: #ffabab;
+            --sky-blue: #249e96;
+            --sunny-yellow: #fcd124;
+            --soft-pink: #FFB6C1;
+            --mint-green: #9af89a;
+            --lavender: #E6E6FA;
+            --dark-bg: #1a1a1a;
+            --dark-card: #2d2d2d;
+            --dark-text: #e7e3e3;
+            --dark-border: #404040;
+            --white: #FFFFFF;
+            --dark-gray: #1A1A1A;
+            --light-gray: #F8F9FA;
+            --shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+            --glass: rgba(255, 255, 255, 0.15);
+        }
+
+        /* Footer Modern Multi-Column */
+
+        .footer {
+            background: radial-gradient(circle at center, #e9b4b6, #e5c5b3);
+            backdrop-filter: blur(15px);
+            position: relative;
+            z-index: 2;
+            border-top: 1px solid rgba(255, 255, 255, 0.3);
+            margin-top: 4rem;
+        }
+
+        body.dark-mode .footer {
+            background: #1e1e1e;
+        }
+
+        .footer-content {
+            max-width: 1500px;
+            margin: 0 auto;
+            display: grid;
+            grid-template-columns: 2fr 1fr 1fr 1fr;
+            gap: 3rem;
+            padding: 3rem 2rem 2rem;
+        }
+
+        .footer-section h3.footer-title {
+            color: #3e2723;
+            font-size: 1.2rem;
+            font-weight: 700;
+            margin-bottom: 1.5rem;
+            position: relative;
+        }
+
+        .footer-section h3.footer-title::after {
+            content: '';
+            position: absolute;
+            bottom: -8px;
+            left: 0;
+            width: 30px;
+            height: 3px;
+            background: #3e2723;
+            border-radius: 2px;
+        }
+
+        body.dark-mode .footer-section h3.footer-title::after {
+            background: #e0e0e0;
+        }
+
+        .footer-logo {
+            display: flex;
+            align-items: center;
+            gap: 0.8rem;
+            margin-bottom: 1.5rem;
+            font-size: 1.8rem;
+            font-weight: 700;
+            color: #3e2723;
+        }
+
+        .footer-logo-icon {
+            font-size: 2rem;
+        }
+
+        .footer-description {
+            color: #333;
+            line-height: 1.6;
+            margin-bottom: 2rem;
+            font-size: 0.95rem;
+        }
+
+        .footer-links {
+            list-style: none;
+            padding: 0;
+            margin: 0;
+        }
+
+        .footer-links li {
+            margin-bottom: 0.8rem;
+        }
+
+        .footer-links a {
+            color: #333;
+            text-decoration: none;
+            display: flex;
+            align-items: center;
+            gap: 0.8rem;
+            font-weight: 500;
+            transition: all 0.3s ease;
+            padding: 0.3rem 0;
+            border-radius: 5px;
+        }
+
+        .footer-links a:hover {
+            color: black;
+            transform: translateX(4px);
+            background: rgba(255, 107, 107, 0.1);
+            padding-left: 0.8rem;
+        }
+
+        .footer-links i {
+            font-size: 0.9rem;
+            width: 16px;
+            opacity: 0.7;
+        }
+
+        .social-links {
+            display: flex;
+            gap: 1rem;
+            margin-top: 1rem;
+        }
+
+        .social-link {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            width: 45px;
+            height: 45px;
+            background:linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
+            color: white;
+            text-decoration: none;
+            border-radius: 50%;
+            font-size: 1.2rem;
+            transition: all 0.3s ease;
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+        }
+
+        .social-link:hover {
+            transform: translateY(-3px) scale(1.1);
+            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
+        }
+
+
+
+        .footer-bottom {
+            background: rgba(0, 0, 0, 0.05);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid rgba(255, 255, 255, 0.1);
+            padding: 1.5rem 0;
+        }
+
+        .footer-bottom-content {
+            max-width: 1500px;
+            margin: 0 auto;
+            padding: 0 2rem;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            flex-wrap: wrap;
+            gap: 1rem;
+        }
+
+        .copyright {
+            color: #333;
+            font-size: 0.9rem;
+            margin: 0;
+        }
+
+        .copyright .name {
+            color: #3e2723;
+            font-weight: 600;
+        }
+
+        .copyright a:hover {
+            text-decoration: underline;
+        }
+
+        .footer-badges {
+            display: flex;
+            gap: 0.8rem;
+            flex-wrap: wrap;
+        }
+
+        .badge {
+            display: inline-flex;
+            align-items: center;
+            gap: 0.4rem;
+            padding: 0.4rem 0.8rem;
+            border-radius: 20px;
+            font-size: 0.8rem;
+            font-weight: 600;
+            color: white;
+            text-decoration: none;
+            transition: all 0.3s ease;
+        }
+
+        .badge:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+        }
+
+        .badge-green {
+            background: linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
+        }
+
+        .badge-blue {
+            background: linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
+        }
+
+        .badge-purple {
+            background: linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
+        }
+
+        body.dark-mode .badge-blue {
+            background: #e0e0e0;
+            color: #0d0d0d;
+        }
+
+        body.dark-mode .badge-green {
+            background: #e0e0e0;
+            color: #0d0d0d;
+        }
+
+        body.dark-mode .badge-purple {
+            background: #e0e0e0;
+            color: #0d0d0d;
+        }
+
+        @media (max-width: 1024px) {
+            .footer-content {
+                grid-template-columns: 1fr 1fr;
+                gap: 2rem;
+            }
+        }
+
+        @media (max-width: 768px) {
+            .footer-content {
+                grid-template-columns: 1fr;
+                gap: 2rem;
+                text-align: center;
+            }
+
+            .footer-bottom-content {
+                flex-direction: column;
+                text-align: center;
+                gap: 1rem;
+            }
+
+            .footer-badges {
+                justify-content: center;
+            }
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Comic Neue', cursive;
+            background-color: #f5f3f1;
+            min-height: 100vh;
+            color: var(--white);
+            transition: all 0.3s ease;
+        }
+
+        body.dark-mode {
+            background-color: #0d0d0d;
+        }
+
+        /* Navigation */
+        /* ===== STANDARDIZED NAVIGATION BAR ===== */
+        .navbar {
+            background: radial-gradient(circle at center, #e5c5b3, #e9b4b6);
+            backdrop-filter: blur(15px);
+            padding: 1rem 2rem;
+            position: fixed;
+            top: 0;
+            width: 100%;
+            z-index: 1000;
+            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+            transition: all 0.3s ease;
+        }
+
+        body.dark-mode .navbar {
+            background: #1e1e1e !important;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
+        }
+
+        .nav-container {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            max-width: 1500px;
+            margin: 0 auto;
+        }
+
+        .logo {
+            font-size: 2rem;
+            font-weight: 600;
+            color: #3e2723;
+            text-decoration: none;
+            transition: all 0.3s ease;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            font-family: "Comic Neue", cursive;
+            min-width: 150px;
+            padding-right: 50px;
+        }
+
+        .logo-icon {
+            font-size: 2rem;
+            transition: transform 0.3s ease;
+        }
+
+        .logo-text {
+            font-weight: 600;
+            letter-spacing: -0.5px;
+        }
+
+        .logo:hover {
+            transform: scale(1.05);
+            color: #3e2723;
+        }
+
+        .logo:hover .logo-icon {
+            transform: rotate(10deg);
+        }
+
+        body.dark-mode .logo {
+            color: #e0e0e0;
+        }
+
+        body.dark-mode .logo:hover {
+            color: #e0e0e0;
+        }
+
+        .nav-links {
+            display: flex;
+            list-style: none;
+            gap: 1.5rem;
+            align-items: center;
+        }
+
+        .nav-links a {
+            text-decoration: none;
+            color: #3e2723;
+            font-weight: 600;
+            font-size: 1.1rem;
+            padding: 0.7rem 1rem;
+            border-radius: 25px;
+            transition: all 0.3s ease;
+            position: relative;
+            background: rgba(255, 255, 255, 0.1);
+            border: 2px solid transparent;
+        }
+
+        body.dark-mode .nav-links a {
+            color: #e0e0e0 !important;
+            background: rgba(111, 100, 91, 0.133) !important;
+            border: 2px solid transparent !important;
+        }
+
+        .nav-links a:hover {
+            background-color: #f3e0d6;
+            transform: translateY(-2px);
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+            border-color: rgba(228, 191, 180, 0.3);
+            color: #3e2723;
+        }
+
+        body.dark-mode .nav-links a:hover {
+            background-color: #0d0d0d !important;
+            transform: translateY(-2px);
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+            border-color: #1e1e1e !important;
+            color: #e0e0e0 !important;
+        }
+
+        /* Navigation Actions */
+        .nav-actions {
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+        }
+
+        .dark-mode-btn {
+            background-color: #3e2723;
+            border: none;
+            color: white;
+            padding: 0.7rem;
+            border-radius: 50%;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            font-size: 1rem;
+            width: 45px;
+            height: 45px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+        }
+
+        .dark-mode-btn:hover {
+            transform: scale(1.1) rotate(360deg);
+            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
+        }
+
+        body.dark-mode .dark-mode-btn {
+            background-color: #e0e0e0;
+            color: #1e1e1e;
+        }
+
+        .login-btn {
+            background: linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
+            color: white;
+            text-decoration: none;
+            padding: 0.7rem 1.5rem;
+            border-radius: 25px;
+            font-weight: 600;
+            transition: all 0.3s ease;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            box-shadow: 0 4px 15px #402a26;
+            border: 2px solid transparent;
+        }
+
+        .login-btn:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 8px 25px #624844;
+            background: linear-gradient(90deg, #543732, #3d2b28, #341d19);
+        }
+
+        body.dark-mode .login-btn {
+            background: #e0e0e0;
+            color: #0d0d0d;
+            text-decoration: none;
+            padding: 0.7rem 1.5rem;
+            border-radius: 25px;
+            font-weight: 600;
+            transition: all 0.3s ease;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            box-shadow: 0 2px 2px #e0e0e0;
+            border: 2px solid transparent;
+        }
+
+        body.dark-mode .login-btn:hover {
+            transform: translateY(-3px);
+            background: #e0e0e0;
+            box-shadow: 0 2px 2px #e0e0e0;
+        }
+
+        .hamburger {
+            display: none;
+            flex-direction: column;
+            cursor: pointer;
+            padding: 0.5rem;
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+
+        .hamburger:hover {
+            background: rgba(255, 255, 255, 0.1);
+        }
+
+        .hamburger span {
+            width: 25px;
+            height: 3px;
+            background: linear-gradient(45deg, #a4766a, #5d4037);
+            margin: 3px 0;
+            transition: 0.3s;
+            border-radius: 2px;
+        }
+
+        body.dark-mode .hamburger span {
+            background: #e0e0e0;
+        }
+
+        .hamburger.active span:nth-child(1) {
+            transform: rotate(-45deg) translate(-5px, 6px);
+        }
+
+        .hamburger.active span:nth-child(2) {
+            opacity: 0;
+        }
+
+        .hamburger.active span:nth-child(3) {
+            transform: rotate(45deg) translate(-5px, -6px);
+        }
+
+        /* ===== STANDARDIZED MOBILE NAVIGATION ===== */
+        @media (max-width: 768px) {
+            .navbar {
+                padding: 0.8rem 1rem;
+            }
+
+            .nav-links {
+                display: flex;
+                position: fixed;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100vh;
+                background: #1a1a1a;
+                flex-direction: column;
+                justify-content: flex-start;
+                align-items: center;
+                padding-top: 6rem;
+                transition: transform 0.3s ease;
+                transform: translateX(-100%);
+                gap: 0;
+                z-index: 999;
+            }
+
+            body.dark-mode .nav-links {
+                background: #1a1a1a !important;
+            }
+
+            .nav-links.active {
+                transform: translateX(0);
+            }
+
+            .nav-links li {
+                width: 90%;
+                margin: 0;
+                padding: 0;
+                border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+            }
+
+            body.dark-mode .nav-links li {
+                border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+            }
+
+            .nav-links a {
+                width: 100%;
+                padding: 1.5rem 2rem;
+                font-size: 1.2rem;
+                margin-bottom: 0;
+                background: #2a2a2a !important;
+                color: #e0e0e0 !important;
+                border-radius: 0;
+                display: flex;
+                align-items: center;
+                gap: 1rem;
+                transition: all 0.3s ease;
+            }
+
+            .nav-links a:hover {
+                background: #3a3a3a !important;
+                color: #ffffff !important;
+            }
+
+            .nav-actions {
+                gap: 0.5rem;
+                position: relative;
+                z-index: 1001;
+            }
+
+            .login-btn {
+                padding: 0.5rem 1rem;
+                font-size: 0.9rem;
+            }
+
+            .dark-mode-btn {
+                width: 40px;
+                height: 40px;
+                font-size: 0.9rem;
+            }
+
+            .hamburger {
+                display: flex;
+                position: relative;
+                z-index: 1001;
+            }
+
+            .logo {
+                font-size: 1.5rem;
+            }
+
+            .logo-icon {
+                font-size: 1.7rem;
+            }
+        }
+
+        /* ===== STANDARDIZED SMALL MOBILE NAVIGATION ===== */
+        @media (max-width: 480px) {
+            .navbar {
+                padding: 0.5rem;
+            }
+
+            .logo {
+                font-size: 1.3rem;
+            }
+
+            .logo-icon {
+                font-size: 1.5rem;
+            }
+
+            .nav-actions {
+                gap: 0.3rem;
+            }
+
+            .login-btn {
+                padding: 0.4rem 0.8rem;
+                font-size: 0.8rem;
+            }
+
+            .dark-mode-btn {
+                width: 35px;
+                height: 35px;
+                font-size: 0.8rem;
+            }
+        }
+
+        .logo {
+            font-size: 2rem;
+            font-weight: 600;
+            color: #3e2723;
+            text-decoration: none;
+            transition: all 0.3s ease;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            font-family: "Comic Neue", cursive;
+            min-width: 150px;
+            padding-right: 50px;
+        }
+
+        .logo-icon {
+            font-size: 2rem;
+            transition: transform 0.3s ease;
+        }
+
+        .logo-text {
+            font-weight: 600;
+            letter-spacing: -0.5px;
+        }
+
+        .logo:hover {
+            transform: scale(1.05);
+            color: #3e2723;
+        }
+
+        .logo:hover .logo-icon {
+            transform: rotate(10deg);
+        }
+
+        body.dark-mode .logo {
+            color: #e0e0e0;
+        }
+
+        body.dark-mode .logo:hover {
+            color: #e0e0e0;
+        }
+
+        .dark-mode-btn {
+            background-color: #3e2723;
+            border: none;
+            color: white;
+            padding: 0.7rem;
+            border-radius: 50%;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            font-size: 1rem;
+            width: 45px;
+            height: 45px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+        }
+
+        .dark-mode-btn:hover {
+            transform: scale(1.1) rotate(360deg);
+            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
+        }
+
+        body.dark-mode .dark-mode-btn {
+            background-color: #e0e0e0;
+            color: #1e1e1e;
+        }
+
+        .login-btn {
+
+            background-color: #5C4033;
+            color: white;
+            text-decoration: none;
+            padding: 0.7rem 1.5rem;
+            border-radius: 25px;
+            font-weight: 600;
+            transition: all 0.3s ease;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
+            border: 2px solid transparent;
+        }
+
+        .login-btn:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 8px 25px #cf622f;
+            background-color:#5C4033;
+            border-color: rgba(255, 255, 255, 0.3);
+        }
+
+        body.dark-mode .login-btn {
+            background-color: #e0e0e0;
+            color: #0d0d0d;
+            text-decoration: none;
+            padding: 0.7rem 1.5rem;
+            border-radius: 25px;
+            font-weight: 600;
+            transition: all 0.3s ease;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            box-shadow: 0 2px 2px #e0e0e0;
+            border: 2px solid transparent;
+        }
+
+        body.dark-mode .login-btn:hover {
+            transform: translateY(-3px);
+            background: #e0e0e0;
+            box-shadow: 0 2px 2px #e0e0e0;
+        }
+
+
+        /* Dark Mode Styles for Content */
+        body.dark-mode .input-label {
+            color: #e0e0e0;
+        }
+
+        body.dark-mode .recipe-input {
+            background: rgba(255, 255, 255, 0.1);
+        }
+
+        body.dark-mode .unit-toggle button {
+            color: var(--dark-text);
+        }
+
+        body.dark-mode .unit-toggle {
+            background: rgba(255, 255, 255, 0.1);
+        }
+
+        /*dark mode*/
+
+        body.dark-mode .footer-content {
+            background-color: #1e1e1e;
+            border-top: 1px solid rgba(255, 255, 255, 0.1);
+        }
+
+        body.dark-mode .footer-section h3.footer-title {
+            color: #e0e0e0;
+        }
+
+        body.dark-mode .footer-logo {
+            color: #e0e0e0;
+        }
+
+        body.dark-mode .footer-description {
+            color: #a0a0a0;
+        }
+
+        body.dark-mode .footer-links a {
+            color: #e0e0e0;
+        }
+
+        body.dark-mode .footer-links a:hover {
+            color: #a0a0a0;
+            background: rgba(255, 138, 128, 0.1);
+        }
+
+        body.dark-mode .footer-bottom {
+            background: #1e1e1e;
+        }
+
+        body.dark-mode .copyright {
+            color: #a0a0a0;
+        }
+
+        body.dark-mode .copyright .name {
+            color: #ef6154;
+        }
+
+        /* ===== STANDARDIZED SMALL MOBILE NAVIGATION ===== */
+        @media (max-width: 480px) {
+            .navbar {
+                padding: 0.5rem;
+            }
+
+            .logo {
+                font-size: 1.3rem;
+            }
+
+            .logo-icon {
+                font-size: 1.5rem;
+            }
+
+            .nav-actions {
+                gap: 0.3rem;
+            }
+
+            .login-btn {
+                padding: 0.4rem 0.8rem;
+                font-size: 0.8rem;
+            }
+
+            .dark-mode-btn {
+                width: 35px;
+                height: 35px;
+                font-size: 0.8rem;
+            }
+        }
+
+        /* Main Content */
+        main {
+            padding: 6rem 2rem 2rem;
+            max-width: 1200px;
+            margin: 0 auto;
+        }
+
+        .page-header {
+            text-align: center;
+            margin-bottom: 3rem;
+        }
+
+        .page-title {
+            font-size: clamp(2rem, 6vw, 3rem);
+            font-weight: 700;
+            margin-bottom: 1rem;
+            color: #3e2723;
+            animation: bounce 2s ease-in-out infinite;
+        }
+
+        body.dark-mode .page-title {
+            color: #e0e0e0 !important;
+        }
+
+        .page-subtitle {
+            font-size: 1.2rem;
+            opacity: 0.9;
+            margin-bottom: 2rem;
+            color: #6b6767;
+        }
+
+        body.dark-mode .page-subtitle {
+            color: #e0e0e0 !important;
+        }
+
+        @keyframes bounce {
+
+            0%,
+            20%,
+            50%,
+            80%,
+            100% {
+                transform: translateY(0);
+            }
+
+            40% {
+                transform: translateY(-10px);
+            }
+
+            60% {
+                transform: translateY(-5px);
+            }
+        }
+
+        .converter-container {
+            display: grid;
+            grid-template-columns: 1fr;
+            gap: 2rem;
+            max-width: 800px;
+            margin: 0 auto;
+        }
+
+        .input-section {
+            background: rgba(255, 255, 255, 0.1);
+            backdrop-filter: blur(20px);
+            border-radius: 20px;
+            padding: 2rem;
+            border: 1px solid rgba(255, 255, 255, 0.2);
+        }
+
+        .input-group {
+            margin-bottom: 1.5rem;
+        }
+
+        .input-label {
+            display: block;
+            font-size: 1.1rem;
+            font-weight: 600;
+            margin-bottom: 0.5rem;
+            color: #3e2723;
+
+        }
+
+        .recipe-input {
+            width: 100%;
+            min-height: 200px;
+            padding: 1rem;
+            border: none;
+            border-radius: 15px;
+            background: rgba(255, 255, 255, 0.1);
+            backdrop-filter: blur(10px);
+            color: black !important;
+            font-family: 'Comic Neue', cursive;
+            font-size: 1rem;
+            resize: vertical;
+            border: 2px solid #6b6767;
+            transition: all 0.3s ease;
+        }
+
+        .recipe-input:focus {
+            outline: none;
+            border-color: #3e2723;
+            box-shadow: 0 0 2px rgba(255, 165, 2, 0.3);
+        }
+
+        body.dark-mode .recipe-input:focus {
+            outline: none;
+            border-color: #0D0D0D;
+            box-shadow: 0 0 2px #0d0d0d;
+        }
+
+        .recipe-input::placeholder {
+
+
+            color: #000;
+            /* color: rgba(255, 255, 255, 0.7);*/
+        }
+
+        /* Animated Background Elements */
+        .floating-elements {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
+            z-index: 1;
+        }
+
+        .floating-cupcake {
+            position: absolute;
+            font-size: 2rem;
+            animation: float 6s ease-in-out infinite;
+        }
+
+        .floating-cupcake:nth-child(1) {
+            top: 10%;
+            left: 10%;
+            animation-delay: 0s;
+        }
+
+        .floating-cupcake:nth-child(2) {
+            top: 20%;
+            right: 15%;
+            animation-delay: 2s;
+        }
+
+        .floating-cupcake:nth-child(3) {
+            bottom: 20%;
+            left: 20%;
+            animation-delay: 4s;
+        }
+
+        .floating-cupcake:nth-child(4) {
+            bottom: 30%;
+            right: 10%;
+            animation-delay: 1s;
+        }
+
+        @keyframes float {
+
+            0%,
+            100% {
+                transform: translateY(0px) rotate(0deg);
+            }
+
+            50% {
+                transform: translateY(-20px) rotate(5deg);
+            }
+
+
+        }
+
+        .file-upload {
+            display: none;
+        }
+
+        .file-upload-label {
+            display: inline-block;
+            padding: 1rem 2rem;
+            background: linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
+            color: white;
+            border-radius: 25px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            font-weight: 600;
+            margin-right: 1rem;
+        }
+
+        body.dark-mode .file-upload-label {
+            background: rgba(220, 121, 63, 0.893);
+            color: #e0e0e0;
+        }
+
+        .file-upload-label:hover {
+            transform: translateY(-2px);
+            box-shadow: var(--shadow);
+        }
+
+        .convert-button {
+            width: 100%;
+            padding: 1.5rem;
+            background: linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
+            color: white;
+            border: none;
+            border-radius: 25px;
+            font-size: 1.3rem;
+            font-weight: 700;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            position: relative;
+            overflow: hidden;
+            margin-top: 1rem;
+        }
+
+        body.dark-mode .convert-button {
+            background: rgba(220, 121, 63, 0.893);
+            color: #e0e0e0;
+        }
+
+        .convert-button:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
+        }
+
+        .convert-button:disabled {
+            opacity: 0.6;
+            cursor: not-allowed;
+            transform: none;
+        }
+
+        .loading-spinner {
+            display: none;
+            width: 20px;
+            height: 20px;
+            border: 2px solid transparent;
+            border-top: 2px solid var(--white);
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+            margin-right: 10px;
+        }
+
+        /* Back to Top Button Styles */
+        #backToTop {
+            position: fixed;
+            bottom: 2.5rem;
+            right: 2.5rem;
+            z-index: 2000;
+            background: linear-gradient(45deg, #a4766a, #5d4037);
+            color: #fff;
+            border: none;
+            border-radius: 50%;
+            width: 56px;
+            height: 56px;
+            font-size: 2rem;
+            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
+            cursor: pointer;
+            opacity: 0;
+            pointer-events: none;
+            transition: opacity 0.4s, transform 0.2s;
+        }
+
+        body.dark-mode #backToTop {
+            background: #e0e0e0;
+            color: #0d0d0d;
+        }
+
+        #backToTop.show {
+            opacity: 1;
+            pointer-events: auto;
+            transform: scale(1.08);
+        }
+
+        #backToTop:hover {
+            background: linear-gradient(45deg, #a4766a, #5d4037);
+            transform: scale(1.15);
+        }
+
+        /* Back to Top to Bottom Button Styles */
+        #Toptoback {
+            position: fixed;
+            bottom: 2.5rem;
+            right: 2.5rem;
+            z-index: 2000;
+            background: linear-gradient(45deg, #a4766a, #5d4037);
+            color: #fff;
+            border: none;
+            border-radius: 50%;
+            width: 56px;
+            height: 56px;
+            font-size: 2rem;
+            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
+            cursor: pointer;
+            opacity: 0;
+            pointer-events: none;
+            transition: opacity 0.4s, transform 0.2s;
+        }
+
+        body.dark-mode #Toptoback {
+            background: #e0e0e0;
+            color: #0d0d0d;
+        }
+
+        #Toptoback.show {
+            opacity: 1;
+            pointer-events: auto;
+            transform: translateY(-10px) scale(1.08);
+        }
+
+        #Toptoback:hover {
+            background: linear-gradient(45deg, #a4766a, #5d4037);
+            transform: scale(1.15);
+        }
+
+        body.dark-mode #Toptoback:hover {
+            background: #e0e0e0;
+            transform: scale(1.15);
+        }
+
+        @keyframes spin {
+            0% {
+                transform: rotate(0deg);
+            }
+
+            100% {
+                transform: rotate(360deg);
+            }
+        }
+
+        .results-section {
+            background: rgba(255, 255, 255, 0.1);
+            backdrop-filter: blur(20px);
+            border-radius: 20px;
+            padding: 2rem;
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            display: none;
+        }
+
+        .results-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 2rem;
+        }
+
+        .results-title {
+            font-size: 1.5rem;
+            font-weight: 700;
+        }
+
+        .unit-toggle {
+            display: flex;
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 25px;
+            padding: 0.2rem;
+        }
+
+        .unit-toggle button {
+            padding: 0.5rem 1rem;
+            border: none;
+            background: transparent;
+            color: #333;
+            border-radius: 20px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            font-family: 'Comic Neue', cursive;
+            font-weight: 600;
+        }
+
+        .unit-toggle button.active {
+            background: var(--sunny-yellow);
+            color: var(--dark-gray);
+        }
+
+        .results-table {
+            width: 100%;
+            border-collapse: collapse;
+            margin-top: 1rem;
+        }
+
+        .results-table th,
+        .results-table td {
+            padding: 1rem;
+            text-align: left;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+        }
+
+        .results-table th {
+            background: rgba(255, 255, 255, 0.1);
+            font-weight: 700;
+            color: var(--sunny-yellow);
+        }
+
+        .ingredient-row {
+            transition: all 0.3s ease;
+        }
+
+        .ingredient-row:hover {
+            background: rgba(255, 255, 255, 0.05);
+        }
+
+        .ingredient-icon {
+            font-size: 1.5rem;
+            margin-right: 0.5rem;
+        }
+
+        .tooltip {
+            position: relative;
+            cursor: help;
+        }
+
+        .tooltip::after {
+            content: attr(data-tooltip);
+            position: absolute;
+            bottom: 125%;
+            left: 50%;
+            transform: translateX(-50%);
+            background: var(--dark-gray);
+            color: var(--white);
+            padding: 0.5rem;
+            border-radius: 8px;
+            font-size: 0.8rem;
+            white-space: nowrap;
+            opacity: 0;
+            pointer-events: none;
+            transition: opacity 0.3s;
+            z-index: 1001;
+        }
+
+        .tooltip:hover::after {
+            opacity: 1;
+        }
+
+        .warning-popup {
+            position: fixed;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            background: rgba(255, 71, 87, 0.95);
+            backdrop-filter: blur(20px);
+            padding: 2rem;
+            border-radius: 20px;
+            border: 2px solid var(--candy-red);
+            z-index: 1002;
+            display: none;
+            max-width: 400px;
+            text-align: center;
+        }
+
+        .warning-popup h3 {
+            margin-bottom: 1rem;
+            font-size: 1.3rem;
+        }
+
+        .warning-popup button {
+            padding: 0.8rem 1.5rem;
+            background: var(--white);
+            color: var(--candy-red);
+            border: none;
+            border-radius: 15px;
+            font-weight: 600;
+            cursor: pointer;
+            margin: 0.5rem;
+            transition: all 0.3s ease;
+        }
+
+        .warning-popup button:hover {
+            transform: translateY(-2px);
+        }
+
+        .overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0, 0, 0, 0.5);
+            backdrop-filter: blur(5px);
+            z-index: 1001;
+            display: none;
+        }
+
+        /* Responsive Design */
+        @media (max-width: 768px) {
+            main {
+                padding: 5rem 1rem 2rem;
+            }
+
+            .results-table {
+                font-size: 0.9rem;
+            }
+
+            .results-table th,
+            .results-table td {
+                padding: 0.5rem;
+            }
+
+            .file-upload-label {
+                display: block;
+                text-align: center;
+                margin-bottom: 1rem;
+                margin-right: 0;
+            }
+        }
+
+        @media (max-width: 480px) {
+            nav {
+                padding: 1rem;
+            }
+
+            .input-section,
+            .results-section {
+                padding: 1.5rem;
+            }
+
+            .warning-popup {
+                margin: 1rem;
+                max-width: calc(100% - 2rem);
+            }
+        }
+
+    </style>
+</head>
+
+<body>
+    <div class="floating-elements">
+        <div class="floating-cupcake">🧁</div>
+        <div class="floating-cupcake">🍰</div>
+        <div class="floating-cupcake">🥧</div>
+        <div class="floating-cupcake">🍪</div>
+    </div>
+    <!-- Navigation -->
+    <nav class="navbar">
+        <div class="nav-container">
+            <a href="index.html" class="logo">
+                <span class="logo-icon">🍰</span>
+                <span class="logo-text">BakeGenius.ai</span>
+            </a>
+
+            <ul class="nav-links" id="navLinks">
+                
+                <li>
+                    <a href="convert.html">
+                        <i class="fas fa-exchange-alt" style="margin-right:8px;"></i>
+                        Convert Recipe
+                    </a>
+                </li>
+                <li>
+                    <a href="customize.html">
+                        <i class="fas fa-cog" style="margin-right:8px;"></i>
+                        Customize
+                    </a>
+                </li>
+                <li>
+                    <a href="scale.html">
+                        <i class="fas fa-balance-scale" style="margin-right:8px;"></i>
+                        Scale Recipes
+                    </a>
+                </li>
+                <li>
+                    <a href="about.html">
+                        <i class="fas fa-info-circle" style="margin-right:8px;"></i>
+                        About
+                    </a>
+                </li>
+                  <li>
+                    <a href="faq.html">
+                        <i class="fas fa-question-circle" style="margin-right:8px;"></i>
+                        FAQs
+                    </a>
+                </li>
+            </ul>
+            <div class="nav-actions">
+                <button id="darkModeToggle" class="dark-mode-btn" title="Toggle Dark Mode">
+                    <i class="fas fa-moon"></i>
+                </button>
+                <a href="#" class="login-btn" id="openLoginModal">
+                    <i class="fas fa-user"></i>
+                    Login
+                </a>
+                <a href="#" class="login-btn" id="logoutBtn" style="display: none;">
+                    <i class="fas fa-sign-out-alt"></i>
+                    Logout
+                </a>
+            </div>
+            <div class="hamburger" id="hamburger">
+                <span></span>
+                <span></span>
+                <span></span>
+            </div>
+        </div>
+    </nav>
+
+
+    <!-- Main Content -->
+    <main>
+        <div class="page-header">
+            <h1 class="page-title"> 🍪Recipe Converter</h1>
+            <p class="page-subtitle">Transform your recipes into precise gram measurements with AI magic✨</p>
+        </div>
+
+        <div class="converter-container">
+            <!-- Input Section -->
+            <div class="input-section">
+                <div class="input-group">
+                    <label for="recipeInput" class="input-label">📝 Paste your recipe here:</label>
+                    <textarea id="recipeInput" class="recipe-input" placeholder="Example:
+2 cups all-purpose flour
+1 cup packed brown sugar
+1/2 cup melted butter
+2 large eggs
+1 tsp vanilla extract
+1/2 tsp baking powder
+1/4 tsp salt"></textarea>
+                </div>
+
+                <div class="input-group">
+                    <label for="fileUpload" class="file-upload-label">
+                        📁 Or upload a recipe file
+                    </label>
+                    <input type="file" id="fileUpload" class="file-upload" accept=".txt,.doc,.docx"
+                        onchange="handleFileUpload(event)">
+                </div>
+
+                <button class="convert-button" onclick="convertRecipe()">
+                    <div class="loading-spinner" id="loadingSpinner"></div>
+                    <span id="buttonText">Magically Convert ✨</span>
+                </button>
+            </div>
+
+            <!-- Results Section -->
+            <div class="results-section" id="resultsSection">
+                <div class="results-header">
+                    <h2 class="results-title">🎯 Conversion Results</h2>
+                    <div class="unit-toggle">
+                        <button class="active" onclick="toggleUnits('metric')">Metric (g)</button>
+                        <button onclick="toggleUnits('imperial')">Imperial</button>
+                    </div>
+                </div>
+
+                <table class="results-table" id="resultsTable">
+                    <thead>
+                        <tr>
+                            <th>Ingredient</th>
+                            <th>Original</th>
+                            <th>Grams</th>
+                            <th>Notes</th>
+                        </tr>
+                    </thead>
+                    <tbody id="resultsBody">
+                        <!-- Results will be populated here -->
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </main>
+
+    <!-- Warning Popup -->
+    <div class="overlay" id="overlay" onclick="closeWarning()"></div>
+    <div class="warning-popup" id="warningPopup">
+        <h3>⚠️ Ambiguous Measurement</h3>
+        <p id="warningMessage"></p>
+        <button onclick="closeWarning()">Got it!</button>
+    </div>
+
+    <!-- Back to Top Button -->
+    <button id="backToTop" title="Back to Top">⬆</button>
+    <!-- Top to Bottom Button -->
+    <button id="Toptoback" title="Top To Back">⬇</button>
+
+    <!-- footer startes here -->
+
+    <footer class="footer">
+        <div class="footer-content">
+            <div class="footer-section footer-brand">
+                <div class="footer-logo">
+                    <span class="footer-logo-icon">🍰</span>
+                    <span class="footer-logo-text">BakeGenius.ai</span>
+                </div>
+                <p class="footer-description">
+                    Transform your baking with AI-powered recipe conversions. Making baking accessible, precise, and
+                    delightful for everyone.
+                </p>
+                <div class="social-links">
+                    <a href="https://www.linkedin.com/in/supriyapandey595/" class="social-link linkedin" target="_blank"
+                        rel="noopener" title="LinkedIn">
+                        <i class="fab fa-linkedin-in"></i>
+                    </a>
+                    <a href="https://github.com/supriya46788/BakeGenuis-AI" class="social-link github" target="_blank"
+                        rel="noopener" title="GitHub">
+                        <i class="fab fa-github"></i>
+                    </a>
+                    <a href="mailto:supriyadpandey502@gmail.com" class="social-link email" target="_blank"
+                        rel="noopener" title="Email">
+                        <i class="fas fa-envelope"></i>
+                    </a>
+                </div>
+            </div>
+
+            <div class="footer-section">
+                <h3 class="footer-title">Quick Links</h3>
+                <ul class="footer-links">
+                    <li><a href="index.html"><i class="fas fa-home"></i>Home</a></li>
+                    <li><a href="convert.html"><i class="fas fa-exchange-alt"></i>Convert Recipe</a></li>
+                    <li><a href="customize.html"><i class="fas fa-cog"></i>Customize</a></li>
+                    <li><a href="scale.html"><i class="fas fa-balance-scale"></i>Scale Recipes</a></li>
+                    <li><a href="about.html"><i class="fas fa-info-circle"></i>About Us</a></li>
+                </ul>
+            </div>
+
+            <div class="footer-section">
+                <h3 class="footer-title">Features</h3>
+                <ul class="footer-links">
+                    <li><a href="#"><i class="fas fa-calculator"></i>Unit Conversion</a></li>
+                    <li><a href="#"><i class="fas fa-chart-line"></i>Nutritional Analysis</a></li>
+                    <li><a href="#"><i class="fas fa-balance-scale"></i>Recipe Scaling</a></li>
+                    <li><a href="#"><i class="fas fa-magic"></i>AI Optimization</a></li>
+                    <li><a href="#"><i class="fas fa-mobile-alt"></i>Mobile Friendly</a></li>
+                </ul>
+            </div>
+
+            <div class="footer-section">
+                <h3 class="footer-title">Support</h3>
+                <ul class="footer-links">
+                    <li><a href="contact.html"><i class="fas fa-question-circle"></i>Contact Us</a></li>
+                    <li><a href="feedback.html"><i class="fas fa-comment"></i>Feedback</a></li>
+                    <li><a href="faq.html"><i class="fas fa-info-circle"></i>FAQ</a></li>
+                    <li><a href="privacypolicy.html"><i class="fas fa-shield-alt"></i>Privacy Policy</a></li>
+                    <li><a href="toc.html"><i class="fas fa-file-contract"></i>Terms of Service</a></li>
+                </ul>
+            </div>
+        </div>
+
+        <div class="footer-bottom">
+            <div class="footer-bottom-content">
+                <p class="copyright">
+                    © 2025 BakeGenius.ai. Made with <span style="color:#FF6B6B;">❤️</span> by <span class="name">Supriya
+                        Pandey</span>
+                </p>
+                <div class="footer-badges">
+                    <span class="badge badge-green"><i class="fas fa-heart"></i> Open Source</span>
+                    <span class="badge badge-blue"><i class="fas fa-leaf"></i> Eco Friendly</span>
+                    <span class="badge badge-purple"><i class="fas fa-robot"></i> AI Powered</span>
+                </div>
+            </div>
+        </div>
+    </footer>
+
+    <script>
+        // Dark Mode Toggle
+        const darkModeToggle = document.getElementById('darkModeToggle');
+        const body = document.body;
+        const darkModeIcon = darkModeToggle.querySelector('i');
+
+        // Check for saved theme preference or default to light mode
+        const currentTheme = localStorage.getItem('theme') || 'light';
+        if (currentTheme === 'dark') {
+            body.classList.add('dark-mode');
+            darkModeIcon.classList.remove('fa-moon');
+            darkModeIcon.classList.add('fa-sun');
+        }
+
+        darkModeToggle.addEventListener('click', () => {
+            body.classList.toggle('dark-mode');
+
+            // Update icon
+            if (body.classList.contains('dark-mode')) {
+                darkModeIcon.classList.remove('fa-moon');
+                darkModeIcon.classList.add('fa-sun');
+                localStorage.setItem('theme', 'dark');
+            } else {
+                darkModeIcon.classList.remove('fa-sun');
+                darkModeIcon.classList.add('fa-moon');
+                localStorage.setItem('theme', 'light');
+            }
+        });
+
+        // Mobile Navigation Toggle
+        const hamburger = document.getElementById('hamburger');
+        const navLinks = document.getElementById('navLinks');
+
+        hamburger.addEventListener('click', () => {
+            navLinks.classList.toggle('active');
+            hamburger.classList.toggle('active');
+        });
+
+        // Close mobile menu when clicking on a link
+        const navItems = document.querySelectorAll('.nav-links a');
+        navItems.forEach(item => {
+            item.addEventListener('click', () => {
+                navLinks.classList.remove('active');
+                hamburger.classList.remove('active');
+            });
+        });
+
+        // Close mobile menu when clicking outside
+        document.addEventListener('click', (e) => {
+            if (!hamburger.contains(e.target) && !navLinks.contains(e.target)) {
+                navLinks.classList.remove('active');
+                hamburger.classList.remove('active');
+            }
+        });
+
+        // Recipe Conversion Logic
+        const GEMINI_API_KEY = 'API_KEY';
+        const GEMINI_API_URL = 'API_URL';
+
+        let currentUnit = 'metric';
+        let convertedData = [];
+
+        // Ingredient to emoji mapping
+        const ingredientEmojis = {
+            'flour': '🌾',
+            'sugar': '🍯',
+            'butter': '🧈',
+            'egg': '🥚',
+            'milk': '🥛',
+            'vanilla': '🌿',
+            'baking powder': '⚡',
+            'salt': '🧂',
+            'chocolate': '🍫',
+            'cocoa': '🍫',
+            'oil': '🫒',
+            'honey': '🍯',
+            'cream': '🥛',
+            'cheese': '🧀',
+            'nuts': '🥜',
+            'fruit': '🍓',
+            'lemon': '🍋',
+            'orange': '🍊',
+            'cinnamon': '🌿',
+            'default': '🥄'
+        };
+
+        function toggleMobileMenu() {
+            const navLinks = document.getElementById('navLinks');
+            navLinks.classList.toggle('active');
+        }
+
+        function handleFileUpload(event) {
+            const file = event.target.files[0];
+            if (file) {
+                const reader = new FileReader();
+                reader.onload = function (e) {
+                    document.getElementById('recipeInput').value = e.target.result;
+                };
+                reader.readAsText(file);
+            }
+        }
+
+        function getIngredientEmoji(ingredient) {
+            const lower = ingredient.toLowerCase();
+            for (const [key, emoji] of Object.entries(ingredientEmojis)) {
+                if (lower.includes(key)) {
+                    return emoji;
+                }
+            }
+            return ingredientEmojis.default;
+        }
+
+        async function convertRecipe() {
+            const recipeText = document.getElementById('recipeInput').value.trim();
+
+            if (!recipeText) {
+                showWarning('Please enter a recipe to convert!');
+                return;
+            }
+
+            setLoading(true);
+
+            try {
+                const response = await fetch(`${GEMINI_API_URL}?key=${GEMINI_API_KEY}`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({
+                        contents: [{
+                            parts: [{
+                                text: `Convert this recipe to precise gram measurements. For each ingredient, provide:
+1. Normalized ingredient name
+2. Original measurement
+3. Gram equivalent
+4. Any relevant notes about the conversion
+
+Please format the response as JSON with this structure:
+{
+  "ingredients": [
+    {
+      "ingredient": "All-purpose flour",
+      "original": "2 cups",
+      "grams": 240,
+      "notes": "Sifted measurement"
+    }
+  ],
+  "warnings": ["Any ambiguous measurements that need clarification"]
+}
+
+Recipe to convert:
+${recipeText}`
+                            }]
+                        }]
+                    })
+                });
+
+                if (!response.ok) {
+                    throw new Error('API request failed');
+                }
+
+                const data = await response.json();
+                const aiResponse = data.candidates[0].content.parts[0].text;
+
+                // Parse the AI response
+                try {
+                    const jsonMatch = aiResponse.match(/\{[\s\S]*\}/);
+                    if (jsonMatch) {
+                        const parsedData = JSON.parse(jsonMatch[0]);
+                        convertedData = parsedData.ingredients || [];
+                        displayResults(convertedData);
+
+                        // Show warnings if any
+                        if (parsedData.warnings && parsedData.warnings.length > 0) {
+                            showWarning(parsedData.warnings.join('\n'));
+                        }
+                    } else {
+                        throw new Error('Could not parse AI response');
+                    }
+                } catch (parseError) {
+                    console.error('Parse error:', parseError);
+                    // Fallback: create results from plain text
+                    convertedData = parseTextResponse(aiResponse);
+                    displayResults(convertedData);
+                }
+
+            } catch (error) {
+                console.error('Conversion error:', error);
+                showWarning('Sorry, there was an error converting your recipe. Please try again.');
+            } finally {
+                setLoading(false);
+            }
+        }
+
+        function parseTextResponse(text) {
+            // Simple fallback parser for plain text responses
+            const lines = text.split('\n').filter(line => line.trim());
+            const ingredients = [];
+
+            lines.forEach(line => {
+                if (line.includes('cup') || line.includes('tbsp') || line.includes('tsp') || line.includes('pound') || line.includes('oz')) {
+                    const parts = line.split(/[:;-]/);
+                    if (parts.length >= 2) {
+                        ingredients.push({
+                            ingredient: parts[0].trim(),
+                            original: parts[1].trim(),
+                            grams: Math.round(Math.random() * 200 + 50), // Placeholder
+                            notes: 'Estimated conversion'
+                        });
+                    }
+                }
+            });
+
+            return ingredients;
+        }
+
+        function displayResults(ingredients) {
+            const resultsSection = document.getElementById('resultsSection');
+            const resultsBody = document.getElementById('resultsBody');
+
+            resultsBody.innerHTML = '';
+
+            ingredients.forEach(item => {
+                const row = document.createElement('tr');
+                row.className = 'ingredient-row';
+
+                const emoji = getIngredientEmoji(item.ingredient);
+
+                row.innerHTML = `
+                    <td>
+                        <span class="ingredient-icon">${emoji}</span>
+                        ${item.ingredient}
+                    </td>
+                    <td>${item.original}</td>
+                    <td class="tooltip" data-tooltip="${item.notes || 'Standard conversion'}">
+                        <strong>${item.grams}g</strong>
+                    </td>
+                    <td><small>${item.notes || 'Standard'}</small></td>
+                `;
+
+                resultsBody.appendChild(row);
+            });
+
+            resultsSection.style.display = 'block';
+            resultsSection.scrollIntoView({ behavior: 'smooth' });
+        }
+
+        function toggleUnits(unit) {
+            currentUnit = unit;
+
+            // Update active button
+            document.querySelectorAll('.unit-toggle button').forEach(btn => {
+                btn.classList.remove('active');
+            });
+            event.target.classList.add('active');
+
+            // Update display (for now, just refresh the current data)
+            if (convertedData.length > 0) {
+                displayResults(convertedData);
+            }
+        }
+
+        function setLoading(isLoading) {
+            const button = document.querySelector('.convert-button');
+            const spinner = document.getElementById('loadingSpinner');
+            const buttonText = document.getElementById('buttonText');
+
+            if (isLoading) {
+                button.disabled = true;
+                spinner.style.display = 'inline-block';
+                buttonText.textContent = 'Converting...';
+            } else {
+                button.disabled = false;
+                spinner.style.display = 'none';
+                buttonText.textContent = 'Magically Convert ✨';
+            }
+        }
+
+        function showWarning(message) {
+            const overlay = document.getElementById('overlay');
+            const popup = document.getElementById('warningPopup');
+            const messageEl = document.getElementById('warningMessage');
+
+            messageEl.textContent = message;
+            overlay.style.display = 'block';
+            popup.style.display = 'block';
+        }
+
+        function closeWarning() {
+            const overlay = document.getElementById('overlay');
+            const popup = document.getElementById('warningPopup');
+
+            overlay.style.display = 'none';
+            popup.style.display = 'none';
+        }
+
+        // Back to Top Button Logic
+        const backToTopBtn = document.getElementById("backToTop");
+        window.addEventListener("scroll", () => {
+            if (window.scrollY > 100) {
+                backToTopBtn.classList.add("show");
+            } else {
+                backToTopBtn.classList.remove("show");
+            }
+        });
+        backToTopBtn.addEventListener("click", () => {
+            window.scrollTo({ top: 0, behavior: "smooth" });
+        });
+
+        //Top to Bottom Button Logic
+        const ToptobackBtn = document.getElementById("Toptoback");
+        window.addEventListener("scroll", () => {
+            if (window.scrollY < 100) {
+                ToptobackBtn.classList.add("show");
+            } else {
+                ToptobackBtn.classList.remove("show");
+            }
+        });
+        ToptobackBtn.addEventListener("click", () => {
+            window.scrollTo({ top: 10000, behavior: "smooth" });
+        });
+
+        // Function to update login state
+        function updateLoginState() {
+            const isLoggedIn = localStorage.getItem("isLoggedIn") === "true";
+            const loginBtn = document.getElementById("openLoginModal");
+            const logoutBtn = document.getElementById("logoutBtn");
+
+            if (isLoggedIn) {
+                loginBtn.style.display = "none";
+                logoutBtn.style.display = "flex";
+            } else {
+                loginBtn.style.display = "flex";
+                logoutBtn.style.display = "none";
+            }
+        }
+
+        // Logout functionality
+        const logoutBtn = document.getElementById("logoutBtn");
+        if (logoutBtn) {
+            logoutBtn.addEventListener("click", (e) => {
+                e.preventDefault();
+                localStorage.removeItem("isLoggedIn");
+                localStorage.removeItem("currentUser");
+                updateLoginState();
+                alert("You have been logged out successfully!");
+            });
+        }
+
+        // Check login state on page load
+        document.addEventListener("DOMContentLoaded", () => {
+            updateLoginState();
+        });
+
+        // Add some sample data for demo purposes
+        document.addEventListener('DOMContentLoaded', function () {
+            // Add floating animation to page elements
+            const animateElements = document.querySelectorAll('.input-section, .results-section');
+            animateElements.forEach((el, index) => {
+                el.style.animation = `fadeInUp 0.6s ease forwards ${index * 0.2}s`;
+                el.style.opacity = '0';
+                el.style.transform = 'translateY(30px)';
+            });
+        });
+
+        // Add fadeInUp animation
+        const style = document.createElement('style');
+        style.textContent = `
+            @keyframes fadeInUp {
+                to {
+                    opacity: 1;
+                    transform: translateY(0);
+                }
+            }
+        `;
+        document.head.appendChild(style);
+    </script>
+</body>
 </html>
\ No newline at end of file
