From 4a0bef38d0c806eddaac09cb93bb4529e742cd15 Mon Sep 17 00:00:00 2001
From: khumnath <nath.khum@gmail.com>
Date: Thu, 21 Nov 2024 23:09:29 +0900
Subject: [PATCH] added language selection and tithi in output

---
 docs/bikram.js  | 445 ++++++++++---------------------
 docs/index.html | 686 +++++++++++++++++++++++-------------------------
 docs/tithi.js   |   2 +-
 3 files changed, 468 insertions(+), 665 deletions(-)

diff --git a/docs/bikram.js b/docs/bikram.js
index 695ee24..daee1fa 100644
--- a/docs/bikram.js
+++ b/docs/bikram.js
@@ -1,187 +1,73 @@
-
-    // JavaScript class and functions for date conversion
-    // Based on bikram.h from github.com/khumnath/nepdate
-    // Author khumnath cg <mail@khumnath.com.np>
-    // Licence gpl v3 or higher 
-    class Bikram {
-      constructor() {
-        this.Year = 0;
-        this.Month = 0;
-        this.Day = 0;
-
-        this.YugaRotation_star = 1582237828;
-        this.YugaRotation_sun = 4320000;
-        this.YugaCivilDays = this.YugaRotation_star - this.YugaRotation_sun;
-        this.PlanetApogee_sun = 77 + 17 / 60;
-        this.PlanetCircumm_sun = 13 + 50 / 60;
-        this.rad = 57.2957795; // = 180/pi
-      }
-
-      getSauraMasaDay(ahar) {
-        let tslong_tomorrow;
-        let month;
-        let day;
-        if (this.todaySauraMasaFirstP(ahar)) {
-          day = 1;
-          tslong_tomorrow = this.getTslong(ahar + 1);
-          month = Math.floor(tslong_tomorrow / 30) % 12;
-          month = (month + 12) % 12;
-        } else {
-          [month, day] = this.getSauraMasaDay(ahar - 1);
-          day = day + 1;
-        }
-        return [month, day];
-      }
-
-      todaySauraMasaFirstP(ahar) {
-        let tslong_today = this.getTslong(ahar);
-        let tslong_tomorrow = this.getTslong(ahar + 1);
-        tslong_today = tslong_today - Math.floor(tslong_today / 30) * 30;
-        tslong_tomorrow = tslong_tomorrow - Math.floor(tslong_tomorrow / 30) * 30;
-        return (25 < tslong_today) && (tslong_tomorrow < 5);
-      }
-
-      getTslong(ahar) {
-        let mslong;
-        let t1 = (this.YugaRotation_sun * ahar / this.YugaCivilDays) % 1;
-        mslong = 360 * t1;
-        let x1 = mslong - this.PlanetApogee_sun;
-        let y1 = this.PlanetCircumm_sun / 360;
-        let y2 = Math.sin(x1 / this.rad);
-        let y3 = y1 * y2;
-        let x2 = Math.asin(y3) * this.rad;
-        let x3 = mslong - x2;
-        return x3;
-      }
-
-      getJulianDate(year, month, day) {
-        if (month <= 2) {
-          year -= 1;
-          month += 12;
-        }
-        let a = Math.floor(year / 100.0);
-        let b = 2 - a + Math.floor(a / 4.0);
-        return Math.floor(365.25 * (year + 4716)) + Math.floor(30.6001 * (month + 1)) + day + b - 1524.5;
-      }
-
-      fromJulianDate(julian_date) {
-        let a = Math.floor(julian_date + 0.5);
-        let b = a + 1537;
-        let c = Math.floor((b - 122.1) / 365.25);
-        let d = Math.floor(365.25 * c);
-        let e = Math.floor((b - d) / 30.6001);
-        let f = b - d - Math.floor(30.6001 * e) + (julian_date + 0.5 - a);
-        let day = Math.floor(f);
-        let month;
-        let year;
-        if (e < 14) {
-          month = e - 1;
-        } else {
-          month = e - 13;
-        }
-        if (month > 2) {
-          year = c - 4716;
-        } else {
-          year = c - 4715;
-        }
-        return { year, month, day };
-      }
-
-      // Public method to convert Gregorian to Bikram Sambat
-      fromGregorian(y, m, d) {
-        let julian = this.getJulianDate(y, m, d);
-        let ahar = julian - 588465.5;
-        let [saura_masa_num, saura_masa_day] = this.getSauraMasaDay(ahar);
-        let YearKali = Math.floor((ahar * this.YugaRotation_sun) / this.YugaCivilDays);
-        let YearSaka = YearKali - 3179;
-        let nepalimonth = saura_masa_num % 12;
-        this.Year = YearSaka + 135 + Math.floor((saura_masa_num - nepalimonth) / 12);
-        this.Month = (saura_masa_num +1 ) % 12;
-        this.Day = saura_masa_day +1 ;
-      }
-
-      // Public method to convert Bikram Sambat to Gregorian
-      toGregorian(bsYear, bsMonth, bsDay) {
-        let YearSaka = bsYear - 135;
-        let YearKali = YearSaka + 3179;
-        let ahar = Math.floor((YearKali * this.YugaCivilDays) / this.YugaRotation_sun);
-        let [saura_masa_num, saura_masa_day] = this.getSauraMasaDay(ahar);
-        bsMonth = (bsMonth + 11) % 12; // Month is 0 indexed so last month 11
-        while (saura_masa_num !== bsMonth || saura_masa_day !== bsDay) {
-          if (saura_masa_num < bsMonth || (saura_masa_num === bsMonth && saura_masa_day < bsDay)) {
-            ahar++;
-          } else {
-            ahar--;
-          }
-          [saura_masa_num, saura_masa_day] = this.getSauraMasaDay(ahar);
-        }
-        let julian_date = ahar + 588465.5;
-        return this.fromJulianDate(julian_date);
-      }
-
-      fromNepali(bsYear, bsMonth, bsDay) {
-        let { year, month, day } = this.toGregorian(bsYear, bsMonth, bsDay);
-        this.Year = year;
-        this.Month = month;
-        this.Day = day +1; // Day Index Starts from 0,   This is same as  this.Day = saura_masa_day +1 ;
-      }
-
-      getDayOfWeek() {
-        let date = new Date(this.Year, this.Month - 1, this.Day);
-        return date.getDay();
-      }
-
-      getYear() {
-        return this.Year;
-      }
-
-      getMonth() {
-  return (this.Month + 12) % 12 || 12;
-}
-
-
-      getDay() {
-        return this.Day -1;
-      }
-getNepaliWeekdayName() {
-    const weekdayNepali = ["आइतबार", "सोमबार", "मङ्गलबार", "बुधबार", "बिहिबार", "शुक्रबार", "शनिबार"];
-    let weekdayIndex = this.getDayOfWeek(); // Using existing getDayOfWeek method
-    return weekdayNepali[weekdayIndex];
-  }
-
-      getWeekdayName(year, month, day) {
-        let date = new Date(year, month - 1, day);
-        const weekday = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
-        return weekday[date.getDay()];
-      }
-getBikramMonthName() {
-  const bsMonths = [
-    { value: 1, name: 'बैशाख' }, { value: 2, name: 'जेठ' }, { value: 3, name: 'असार' },
-    { value: 4, name: 'साउन' }, { value: 5, name: 'भदौ' }, { value: 6, name: 'असोज' },
-    { value: 7, name: 'कार्तिक' }, { value: 8, name: 'मंसिर' }, { value: 9, name: 'पुष' },
-    { value: 10, name: 'माघ' }, { value: 11, name: 'फाल्गुन' }, { value: 12, name: 'चैत' }
-  ];
-  return bsMonths[this.getMonth() - 1].name;
-}
-
-getGregorianMonthName() {
-    const gregorianMonths = [
-      { value: 1, name: 'January' }, { value: 2, name: 'February' }, { value: 3, name: 'March' },
-      { value: 4, name: 'April' }, { value: 5, name: 'May' }, { value: 6, name: 'June' },
-      { value: 7, name: 'July' }, { value: 8, name: 'August' }, { value: 9, name: 'September' },
-      { value: 10, name: 'October' }, { value: 11, name: 'November' }, { value: 12, name: 'December' }
-    ];
-    return gregorianMonths[this.getMonth() - 1].name;
-  }
-
-  // Method to get Nepali day name for Gregorian date
-  getGregorianDayName(year, month, day) {
-    let date = new Date(year, month, day);
-    const weekdayNepali = ["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"];
-    return weekdayNepali[date.getDay()];
-  }
-
-      daysInMonth(bsYear, bsMonth) {
+  class Bikram {
+            constructor() {
+                this.Year = 0;
+                this.Month = -1;
+                this.Day = 0;
+                this.YugaRotation_star = 1582237828;
+                this.YugaRotation_sun = 4320000;
+                this.YugaCivilDays = this.YugaRotation_star - this.YugaRotation_sun;
+                this.PlanetApogee_sun = 77 + (17 / 60);
+                this.PlanetCircumm_sun = 13 + (50 / 60);
+                this.rad = 57.2957795; // = 180/pi
+            }
+
+            getJulianDate(year, month, day) {
+                if (month <= 2) {
+                    year -= 1;
+                    month += 12;
+                }
+                const a = Math.floor(year / 100);
+                const b = 2 - a + Math.floor(a / 4);
+                return Math.floor(365.25 * (year + 4716)) + Math.floor(30.6001 * (month + 1)) + day + b - 1524.5;
+            }
+
+            fromJulianDate(julian_date) {
+                const a = Math.floor(julian_date + 0.5);
+                const b = a + 1537;
+                const c = Math.floor((b - 122.1) / 365.25);
+                const d = Math.floor(365.25 * c);
+                const e = Math.floor((b - d) / 30.6001);
+                const f = b - d - Math.floor(30.6001 * e) + (julian_date + 0.5 - a);
+                const day = Math.floor(f);
+                const month = e < 14 ? e - 1 : e - 13;
+                const year = month > 2 ? c - 4716 : c - 4715;
+                return { year, month, day };
+            }
+
+            getSauraMasaDay(ahar) {
+                let month , day;
+                if (this.todaySauraMasaFirstP(ahar)) {
+                    day = 1;
+                    const tslong_tomorrow = this.getTslong(ahar + 1);
+                    month = (Math.floor(tslong_tomorrow / 30) % 12 + 12) % 12;
+                } else {
+                    const previous = this.getSauraMasaDay(ahar - 1);
+                    day = previous.day + 1;
+                    month = previous.month;
+                }
+                return { month, day };
+            }
+
+            todaySauraMasaFirstP(ahar) {
+                const tslong_today = this.getTslong(ahar);
+                const tslong_tomorrow = this.getTslong(ahar + 1);
+                const today_mod = tslong_today - Math.floor(tslong_today / 30) * 30;
+                const tomorrow_mod = tslong_tomorrow - Math.floor(tslong_tomorrow / 30) * 30;
+                return (25 < today_mod && tomorrow_mod < 5) ? 1 : 0;
+            }
+
+            getTslong(ahar) {
+                const t1 = (this.YugaRotation_sun * ahar / this.YugaCivilDays) % 1;
+                const mslong = 360 * t1;
+                const x1 = mslong - this.PlanetApogee_sun;
+                const y1 = this.PlanetCircumm_sun / 360;
+                const y2 = Math.sin(x1 / this.rad);
+                const y3 = y1 * y2;
+                const x2 = Math.asin(y3) * this.rad;
+                return mslong - x2;
+            }
+
+            daysInMonth(bsYear, bsMonth) {
         let { year: gYear, month: gMonth, day: gDay } = this.toGregorian(bsYear, bsMonth, 1);
         let julian_date_start = this.getJulianDate(gYear, gMonth, gDay);
         let nextMonth = (bsMonth % 12) + 1;
@@ -191,126 +77,75 @@ getGregorianMonthName() {
         return Math.floor(julian_date_end - julian_date_start);
       }
 
-      daysInGregorianMonth(gYear, gMonth) {
-        const daysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
-        if (gMonth === 2 && ((gYear % 4 === 0 && gYear % 100 !== 0) || (gYear % 400 === 0))) {
-          return 29;
-        }
-        return daysInMonth[gMonth - 1];
-      }
+            fromGregorian(y, m, d) {
+                const julian = this.getJulianDate(y, m, d);
+                const ahar = julian - 588465.5;
+                const { month: saura_masa_num, day: saura_masa_day } = this.getSauraMasaDay(ahar);
+                const YearKali = Math.floor(ahar * this.YugaRotation_sun / this.YugaCivilDays);
+                const YearSaka = YearKali - 3179;
+                const nepalimonth = saura_masa_num % 12;
+                this.Year = YearSaka + 135 + Math.floor((saura_masa_num - nepalimonth) / 12);
+                this.Month = (saura_masa_num + 12) % 12;
+                this.Day = saura_masa_day;
+            }
+
+            toGregorian(bsYear, bsMonth, bsDay) {
+                const YearSaka = bsYear - 135;
+                const YearKali = YearSaka + 3179;
+                let ahar = Math.floor((YearKali * this.YugaCivilDays) / this.YugaRotation_sun);
+                let { month: saura_masa_num, day: saura_masa_day } = this.getSauraMasaDay(ahar);
+                bsMonth = (bsMonth + 11) % 12;
+
+                while (saura_masa_num !== bsMonth || saura_masa_day !== bsDay) {
+                    ahar += (saura_masa_num < bsMonth || (saura_masa_num === bsMonth && saura_masa_day < bsDay)) ? 1 : -1;
+                    ({ month: saura_masa_num, day: saura_masa_day } = this.getSauraMasaDay(ahar));
+                }
+
+                const julian_date = ahar + 588465.5;
+                return this.fromJulianDate(julian_date);
+            }
+
+            fromNepali(bsYear, bsMonth, bsDay) {
+                const { year, month, day } = this.toGregorian(bsYear, bsMonth, bsDay);
+                this.Year = year;
+                this.Month = month - 1; // Adjust for 0-based month
+                this.Day = day;
+            }
+
+            getYear() {
+                return this.Year;
+            }
+
+            getMonth() {
+                return this.Month + 1; // Return 1-based month
+            }
+
+            getDay() {
+                return this.Day;
+            }
+
+            getWeekdayName(year, month, day) {
+                const days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
+                const nepaliDays = ["आइतबार", "सोमबार", "मंगलबार", "बुधबार", "बिहीबार", "शुक्रबार", "शनिबार"];
+                const timeinfo = new Date(year, month - 1, day);
+                const weekdayIndex = timeinfo.getDay();
+                return document.getElementById("language").value === "nepali" ? nepaliDays[weekdayIndex] : days[weekdayIndex];
+            }
+
+           getMonthName(month) {
+    const englishMonths = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+    const gregorianMonthsInNepali = ["जनवरी", "फेब्रुअरी", "मार्च", "अप्रिल", "मे", "जुन", "जुलाई", "अगस्ट", "सेप्टेम्बर", "अक्टोबर", "नोभेम्बर", "डिसेम्बर"];
+    const romanizedNepaliMonths = ["Baishakh", "Jestha", "Ashadh", "Shravan", "Bhadra", "Ashwin", "Kartik", "Mangsir", "Poush", "Magh", "Falgun", "Chaitra"];
+    const nepaliMonths = ["बैसाख", "जेष्ठ", "आषाढ", "श्रावण", "भाद्र", "आश्विन", "कार्तिक", "मंसिर", "पौष", "माघ", "फागुन", "चैत"];
+
+    const language = document.getElementById("language").value;
+
+    if (language === "nepali") {
+        // Use the Nepali month index for Bikram Sambat
+        return nepaliMonths[month - 1]; // month is 1-based
+    } else {
+        // Use the Romanized month names for English
+        return romanizedNepaliMonths[month - 1]; // month is 1-based
     }
-
-    // Initialize Bikram calendar object
-    const bikram = new Bikram();
-
-    // Function to update Gregorian date to Bikram Sambat
-function updateBikramDate() {
-  let gYear = parseInt(document.getElementById('gYear').value);
-  let gMonth = parseInt(document.getElementById('gMonth').value);
-  let gDay = parseInt(document.getElementById('gDay').value);
-
-  bikram.fromGregorian(gYear, gMonth, gDay);
-
-  document.getElementById('bikramYear').textContent = convertToNepaliDigits(bikram.getYear());
-  document.getElementById('bikramMonth').textContent = bikram.getBikramMonthName();
-  document.getElementById('bikramDay').textContent = convertToNepaliDigits(bikram.getDay());
-}
-
-// Function to update Bikram Sambat date to Gregorian
-function updateGregorianDate() {
-  let bsYear = parseInt(document.getElementById('bsYear').value);
-  let bsMonth = parseInt(document.getElementById('bsMonth').value);
-  let bsDay = parseInt(document.getElementById('bsDay').value);
-
-  bikram.fromNepali(bsYear, bsMonth, bsDay);
-
-  document.getElementById('gYearResult').textContent = bikram.getYear();
-  document.getElementById('gMonthResult').textContent = bikram.getGregorianMonthName();
-  document.getElementById('gDayResult').textContent = bikram.getDay();
 }
-
-
-    // Populate dropdowns with years, months, and days
-    document.addEventListener('DOMContentLoaded', function () {
-      // For Gregorian to Bikram Sambat
-      let gYearSelect = document.getElementById('gYear');
-      let gMonthSelect = document.getElementById('gMonth');
-      let gDaySelect = document.getElementById('gDay');
-
-      // For Bikram Sambat to Gregorian
-      let bsYearSelect = document.getElementById('bsYear');
-      let bsMonthSelect = document.getElementById('bsMonth');
-      let bsDaySelect = document.getElementById('bsDay');
-
-      // Fill years (Gregorian)
-      for (let year = 1800; year <= new Date().getFullYear() + 200; year++) {
-        let gOption = document.createElement('option');
-        gOption.value = year;
-        gOption.textContent = year;
-        gYearSelect.appendChild(gOption);
-
-        let bsOption = document.createElement('option');
-        bsOption.value = year + 56; // Adjusting BS Year
-        bsOption.textContent = convertToNepaliDigits(year + 56);
-        bsYearSelect.appendChild(bsOption);
-      }
-
-      // Fill months (Gregorian)
-      const months = [
-        { value: 1, name: 'January' }, { value: 2, name: 'February' }, { value: 3, name: 'March' },
-        { value: 4, name: 'April' }, { value: 5, name: 'May' }, { value: 6, name: 'June' },
-        { value: 7, name: 'July' }, { value: 8, name: 'August' }, { value: 9, name: 'September' },
-        { value: 10, name: 'October' }, { value: 11, name: 'November' }, { value: 12, name: 'December' }
-      ];
-
-      for (let month of months) {
-        let gOption = document.createElement('option');
-        gOption.value = month.value;
-        gOption.textContent = month.name;
-        gMonthSelect.appendChild(gOption);
-      }
-
-      // Fill days (Gregorian and Bikram Sambat)
-      for (let day = 1; day <= 31; day++) {
-        let gOption = document.createElement('option');
-        gOption.value = day;
-        gOption.textContent = day;
-        gDaySelect.appendChild(gOption);
-
-        let bsOption = document.createElement('option');
-        bsOption.value = day;
-        bsOption.textContent = convertToNepaliDigits(day);
-        bsDaySelect.appendChild(bsOption);
-      }
-
-      // Fill months (Bikram Sambat)
-      const bsMonths = [
-  { value: 1, name: 'बैशाख' }, { value: 2, name: 'जेठ' }, { value: 3, name: 'असार' },
-  { value: 4, name: 'साउन' }, { value: 5, name: 'भदौ' }, { value: 6, name: 'असोज' },
-  { value: 7, name: 'कार्तिक' }, { value: 8, name: 'मंसिर' }, { value: 9, name: 'पुष' },
-  { value: 10, name: 'माघ' }, { value: 11, name: 'फाल्गुन' }, { value: 12, name: 'चैत' }
-];
-
-
-      for (let month of bsMonths) {
-        let bsOption = document.createElement('option');
-        bsOption.value = month.value;
-        bsOption.textContent = month.name;
-        bsMonthSelect.appendChild(bsOption);
-      }
-
-
-      // Set initial date to today
-      const today = new Date();
-      document.getElementById('gYear').value = today.getFullYear();
-      document.getElementById('gMonth').value = today.getMonth() + 1;
-      document.getElementById('gDay').value = today.getDate();
-      updateBikramDate();
-
-      // Set initial BS date to today
-      bikram.fromGregorian(today.getFullYear(), today.getMonth() + 1, today.getDate());
-      document.getElementById('bsYear').value = bikram.getYear();
-      document.getElementById('bsMonth').value = bikram.getMonth();
-      document.getElementById('bsDay').value = bikram.getDay();
-      updateGregorianDate();
-    });
\ No newline at end of file
+        }
diff --git a/docs/index.html b/docs/index.html
index 7a07608..f034f57 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -1,402 +1,370 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Date Converter: Gregorian <-> Bikram Sambat</title>
-  <link rel="icon" href="favicon.png" type="image/png">
-  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
-  <script src="bikram.js"></script>
-  <script src="tithi.js"></script> <!-- Include your tithi.js script here -->
-  <style>
-    body {
-      padding: 20px;
-      background-color: #f8f9fa;
-      font-family: Arial, sans-serif;
-    }
-
-    .container {
-      max-width: 800px;
-      margin: auto;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      padding: 20px;
-      background-color: #f8f9fa;
-    }
-
-    .converter-section {
-      width: 100%;
-      max-width: 600px;
-      background-color: #ffffff;
-      border: 1px solid #ccc;
-      padding: 20px;
-      margin-bottom: 20px;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-    }
-
-    .converter-section .card {
-      width: 100%;
-      max-width: 600px;
-      margin-bottom: 20px;
-    }
-
-    .calendar {
-   
-      width: 100%;
-      max-width: 600px;
-      border: 1px solid #ccc;
-      background-color: #ffffff;
-      padding: 20px;
-      text-align: center;
-      margin-top: 20px;
-    }
-
-    .calendar h3 {
-      text-align: center;
-    }
-
-    .calendar table {
-      width: 100%;
-      border-collapse: collapse;
-    }
-
-    .calendar th, .calendar td {
-      border: 1px solid #ccc;
-      padding: 8px;
-      text-align: center;
-    }
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Date Converter</title>
+    <link href="https://fonts.googleapis.com/css2?family=Eczar:wght@400;500&display=swap" rel="stylesheet">
+    <script type="text/javascript" src="bikram.js"></script>
+    <script type="text/javascript" src="tithi.js"></script>
+    <style>
+body {
+    font-family: 'Eczar', sans-serif;
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: 100vh;
+    background-color: #f0f2f5;
+}
 
-    .calendar th {
-      background-color: #f2f2f2;
-    }
+h1, h2, h3 {
+    text-align: center;
+    margin: 10px 0;
+    color: #333;
+}
 
-    .form-check-label {
-      display: block;
-      width: fit-content;
-      margin: auto;
-      margin-bottom: 10px;
-      cursor: pointer;
-    }
+.container {
+    width: 90%;
+    max-width: 600px;
+    background: white;
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
 
-    .form-check-label.blue {
-      margin-left: 10px;
-    }
+.language-toggle, .conversion-form {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 20px 0;
+    width: 100%;
+}
 
-    .custom-dropdown {
-      width: 100px;
-    }
+label {
+    margin: 10px 0 5px;
+    font-weight: 500;
+    color: #555;
+}
 
-    /* Switch slider styles */
-    .switch {
-      position: relative;
-      display: inline-block;
-      width: 80px;
-      height: 34px;
-    }
+select, input, button {
+    padding: 3px 19px;
+    margin: 5px 0;
+    width: 100%;
+    max-width: 250px;
+    box-sizing: border-box;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    font-size: 16px;
+}
 
-    .switch input {
-      opacity: 0;
-      width: 0;
-      height: 0;
-    }
+button {
+    background-color: #007bff; /* Blue */
+    color: white;
+    border: none;
+    cursor: pointer;
+    transition: background-color 0.3s;
+    font-family: 'Eczar', sans-serif;
+}
 
-    .slider {
-      position: absolute;
-      cursor: pointer;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background-color: green;
-      transition: .4s;
-    }
+button:hover {
+    background-color: #0056b3; /* Darker blue */
+}
 
-    .slider:before {
-      position: absolute;
-      content: "";
-      height: 26px;
-      width: 26px;
-      left: 4px;
-      bottom: 4px;
-      background-color: white;
-      transition: .4s;
-    }
+#bikramResult, #gregorianResult {
+    margin-top: 20px;
+    font-weight: bold;
+    color: #007bff;
+}
 
-    input:checked + .slider {
-      background-color: #2196F3;
+@media (min-width: 600px) {
+    .language-toggle, .conversion-form {
+        flex-direction: column;
+        justify-content: space-between;
     }
 
-    input:checked + .slider:before {
-      -webkit-transform: translateX(26px);
-      -ms-transform: translateX(26px);
-      transform: translateX(26px);
+    .conversion-form label, .conversion-form select, .conversion-form input, .conversion-form button {
+        width: 48%;
     }
 
-    .slider.round {
-      border-radius: 34px;
+    .conversion-form button {
+        width: 100%;
     }
+}
 
-    .slider.round:before {
-      border-radius: 50%;
-    }
-.tithi-label {
-      color: blue;
-      font-size: 0.5em;
+@media (min-width: 768px) {
+    .container {
+        padding: 40px;
     }
+}
 
-  </style>
+    </style>
 </head>
 <body>
-<div class="container mt-3">
-  <h1 class="text-center">Nepali Date Converter</h1>
-  <div class="d-flex justify-content-center align-items-center">
-    <label class="form-check-label mr-3"
-           style="background-color:green;color: white;padding: 10px;border-radius: 8px;">Convert To Bikram Sambat</label>
-    <label class="switch">
-      <input type="checkbox" id="converterSwitch" onchange="toggleConverter()">
-      <span class="slider round"></span>
-    </label>
-    <label class="form-check-label ml-3"
-           style="background-color:#2196F3;color: white;padding: 10px;border-radius: 8px;">Convert To English</label>
-  </div>
-
-  <div id="gregorianToBikram" class="converter-section">
-    <div class="card">
-      <center>
-        <div class="card-header">Gregorian to Bikram Sambat</div>
-      </center>
-      <div class="card-body">
-        <form id="gregorianToBikramForm">
-          <div class="row mb-3">
-            <div class="col">
-              <label for="gYear">Year:</label>
-              <select id="gYear" class="form-control custom-dropdown" onchange="updateBikramDate()">
-                <!-- Options filled dynamically with JavaScript -->
-              </select>
-            </div>
-            <div class="col">
-              <label for="gMonth">Month:</label>
-              <select id="gMonth" class="form-control custom-dropdown" onchange="updateBikramDate()">
-                <!-- Options filled dynamically with JavaScript -->
-              </select>
-            </div>
-            <div class="col">
-              <label for="gDay">Day:</label>
-              <select id="gDay" class="form-control custom-dropdown" onchange="updateBikramDate()">
-                <!-- Options filled dynamically with JavaScript -->
-              </select>
-            </div>
-          </div>
-        </form>
-        <center>
-          <p>विक्रम सम्बत् : <span id="bikramYear" class="result"></span> <span id="bikramMonth"
-                                                                              class="result"></span> <span
-              id="bikramDay" class="result"></span> <span>गते </span><!--<span id="bikramWeekday"
-                                                                        class="result"></span> removed --></p></center>
-
-      </div>
+    <h1 id="title">Date Converter</h1>
+
+    <div class="language-toggle">
+        <label for="language" id="languageLabel">Select Language:</label>
+        <select id="language" onchange="changeLanguage()">
+            <option value="nepali">Nepali</option>
+            <option value="english">English</option>
+        </select>
     </div>
-  </div>
-
-  <div id="bikramToGregorian" class="converter-section" style="display:none;">
-    <div class="card">
-      <center>
-        <div class="card-header">Bikram Sambat to Gregorian</div>
-      </center>
-      <div class="card-body">
-        <form id="bikramToGregorianForm">
-          <div class="row mb-3">
-            <div class="col">
-              <label for="bsYear">Year:</label>
-              <select id="bsYear" class="form-control custom-dropdown" onchange="updateGregorianDate()">
-                <!-- Options filled dynamically with JavaScript -->
-              </select>
-            </div>
-            <div class="col">
-              <label for="bsMonth">Month:</label>
-              <select id="bsMonth" class="form-control custom-dropdown" onchange="updateGregorianDate()">
-
-              </select>
-            </div>
-            <div class="col">
-              <label for="bsDay">Day:</label>
-              <select id="bsDay" class="form-control custom-dropdown" onchange="updateGregorianDate()">
-                <!-- Options filled dynamically with JavaScript -->
-              </select>
-            </div>
-          </div>
-        </form>
-        <center>
-          <p>Converted Date: <span id="gYearResult" class="result"></span> <span id="gMonthResult"
-                                                                                  class="result"></span> <span
-              id="gDayResult" class="result"></span></p></center>
-      </div>
-    </div>
-  </div>
-</div>
-<center><p><span style="color: #0000ff;">calendar is still not working</span></p></center>
-<div class="container">
-  <div class="calendar" id="bikramCalendar">
-    <h3>Bikram Sambat Calendar</h3>
+
+    <h2 id="convertToBikramTitle">Gregorian to Bikram Sambat</h2>
+    <label for="gYear" id="gYearLabel">Year:</label>
+    <input type="number" id="gYear" placeholder="YYYY" />
     
-<br>
-    <table>
-      <thead>
-      <tr>
-        <th>आइत</th>
-        <th>सोम</th>
-        <th>मङ्गल</th>
-        <th>बुध</th>
-        <th>बिहि</th>
-        <th>शुक्र</th>
-        <th>शनि</th>
-      </tr>
-      </thead>
-      <tbody id="bikramBody">
-      <!-- Bikram Sambat calendar days will be inserted here -->
-      </tbody>
-    </table>
-  </div>
-</div>
-<script>
- document.addEventListener('DOMContentLoaded', function () {
-  const bikram = new Bikram();
-
-  // Function to generate the Bikram Sambat calendar
- function generateBikramCalendar(bsYear, bsMonth) {
-  const daysInMonth = bikram.daysInMonth(bsYear, bsMonth); // Total number of days in the selected month
-  const firstDay = bikram.getDayOfWeek(bsYear, bsMonth, 1); // First day of the month (Bikram Sambat day of the week)
-  
-  // Get today's Bikram Sambat date
-  const today = new Date();
-  const todayBikramDate = bikram.fromGregorian(today.getFullYear(), today.getMonth() + 1, today.getDate());
-
-
-  const bikramBody = document.getElementById('bikramBody');
-  bikramBody.innerHTML = ''; // Clear the existing calendar body
-
-  let dayCounter = 1; // Start with the 1st day of the month
-  let row = document.createElement('tr'); // Create the first row for weekdays
-
-  // Loop through the weeks (6 rows to handle all days in the month)
-  for (let i = 0; i < 6; i++) {
-    // Loop through the days of the week (7 columns)
-    for (let j = 0; j < 7; j++) {
-      let cell = document.createElement('td');
-      
-      // Check if it's the correct day in the calendar
-      if (i === 0 && j < firstDay) {
-        // Fill empty cells before the first day of the month
-        cell.textContent = '';
-      } else if (dayCounter <= daysInMonth) {
-        // Fill cells with actual days
-        cell.innerHTML = convertToNepaliDigits(dayCounter);
-
-        // Convert Bikram Sambat date to Gregorian date
-        let gDate = bikram.toGregorian(bsYear, bsMonth, dayCounter);
-
-        // Calculate Tithi (if available)
-        try {
-          let tithiInfo = calculateTithi(gDate.year, gDate.month, gDate.day);
-          if (tithiInfo && tithiInfo.tithi) {
-            cell.setAttribute('title', `${tithiInfo.tithi} - ${tithiInfo.paksha}`);
-            cell.innerHTML += `<br><span class="tithi-label">${tithiInfo.tithi}</span>`;
-          }
-        } catch (error) {
-          console.error(`Error calculating tithi for: Year: ${gDate.year}, Month: ${gDate.month}, Day: ${gDate.day}`, error);
-        }
+    <label for="gMonth" id="gMonthLabel">Month:</label>
+    <select id="gMonth"></select>
 
-        // Highlight today's Bikram Sambat date
-        if (dayCounter === todayBikramDate) {
-          cell.style.backgroundColor = 'yellow'; // Highlight today
-        }
+    <label for="gDay" id="gDayLabel">Day:</label>
+    <input type="number" id="gDay" placeholder="DD" />
+    
+    <button onclick="convertToBikram()" id="convertToBikramButton">Convert to Bikram Sambat</button>
+    
+    <h3 id="bikramResult"></h3>
 
-        dayCounter++; // Increment the day counter for the next day
-      } else {
-        // Fill remaining cells after the last day of the month
-        cell.textContent = '';
-      }
+    <h2 id="convertToGregorianTitle">Bikram Sambat to Gregorian</h2>
+    <label for="bsYear" id="bsYearLabel">Year:</label>
+    <input type="number" id="bsYear" placeholder="YYYY" />
+    
+    <label for="bsMonth" id="bsMonthLabel">Month:</label>
+    <select id="bsMonth"></select>
 
-      row.appendChild(cell); // Append the cell to the row
+    <label for="bsDay" id="bsDayLabel">Day:</label>
+    <input type="number" id="bsDay" placeholder="DD" />
+    
+    <button onclick="convertToGregorian()" id="convertToGregorianButton">Convert to Gregorian</button>
+    
+    <h3 id="gregorianResult"></h3>
+
+    <script>
+
+function populateDateDropdowns() {
+    const today = new Date();
+    const gYear = today.getFullYear();
+    const gMonth = today.getMonth() + 1; // Months are 0-based, so add 1
+    const gDay = today.getDate();
+
+    // Populate Gregorian Year
+    const yearSelect = document.getElementById("gYear");
+    yearSelect.innerHTML = ""; // Clear existing options
+    for (let year = gYear - 10; year <= gYear + 10; year++) {
+        const option = document.createElement("option");
+        option.value = year;
+        option.textContent = year;
+        yearSelect.appendChild(option);
     }
-
-    bikramBody.appendChild(row); // Append the row to the calendar body
-
-    // If dayCounter exceeds the number of days in the month, stop adding new rows
-    if (dayCounter > daysInMonth) {
-      break;
+    yearSelect.value = gYear; // Set today's year
+
+    // Populate Gregorian Month
+    const monthSelect = document.getElementById("gMonth");
+    monthSelect.innerHTML = ""; // Clear existing options
+    translations[currentLanguage].gMonths.forEach((month, index) => {
+        const option = document.createElement("option");
+        option.value = index + 1; // Month value starts from 1
+        option.textContent = month; // Use month names
+        monthSelect.appendChild(option);
+    });
+    monthSelect.value = gMonth; // Set today's month (1-based)
+
+    // Populate Gregorian Day
+    const daySelect = document.getElementById("gDay");
+    daySelect.innerHTML = ""; // Clear existing options
+    const daysInMonth = new Date(gYear, gMonth, 0).getDate(); // Get the number of days in the month
+    for (let day = 1; day <= daysInMonth; day++) {
+        const option = document.createElement("option");
+        option.value = day;
+        option.textContent = day;
+        daySelect.appendChild(option);
     }
+    daySelect.value = gDay; // Set today's day
 
-    // Create a new row for the next week
-    row = document.createElement('tr');
-  }
-
-}
-  
-
-  // Function to update the calendar from selected Gregorian date
-  function updateCalendarFromGregorian() {
-    const gYear = parseInt(document.getElementById('gYear').value);
-    const gMonth = parseInt(document.getElementById('gMonth').value);
-    const gDay = parseInt(document.getElementById('gDay').value);
-
-    // Convert the Gregorian date to Bikram Sambat date
+    // Convert today's Gregorian date to Bikram Sambat
+    const bikram = new Bikram();
     bikram.fromGregorian(gYear, gMonth, gDay);
+    const bsYear = bikram.getYear();
+    const bsMonth = bikram.getMonth();
+    const bsDay = bikram.getDay();
+
+    // Populate Bikram Sambat Year
+    const bsYearSelect = document.getElementById("bsYear");
+    bsYearSelect.innerHTML = ""; // Clear existing options
+    for (let year = bsYear - 10; year <= bsYear + 10; year++) {
+        const option = document.createElement("option");
+        option.value = year;
+        option.textContent = year;
+        bsYearSelect.appendChild(option);
+    }
+    bsYearSelect.value = bsYear; // Set today's Bikram Sambat year
+
+    // Populate Bikram Sambat Month
+    const bsMonthSelect = document.getElementById("bsMonth");
+    bsMonthSelect.innerHTML = ""; // Clear existing options
+    translations[currentLanguage].bsMonths.forEach((month, index) => {
+        const option = document.createElement("option");
+        option.value = index + 1; // Month value starts from 1
+        option.textContent = month; // Use month names
+        bsMonthSelect.appendChild(option);
+    });
+    bsMonthSelect.value = bsMonth; // Set today's Bikram Sambat month
+
+    // Populate Bikram Sambat Day
+    const bsDaySelect = document.getElementById("bsDay");
+    bsDaySelect.innerHTML = ""; // Clear existing options
+    const bsDaysInMonth = new Bikram().daysInMonth(bsYear, bsMonth); // Get the number of days in the Bikram Sambat month
+    for (let day = 1; day <= bsDaysInMonth; day++) {
+        const option = document.createElement("option");
+        option.value = day;
+        option.textContent = day;
+        bsDaySelect.appendChild(option);
+    }
+    bsDaySelect.value = bsDay; // Set today's Bikram Sambat day
+}
 
-    // Generate the calendar for the corresponding Bikram Sambat year and month
-    generateBikramCalendar(bikram.getYear(), bikram.getMonth() + 1); // Bikram months are 1-indexed
-  }
+        const translations = {
+            english: {
+                title: "Date Converter",
+                languageLabel: "Select Language:",
+                convertToBikramTitle: "Convert Gregorian to Bikram Sambat",
+                gYearLabel: "Year:",
+                gMonthLabel: "Month:",
+                gDayLabel: "Day:",
+                convertToBikramButton: "Convert to Bikram Sambat",
+                convertToGregorianTitle: "Convert Bikram Sambat to Gregorian",
+                bsYearLabel: "Year:",
+                bsMonthLabel: "Month:",
+                bsDayLabel: "Day:",
+                convertToGregorianButton: "Convert to Gregorian",
+                gMonths: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
+                bsMonths: ["Baisakh", "Jestha", "Ashadh", "Shrawan", "Bhadra", "Ashwin", "Kartik", "Mangsir", "Poush", "Magh", "Falgun", "Chaitra"]
+            },
+            nepali: {
+                title: "मिति रूपान्तरण",
+                languageLabel: "भाषा चयन गर्नुहोस्:",
+                convertToBikramTitle: "विक्रम सम्बतमा रूपान्तरण",
+                gYearLabel: "वर्ष:",
+                gMonthLabel: "महिना:",
+                gDayLabel: "दिन:",
+                convertToBikramButton: "विक्रम सम्बतमा रूपान्तरण गर्नुहोस्",
+                convertToGregorianTitle: "इसवि सनमा रूपान्तरण",
+                bsYearLabel: "वर्ष:",
+                bsMonthLabel: "महिना:",
+                bsDayLabel: "दिन:",
+                convertToGregorianButton: "इसवि सनमा रूपान्तरण गर्नुहोस्",
+                gMonths: ["जनवरी", "फेब्रुअरी", "मार्च", "अप्रिल", "मे", "जुन", "जुलाई", "अगस्ट", "सेप्टेम्बर", "अक्टोबर", "नोभेम्बर", "डिसेम्बर"],
+                bsMonths: ["बैसाख", "जेष्ठ", "आषाढ", "श्रावण", "भाद्र", "आश्विन", "कार्तिक", "मंसिर", "पौष", "माघ", "फागुन", "चैत"]
+            }
+        };
+     
+       let currentLanguage = 'nepali'; // Set initial language to Nepali
+
+        function changeLanguage() {
+            currentLanguage = document.getElementById("language").value; // Update the existing variable
+            const lang = translations[currentLanguage];
+
+            document.getElementById("title").innerText = lang.title;
+            document.getElementById("languageLabel").innerText = lang.languageLabel;
+            document.getElementById("convertToBikramTitle").innerText = lang.convertToBikramTitle;
+            document.getElementById("gYearLabel").innerText = lang.gYearLabel;
+            document.getElementById("gMonthLabel").innerText = lang.gMonthLabel;
+            document.getElementById("gDayLabel").innerText = lang.gDayLabel;
+            document.getElementById("convertToBikramButton").innerText = lang.convertToBikramButton;
+            document.getElementById("convertToGregorianTitle").innerText = lang.convertToGregorianTitle;
+            document.getElementById("bsYearLabel").innerText = lang.bsYearLabel;
+            document.getElementById("bsMonthLabel").innerText = lang.bsMonthLabel;
+            document.getElementById("bsDayLabel").innerText = lang.bsDayLabel;
+            document.getElementById("convertToGregorianButton").innerText = lang.convertToGregorianButton;
+
+            // Update dropdown items
+            updateDropdowns(lang.gMonths, lang.bsMonths);
+            populateDateDropdowns();
+
+            // Clear results when language changes
+            document.getElementById("bikramResult").innerText = "";
+            document.getElementById("gregorianResult").innerText = "";
+        }
 
-  // Listen for changes in the Gregorian date dropdowns
-  document.getElementById('gYear').addEventListener('change', updateCalendarFromGregorian);
-  document.getElementById('gMonth').addEventListener('change', updateCalendarFromGregorian);
-  //document.getElementById('gDay').addEventListener('change', updateCalendarFromGregorian);
 
-  // Generate the initial Bikram Sambat calendar
-  const today = new Date();
-  bikram.fromGregorian(today.getFullYear(), today.getMonth() + 1, 1); // Initialize Bikram from current Gregorian date
-  generateBikramCalendar(bikram.getYear(), bikram.getMonth() + 1); // Generate the calendar for the current month
-});
 
-</script>
 
+        function updateDropdowns(gMonths, bsMonths) {
+            const gMonthSelect = document.getElementById("gMonth");
+            const bsMonthSelect = document.getElementById("bsMonth");
 
+            // Clear existing options
+            gMonthSelect.innerHTML = '';
+            bsMonthSelect.innerHTML = '';
 
+            // Populate Gregorian months
+            gMonths.forEach((month, index) => {
+                const option = document.createElement("option");
+                option.value = index + 1; // Month value starts from 1
+                option.text = month;
+                gMonthSelect.appendChild(option);
+            });
 
+            // Populate Bikram Sambat months
+            bsMonths.forEach((month, index) => {
+                const option = document.createElement("option");
+                option.value = index + 1; // Month value starts from 1
+                option.text = month;
+                bsMonthSelect.appendChild(option);
+            });
+        }
 
-<script>
+        // Call changeLanguage on page load to set initial language to Nepali
+        window.onload = function() {
+    document.getElementById("language").value = "nepali"; // Set default language to Nepali
+    changeLanguage(); // Update the interface to Nepali
+    populateDateDropdowns(); // Call the function to populate the dropdowns with current date on page load
+};
+      
+       function convertToBikram() {
+    const gYear = parseInt(document.getElementById("gYear").value);
+    const gMonth = document.getElementById("gMonth").selectedIndex + 1; // Get the selected index and convert to 1-based month
+    const gDay = parseInt(document.getElementById("gDay").value);
 
-  function toggleConverter() {
-    var isChecked = document.getElementById('converterSwitch').checked;
-    if (isChecked) {
-      document.getElementById('gregorianToBikram').style.display = 'none';
-      document.getElementById('bikramToGregorian').style.display = 'block';
-    } else {
-      document.getElementById('gregorianToBikram').style.display = 'block';
-      document.getElementById('bikramToGregorian').style.display = 'none';
-    }
-  }
-
-  // Function to convert numbers to Nepali digits
-  function convertToNepaliDigits(number) {
-    const engDigits = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
-    const nepaliDigits = ['०', '१', '२', '३', '४', '५', '६', '७', '८', '९'];
-
-    let result = '';
-    String(number).split('').forEach(char => {
-      let index = engDigits.indexOf(char);
-      if (index !== -1) {
-        result += nepaliDigits[index];
-      } else {
-        result += char; // If character is not a digit, retain it as it is
-      }
-    });
+    const bikram = new Bikram();
+    bikram.fromGregorian(gYear, gMonth, gDay);
+    const bikramYear = bikram.getYear();
+    const bikramMonth = bikram.getMonth(); // Get the month index (1-12)
+    const bikramMonthName = bikram.getMonthName(bikramMonth); // Get the month name
+    const bikramDay = bikram.getDay();
+    const weekdayName = bikram.getWeekdayName(gYear, gMonth, gDay);
+    
+    // Calculate Tithi using the original Gregorian date
+    const tithiInfo = calculateTithi(gYear, gMonth, gDay); // Use Gregorian date for Tithi calculation
+    const tithiDisplay = tithiInfo.tithi;
+    const pakshaDisplay = tithiInfo.paksha;
 
-    return result;
-  }
-</script>
+    // Display the result
+    document.getElementById("bikramResult").innerText = `${bikramYear} ${bikramMonthName} ${bikramDay} ${weekdayName} (${pakshaDisplay}, ${tithiDisplay})`;
+}
+        function convertToGregorian() {
+    const bsYear = parseInt(document.getElementById("bsYear").value);
+    const bsMonth = parseInt(document.getElementById("bsMonth").value);
+    const bsDay = parseInt(document.getElementById("bsDay").value);
+
+    const bikram = new Bikram();
+    bikram.fromNepali(bsYear, bsMonth, bsDay);
+    const gYear = bikram.getYear();
+    const gMonth = bikram.getMonth(); // Get the month number (1-based)
+    const gDay = bikram.getDay();
+    
+    // Get the correct month name for the Gregorian date
+    const language = document.getElementById("language").value;
+    const gMonthName = language === "nepali" ? 
+        translations.nepali.gMonths[gMonth - 1] : 
+        translations.english.gMonths[gMonth - 1];
+
+    const weekdayName = bikram.getWeekdayName(gYear, gMonth, gDay);
+    document.getElementById("gregorianResult").innerText = ` ${gYear} ${gMonthName} ${gDay} ${weekdayName}`;
+}
+    </script>
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/docs/tithi.js b/docs/tithi.js
index abc0e80..35e8143 100644
--- a/docs/tithi.js
+++ b/docs/tithi.js
@@ -2,7 +2,7 @@ function calculateTithi(year, month, day) {
     const tdays = calculateDaysSinceJ2000(year, month, day);
     const tithiIndex = calculateTithiIndex(tdays);
     return {
-        tithi: getTithiName(tithiIndex),
+        tithi: getTithiName(tithiIndex + 1),
         paksha: getPaksha(tithiIndex)
     };
 }