<!DOCTYPE html><html lang="en"><head> <!-- ================================================================================ REQUIRED META TAGS ================================================================================ --> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- ================================================================================ PAGE-SPECIFIC TAGS (EDIT THESE FOR EACH PAGE) ================================================================================ --> <title>Niriv — Search Quick, do more!</title> <meta name="description" content="Quick search! Find web, images, videos, news, and products. Do and discover more with our online services every day at Niriv, Nepal's first search engine."> <link rel="canonical" href="https://www.niriv.com/"> <!-- ================================================================================ SITE-WIDE SEO TAGS (USUALLY UNCHANGED) ================================================================================ --> <meta name="keywords" content="search engine, Nepal, Niriv, search Nepal, web search, online services, Nepali search engine"> <meta name="author" content="Niriv"> <meta name="robots" content="index, follow"> <!-- ================================================================================ FAVICON & THEME ================================================================================ --> <link rel="icon" href="https://www.yukesh.com.np/wp-content/uploads/2025/09/Favicon.png" type="image/png"> <link rel="apple-touch-icon" href="https://www.yukesh.com.np/wp-content/uploads/2025/09/Favicon.png"> <meta name="theme-color" content="#315EFB"> <!-- ================================================================================ OPEN GRAPH (OG) TAGS (FOR SOCIAL SHARING ON FACEBOOK, LINKEDIN, ETC.) ================================================================================ --> <meta property="og:title" content="Niriv — Search Quick, do more!"> <meta property="og:description" content="Quick search! Find web, images, videos, news, and products. Do and discover more with our online services every day at Niriv, Nepal's first search engine."> <meta property="og:type" content="website"> <meta property="og:url" content="https://www.niriv.com/"> <meta property="og:site_name" content="Niriv"> <meta property="og:image" content="/images/nirivog.png"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="630"> <meta property="og:locale" content="en_US"> <!-- ================================================================================ TWITTER CARD TAGS (FOR SHARING ON TWITTER) ================================================================================ --> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@niriv"> <meta name="twitter:title" content="Niriv — Search Quick, do more!"> <meta name="twitter:description" content="Quick search! Find web, images, videos, news, and products. Do and discover more with our online services every day at Niriv, Nepal's first search engine."> <meta name="twitter:image" content="/images/nirivog.png"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;500;600;700;800;900&family=Noto+Sans+Devanagari:wght@700&display=swap" rel="stylesheet"> <script src="https://cdn.tailwindcss.com"></script> <!-- Modern Icons using Lucide --> <script src="https://unpkg.com/lucide@latest"></script> <!-- Google tag (gtag.js) --><script async src="https://www.googletagmanager.com/gtag/js?id=G-JLMNQMWH32"></script><script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-JLMNQMWH32');</script> <style> body { font-family: 'Fira Sans', sans-serif; background-color: #f8fafc; } h1, h2, h3, h4, h5, h6 { font-family: 'Fira Sans', sans-serif; } .custom-shadow { box-shadow: 0 3px 4px 0 rgba(0, 0, 0, .03); } .search-shadow { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); } .service-icon-shadow { box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05); } .no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } .search-input { border: 2px solid #315EFB; transition: all 0.2s ease; } .search-input:focus { border-color: #1d4ed8; box-shadow: 0 0 0 3px rgba(49, 94, 251, 0.1); } .n-logo { background: linear-gradient(135deg, #315EFB 0%, #1d4ed8 100%); } .widget-shadow { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05); } .card-bg-image { background-size: cover; background-position: center; } .search-category-btn { transition: all 0.2s ease-in-out; } .search-category-btn.active { background-color: #315EFB; color: white; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } /* Styles for the new News Section */ .news-category-tab { transition: all 0.2s ease-in-out; } .news-category-tab.active { background-color: #315EFB; color: white; } .bg-purple-500 { --tw-bg-opacity: 1; background-color: #4f46e5 !important;} .search-overlay { transition: transform 0.3s ease-in-out; } .preview-notice { background: linear-gradient(90deg, #4f46e5, #818cf8, #a78bfa, #4f46e5); background-size: 200% 100%; animation: gradient-animation 5s linear infinite; color: white; text-align: center; padding: 0.5rem; font-size: 0.875rem; font-weight: 500; } .brand-gradient { background-image: linear-gradient(135deg, #315EFB 0%, #1d4ed8 100%); } @keyframes gradient-animation { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* UPDATED Styles for Radial Menu */ #radial-menu-container { transition: opacity 0.3s ease-in-out; transform: translateY(100%); opacity: 0; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s; } #radial-menu-container.active { transform: translateY(0); opacity: 1; } #radial-menu-body { width: 36rem; /* 576px */ height: 36rem; /* 576px */ position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 18rem); /* Move down by half height to create arc effect */ } #radial-menu { position: absolute; top: 0; left: 0; width: 100%; height: 100%; user-select: none; transition: transform 0.2s ease-out; border-radius: 50%; } .radial-menu-item { position: absolute; left: 50%; top: 50%; width: 5rem; /* 80px */ height: 5rem; /* 80px */ margin-left: -2.5rem; margin-top: -2.5rem; transform-origin: center; cursor: pointer; } .radial-menu-item-content { transition: transform 0.2s ease; } .radial-menu-item:hover .radial-menu-item-content { transform: scale(1.1); } /* Radial menu item focus and enter animations */ .radial-menu-item:focus-visible .radial-menu-item-content { outline: 3px solid rgba(49, 94, 251, 0.35); outline-offset: 3px; border-radius: 9999px; } .radial-menu-item { opacity: 0; animation: radial-pop-in 300ms ease both; } @keyframes radial-pop-in { from { transform: scale(0.9) translate(0,0); opacity: 0; } to { opacity: 1; } } /* Gemini AI Feature Styles */ .gemini-modal { transition: opacity 0.3s ease-in-out; } .gemini-modal-content { transform: scale(0.95); opacity: 0; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s; } .gemini-modal.active .gemini-modal-content { transform: scale(1); opacity: 1; } .chat-bubble-user { background-color: #315EFB; color: white; } .chat-bubble-ai { background-color: #e5e7eb; color: #1f2937; } .gemini-loader div { animation: gemini-bouncedelay 1.4s infinite ease-in-out both; } .gemini-loader .bounce1 { animation-delay: -0.32s; } .gemini-loader .bounce2 { animation-delay: -0.16s; } @keyframes gemini-bouncedelay { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1.0); } } /* Style for highlighted autocomplete item */ .autocomplete-selected { background-color: #eef2ff; /* A light indigo background */ } /* Dashain Celebration Styles */ .font-nepali { font-family: 'Noto Sans Devanagari', sans-serif; } .dashain-gradient { background: linear-gradient(135deg, #D92E3D 0%, #880E4F 100%); } .time-card-shadow { box-shadow: 0 25px 50px -12px rgba(160, 30, 37, 0.4); } .confetti { position: absolute; opacity: 0.9; pointer-events: none; animation: fall linear infinite; } @keyframes fall { from { transform: translateY(-10vh) rotate(0deg); } to { transform: translateY(110vh) rotate(720deg); opacity: 0; } } </style></head><body class="text-gray-900 bg-slate-50"> <div id="confetti-container" class="fixed top-0 left-0 w-full h-full pointer-events-none z-50 overflow-hidden"></div> <div class="preview-notice"> Niriv is currently in Preview Mode. Final launch is scheduled for mid-2026. </div> <div id="sidebar-overlay" class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden"></div> <aside id="sidebar" class="fixed inset-0 z-50 bg-slate-50 flex flex-col transition-transform duration-300 ease-in-out transform -translate-x-full"> <!-- Sidebar content remains the same --> <div class="flex items-center justify-between h-16 px-4 sm:px-6 lg:px-16 xl:px-32 w-full flex-shrink-0 bg-white custom-shadow"> <div class="flex items-center"> <a href="/" title="Go to Homepage" class="mr-3"> <img src="https://www.yukesh.com.np/wp-content/uploads/2025/09/icon.svg" alt="Niriv Icon" class="w-8 h-8"> </a> <h2 class="text-lg font-semibold">Shortcuts</h2> </div> <button id="sidebar-close-btn" class="focus:outline-none p-2 hover:bg-gray-100 rounded-lg"> <i data-lucide="x" class="w-6 h-6 text-gray-700"></i> </button> </div> <div class="flex-grow p-4 sm:p-6 lg:px-16 xl:px-32 overflow-y-auto no-scrollbar"> <div class="bg-white custom-shadow mb-6 rounded-lg"> <h4 class="font-semibold text-base p-3 bg-[#eef2f9] rounded-t-lg text-gray-800 text-left">Core Services</h4> <div class="grid grid-cols-3 sm:grid-cols-4 gap-4 p-2"> <a href="#" class="flex flex-col items-center space-y-2 group p-2 rounded-xl hover:bg-gray-50 transition-colors"><div class="w-12 h-12 rounded-2xl flex items-center justify-center bg-white service-icon-shadow"><i data-lucide="search" class="w-6 h-6 text-blue-600"></i></div><span class="text-xs font-semibold text-gray-700">Search</span></a> <a href="#" class="flex flex-col items-center space-y-2 group p-2 rounded-xl hover:bg-gray-50 transition-colors"><div class="w-12 h-12 rounded-2xl flex items-center justify-center bg-white service-icon-shadow"><i data-lucide="credit-card" class="w-6 h-6 text-green-600"></i></div><span class="text-xs font-semibold text-gray-700">Pay</span></a> <a href="#" class="flex flex-col items-center space-y-2 group p-2 rounded-xl hover:bg-gray-50 transition-colors"><div class="w-12 h-12 rounded-2xl flex items-center justify-center bg-white service-icon-shadow"><i data-lucide="play-circle" class="w-6 h-6 text-purple-600"></i></div><span class="text-xs font-semibold text-gray-700">Play</span></a> <a href="#" class="flex flex-col items-center space-y-2 group p-2 rounded-xl hover:bg-gray-50 transition-colors"><div class="w-12 h-12 rounded-2xl flex items-center justify-center bg-white service-icon-shadow"><i data-lucide="clipboard-list" class="w-6 h-6 text-orange-600"></i></div><span class="text-xs font-semibold text-gray-700">Listings</span></a> <a href="#" class="flex flex-col items-center space-y-2 group p-2 rounded-xl hover:bg-gray-50 transition-colors"><div class="w-12 h-12 rounded-2xl flex items-center justify-center bg-white service-icon-shadow"><i data-lucide="calendar-days" class="w-6 h-6 text-blue-600"></i></div><span class="text-xs font-semibold text-gray-700">Tithi</span></a> <a href="#" class="flex flex-col items-center space-y-2 group p-2 rounded-xl hover:bg-gray-50 transition-colors"><div class="w-12 h-12 rounded-2xl flex items-center justify-center bg-white service-icon-shadow"><i data-lucide="star" class="w-6 h-6 text-yellow-600"></i></div><span class="text-xs font-semibold text-gray-700">Rasifal</span></a> <a href="#" class="flex flex-col items-center space-y-2 group p-2 rounded-xl hover:bg-gray-50 transition-colors"><div class="w-12 h-12 rounded-2xl flex items-center justify-center bg-white service-icon-shadow"><i data-lucide="shopping-bag" class="w-6 h-6 text-indigo-600"></i></div><span class="text-xs font-semibold text-gray-700">Shopping</span></a> <a href="#" class="flex flex-col items-center space-y-2 group p-2 rounded-xl hover:bg-gray-50 transition-colors"><div class="w-12 h-12 rounded-2xl flex items-center justify-center bg-white service-icon-shadow"><i data-lucide="newspaper" class="w-6 h-6 text-red-600"></i></div><span class="text-xs font-semibold text-gray-700">News</span></a> <a href="#" class="flex flex-col items-center space-y-2 group p-2 rounded-xl hover:bg-gray-50 transition-colors"><div class="w-12 h-12 rounded-2xl flex items-center justify-center bg-white service-icon-shadow"><i data-lucide="file-pen-line" class="w-6 h-6 text-pink-600"></i></div><span class="text-xs font-semibold text-gray-700">Blog</span></a> <a href="#" class="flex flex-col items-center space-y-2 group p-2 rounded-xl hover:bg-gray-50 transition-colors"><div class="w-12 h-12 rounded-2xl flex items-center justify-center bg-white service-icon-shadow"><i data-lucide="mail" class="w-6 h-6 text-teal-600"></i></div><span class="text-xs font-semibold text-gray-700">Mail</span></a> </div> </div> <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> <div class="space-y-4"> <div class="bg-white rounded-lg custom-shadow"><h4 class="font-semibold text-sm text-gray-600 p-3 bg-[#eef2f9] rounded-t-lg">Content & Media</h4><div class="p-4"><div class="grid grid-cols-2 gap-4"><a href="#" class="flex items-center space-x-3 text-gray-700 p-2 rounded-lg hover:bg-gray-50 transition-colors"><i data-lucide="music-2" class="w-5 h-5 text-blue-600"></i><span class="font-semibold text-xs">Music</span></a><a href="#" class="flex items-center space-x-3 text-gray-700 p-2 rounded-lg hover:bg-gray-50 transition-colors"><i data-lucide="video" class="w-5 h-5 text-blue-600"></i><span class="font-semibold text-xs">Video</span></a><a href="#" class="flex items-center space-x-3 text-gray-700 p-2 rounded-lg hover:bg-gray-50 transition-colors"><i data-lucide="radio-tower" class="w-5 h-5 text-blue-600"></i><span class="font-semibold text-xs">Radio</span></a><a href="#" class="flex items-center space-x-3 text-gray-700 p-2 rounded-lg hover:bg-gray-50 transition-colors"><i data-lucide="film" class="w-5 h-5 text-blue-600"></i><span class="font-semibold text-xs">Movies</span></a><a href="#" class="flex items-center space-x-3 text-gray-700 p-2 rounded-lg hover:bg-gray-50 transition-colors"><i data-lucide="book-open" class="w-5 h-5 text-blue-600"></i><span class="font-semibold text-xs">Books</span></a><a href="#" class="flex items-center space-x-3 text-gray-700 p-2 rounded-lg hover:bg-gray-50 transition-colors"><i data-lucide="file-text" class="w-5 h-5 text-blue-600"></i><span class="font-semibold text-xs">Blogs</span></a><a href="#" class="flex items-center space-x-3 text-gray-700 p-2 rounded-lg hover:bg-gray-50 transition-colors"><i data-lucide="trending-up" class="w-5 h-5 text-blue-600"></i><span class="font-semibold text-xs">Trends</span></a></div></div></div> <div class="bg-white rounded-lg custom-shadow"><h4 class="font-semibold text-sm text-gray-600 p-3 bg-[#eef2f9] rounded-t-lg">Productivity & Tools</h4><div class="p-4"><div class="grid grid-cols-2 gap-4"><a href="#" class="flex items-center space-x-3 text-gray-700 p-2 rounded-lg hover:bg-gray-50 transition-colors"><i data-lucide="mail" class="w-5 h-5 text-blue-600"></i><span class="font-semibold text-xs">Mail</span></a><a href="#" class="flex items-center space-x-3 text-gray-700 p-2 rounded-lg hover:bg-gray-50 transition-colors"><i data-lucide="calendar" class="w-5 h-5 text-blue-600"></i><span class="font-semibold text-xs">Calendar</span></a><a href="#" class="flex items-center space-x-3 text-gray-700 p-2 rounded-lg hover:bg-gray-50 transition-colors"><i data-lucide="notebook" class="w-5 h-5 text-blue-600"></i><span class="font-semibold text-xs">Notes</span></a><a href="#" class="flex items-center space-x-3 text-gray-700 p-2 rounded-lg hover:bg-gray-50 transition-colors"><i data-lucide="wrench" class="w-5 h-5 text-blue-600"></i><span class="font-semibold text-xs">Tools</span></a><a href="#" class="flex items-center space-x-3 text-gray-700 p-2 rounded-lg hover:bg-gray-50 transition-colors"><i data-lucide="bell" class="w-5 h-5 text-blue-600"></i><span class="font-semibold text-xs">Alerts</span></a><a href="#" class="flex items-center space-x-3 text-gray-700 p-2 rounded-lg hover:bg-gray-50 transition-colors"><i data-lucide="contact" class="w-5 h-5 text-blue-600"></i><span class="font-semibold text-xs">Directory</span></a></div></div></div> <div class="bg-white rounded-lg custom-shadow"><h4 class="font-semibold text-sm text-gray-600 p-3 bg-[#eef2f9] rounded-t-lg">Finance & Data</h4><div class="p-4"><div class="grid grid-cols-2 gap-3"><a href="#" class="flex items-center space-x-3 text-gray-700 p-2 rounded-lg hover:bg-gray-50 transition-colors"><i data-lucide="wallet" class="w-5 h-5 text-blue-600"></i><span class="font-semibold text-xs">Wallet</span></a><a href="#" class="flex items-center space-x-3 text-gray-700 p-2 rounded-lg hover:bg-gray-50 transition-colors"><i data-lucide="area-chart" class="w-5 h-5 text-blue-600"></i><span class="font-semibold text-xs">Finance</span></a><a href="#" class="flex items-center space-x-3 text-gray-700 p-2 rounded-lg hover:bg-gray-50 transition-colors"><i data-lucide="bar-chart-3" class="w-5 h-5 text-blue-600"></i><span class="font-semibold text-xs">Stocks</span></a><a href="#" class="flex items-center space-x-3 text-gray-700 p-2 rounded-lg hover:bg-gray-50 transition-colors"><i data-lucide="truck" class="w-5 h-5 text-blue-600"></i><span class="font-semibold text-xs">Transport</span></a></div></div></div> </div> <div class="space-y-4"> <div class="bg-white rounded-lg custom-shadow"><h4 class="font-semibold text-sm text-gray-600 p-3 bg-[#eef2f9] rounded-t-lg">Social & Community</h4><div class="p-4"><div class="grid grid-cols-2 gap-3"><a href="#" class="flex items-center space-x-3 text-gray-700 p-2 rounded-lg hover:bg-gray-50 transition-colors"><i data-lucide="message-square" class="w-5 h-5 text-blue-600"></i><span class="font-semibold text-xs">Chat</span></a><a href="#" class="flex items-center space-x-3 text-gray-700 p-2 rounded-lg hover:bg-gray-50 transition-colors"><i data-lucide="users" class="w-5 h-5 text-blue-600"></i><span class="font-semibold text-xs">Groups</span></a><a href="#" class="flex items-center space-x-3 text-gray-700 p-2 rounded-lg hover:bg-gray-50 transition-colors"><i data-lucide="messages-square" class="w-5 h-5 text-blue-600"></i><span class="font-semibold text-xs">Forums</span></a><a href="#" class="flex items-center space-x-3 text-gray-700 p-2 rounded-lg hover:bg-gray-50 transition-colors"><i data-lucide="bar-chart-2" class="w-5 h-5 text-blue-600"></i><span class="font-semibold text-xs">Polls</span></a><a href="#" class="flex items-center space-x-3 text-gray-700 p-2 rounded-lg hover:bg-gray-50 transition-colors"><i data-lucide="vote" class="w-5 h-5 text-blue-600"></i><span class="font-semibold text-xs">Vote</span></a><a href="#" class="flex items-center space-x-3 text-gray-700 p-2 rounded-lg hover:bg-gray-50 transition-colors"><i data-lucide="calendar-plus" class="w-5 h-5 text-blue-600"></i><span class="font-semibold text-xs">Events</span></a></div></div></div> <div class="bg-white rounded-lg custom-shadow"><h4 class="font-semibold text-sm text-gray-600 p-3 bg-[#eef2f9] rounded-t-lg">Lifestyle & Daily Use</h4><div class="p-4"><div class="grid grid-cols-2 gap-3"><a href="#" class="flex items-center space-x-3 text-gray-700 p-2 rounded-lg hover:bg-gray-50 transition-colors"><i data-lucide="send" class="w-5 h-5 text-blue-600"></i><span class="font-semibold text-xs">Travel</span></a><a href="#" class="flex items-center space-x-3 text-gray-700 p-2 rounded-lg hover:bg-gray-50 transition-colors"><i data-lucide="utensils" class="w-5 h-5 text-blue-600"></i><span class="font-semibold text-xs">Food</span></a><a href="#" class="flex items-center space-x-3 text-gray-700 p-2 rounded-lg hover:bg-gray-50 transition-colors"><i data-lucide="store" class="w-5 h-5 text-blue-600"></i><span class="font-semibold text-xs">Market</span></a><a href="#" class="flex items-center space-x-3 text-gray-700 p-2 rounded-lg hover:bg-gray-50 transition-colors"><i data-lucide="tag" class="w-5 h-5 text-blue-600"></i><span class="font-semibold text-xs">Deals</span></a><a href="#" class="flex items-center space-x-3 text-gray-700 p-2 rounded-lg hover:bg-gray-50 transition-colors"><i data-lucide="gift" class="w-5 h-5 text-blue-600"></i><span class="font-semibold text-xs">Offers</span></a><a href="#" class="flex items-center space-x-3 text-gray-700 p-2 rounded-lg hover:bg-gray-50 transition-colors"><i data-lucide="briefcase" class="w-5 h-5 text-blue-600"></i><span class="font-semibold text-xs">Jobs</span></a><a href="#" class="flex items-center space-x-3 text-gray-700 p-2 rounded-lg hover:bg-gray-50 transition-colors"><i data-lucide="heart-pulse" class="w-5 h-5 text-blue-600"></i><span class="font-semibold text-xs">Health</span></a><a href="#" class="flex items-center space-x-3 text-gray-700 p-2 rounded-lg hover:bg-gray-50 transition-colors"><i data-lucide="graduation-cap" class="w-5 h-5 text-blue-600"></i><span class="font-semibold text-xs">Learning</span></a></div></div></div> <div class="bg-white rounded-lg custom-shadow"><h4 class="font-semibold text-sm text-gray-600 p-3 bg-[#eef2f9] rounded-t-lg">Discovery & Engagement</h4><div class="p-4"><div class="grid grid-cols-2 gap-3"><a href="#" class="flex items-center space-x-3 text-gray-700 p-2 rounded-lg hover:bg-gray-50 transition-colors"><i data-lucide="map" class="w-5 h-5 text-blue-600"></i><span class="font-semibold text-xs">Maps</span></a><a href="#" class="flex items-center space-x-3 text-gray-700 p-2 rounded-lg hover:bg-gray-50 transition-colors"><i data-lucide="compass" class="w-5 h-5 text-blue-600"></i><span class="font-semibold text-xs">Explore</span></a><a href="#" class="flex items-center space-x-3 text-gray-700 p-2 rounded-lg hover:bg-gray-50 transition-colors"><i data-lucide="gamepad-2" class="w-5 h-5 text-blue-600"></i><span class="font-semibold text-xs">Games</span></a><a href="#" class="flex items-center space-x-3 text-gray-700 p-2 rounded-lg hover:bg-gray-50 transition-colors"><i data-lucide="image" class="w-5 h-5 text-blue-600"></i><span class="font-semibold text-xs">Photos</span></a></div></div></div> </div> </div> </div> </aside> <div id="main-content"> <header> <div class="container mx-auto"> <div class="flex items-center justify-between h-16 px-4 sm:px-8 lg:px-24 xl:px-48"> <div class="flex items-center space-x-2"> <button id="menu-toggle-btn" class="p-2 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors"> <i data-lucide="grip-vertical" class="w-6 h-6"></i> </button> <a href="#" class="p-2 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors"> <i data-lucide="wallet" class="w-6 h-6"></i> </a> <a href="#" class="p-2 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors"> <i data-lucide="store" class="w-6 h-6"></i> </a> </div> <div class="flex items-center space-x-2"> <a href="#" class="p-2 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors"> <i data-lucide="messages-square" class="w-6 h-6"></i> </a> <a href="#" class="p-2 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors relative"> <i data-lucide="bell" class="w-6 h-6"></i> <span class="absolute top-1 right-1 flex h-3 w-3 items-center justify-center rounded-full bg-red-500 text-xs text-white"></span> </a> <a href="#" class="p-2 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors"> <i data-lucide="user-circle-2" class="w-6 h-6"></i> </a> </div> </div> </div> </header> <main> <div class="container mx-auto pt-8 sm:pt-12 px-4 sm:px-8 lg:px-24 xl:px-48"> <section class="mb-12"> <div class="dashain-gradient text-white py-12 px-4 sm:px-8 text-center relative overflow-hidden rounded-3xl"> <h2 class="font-nepali text-4xl md:text-5xl font-bold mb-4" style="text-shadow: 2px 2px 8px rgba(0,0,0,0.6);">बडा दशैं को शुभकामना</h2> <h3 class="text-2xl md:text-3xl font-extrabold mb-3 tracking-tight" style="text-shadow: 2px 2px 6px rgba(0,0,0,0.5);"> Dashain Tika Sahit 2082 </h3> <p class="text-md md:text-lg font-medium mb-6 max-w-2xl mx-auto opacity-95"> Official auspicious time for Nepal: </p> <div class="bg-white/20 backdrop-blur-sm text-white p-6 rounded-2xl inline-block border border-white/30 max-w-md w-full mx-auto"> <div class="text-5xl md:text-6xl font-black mb-4 tracking-tighter leading-none"> 11:53 AM </div> <div class="flex flex-col sm:flex-row justify-center items-center space-y-2 sm:space-y-0 sm:space-x-6 text-sm font-medium"> <div class="flex items-center"><i data-lucide="calendar" class="w-4 h-4 inline-block mr-2"></i><span>Ashwin 16, 2082</span></div> <div class="flex items-center"><i data-lucide="calendar-check" class="w-4 h-4 inline-block mr-2"></i><span>October 2, 2025</span></div> </div> </div> <br/> <a href="https://niriv.com/dashain-tika-2082-time" class="mt-6 inline-block bg-white text-red-700 font-bold py-2 px-6 rounded-full hover:bg-amber-300 transition-colors shadow-lg">View Worldwide Times</a> </div> </section> <section class="flex flex-col items-center mt-2 mb-12"> <img src="https://niriv.com.np/static/media/logo.svg" alt="Niriv Logo" class="w-56 mb-8"> <form action="/search.html" method="GET" class="w-full max-w-xl relative px-2" id="main-search-form"> <div class="flex justify-center flex-wrap gap-2 mb-4"> <label class="search-category-btn active cursor-pointer px-4 py-2 text-sm font-semibold text-gray-700 bg-gray-100 rounded-full transition-colors duration-200"><input type="radio" name="type" value="web" class="hidden" checked> All</label> <label class="search-category-btn cursor-pointer px-4 py-2 text-sm font-semibold text-gray-700 bg-gray-100 rounded-full transition-colors duration-200"><input type="radio" name="type" value="images" class="hidden"> Images</label> <label class="search-category-btn cursor-pointer px-4 py-2 text-sm font-semibold text-gray-700 bg-gray-100 rounded-full transition-colors duration-200"><input type="radio" name="type" value="videos" class="hidden"> Videos</label> <label class="search-category-btn cursor-pointer px-4 py-2 text-sm font-semibold text-gray-700 bg-gray-100 rounded-full transition-colors duration-200"><input type="radio" name="type" value="news" class="hidden"> News</label> </div> <div class="relative"> <!-- MODIFIED: N icon is now the trigger button again --> <div class="absolute inset-y-0 left-0 flex items-center pl-4"> <button type="button" id="radial-menu-trigger" class="p-2 rounded-full hover:bg-blue-50 transition-colors"> <img src="/images/Nirivicon.svg" alt="Niriv Services Menu" class="w-8 h-8"> </button> </div> <input type="search" name="q" id="main-search-input" placeholder="Start typing..." class="w-full py-3 pl-20 pr-36 text-base bg-white border-2 border-blue-600 rounded-full focus:outline-none search-input search-shadow transition-all duration-200" required autocomplete="off"> <input type="hidden" name="from" id="search-from" value="web"> <div class="absolute inset-y-0 right-0 flex items-center pr-2.5"> <button type="button" id="gemini-quick-answer-btn" class="h-9 w-9 rounded-full text-white flex items-center justify-center bg-purple-500 hover:bg-purple-600 transition-colors mr-1" title="Get a ✨ Quick Answer with AI"> <i data-lucide="sparkles" class="w-5 h-5"></i> </button> <button type="submit" class="h-9 w-9 rounded-full text-white flex items-center justify-center bg-blue-600 hover:bg-blue-700 transition-colors" title="Search"> <i data-lucide="arrow-right" class="w-5 h-5"></i> </button> </div> </div> <div id="autocomplete-results" class="absolute left-0 right-0 top-full mt-2 bg-white rounded-lg shadow-lg z-10 hidden"></div> </form> <div class="mt-6 flex items-center justify-center space-x-2"> <i data-lucide="trending-up" class="w-5 h-5 text-gray-700 flex-shrink-0"></i> <h3 class="text-lg font-bold text-gray-800 flex-shrink-0">Trending:</h3> <div id="trending-keywords-container" class="text-sm text-gray-600 font-semibold whitespace-nowrap overflow-x-auto no-scrollbar"> <a href="/search.html?q=kp+oli" class="hover:underline hover:text-blue-600">china nepal russia</a>, <a href="/search.html?q=nepal+news" class="hover:underline hover:text-blue-600 ml-2">news</a>, <a href="/search.html?q=weather+today" class="hover:underline hover:text-blue-600 ml-2">Dashain Tika</a> </div> </div> <div class="grid grid-cols-4 sm:grid-cols-8 gap-4 text-center max-w-3xl mx-auto mt-8"> <a href="#" class="flex flex-col items-center space-y-2 group"><div class="w-12 h-12 rounded-2xl flex items-center justify-center bg-white service-icon-shadow hover-lift"><i data-lucide="search" class="w-6 h-6 text-blue-600"></i></div><span class="text-xs font-semibold text-gray-700">Search</span></a> <a href="#" class="flex flex-col items-center space-y-2 group"><div class="w-12 h-12 rounded-2xl flex items-center justify-center bg-white service-icon-shadow hover-lift"><i data-lucide="mail" class="w-6 h-6 text-teal-600"></i></div><span class="text-xs font-semibold text-gray-700">Mail</span></a> <a href="#" class="flex flex-col items-center space-y-2 group"><div class="w-12 h-12 rounded-2xl flex items-center justify-center bg-white service-icon-shadow hover-lift"><i data-lucide="newspaper" class="w-6 h-6 text-red-600"></i></div><span class="text-xs font-semibold text-gray-700">News</span></a> <a href="#" class="flex flex-col items-center space-y-2 group"><div class="w-12 h-12 rounded-2xl flex items-center justify-center bg-white service-icon-shadow hover-lift"><i data-lucide="shopping-bag" class="w-6 h-6 text-indigo-600"></i></div><span class="text-xs font-semibold text-gray-700">Shopping</span></a> <a href="#" class="flex flex-col items-center space-y-2 group"><div class="w-12 h-12 rounded-2xl flex items-center justify-center bg-white service-icon-shadow hover-lift"><i data-lucide="calendar-days" class="w-6 h-6 text-blue-600"></i></div><span class="text-xs font-semibold text-gray-700">Tithi</span></a> <a href="#" class="flex flex-col items-center space-y-2 group"><div class="w-12 h-12 rounded-2xl flex items-center justify-center bg-white service-icon-shadow hover-lift"><i data-lucide="coffee" class="w-6 h-6 text-green-600"></i></div><span class="text-xs font-semibold text-gray-700">Cafe</span></a> <a href="#" class="flex flex-col items-center space-y-2 group"><div class="w-12 h-12 rounded-2xl flex items-center justify-center bg-white service-icon-shadow hover-lift"><i data-lucide="trending-up" class="w-6 h-6 text-green-600"></i></div><span class="text-xs font-semibold text-gray-700">Economy</span></a> <a href="#" class="flex flex-col items-center space-y-2 group"><div class="w-12 h-12 rounded-2xl flex items-center justify-center bg-white service-icon-shadow hover-lift"><i data-lucide="more-horizontal" class="w-6 h-6 text-gray-500"></i></div><span class="text-xs font-semibold text-gray-700">More</span></a> </div> </section> <section class="mb-8"><div class="bg-gradient-to-r from-blue-600 to-blue-800 rounded-3xl p-6 flex items-center justify-between text-white relative overflow-hidden"><div class="flex items-center space-x-4"><div class="relative"><div class="w-20 h-12 bg-blue-500 rounded-lg transform -rotate-12 relative flex items-center justify-center"><i data-lucide="credit-card" class="w-8 h-8 text-white"></i></div></div><div><p class="font-semibold text-lg">Nabil Bank Offer</p><p class="font-bold text-xl">10% cashback on payments!</p></div></div><button class="bg-white text-blue-600 w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0 font-semibold hover:bg-gray-100 transition-colors"><i data-lucide="chevron-right" class="w-5 h-5"></i></button></div></section> <section class="my-8"><div class="bg-gradient-to-r from-indigo-600 via-purple-600 to-blue-600 rounded-2xl p-6 relative overflow-hidden"><div class="absolute top-0 right-0 w-32 h-32 bg-white bg-opacity-10 rounded-full transform translate-x-16 -translate-y-16"></div><div class="absolute bottom-0 left-0 w-24 h-24 bg-white bg-opacity-10 rounded-full transform -translate-x-12 translate-y-12"></div><div class="relative z-10 flex flex-col md:flex-row items-center justify-between text-white"><div class="mb-4 md:mb-0"><div class="flex items-center mb-2"><div class="bg-yellow-400 text-black px-2 py-1 rounded-lg text-xs font-bold mr-3">PREMIUM</div><span class="text-yellow-300 font-semibold">Special Offer</span></div><h2 class="text-2xl md:text-3xl font-bold mb-2">Subscribe to Premium</h2><p class="text-blue-100 max-w-md">Get exclusive features, ad-free experience, and special discounts on all Niriv services. Limited time offer!</p></div><div class="flex flex-col items-center md:items-end space-y-3"><div class="text-right"><div class="text-3xl font-bold">NPR 299</div><div class="text-sm text-blue-100 line-through">NPR 499/month</div></div><button class="bg-white text-indigo-600 font-bold py-3 px-8 rounded-xl hover:bg-gray-100 transition-colors shadow-lg">Subscribe Now</button></div></div></div></section> </div> </main> <footer class="bg-white border-t border-gray-100"> <!-- Footer content remains the same --> <div class="container mx-auto py-12 px-4 sm:px-8 lg:px-24 xl:px-48"><div class="grid grid-cols-1 md:grid-cols-3 gap-8 items-center text-center md:text-left"><div class="flex items-center justify-center md:justify-start space-x-4"><div class="text-sm text-gray-600"><p class="mb-2">Learn more about how to be private online.</p><a href="#" class="text-blue-600 font-semibold hover:underline">Visit our privacy blog</a></div></div><div class="flex flex-col items-center"><img src="https://www.niriv.com.np/static/media/logo.svg" alt="Niriv Logo" class="w-32 mb-4"><div class="flex space-x-6 text-sm font-semibold text-gray-700"><a href="/privacy" class="hover:text-blue-600 transition-colors">Privacy</a><a href="/about" class="hover:text-blue-600 transition-colors">About</a><a href="/bot" class="hover:text-blue-600 transition-colors">Bot</a><a href="/press" class="hover:text-blue-600 transition-colors">Press</a></div></div><div class="flex justify-center md:justify-end space-x-3"><a href="https://facebook.com/nirivhq" target="_blank" rel="noopener noreferrer" class="w-10 h-10 bg-gray-100 rounded-xl flex items-center justify-center text-gray-500 hover:bg-blue-600 hover:text-white transition-colors"><i data-lucide="facebook" class="w-5 h-5"></i></a><a href="https://www.instagram.com/nirivhq" target="_blank" rel="noopener noreferrer" class="w-10 h-10 bg-gray-100 rounded-xl flex items-center justify-center text-gray-500 hover:bg-blue-600 hover:text-white transition-colors"><i data-lucide="instagram" class="w-5 h-5"></i></a><a href="https://twitter.com/nirivhq" target="_blank" rel="noopener noreferrer" class="w-10 h-10 bg-gray-100 rounded-xl flex items-center justify-center text-gray-500 hover:bg-blue-600 hover:text-white transition-colors"><i data-lucide="twitter" class="w-5 h-5"></i></a><a href="https://np.linkedin.com/company/niriv" target="_blank" rel="noopener noreferrer" class="w-10 h-10 bg-gray-100 rounded-xl flex items-center justify-center text-gray-500 hover:bg-blue-600 hover:text-white transition-colors"><i data-lucide="linkedin" class="w-5 h-5"></i></a><a href="https://www.youtube.com/@niriv" target="_blank" rel="noopener noreferrer" class="w-10 h-10 bg-gray-100 rounded-xl flex items-center justify-center text-gray-500 hover:bg-blue-600 hover:text-white transition-colors"><i data-lucide="youtube" class="w-5 h-5"></i></a></div></div></div> </footer> </div> <!-- Search Overlay (Mobile) --> <div id="search-overlay" class="fixed inset-0 z-[100] bg-white flex-col search-overlay transform translate-y-full md:hidden flex"> <!-- Mobile search overlay remains the same --> <div class="flex items-center h-16 px-4 border-b border-gray-200 flex-shrink-0"><button id="search-overlay-back-btn" class="p-2 mr-2 text-gray-600 rounded-full hover:bg-gray-100"><i data-lucide="arrow-left" class="w-6 h-6"></i></button><form action="https://niriv.com.np/search" method="GET" class="flex-grow relative" id="overlay-search-form"><input type="search" id="search-overlay-input" name="q" placeholder="Start typing..." class="w-full h-10 pr-10 bg-transparent focus:outline-none" autocomplete="off"><input type="hidden" name="from" value="web"><button type="submit" class="absolute inset-y-0 right-0 flex items-center pr-2"><i data-lucide="search" class="w-5 h-5 text-blue-600"></i></button></form></div><div id="search-overlay-content" class="flex-grow overflow-y-auto"></div> </div> <!-- UPDATED Radial Menu --> <div id="radial-menu-container" class="fixed inset-0 z-[200] pointer-events-none hidden" aria-hidden="true" role="dialog" aria-modal="true"> <div id="radial-menu-overlay" class="absolute inset-0 bg-black/40 backdrop-blur-sm pointer-events-auto"></div> <div id="radial-menu-body" class="pointer-events-none"> <div id="radial-menu" class="pointer-events-auto" role="menu" aria-label="Niriv quick actions"> <!-- Menu items will be injected by JS --> </div> </div> <button id="radial-menu-close" class="absolute bottom-6 left-1/2 -translate-x-1/2 z-10 w-16 h-16 brand-gradient rounded-full pointer-events-auto flex items-center justify-center shadow-lg hover:scale-105 transition-transform"> <i data-lucide="x" class="w-8 h-8 text-white"></i> </button> </div> <!-- Gemini "Ask Niriv" Chat Modal --> <div id="ask-niriv-modal" class="gemini-modal fixed inset-0 z-[250] hidden pointer-events-none flex items-center justify-center p-0"> <div class="absolute inset-0 bg-black/50 backdrop-blur-sm" id="ask-niriv-overlay"></div> <div class="gemini-modal-content w-full h-full bg-white flex flex-col"> <div class="flex-shrink-0 flex items-center justify-between p-4 border-b brand-gradient text-white"> <div class="flex items-center space-x-3"> <i data-lucide="sparkles" class="w-6 h-6 text-white"></i> <h3 class="text-lg font-bold">Ask Niriv</h3> </div> <button id="ask-niriv-close" class="p-2 rounded-full hover:bg-white/20"><i data-lucide="x" class="w-5 h-5 text-white"></i></button> </div> <div id="ask-niriv-chat-window" class="flex-grow p-4 overflow-y-auto space-y-4"> <!-- Chat messages will be appended here --> </div> <div class="flex-shrink-0 p-4 border-t"> <form id="ask-niriv-form" class="flex items-center space-x-2"> <input id="ask-niriv-input" type="text" placeholder="Ask anything..." class="w-full px-4 py-2 bg-gray-100 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500"> <button type="submit" class="w-10 h-10 flex-shrink-0 bg-blue-600 text-white rounded-full flex items-center justify-center hover:bg-blue-700 transition-colors"><i data-lucide="send" class="w-5 h-5"></i></button> </form> </div> </div> </div> <!-- Gemini "Quick Answer" Modal --> <div id="quick-answer-modal" class="gemini-modal fixed inset-0 z-[250] hidden pointer-events-none flex items-center justify-center p-4"> <div class="absolute inset-0 bg-black/50 backdrop-blur-sm" id="quick-answer-overlay"></div> <div class="gemini-modal-content w-full max-w-2xl bg-white rounded-2xl shadow-2xl flex flex-col max-h-[80vh]"> <div class="flex-shrink-0 flex items-center justify-between p-4 border-b"> <div class="flex items-center space-x-3"> <i data-lucide="sparkles" class="w-6 h-6 text-purple-500"></i> <h3 class="text-lg font-bold">Quick Answer</h3> </div> <button id="quick-answer-close" class="p-2 rounded-full hover:bg-gray-100"><i data-lucide="x" class="w-5 h-5 text-gray-600"></i></button> </div> <div id="quick-answer-content" class="flex-grow p-6 overflow-y-auto"> <!-- Quick answer will be rendered here --> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', () => { // All other scripts (sidebar, mobile search, news) remain the same const sidebar = document.getElementById('sidebar'); const sidebarOverlay = document.getElementById('sidebar-overlay'); const menuToggleBtn = document.getElementById('menu-toggle-btn'); const sidebarCloseBtn = document.getElementById('sidebar-close-btn'); const toggleMenu = () => { sidebar.classList.toggle('-translate-x-full'); sidebarOverlay.classList.toggle('hidden'); }; menuToggleBtn.addEventListener('click', toggleMenu); sidebarCloseBtn.addEventListener('click', toggleMenu); sidebarOverlay.addEventListener('click', toggleMenu); const mainSearchInput = document.querySelector('#main-search-form input[name="q"]'); const searchOverlay = document.getElementById('search-overlay'); const searchOverlayBackBtn = document.getElementById('search-overlay-back-btn'); const searchOverlayInput = document.getElementById('search-overlay-input'); const searchOverlayContent = document.getElementById('search-overlay-content'); const overlaySearchForm = document.getElementById('overlay-search-form'); const updateOverlayContent = () => { searchOverlayContent.innerHTML = ''; const recentSearches = JSON.parse(localStorage.getItem('nirivRecentSearches')) || []; const recentContainer = document.createElement('div'); recentContainer.className = 'p-4'; if (recentSearches.length > 0) { const recentTitle = document.createElement('h3'); recentTitle.className = 'text-sm font-semibold text-gray-600 mb-2'; recentTitle.textContent = 'Recent Searches'; recentContainer.appendChild(recentTitle); recentSearches.forEach(term => { const link = document.createElement('a'); link.href = `https://www.niriv.com/search?q=${encodeURIComponent(term)}&from=web`; link.className = 'flex items-center p-2 text-gray-800 hover:bg-gray-100 rounded-lg'; link.innerHTML = `<i data-lucide="history" class="w-4 h-4 mr-3 text-gray-400 flex-shrink-0"></i><span class="truncate">${term}</span>`; recentContainer.appendChild(link); }); } else { recentContainer.innerHTML = '<p class="text-gray-500 text-center">There is no recent search history.</p>'; } searchOverlayContent.appendChild(recentContainer); const trendingSearches = [{ term: 'Russia Nepal', icon: 'landmark' }, { term: 'News', icon: 'newspaper' }, { term: 'Dashain Tika', icon: 'cloud-sun' }]; const trendingContainer = document.createElement('div'); trendingContainer.className = 'p-4 border-t border-gray-100'; const trendingTitle = document.createElement('h3'); trendingTitle.className = 'text-sm font-semibold text-gray-600 mb-2'; trendingTitle.textContent = 'Trending Searches'; trendingContainer.appendChild(trendingTitle); trendingSearches.forEach(item => { const link = document.createElement('a'); link.href = `https://www.niriv.com/search?q=${encodeURIComponent(item.term)}&from=web`; link.className = 'flex items-center p-2 text-gray-800 hover:bg-gray-100 rounded-lg'; link.innerHTML = `<i data-lucide="${item.icon}" class="w-4 h-4 mr-3 text-blue-600 flex-shrink-0"></i><span class="truncate">${item.term}</span>`; trendingContainer.appendChild(link); }); searchOverlayContent.appendChild(trendingContainer); lucide.createIcons(); }; const showSearchOverlay = () => { searchOverlay.classList.remove('translate-y-full'); searchOverlay.scrollTop = 0; document.body.classList.add('overflow-hidden'); setTimeout(() => searchOverlayInput.focus(), 50); updateOverlayContent(); }; const hideSearchOverlay = () => { searchOverlay.classList.add('translate-y-full'); document.body.classList.remove('overflow-hidden'); }; mainSearchInput.addEventListener('focus', (e) => { if (window.innerWidth < 768) { e.preventDefault(); mainSearchInput.blur(); showSearchOverlay(); } }); searchOverlayBackBtn.addEventListener('click', hideSearchOverlay); const saveSearchTerm = (term) => { if (!term || term.trim() === '') return; let recentSearches = JSON.parse(localStorage.getItem('nirivRecentSearches')) || []; recentSearches = recentSearches.filter(s => s.toLowerCase() !== term.toLowerCase()); recentSearches.unshift(term); if (recentSearches.length > 10) { recentSearches.pop(); } localStorage.setItem('nirivRecentSearches', JSON.stringify(recentSearches)); }; overlaySearchForm.addEventListener('submit', () => { saveSearchTerm(searchOverlayInput.value); }); // --- MODIFIED AUTOCOMPLETE SCRIPT WITH KEYBOARD NAVIGATION --- const handleAutocomplete = (data, resultsContainer) => { resultsContainer.innerHTML = ''; const suggestions = data[1]; if (suggestions && suggestions.length > 0) { const container = document.createElement('div'); if (resultsContainer.id === 'search-overlay-content') { container.className = 'p-4'; } suggestions.slice(0, 8).forEach(suggestion => { const link = document.createElement('a'); const currentCategory = document.querySelector('.search-category-btn.active input').value; link.href = `https://www.niriv.com/search?q=${encodeURIComponent(suggestion)}&from=${currentCategory}`; link.className = 'autocomplete-item flex items-center px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-lg cursor-pointer'; link.innerHTML = `<i data-lucide="search" class="w-4 h-4 mr-3 text-gray-500"></i><span class="suggestion-text">${suggestion}</span>`; link.addEventListener('click', (e) => { e.preventDefault(); saveSearchTerm(suggestion); window.location.href = link.href; }); container.appendChild(link); }); resultsContainer.appendChild(container); lucide.createIcons(); if(resultsContainer.id === 'autocomplete-results') { resultsContainer.classList.remove('hidden'); } } else { if(resultsContainer.id === 'autocomplete-results') { resultsContainer.classList.add('hidden'); } } }; const setupAutocomplete = (inputElement, resultsContainer) => { let selectedSuggestionIndex = -1; let originalUserValue = ''; inputElement.addEventListener('input', () => { originalUserValue = inputElement.value; selectedSuggestionIndex = -1; const query = inputElement.value; if (query.length < 1) { if(resultsContainer.id === 'autocomplete-results') { resultsContainer.innerHTML = ''; resultsContainer.classList.add('hidden'); } if(resultsContainer.id === 'search-overlay-content') { updateOverlayContent(); } return; } window.jsonpCallback = (data) => handleAutocomplete(data, resultsContainer); const script = document.createElement('script'); script.src = `https://suggestqueries.google.com/complete/search?client=chrome&q=${encodeURIComponent(query)}&callback=jsonpCallback`; document.head.appendChild(script); script.onload = () => script.remove(); }); inputElement.addEventListener('keydown', (e) => { const items = resultsContainer.querySelectorAll('.autocomplete-item'); if (items.length === 0) return; if (e.key === 'ArrowDown' || e.key === 'ArrowUp') { e.preventDefault(); if (selectedSuggestionIndex > -1) { items[selectedSuggestionIndex].classList.remove('autocomplete-selected'); } if (e.key === 'ArrowDown') { selectedSuggestionIndex = (selectedSuggestionIndex + 1) % items.length; } else { // ArrowUp if (selectedSuggestionIndex === 0) { selectedSuggestionIndex = -1; // Go back to original input inputElement.value = originalUserValue; return; } selectedSuggestionIndex = (selectedSuggestionIndex - 1 + items.length) % items.length; } const selectedItem = items[selectedSuggestionIndex]; selectedItem.classList.add('autocomplete-selected'); inputElement.value = selectedItem.querySelector('.suggestion-text').textContent.trim(); } else if (e.key === 'Escape') { resultsContainer.classList.add('hidden'); inputElement.value = originalUserValue; } else if (e.key === 'Enter') { if (selectedSuggestionIndex > -1) { // If a suggestion is selected, let the form submit with the updated value. items[selectedSuggestionIndex].click(); // this will navigate and save the term } } }); }; setupAutocomplete(mainSearchInput, document.getElementById('autocomplete-results')); setupAutocomplete(searchOverlayInput, searchOverlayContent); document.addEventListener('click', (e) => { if (!document.getElementById('main-search-form').contains(e.target)) { document.getElementById('autocomplete-results').classList.add('hidden'); } }); document.getElementById('main-search-form').addEventListener('submit', (e) => { saveSearchTerm(mainSearchInput.value); document.getElementById('autocomplete-results').classList.add('hidden'); }); const searchCategoryBtns = document.querySelectorAll('.search-category-btn'); searchCategoryBtns.forEach(btn => { btn.addEventListener('click', () => { searchCategoryBtns.forEach(b => b.classList.remove('active')); btn.classList.add('active'); const categoryValue = btn.querySelector('input').value; document.getElementById('search-from').value = categoryValue; overlaySearchForm.querySelector('input[name="from"]').value = categoryValue; }); }); const populateStaticTrends = () => { const trendsContainer = document.getElementById('trending-keywords-container'); if (!trendsContainer) return; const staticTrends = ['Russia Nepal', 'News', 'Dashain Tika']; trendsContainer.innerHTML = ''; staticTrends.forEach((trend, index) => { const link = document.createElement('a'); link.href = `/search.html?q=${encodeURIComponent(trend)}`; link.className = 'hover:underline hover:text-blue-600'; if (index > 0) { link.classList.add('ml-2'); } link.textContent = trend; trendsContainer.appendChild(link); if (index < staticTrends.length - 1) { trendsContainer.appendChild(document.createTextNode(', ')); } }); }; // --- RADIAL MENU LOGIC --- const radialMenuTrigger = document.getElementById('radial-menu-trigger'); const radialMenuContainer = document.getElementById('radial-menu-container'); const radialMenuBody = document.getElementById('radial-menu-body'); const radialMenu = document.getElementById('radial-menu'); const radialMenuOverlay = document.getElementById('radial-menu-overlay'); const radialMenuClose = document.getElementById('radial-menu-close'); const services = [ { name: 'Voice', icon: 'mic', href: '#' }, { name: 'Music', icon: 'music-2', href: '#' }, { name: 'Lens', icon: 'camera', href: '#' }, { name: 'QR Scan', icon: 'qr-code', href: '#' }, { name: 'Shopping', icon: 'shopping-bag', href: '#' }, { name: 'Translate', icon: 'languages', href: '#' }, { name: 'Search', icon: 'search', href: '#' }, { name: 'Around Me', icon: 'map-pin', href: '#' } ]; const populateRadialMenu = () => { radialMenu.innerHTML = ''; const angleStep = 360 / services.length; const radius = 130; // 130px radius for the items circle services.forEach((service, index) => { // Start from -90 degrees (top) and go around. Distribute evenly. const angle = -90 + (index * angleStep); const angleRad = angle * (Math.PI / 180); // Calculate position on a perfect circle const x = radius * Math.cos(angleRad); const y = radius * Math.sin(angleRad); const item = document.createElement('a'); item.href = service.href; item.className = 'radial-menu-item flex flex-col items-center justify-center pointer-events-auto focus:outline-none'; item.setAttribute('role', 'menuitem'); item.setAttribute('aria-label', service.name); item.setAttribute('tabindex', '0'); item.style.animationDelay = `${index * 30}ms`; // The transform is relative to the center of the #radial-menu div item.style.transform = `translate(${x}px, ${y}px)`; item.innerHTML = `<div class="radial-menu-item-content flex flex-col items-center"><div class="w-16 h-16 rounded-full flex items-center justify-center bg-white/90 backdrop-blur-sm service-icon-shadow ring-1 ring-[#315EFB]/20"><i data-lucide="${service.icon}" class="w-7 h-7 text-[#315EFB]"></i></div><span class="text-xs font-semibold text-gray-800 mt-2 text-center">${service.name}</span></div>`; radialMenu.appendChild(item); }); lucide.createIcons(); }; const toggleRadialMenu = (show) => { if(show) { radialMenuContainer.classList.remove('hidden', 'pointer-events-none'); radialMenuContainer.setAttribute('aria-hidden', 'false'); document.body.classList.add('overflow-hidden'); setTimeout(() => { radialMenuContainer.classList.add('active'); const firstItem = radialMenu.querySelector('.radial-menu-item'); if (firstItem) firstItem.focus(); }, 10); } else { radialMenuContainer.classList.remove('active'); document.body.classList.remove('overflow-hidden'); radialMenuContainer.setAttribute('aria-hidden', 'true'); setTimeout(() => { radialMenuContainer.classList.add('hidden', 'pointer-events-none'); currentRotation = 0; radialMenu.style.transform = `rotate(0deg)`; }, 400); } }; radialMenuTrigger.addEventListener('click', () => toggleRadialMenu(true)); radialMenuOverlay.addEventListener('click', () => toggleRadialMenu(false)); radialMenuClose.addEventListener('click', () => toggleRadialMenu(false)); let isDragging = false, startAngle = 0, currentRotation = 0; const getDegrees = (e) => { const rect = radialMenuBody.getBoundingClientRect(); const centerX = rect.left + rect.width / 2; const centerY = rect.top + rect.height / 2; const x = e.clientX || e.touches[0].clientX; const y = e.clientY || e.touches[0].clientY; return Math.atan2(y - centerY, x - centerX) * (180 / Math.PI); }; // FIXED DRAG LOGIC const onDragStart = (e) => { // PREVENT DRAG if the user clicks on a link OR the close button if (e.target.closest('a') || e.target.closest('#radial-menu-close')) { isDragging = false; return; } e.preventDefault(); isDragging = true; startAngle = getDegrees(e) - currentRotation; radialMenu.style.transition = 'none'; }; const onDragMove = (e) => { if (!isDragging) return; e.preventDefault(); const newAngle = getDegrees(e); currentRotation = newAngle - startAngle; radialMenu.style.transform = `rotate(${currentRotation}deg)`; }; const onDragEnd = () => { if (!isDragging) return; isDragging = false; // snap to nearest item angle for tidiness const angleStep = 360 / services.length; currentRotation = Math.round(currentRotation / angleStep) * angleStep; radialMenu.style.transition = 'transform 0.2s ease-out'; radialMenu.style.transform = `rotate(${currentRotation}deg)`; }; radialMenuBody.addEventListener('mousedown', onDragStart); document.addEventListener('mousemove', onDragMove); document.addEventListener('mouseup', onDragEnd); radialMenuBody.addEventListener('touchstart', onDragStart, { passive: false }); document.addEventListener('touchmove', onDragMove, { passive: false }); document.addEventListener('touchend', onDragEnd); // Keyboard support for rotating and closing document.addEventListener('keydown', (e) => { if (radialMenuContainer.classList.contains('hidden')) return; const angleStep = 360 / services.length; if (e.key === 'ArrowLeft') { currentRotation -= angleStep; radialMenu.style.transform = `rotate(${currentRotation}deg)`; } if (e.key === 'ArrowRight') { currentRotation += angleStep; radialMenu.style.transform = `rotate(${currentRotation}deg)`; } if (e.key === 'Escape') { toggleRadialMenu(false); } }); // --- GEMINI API FEATURES --- const API_KEY = ""; // Kept empty as per instructions const API_URL = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-05-20:generateContent?key=${API_KEY}`; let chatHistory = []; // Helper to toggle modal visibility const toggleGeminiModal = (modal, show) => { if (show) { modal.classList.remove('hidden', 'pointer-events-none'); document.body.classList.add('overflow-hidden'); setTimeout(() => modal.classList.add('active'), 10); } else { modal.classList.remove('active'); document.body.classList.remove('overflow-hidden'); setTimeout(() => modal.classList.add('hidden', 'pointer-events-none'), 300); } }; // --- "Ask Niriv" Chat Logic --- const askNirivModal = document.getElementById('ask-niriv-modal'); const askNirivTrigger = document.getElementById('ask-niriv-trigger'); const askNirivClose = document.getElementById('ask-niriv-close'); const askNirivOverlay = document.getElementById('ask-niriv-overlay'); const askNirivForm = document.getElementById('ask-niriv-form'); const askNirivInput = document.getElementById('ask-niriv-input'); const askNirivChatWindow = document.getElementById('ask-niriv-chat-window'); const addMessageToChat = (sender, message) => { const bubble = document.createElement('div'); bubble.className = `w-full flex ${sender === 'user' ? 'justify-end' : 'justify-start'}`; // Sanitize message to prevent HTML injection const messageText = document.createElement('div'); messageText.textContent = message; bubble.innerHTML = `<div class="max-w-md p-3 rounded-2xl ${sender === 'user' ? 'chat-bubble-user rounded-br-lg' : 'chat-bubble-ai rounded-bl-lg'}">${messageText.innerHTML.replace(/\n/g, '<br>')}</div>`; askNirivChatWindow.appendChild(bubble); askNirivChatWindow.scrollTop = askNirivChatWindow.scrollHeight; }; const showLoader = () => { const loader = document.createElement('div'); loader.id = 'ai-loader'; loader.className = 'w-full flex justify-start'; loader.innerHTML = `<div class="max-w-md p-3 rounded-2xl chat-bubble-ai rounded-bl-lg flex items-center"><div class="gemini-loader flex space-x-1.5"> <div class="bounce1 w-2 h-2 bg-gray-500 rounded-full"></div> <div class="bounce2 w-2 h-2 bg-gray-500 rounded-full"></div> <div class="bounce3 w-2 h-2 bg-gray-500 rounded-full"></div> </div></div>`; askNirivChatWindow.appendChild(loader); askNirivChatWindow.scrollTop = askNirivChatWindow.scrollHeight; } const hideLoader = () => { const loader = document.getElementById('ai-loader'); if(loader) loader.remove(); } if (askNirivTrigger) { askNirivTrigger.addEventListener('click', () => { toggleGeminiModal(askNirivModal, true); if (askNirivChatWindow.children.length === 0) { addMessageToChat('ai', 'Hello! I am Niriv Assist, your AI assistant. How can I help you today?'); } }); } askNirivClose.addEventListener('click', () => toggleGeminiModal(askNirivModal, false)); askNirivOverlay.addEventListener('click', () => toggleGeminiModal(askNirivModal, false)); askNirivForm.addEventListener('submit', async (e) => { e.preventDefault(); const userPrompt = askNirivInput.value.trim(); if (!userPrompt) return; addMessageToChat('user', userPrompt); askNirivInput.value = ''; showLoader(); chatHistory.push({ role: 'user', parts: [{ text: userPrompt }] }); const payload = { contents: chatHistory, systemInstruction: { parts: [{ text: "You are Niriv Assist, a friendly and helpful AI assistant from Nepal. Be concise and helpful in your responses." }] } }; try { const response = await fetch(API_URL, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) }); const result = await response.json(); hideLoader(); const aiResponse = result.candidates[0].content.parts[0].text; addMessageToChat('ai', aiResponse); chatHistory.push({ role: 'model', parts: [{ text: aiResponse }] }); } catch (error) { hideLoader(); addMessageToChat('ai', 'Sorry, I encountered an error. Please try again.'); console.error("Gemini API Error:", error); } }); // --- "Quick Answer" Logic --- const quickAnswerModal = document.getElementById('quick-answer-modal'); const quickAnswerBtn = document.getElementById('gemini-quick-answer-btn'); const quickAnswerClose = document.getElementById('quick-answer-close'); const quickAnswerOverlay = document.getElementById('quick-answer-overlay'); const quickAnswerContent = document.getElementById('quick-answer-content'); const mainSearchInputEl = document.getElementById('main-search-input'); quickAnswerBtn.addEventListener('click', async () => { const query = mainSearchInputEl.value.trim(); if (!query) return; toggleGeminiModal(quickAnswerModal, true); quickAnswerContent.innerHTML = '<div class="gemini-loader flex space-x-1.5 justify-center p-8"> <div class="bounce1 w-3 h-3 bg-purple-500 rounded-full"></div> <div class="bounce2 w-3 h-3 bg-purple-500 rounded-full"></div> <div class="bounce3 w-3 h-3 bg-purple-500 rounded-full"></div> </div>'; const payload = { contents: [{ parts: [{ text: query }] }], tools: [{ "google_search": {} }] }; try { const response = await fetch(API_URL, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) }); const result = await response.json(); const candidate = result.candidates?.[0]; if (candidate && candidate.content?.parts?.[0]?.text) { const text = candidate.content.parts[0].text; let sourcesHtml = ''; const groundingMetadata = candidate.groundingMetadata; if (groundingMetadata && groundingMetadata.groundingAttributions) { const sources = groundingMetadata.groundingAttributions .map(attr => ({ uri: attr.web?.uri, title: attr.web?.title })) .filter(source => source.uri && source.title); if (sources.length > 0) { sourcesHtml = '<h4 class="text-sm font-bold mt-6 mb-2 text-gray-600">Sources:</h4><div class="space-y-2">'; sources.forEach((source, index) => { sourcesHtml += `<a href="${source.uri}" target="_blank" class="flex items-start text-xs text-blue-600 hover:underline"><span class="mr-2">${index+1}.</span><p>${source.title}</p></a>`; }); sourcesHtml += '</div>'; } } quickAnswerContent.innerHTML = `<div class="prose max-w-none">${text.replace(/\n/g, '<br>')}</div>${sourcesHtml}`; } else { throw new Error("Invalid response structure from API."); } } catch (error) { quickAnswerContent.innerHTML = '<p class="text-red-600 text-center">Sorry, could not fetch an answer. Please try again.</p>'; console.error("Gemini Quick Answer Error:", error); } }); quickAnswerClose.addEventListener('click', () => toggleGeminiModal(quickAnswerModal, false)); quickAnswerOverlay.addEventListener('click', () => toggleGeminiModal(quickAnswerModal, false)); // --- DASHAIN CONFETTI SCRIPT --- const confettiContainer = document.getElementById('confetti-container'); const colors = ['#D92E3D', '#FFD600', '#880E4F', '#315EFB']; if(confettiContainer) { for (let i = 0; i < 100; i++) { const confetti = document.createElement('div'); confetti.classList.add('confetti'); confetti.style.left = `${Math.random() * 100}vw`; const size = `${Math.random() * 10 + 5}px`; confetti.style.width = size; confetti.style.height = size; confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)]; confetti.style.borderRadius = Math.random() > 0.5 ? '50%' : '0'; confetti.style.animationDuration = `${Math.random() * 5 + 8}s`; confetti.style.animationDelay = `${Math.random() * 5}s`; confettiContainer.appendChild(confetti); } } // --- INITIALIZATION --- populateStaticTrends(); populateRadialMenu(); lucide.createIcons(); }); </script></body></html> 
