no message

website/Areas/Millions/Views/Home/Rule.cshtml

@@ -1,262 +1,140 @@
 @model LotteryWebApp.Models.HomeIndex_ViewModel
 @{
-    ViewData["Title"] = "Millions - @Lang.rule_title";
+    ViewData["Title"] = "Millions - Rule";
     ViewData["ActiveTab"] = "Rule";
     Layout = "~/Areas/Millions/Views/Shared/_Layout.cshtml";
 }
 @using LotteryWebApp.Languages;
 
-<script src="https://cdn.tailwindcss.com"></script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-<link rel="stylesheet" href="/Millions/css/site.css" />
-<link rel="stylesheet" href="/Millions/css/rule.css" />
-
-<!-- Add custom font Bricolage Grotesque to match Figma styling -->
 <link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@400;700;800;900&display=swap" rel="stylesheet">
 
-<div class="main-container animate__animated animate__fadeIn h-screen relative flex flex-col font-bricolage overflow-hidden" style="background-color: #F5F5F5 !important;">
-    
-    <!-- Fixed Header & Tabs Group -->
-    <div class="fixed top-0 left-0 md:left-1/2 md:-translate-x-1/2 w-full md:max-w-[430px] z-[100] bg-white shadow-md">
-        <!-- Header Block (Red) -->
-        <div class="w-full bg-[#0062FF] h-[52px] flex items-center justify-between px-4 relative">
-            <!-- Back Button -->
-            <button onclick="window.history.back()" class="w-10 h-10 flex items-center justify-center -ml-2 rounded-full active:bg-white/20 transition-colors z-10 text-white cursor-pointer">
-                <i class="fa-solid fa-arrow-left text-[20px]"></i>
-            </button>
-            <!-- Title -->
-            <div class="absolute inset-0 flex items-center justify-center pointer-events-none">
-                <span class="text-white text-[24px] font-bold tracking-wide drop-shadow-sm">@Lang.rule_title</span>
-            </div>
-        </div>
+@section Styles {
+    <link rel="stylesheet" href="/Millions/css/rule.css" />
+}
 
-        <!-- Tabs Block Container -->
-        <div class="w-full bg-white flex items-center justify-center px-2 pt-3 pb-1 relative shadow-sm transition-all border-b border-gray-100">
-            <!-- Tab 1 -->
-            <div class="flex flex-col items-center gap-1 cursor-pointer flex-1 group" onclick="switchFAQTab('basic')">
-                <span id="tab-basic-label" class="text-[14px] font-bold text-[#534A4A] transition-colors whitespace-nowrap">Millions</span>
-                <div id="tab-basic-bar" class="w-full h-[3px] bg-[#0062FF] mt-1 drop-shadow-sm transition-all rounded-t-sm"></div>
-            </div>
-        </div>
+<div class="millions-rule-page">
+    <!-- Header -->
+    <div class="header">
+        <a href="javascript:history.back()" class="back-btn">
+            <i class="fa-solid fa-arrow-left"></i>
+        </a>
+        <div class="header-title">@Lang.millions_rule_title</div>
     </div>
 
-    <!-- Main Scrollable Area -->
-    <div class="flex-grow overflow-y-auto mt-[96px] pb-32 custom-scrollbar px-4" id="rule-scroll-container">
-        <div class="max-w-[380px] mx-auto"> <!-- Wrapper to shrink content width -->
-
-            <!-- Active Tab Content -->
-            <div id="tab-content-basic" class="w-full animate__animated animate__fadeIn">
-                
-                <div class="rule-header-red">@Lang.rule_general_info</div>
-                
-                <div class="rule-table-grid pb-2">
-                    <div class="font-[800]">@Lang.rule_item</div>
-                    <div class="font-[800]">@Lang.rule_regulation_draw</div>
-                    
-                    <div>@Lang.rule_time</div>
-                    <div>@Lang.rule_20_30_daily</div>
-                    
-                    <div>@Lang.rule_ticket_closure</div>
-                    <div>@Lang.rule_20_00_daily</div>
-                    
-                    <div>@Lang.rule_total_numbers</div>
-                    <div>@Lang.rule_01_80</div>
-        
-                    <div>@Lang.rule_numbers_drawn</div>
-                    <div>@Lang.rule_20_per_draw</div>
-        
-                    <div>@Lang.rule_purchase_channels</div>
-                    <div>@Lang.rule_ussd_web_app</div>
-        
-                    <div>@Lang.rule_result_channel</div>
-                    <div>@Lang.rule_web_app</div>
-        
-                    <div>@Lang.rule_duplicate_allowed</div>
-                    <div>@Lang.rule_yes</div>
-        
-                    <div>@Lang.rule_identical_allowed</div>
-                    <div>@Lang.rule_yes</div>
-                </div>
-        
-                <div class="rule-header-red">@Lang.rule_game_1_title</div>
-        
-                <!-- Card Mockup inside Rule -->
-                <div class="play-card bg-[#E11D48] relative mx-3 mt-4 mb-4 h-[90px] rounded-2xl overflow-hidden border border-white/20 shadow-lg cursor-pointer transition-all active:scale-[0.98]" onclick="window.location.href='/Millions/Home/GameHome'">
-                    <!-- 1. Design-accurate Staggered Ellipses -->
-                    <img src="/Millions/img/decorations/ellipse_1183.png" class="absolute -left-[60px] -top-[100px] w-[180px] h-[180px] pointer-events-none z-10 mix-blend-screen opacity-90 scale-y-[-1]" alt="highlight">
-                    <img src="/Millions/img/decorations/ellipse_1181.png" class="absolute -right-[50px] -top-[20px] w-[160px] h-[160px] pointer-events-none z-10 mix-blend-screen opacity-90" alt="highlight">
-
-                    <div class="w-full h-full flex items-center justify-between pl-3 pr-2 relative z-10">
-                        <div class="flex flex-col items-center justify-center pt-2">
-                            <span class="text-[14px] font-black italic text-white drop-shadow-md leading-[1.1] text-center" style="font-family: 'Montserrat', sans-serif;">@Html.Raw(Lang.rule_basic_pick)</span>
-                            <img src="/Millions/img/ball_10.png" class="w-7 h-7 object-contain drop-shadow-md -mt-2 -mr-8 border-2 border-[#E11D48] rounded-full bg-[#E11D48]">
-                        </div>
-        
-                        <div class="flex flex-col items-center mt-0.5 ml-4">
-                            <span class="text-[10px] font-[800] text-white tracking-widest uppercase drop-shadow">@Lang.rule_jackpot_prize</span>
-                            <div class="flex items-start gap-1 mt-0.5">
-                                <span class="text-[28px] font-[900] text-white leading-none tracking-tight drop-shadow-md">30.000.000</span>
-                                <span class="text-[7px] font-[800] text-white bg-transparent border border-white/60 rounded px-[2px] mt-1 shadow-sm leading-tight">HTG</span>
-                            </div>
-                            <div class="text-[9px] text-white/90 mt-0.5">@Lang.rule_next_round <span class="font-[900] text-white ml-0.5 drop-shadow">05:00</span></div>
-                        </div>
-        
-                        <div class="flex flex-col items-center justify-center h-full py-2 w-[80px] gap-1">
-                            <img src="/Millions/img/play_chest.png" class="h-[46px] w-auto object-contain drop-shadow-lg">
-                            <div class="w-full yellow-button text-center rounded-[10px] py-[4px] text-[10px] font-[900] px-2 z-20 active:scale-95 transition-transform text-[#212121] border-2 border-white shadow-lg" style="background: linear-gradient(180deg, #FFE95B 0%, #ECA600 100%);">@Lang.rule_play_now</div>
-                        </div>
+    <!-- Main Content Card -->
+    <div class="content-card custom-scrollbar">
+        <div class="content-inner">
+            <!-- Banner -->
+            <div class="banner">
+                <div class="banner-content">
+                    <span class="banner-text">@Lang.millions_mega_millions</span>
+                    <div class="banner-ball">
+                        <img src="/Millions/img/ball_88.png" alt="88">
+                        <i class="fa-solid fa-crown crown"></i>
                     </div>
                 </div>
-        
-                <!-- @Lang.rule_how_to_play Section -->
-                <div class="rule-section-title">
-                    <span class="icon">&#9670;</span> @Lang.rule_how_to_play
+            </div>
+
+            <!-- Draw Schedule -->
+            <div class="rule-section">
+                <div class="section-header">
+                    <span class="section-emoji">📅</span>
+                    <div class="section-title">@Lang.millions_draw_schedule</div>
                 </div>
-                
-                <div class="rule-table-grid desc-grid pb-4">
-                    <div class="font-[800]">@Lang.rule_item</div>
-                    <div class="font-[800]">@Lang.rule_description</div>
-                    
-                    <div>@Lang.rule_ticket_price</div>
-                    <div>@Lang.rule_10_htg</div>
-                    
-                    <div>@Lang.rule_selection_method</div>
-                    <div>@Html.Raw(Lang.rule_choose_10)</div>
-                    
-                    <div>@Lang.rule_winning_rule</div>
-                    <div>@Html.Raw(Lang.rule_10_taken_from)</div>
-                    
-                    <div>Drawn numbers as the<br>official</div>
-                    <div></div>
-        
-                    <div>@Lang.rule_objective</div>
-                    <div>@Lang.rule_match_as_many</div>
+                <ul class="rule-list">
+                    <li class="rule-item">@Lang.millions_draw_frequency</li>
+                    <li class="rule-item">@Lang.millions_draw_time</li>
+                    <li class="rule-item">@Lang.millions_ticket_closing_time</li>
+                </ul>
+            </div>
+
+            <!-- How to play -->
+            <div class="rule-section">
+                <div class="section-header">
+                    <span class="section-emoji">▶️</span>
+                    <div class="section-title">@Lang.millions_how_to_play</div>
                 </div>
-        
-                <!-- @Lang.rule_jackpot_rule Section -->
-                <div class="rule-section-title mt-2">
-                    <span class="icon">&#9670;</span> @Lang.rule_jackpot_rule
+                <ul class="rule-list">
+                    <li class="rule-item">@Lang.millions_ticket_includes_6</li>
+                    <li class="rule-item rule-subitem">@Lang.millions_select_5_main</li>
+                    <li class="rule-item rule-subitem">@Lang.millions_select_1_mega</li>
+                    <li class="rule-item">@Lang.millions_ticket_price</li>
+                    <li class="rule-item">@Lang.millions_payment_via</li>
+                </ul>
+            </div>
+
+            <!-- Game rules -->
+            <div class="rule-section">
+                <div class="section-header">
+                    <span class="section-emoji">🔨</span>
+                    <div class="section-title">@Lang.millions_game_rules_title</div>
                 </div>
-        
-                <div class="flex justify-center mt-4 mb-4">
-                     <img src="/Millions/img/play_chest.png" class="h-[120px] object-contain drop-shadow-xl" alt="Chest" />
+                <ul class="rule-list">
+                    <li class="rule-item">@Lang.millions_results_based_on</li>
+                    <li class="rule-item">@Lang.millions_one_highest_prize</li>
+                    <li class="rule-item">@Lang.millions_winnings_calculated</li>
+                </ul>
+            </div>
+
+            <!-- Prize Structure -->
+            <div class="rule-section">
+                <div class="section-header">
+                    <span class="section-emoji">🔔</span>
+                    <div class="section-title">@Lang.millions_prize_structure</div>
                 </div>
-        
-                <div class="text-[11px] font-semibold text-[#212121] px-3 mb-3">@Html.Raw(Lang.rule_match_all_10)</div>
                 
-                <div class="px-3 flex flex-wrap gap-2 mb-4 justify-start">
-                    <div class="ball-green">1</div>
-                    <div class="ball-green">4</div>
-                    <div class="ball-green">5</div>
-                    <div class="ball-green">12</div>
-                    <div class="ball-green">24</div>
-                    <div class="ball-green">28</div>
-                    <div class="ball-green">30</div>
-                    <div class="ball-green">37</div>
-                    <div class="ball-green">46</div>
-                    <div class="ball-green">49</div>
-                </div>
-        
-                <div class="rule-table-grid pb-2">
-                    <div class="font-[800]">@Lang.rule_condition</div>
-                    <div class="font-[800]">@Lang.rule_prize_pool</div>
-                    
-                    <div>@Html.Raw(Lang.rule_if_le_10)</div>
-                    <div>@Html.Raw(Lang.rule_each_receives)</div>
-                    
-                    <div class="mt-2">@Html.Raw(Lang.rule_if_gt_10)</div>
-                    <div class="mt-2">@Html.Raw(Lang.rule_shared_equally)</div>
-                </div>
-        
-                <!-- @Lang.rule_standard_prize -->
-                <div class="rule-section-title mt-4">
-                    <span class="icon">&#9670;</span> @Lang.rule_standard_prize
+                <div class="prize-header-labels">
+                    <div class="prize-label">@Lang.millions_match_result_header</div>
+                    <div class="prize-label">@Lang.millions_prize_htg_header</div>
                 </div>
-        
-                <div class="rule-table-grid pb-2">
-                    <div class="font-[800]">@Lang.rule_numbers_matches</div>
-                    <div class="font-[800]">@Lang.rule_prize_pool_htg</div>
-                    
-                    <div>9</div>
-                    <div>@Html.Raw(Lang.rule_prize_12k)</div>
-                    
-                    <div>8</div>
-                    <div>@Html.Raw(Lang.rule_prize_600)</div>
-                    
-                    <div>7</div>
-                    <div>@Html.Raw(Lang.rule_prize_160)</div>
-                    
-                    <div>6</div>
-                    <div>@Html.Raw(Lang.rule_prize_20)</div>
-                    
-                    <div>5</div>
-                    <div>@Html.Raw(Lang.rule_prize_5)</div>
+
+                <div class="prize-rows">
+                    <div class="prize-row">
+                        <div class="match-col">@Lang.millions_match_5_plus_mega</div>
+                        <div class="prize-col jackpot">@Lang.millions_jackpot_label</div>
+                    </div>
+                    <div class="prize-row">
+                        <div class="match-col">@Lang.millions_match_5_numbers</div>
+                        <div class="prize-col">400</div>
+                    </div>
+                    <div class="prize-row">
+                        <div class="match-col">@Lang.millions_match_4_plus_mega</div>
+                        <div class="prize-col">4.000</div>
+                    </div>
+                    <div class="prize-row">
+                        <div class="match-col">@Lang.millions_match_4_numbers</div>
+                        <div class="prize-col">2.000</div>
+                    </div>
+                    <div class="prize-row">
+                        <div class="match-col">@Lang.millions_match_3_plus_mega</div>
+                        <div class="prize-col">800</div>
+                    </div>
+                    <div class="prize-row">
+                        <div class="match-col">@Lang.millions_match_3_numbers</div>
+                        <div class="prize-col">40</div>
+                    </div>
+                    <div class="prize-row">
+                        <div class="match-col">@Lang.millions_match_2_plus_mega</div>
+                        <div class="prize-col">40</div>
+                    </div>
+                    <div class="prize-row">
+                        <div class="match-col">@Lang.millions_match_1_plus_mega</div>
+                        <div class="prize-col">30</div>
+                    </div>
+                    <div class="prize-row">
+                        <div class="match-col">@Lang.millions_match_mega_only</div>
+                        <div class="prize-col">10</div>
+                    </div>
                 </div>
-        
             </div>
-        
-            <!-- Other tabs removed as per request -->
-        </div> <!-- End max-width wrapper -->
-    </div> <!-- End Scroll Container -->
+        </div>
+    </div>
+
     <!-- Bottom Navbar shared component -->
     <partial name="_BottomNavbar" />
 </div>
 
-<script>
-
-    function switchFAQTab(tabId) {
-        // Simple mock tab visual switcher for now matching the exact styling requested
-        ['basic', 'smallbig', 'oddeven'].forEach(t => {
-            document.getElementById(`tab-${t}-label`).classList.remove('text-[#534A4A]');
-            document.getElementById(`tab-${t}-label`).classList.add('text-[#909090]');
-            
-            let bar = document.getElementById(`tab-${t}-bar`);
-            if(bar) {
-                bar.classList.remove('bg-[#0062FF]', 'drop-shadow-sm', 'h-[3px]', 'rounded-t-sm');
-                bar.classList.add('bg-transparent', 'h-0.5');
-            }
-            
-            let desc = document.getElementById(`tab-${t}-desc`);
-            if(desc) {
-                desc.classList.remove('text-[#534A4A]');
-                desc.classList.add('text-[#909090]');
-            }
-            
-            // Hide content
-            let content = document.getElementById(`tab-content-${t.replace('_','')}`);
-            if(content) {
-                content.classList.add('hidden');
-            }
-        });
-
-        // activate target
-        document.getElementById(`tab-${tabId}-label`).classList.remove('text-[#909090]');
-        document.getElementById(`tab-${tabId}-label`).classList.add('text-[#534A4A]');
-        
-        let targetBar = document.getElementById(`tab-${tabId}-bar`);
-        if(targetBar) {
-            targetBar.classList.remove('bg-transparent', 'h-0.5');
-            targetBar.classList.add('bg-[#0062FF]', 'drop-shadow-sm', 'h-[3px]', 'rounded-t-sm');
-        }
-        
-        let currentDesc = document.getElementById(`tab-${tabId}-desc`);
-        if(currentDesc) {
-            currentDesc.classList.remove('text-[#909090]');
-            currentDesc.classList.add('text-[#534A4A]');
-        }
-        
-        // Show content (the id for content is tab-content-basic, tab-content-smallbig, tab-content-oddeven)
-        let activeContentId = `tab-content-${tabId.replace('_','')}`;
-        let currentContent = document.getElementById(activeContentId);
-        if(currentContent) {
-            currentContent.classList.remove('hidden');
-        }
-        
-        // Reset scroll position when switching tabs
-        let scrollCont = document.getElementById('rule-scroll-container');
-        if(scrollCont) scrollCont.scrollTop = 0;
-    }
-</script>
 
 
 

website/Areas/Millions/Views/Shared/_BottomNavbar.cshtml

@@ -9,35 +9,35 @@
     <div class="flex items-center justify-between">
         <a href="/Millions/Home/GameHome" class="nav-item @(activePage == "Home" ? "active" : "") flex flex-col items-center flex-1 no-underline">
             <img src="/Millions/assets/icons/nav-home.png" alt="" class="w-7 h-7"/>
-            <span class="text-xs mt-1 @(activePage == "Home" ? "text-[#0062ff] font-semibold" : "text-gray-700")">Home</span>
+            <span class="text-xs mt-1 @(activePage == "Home" ? "text-[#0062ff] font-semibold" : "text-gray-700")">@Lang.home</span>
             @if(activePage == "Home") {
                 <span class="w-5 h-1 bg-[#0062ff] rounded-full mt-1"></span>
             }
         </a>
         <a href="/Millions/Home/Rule" class="nav-item @(activePage == "Rule" ? "active" : "") flex flex-col items-center flex-1 no-underline">
             <img src="/Millions/assets/icons/nav-rule.png" alt="" class="w-7 h-7"/>
-            <span class="text-xs mt-1 @(activePage == "Rule" ? "text-[#0062ff] font-semibold" : "text-gray-700")">Rule</span>
+            <span class="text-xs mt-1 @(activePage == "Rule" ? "text-[#0062ff] font-semibold" : "text-gray-700")">@Lang.rules</span>
             @if(activePage == "Rule") {
                 <span class="w-5 h-1 bg-[#0062ff] rounded-full mt-1"></span>
             }
         </a>
         <a href="/Millions/Home/History" class="nav-item @(activePage == "History" ? "active" : "") flex flex-col items-center flex-1 no-underline">
             <img src="/Millions/assets/icons/nav-history.png" alt="" class="w-7 h-7"/>
-            <span class="text-xs mt-1 @(activePage == "History" ? "text-[#0062ff] font-semibold" : "text-gray-700")">History</span>
+            <span class="text-xs mt-1 @(activePage == "History" ? "text-[#0062ff] font-semibold" : "text-gray-700")">@Lang.history</span>
             @if(activePage == "History") {
                 <span class="w-5 h-1 bg-[#0062ff] rounded-full mt-1"></span>
             }
         </a>
         <a href="/Millions/Home/FAQ" class="nav-item @(activePage == "FAQ" ? "active" : "") flex flex-col items-center flex-1 no-underline">
             <img src="/Millions/assets/icons/nav-faq.png" alt="" class="w-7 h-7"/>
-            <span class="text-xs mt-1 @(activePage == "FAQ" ? "text-[#0062ff] font-semibold" : "text-gray-700")">FAQ</span>
+            <span class="text-xs mt-1 @(activePage == "FAQ" ? "text-[#0062ff] font-semibold" : "text-gray-700")">@Lang.faq</span>
             @if(activePage == "FAQ") {
                 <span class="w-5 h-1 bg-[#0062ff] rounded-full mt-1"></span>
             }
         </a>
         <a href="/Millions/Home/More" class="nav-item @(activePage == "More" ? "active" : "") flex flex-col items-center flex-1 no-underline">
             <img src="/Millions/assets/icons/nav-more.png" alt="" class="w-7 h-7"/>
-            <span class="text-xs mt-1 @(activePage == "More" ? "text-[#0062ff] font-semibold" : "text-gray-700")">More</span>
+            <span class="text-xs mt-1 @(activePage == "More" ? "text-[#0062ff] font-semibold" : "text-gray-700")">@Lang.more</span>
             @if(activePage == "More") {
                 <span class="w-5 h-1 bg-[#0062ff] rounded-full mt-1"></span>
             }

website/Languages/Lang.Designer.cs

@@ -1262,7 +1262,7 @@ namespace LotteryWebApp.Languages {
         }
         
         /// <summary>
-        ///   Looks up a localized string similar to E.
+        ///   Looks up a localized string similar to Hours.
         /// </summary>
         public static string hours {
             get {
@@ -1343,7 +1343,7 @@ namespace LotteryWebApp.Languages {
         }
         
         /// <summary>
-        ///   Looks up a localized string similar to 100.000 HTG jodia  !.
+        ///   Looks up a localized string similar to 1.000.000 HTG jodia  !.
         /// </summary>
         public static string jackpot_today_htg {
             get {
@@ -1729,6 +1729,33 @@ namespace LotteryWebApp.Languages {
             }
         }
         
+        /// <summary>
+        ///   Looks up a localized string similar to Draw frequency: 2 times per week (Tuesday &amp; Friday).
+        /// </summary>
+        public static string millions_draw_frequency {
+            get {
+                return ResourceManager.GetString("millions_draw_frequency", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Looks up a localized string similar to Draw Schedule.
+        /// </summary>
+        public static string millions_draw_schedule {
+            get {
+                return ResourceManager.GetString("millions_draw_schedule", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Looks up a localized string similar to Draw time: 11:00 PM (Eastern Time - ET).
+        /// </summary>
+        public static string millions_draw_time {
+            get {
+                return ResourceManager.GetString("millions_draw_time", resourceCulture);
+            }
+        }
+        
         /// <summary>
         ///   Looks up a localized string similar to Modifye.
         /// </summary>
@@ -1801,6 +1828,24 @@ namespace LotteryWebApp.Languages {
             }
         }
         
+        /// <summary>
+        ///   Looks up a localized string similar to Game rules.
+        /// </summary>
+        public static string millions_game_rules_title {
+            get {
+                return ResourceManager.GetString("millions_game_rules_title", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Looks up a localized string similar to How to play.
+        /// </summary>
+        public static string millions_how_to_play {
+            get {
+                return ResourceManager.GetString("millions_how_to_play", resourceCulture);
+            }
+        }
+        
         /// <summary>
         ///   Looks up a localized string similar to HTG.
         /// </summary>
@@ -1819,6 +1864,15 @@ namespace LotteryWebApp.Languages {
             }
         }
         
+        /// <summary>
+        ///   Looks up a localized string similar to Jackpot.
+        /// </summary>
+        public static string millions_jackpot_label {
+            get {
+                return ResourceManager.GetString("millions_jackpot_label", resourceCulture);
+            }
+        }
+        
         /// <summary>
         ///   Looks up a localized string similar to 30.000.000 HTG jodia  !.
         /// </summary>
@@ -1828,6 +1882,105 @@ namespace LotteryWebApp.Languages {
             }
         }
         
+        /// <summary>
+        ///   Looks up a localized string similar to 1 + Mega Ball.
+        /// </summary>
+        public static string millions_match_1_plus_mega {
+            get {
+                return ResourceManager.GetString("millions_match_1_plus_mega", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Looks up a localized string similar to 2 + Mega Ball.
+        /// </summary>
+        public static string millions_match_2_plus_mega {
+            get {
+                return ResourceManager.GetString("millions_match_2_plus_mega", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Looks up a localized string similar to 3 Numbers.
+        /// </summary>
+        public static string millions_match_3_numbers {
+            get {
+                return ResourceManager.GetString("millions_match_3_numbers", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Looks up a localized string similar to 3 + Mega Ball.
+        /// </summary>
+        public static string millions_match_3_plus_mega {
+            get {
+                return ResourceManager.GetString("millions_match_3_plus_mega", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Looks up a localized string similar to 4 Numbers.
+        /// </summary>
+        public static string millions_match_4_numbers {
+            get {
+                return ResourceManager.GetString("millions_match_4_numbers", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Looks up a localized string similar to 4 + Mega Ball.
+        /// </summary>
+        public static string millions_match_4_plus_mega {
+            get {
+                return ResourceManager.GetString("millions_match_4_plus_mega", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Looks up a localized string similar to 5 Numbers.
+        /// </summary>
+        public static string millions_match_5_numbers {
+            get {
+                return ResourceManager.GetString("millions_match_5_numbers", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Looks up a localized string similar to 5+ Mega Ball.
+        /// </summary>
+        public static string millions_match_5_plus_mega {
+            get {
+                return ResourceManager.GetString("millions_match_5_plus_mega", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Looks up a localized string similar to Mega Ball only.
+        /// </summary>
+        public static string millions_match_mega_only {
+            get {
+                return ResourceManager.GetString("millions_match_mega_only", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Looks up a localized string similar to Match Result.
+        /// </summary>
+        public static string millions_match_result_header {
+            get {
+                return ResourceManager.GetString("millions_match_result_header", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Looks up a localized string similar to Mega Millions.
+        /// </summary>
+        public static string millions_mega_millions {
+            get {
+                return ResourceManager.GetString("millions_mega_millions", resourceCulture);
+            }
+        }
+        
         /// <summary>
         ///   Looks up a localized string similar to Money Ticket.
         /// </summary>
@@ -1873,6 +2026,15 @@ namespace LotteryWebApp.Languages {
             }
         }
         
+        /// <summary>
+        ///   Looks up a localized string similar to Only one highest prize is awarded per ticket (if multiple prize conditions are met)..
+        /// </summary>
+        public static string millions_one_highest_prize {
+            get {
+                return ResourceManager.GetString("millions_one_highest_prize", resourceCulture);
+            }
+        }
+        
         /// <summary>
         ///   Looks up a localized string similar to Tanpri konfime epi antre OTP a pou kontinye..
         /// </summary>
@@ -1927,6 +2089,15 @@ namespace LotteryWebApp.Languages {
             }
         }
         
+        /// <summary>
+        ///   Looks up a localized string similar to Payment via: Account balance.
+        /// </summary>
+        public static string millions_payment_via {
+            get {
+                return ResourceManager.GetString("millions_payment_via", resourceCulture);
+            }
+        }
+        
         /// <summary>
         ///   Looks up a localized string similar to Play.
         /// </summary>
@@ -1936,6 +2107,15 @@ namespace LotteryWebApp.Languages {
             }
         }
         
+        /// <summary>
+        ///   Looks up a localized string similar to Prize (HTG).
+        /// </summary>
+        public static string millions_prize_htg_header {
+            get {
+                return ResourceManager.GetString("millions_prize_htg_header", resourceCulture);
+            }
+        }
+        
         /// <summary>
         ///   Looks up a localized string similar to Prim ou ka genyen.
         /// </summary>
@@ -1945,6 +2125,15 @@ namespace LotteryWebApp.Languages {
             }
         }
         
+        /// <summary>
+        ///   Looks up a localized string similar to Prize Structure.
+        /// </summary>
+        public static string millions_prize_structure {
+            get {
+                return ResourceManager.GetString("millions_prize_structure", resourceCulture);
+            }
+        }
+        
         /// <summary>
         ///   Looks up a localized string similar to Dat ou achte a.
         /// </summary>
@@ -1972,6 +2161,15 @@ namespace LotteryWebApp.Languages {
             }
         }
         
+        /// <summary>
+        ///   Looks up a localized string similar to Results are based on official lottery draw..
+        /// </summary>
+        public static string millions_results_based_on {
+            get {
+                return ResourceManager.GetString("millions_results_based_on", resourceCulture);
+            }
+        }
+        
         /// <summary>
         ///   Looks up a localized string similar to Tou.
         /// </summary>
@@ -1990,6 +2188,15 @@ namespace LotteryWebApp.Languages {
             }
         }
         
+        /// <summary>
+        ///   Looks up a localized string similar to Rule.
+        /// </summary>
+        public static string millions_rule_title {
+            get {
+                return ResourceManager.GetString("millions_rule_title", resourceCulture);
+            }
+        }
+        
         /// <summary>
         ///   Looks up a localized string similar to Anrejistre.
         /// </summary>
@@ -2008,6 +2215,15 @@ namespace LotteryWebApp.Languages {
             }
         }
         
+        /// <summary>
+        ///   Looks up a localized string similar to Select 1 Mega Ball from 1 → 24.
+        /// </summary>
+        public static string millions_select_1_mega {
+            get {
+                return ResourceManager.GetString("millions_select_1_mega", resourceCulture);
+            }
+        }
+        
         /// <summary>
         ///   Looks up a localized string similar to Chwazi nimewo chans.
         /// </summary>
@@ -2017,6 +2233,15 @@ namespace LotteryWebApp.Languages {
             }
         }
         
+        /// <summary>
+        ///   Looks up a localized string similar to Select 5 main numbers from 1 → 70.
+        /// </summary>
+        public static string millions_select_5_main {
+            get {
+                return ResourceManager.GetString("millions_select_5_main", resourceCulture);
+            }
+        }
+        
         /// <summary>
         ///   Looks up a localized string similar to Chwazi.
         /// </summary>
@@ -2062,6 +2287,15 @@ namespace LotteryWebApp.Languages {
             }
         }
         
+        /// <summary>
+        ///   Looks up a localized string similar to Ticket closing time: 10:30 PM (ET).
+        /// </summary>
+        public static string millions_ticket_closing_time {
+            get {
+                return ResourceManager.GetString("millions_ticket_closing_time", resourceCulture);
+            }
+        }
+        
         /// <summary>
         ///   Looks up a localized string similar to Kod tike.
         /// </summary>
@@ -2080,6 +2314,15 @@ namespace LotteryWebApp.Languages {
             }
         }
         
+        /// <summary>
+        ///   Looks up a localized string similar to Each ticket includes 6 numbers:.
+        /// </summary>
+        public static string millions_ticket_includes_6 {
+            get {
+                return ResourceManager.GetString("millions_ticket_includes_6", resourceCulture);
+            }
+        }
+        
         /// <summary>
         ///   Looks up a localized string similar to tike sa pa valid.
         /// </summary>
@@ -2089,6 +2332,15 @@ namespace LotteryWebApp.Languages {
             }
         }
         
+        /// <summary>
+        ///   Looks up a localized string similar to Ticket price: 20 HTG per ticket.
+        /// </summary>
+        public static string millions_ticket_price {
+            get {
+                return ResourceManager.GetString("millions_ticket_price", resourceCulture);
+            }
+        }
+        
         /// <summary>
         ///   Looks up a localized string similar to Transfere.
         /// </summary>
@@ -2125,6 +2377,15 @@ namespace LotteryWebApp.Languages {
             }
         }
         
+        /// <summary>
+        ///   Looks up a localized string similar to Winnings are calculated based on matching numbers and Mega Ball..
+        /// </summary>
+        public static string millions_winnings_calculated {
+            get {
+                return ResourceManager.GetString("millions_winnings_calculated", resourceCulture);
+            }
+        }
+        
         /// <summary>
         ///   Looks up a localized string similar to Sa ou chwazi.
         /// </summary>

website/Languages/Lang.resx

@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?>
+<?xml version="1.0" encoding="utf-8"?>
 <root>
   <!-- 
     Microsoft ResX Schema 
@@ -417,7 +417,7 @@ N ap ede w kreye yon kont byen fasil.</value>
     <value>Paj akey</value>
   </data>
   <data name="hours" xml:space="preserve">
-    <value>E</value>
+    <value>Hours</value>
   </data>
   <data name="how_to_play" xml:space="preserve">
     <value>Kijan pouw jwe?</value>
@@ -1187,7 +1187,7 @@ Rezilta ofisyel la se &lt;span class="text-[#A236C8]"&gt;ODD&lt;/span&gt;.</valu
     <value>Gen yon ere. Nan mizajou pwofil la</value>
   </data>
   <data name="jackpot_today_htg" xml:space="preserve">
-    <value>100.000 HTG jodia  !</value>
+    <value>1.000.000 HTG jodia  !</value>
   </data>
   <data name="no_results_found" xml:space="preserve">
     <value>Pagen rezilta</value>
@@ -1734,4 +1734,91 @@ Apre yo fin tire 20 nimewo, sistem nan konte konbyen nimewo ki enpe oswa pe: &lt
   <data name="millions" xml:space="preserve">
     <value>Millions</value>
   </data>
+  <data name="millions_rule_title" xml:space="preserve">
+    <value>Rule</value>
+  </data>
+  <data name="millions_mega_millions" xml:space="preserve">
+    <value>Mega Millions</value>
+  </data>
+  <data name="millions_draw_schedule" xml:space="preserve">
+    <value>Draw Schedule</value>
+  </data>
+  <data name="millions_draw_frequency" xml:space="preserve">
+    <value>Draw frequency: 2 times per week (Tuesday &amp; Friday)</value>
+  </data>
+  <data name="millions_draw_time" xml:space="preserve">
+    <value>Draw time: 11:00 PM (Eastern Time - ET)</value>
+  </data>
+  <data name="millions_ticket_closing_time" xml:space="preserve">
+    <value>Ticket closing time: 10:30 PM (ET)</value>
+  </data>
+  <data name="millions_how_to_play" xml:space="preserve">
+    <value>How to play</value>
+  </data>
+  <data name="millions_ticket_includes_6" xml:space="preserve">
+    <value>Each ticket includes 6 numbers:</value>
+  </data>
+  <data name="millions_select_5_main" xml:space="preserve">
+    <value>Select 5 main numbers from 1 → 70</value>
+  </data>
+  <data name="millions_select_1_mega" xml:space="preserve">
+    <value>Select 1 Mega Ball from 1 → 24</value>
+  </data>
+  <data name="millions_ticket_price" xml:space="preserve">
+    <value>Ticket price: 20 HTG per ticket</value>
+  </data>
+  <data name="millions_payment_via" xml:space="preserve">
+    <value>Payment via: Account balance</value>
+  </data>
+  <data name="millions_game_rules_title" xml:space="preserve">
+    <value>Game rules</value>
+  </data>
+  <data name="millions_results_based_on" xml:space="preserve">
+    <value>Results are based on official lottery draw.</value>
+  </data>
+  <data name="millions_one_highest_prize" xml:space="preserve">
+    <value>Only one highest prize is awarded per ticket (if multiple prize conditions are met).</value>
+  </data>
+  <data name="millions_winnings_calculated" xml:space="preserve">
+    <value>Winnings are calculated based on matching numbers and Mega Ball.</value>
+  </data>
+  <data name="millions_prize_structure" xml:space="preserve">
+    <value>Prize Structure</value>
+  </data>
+  <data name="millions_match_result_header" xml:space="preserve">
+    <value>Match Result</value>
+  </data>
+  <data name="millions_prize_htg_header" xml:space="preserve">
+    <value>Prize (HTG)</value>
+  </data>
+  <data name="millions_match_5_plus_mega" xml:space="preserve">
+    <value>5+ Mega Ball</value>
+  </data>
+  <data name="millions_jackpot_label" xml:space="preserve">
+    <value>Jackpot</value>
+  </data>
+  <data name="millions_match_5_numbers" xml:space="preserve">
+    <value>5 Numbers</value>
+  </data>
+  <data name="millions_match_4_plus_mega" xml:space="preserve">
+    <value>4 + Mega Ball</value>
+  </data>
+  <data name="millions_match_4_numbers" xml:space="preserve">
+    <value>4 Numbers</value>
+  </data>
+  <data name="millions_match_3_plus_mega" xml:space="preserve">
+    <value>3 + Mega Ball</value>
+  </data>
+  <data name="millions_match_3_numbers" xml:space="preserve">
+    <value>3 Numbers</value>
+  </data>
+  <data name="millions_match_2_plus_mega" xml:space="preserve">
+    <value>2 + Mega Ball</value>
+  </data>
+  <data name="millions_match_1_plus_mega" xml:space="preserve">
+    <value>1 + Mega Ball</value>
+  </data>
+  <data name="millions_match_mega_only" xml:space="preserve">
+    <value>Mega Ball only</value>
+  </data>
 </root>

website/wwwroot/Millions/css/rule.css

@@ -1,122 +1,257 @@
-/* Custom formatting for the Rule page */
-.rule-header-red {
-    background-color: #0062FF;
-    color: white;
-    font-weight: bold;
-    font-size: 16px;
-    padding: 8px 12px;
-    text-transform: uppercase;
-    margin-top: 24px;
-    margin-bottom: 16px;
+/* Custom formatting for the Rule page - New Figma Style */
+:root {
+    --primary-blue: #0062FF;
+    --dark-blue: #004ecc;
+    --bg-light: #ffffff;
+    --text-dark: #1A1A1A;
+    --text-muted: #666666;
 }
 
-.rule-table-grid {
-    display: grid;
-    grid-template-columns: 1.2fr 1fr;
-    row-gap: 6px;
-    column-gap: 12px;
-    font-size: 14px;
-    color: #000000;
-    line-height: 1.4;
-    padding: 0 12px;
+.millions-rule-page {
+    background-color: var(--primary-blue);
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    max-width: 430px;
+    margin: 0 auto;
+    font-family: 'Bricolage Grotesque', sans-serif;
 }
 
-.rule-table-grid.desc-grid {
-    grid-template-columns: 100px 1fr;
-    row-gap: 10px;
+/* Header with Chevron Pattern */
+.millions-rule-page .header {
+    background-color: var(--primary-blue);
+    background-image: url("data:image/svg+xml,%3Csvg width='60' height='30' viewBox='0 0 60 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 15 L15 0 L30 15 L45 0 L60 15 L60 30 L45 15 L30 30 L15 15 L0 30 Z' fill='%23004ecc' fill-opacity='0.4'/%3E%3C/svg%3E");
+    height: 64px;
+    display: flex;
+    align-items: center;
+    padding: 0 16px;
+    color: #fff;
+    position: sticky;
+    top: 0;
+    z-index: 100;
 }
 
-.rule-table-header {
-    font-weight: 800;
-    margin-bottom: 6px;
+.millions-rule-page .back-btn {
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #fff;
+    text-decoration: none;
+    font-size: 18px;
 }
 
-.rule-section-title {
-    font-size: 14px;
+.millions-rule-page .header-title {
+    flex: 1;
+    text-align: center;
+    font-size: 20px;
     font-weight: 800;
-    color: #212121;
+    margin-right: 32px; /* balance back button */
+}
+
+/* Content Card */
+.millions-rule-page .content-card {
+    background-color: #ffffff;
+    flex: 1;
+    border-radius: 40px 40px 0 0;
+    padding: 24px 20px;
+    overflow-y: auto;
+    padding-bottom: 100px; /* space for navbar */
+    box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.1);
+    position: relative;
+}
+
+.millions-rule-page .content-inner {
+    max-width: 100%;
+}
+
+/* Mega Millions Banner */
+.millions-rule-page .banner {
+    background: linear-gradient(135deg, #0052D4 0%, #4364F7 50%, #6FB1FC 100%);
+    border-radius: 20px;
+    height: 110px;
+    position: relative;
+    overflow: visible; /* allow ball to float */
     display: flex;
     align-items: center;
-    gap: 6px;
-    margin-top: 20px;
-    margin-bottom: 12px;
-    padding: 0 12px;
+    justify-content: center;
+    margin-bottom: 32px;
+    box-shadow: 0 8px 16px rgba(0, 98, 255, 0.2);
+}
+
+.millions-rule-page .banner-content {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
-.rule-section-title .icon {
-    color: #1A92F4;
-    font-size: 12px;
+.millions-rule-page .banner-text {
+    color: white;
+    font-size: 2.25rem;
+    font-weight: 800;
+    font-family: 'UTM Futura Extra', sans-serif;
+    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
+    text-transform: uppercase;
+    letter-spacing: -1px;
+    line-height: 1;
 }
 
-.ball-green {
-    width: 22px;
-    height: 22px;
-    border-radius: 50%;
-    border: 2px solid #16A34A;
-    /* tailwind green-600 */
-    background-color: white;
-    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
+.millions-rule-page .banner-ball {
+    position: absolute;
+    right: 80px; /* Moved further left as requested */
+    top: 50%;
+    transform: translateY(-50%);
+    width: 65px;
+    height: 65px;
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 11px;
-    font-weight: 900;
-    color: #16A34A;
+    z-index: 10;
 }
 
-.play-card {
-    margin: 0 12px;
-    border-radius: 12px;
-    overflow: hidden;
-    position: relative;
-    box-shadow: 0 4px 6px rgba(238, 0, 51, 0.2);
+.millions-rule-page .banner-ball img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    filter: drop-shadow(0 5px 10px rgba(0,0,0,0.5));
+}
+
+.millions-rule-page .banner-ball .crown {
+    position: absolute;
+    top: -5px;
+    right: 2px;
+    font-size: 18px;
+    color: #FFD700;
+    transform: rotate(25deg);
+    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
+}
+
+/* Rule Sections */
+.millions-rule-page .rule-section {
+    margin-bottom: 28px;
+}
+
+.millions-rule-page .section-header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 12px;
+}
+
+.millions-rule-page .section-emoji {
+    font-size: 24px;
+}
+
+.millions-rule-page .section-title {
+    font-size: 22px;
+    font-weight: 800;
+    color: var(--text-dark);
 }
 
-.bullet-list {
-    padding-left: 12px;
-    padding-right: 12px;
+.millions-rule-page .rule-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
 }
 
-.bullet-list li {
-    font-size: 13px;
-    color: #212121;
-    margin-bottom: 6px;
-    list-style-type: none;
+.millions-rule-page .rule-item {
+    display: flex;
+    align-items: flex-start;
+    gap: 10px;
+    margin-bottom: 10px;
+    font-size: 14px;
+    color: #333333;
+    line-height: 1.4;
     position: relative;
-    padding-left: 12px;
-    line-height: 1.3;
+    padding-left: 15px;
 }
 
-.bullet-list li::before {
-    content: "•";
+.millions-rule-page .rule-item::before {
+    content: '•';
     position: absolute;
     left: 0;
-    top: 0;
+    color: #333333;
     font-weight: bold;
 }
 
+.millions-rule-page .rule-subitem {
+    padding-left: 30px;
+}
+
+/* Prize Structure */
+.millions-rule-page .prize-header-labels {
+    display: flex;
+    gap: 10px;
+    margin-bottom: 15px;
+}
+
+.millions-rule-page .prize-label {
+    flex: 1;
+    background-color: var(--primary-blue);
+    color: white;
+    padding: 12px;
+    border-radius: 8px;
+    text-align: center;
+    font-weight: 800;
+    font-size: 16px;
+    box-shadow: 0 4px 8px rgba(0, 98, 255, 0.2);
+}
+
+.millions-rule-page .prize-rows {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.millions-rule-page .prize-row {
+    display: flex;
+    justify-content: space-between;
+    padding: 2px 0;
+}
+
+.millions-rule-page .match-col {
+    font-size: 15px;
+    color: #333;
+    font-weight: 600;
+}
+
+.millions-rule-page .prize-col {
+    font-size: 15px;
+    color: #000;
+    font-weight: 800;
+    text-align: right;
+}
+
+.millions-rule-page .prize-col.jackpot {
+    color: #000;
+}
+
 /* Custom Styled Scrollbar */
 .custom-scrollbar::-webkit-scrollbar {
-    width: 6px;
+    width: 4px;
 }
 
 .custom-scrollbar::-webkit-scrollbar-track {
-    background: #E5E5E5;
-    border-radius: 10px;
+    background: transparent;
 }
 
 .custom-scrollbar::-webkit-scrollbar-thumb {
-    background: #FF8A00;
-    /* Orange thumb to match design */
+    background: rgba(0, 0, 0, 0.1);
     border-radius: 10px;
 }
 
-.custom-scrollbar::-webkit-scrollbar-thumb:hover {
-    background: #FF6B00;
-}
-
-/* For Firefox */
-.custom-scrollbar {
-    scrollbar-width: thin;
-    scrollbar-color: #FF8A00 #E5E5E5;
+/* Bottom Navbar Positioning */
+.millions-rule-page .millions-bottom-navbar {
+    position: fixed;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 100%;
+    max-width: 430px;
+    z-index: 200;
 }