Fix homepage rendering by replacing blocked CDN resources with local assets

bemo/static/bootstrap-components.css

@@ -0,0 +1,78 @@
+/* Additional styles for Bootstrap components that need JS */
+
+/* Navbar toggler icon */
+.navbar-toggler-icon {
+    display: inline-block;
+    width: 1.5em;
+    height: 1.5em;
+    vertical-align: middle;
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23333333' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 100%;
+}
+
+/* Navbar collapse - only hide on small screens */
+@media (max-width: 991.98px) {
+    .navbar-collapse {
+        display: none;
+    }
+
+    .navbar-collapse.show {
+        display: block !important;
+    }
+}
+
+@media (min-width: 992px) {
+    .navbar-collapse {
+        display: flex !important;
+        flex-basis: auto;
+    }
+}
+
+/* Dropdown menu positioning */
+.dropdown-menu {
+    display: none;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    z-index: 1000;
+    min-width: 10rem;
+    padding: 0.5rem 0;
+    margin: 0;
+    font-size: 1rem;
+    color: #212529;
+    text-align: left;
+    list-style: none;
+    background-color: #fff;
+    background-clip: padding-box;
+    border: 1px solid rgba(0,0,0,.15);
+    border-radius: 0.25rem;
+}
+
+.dropdown-menu.show {
+    display: block !important;
+}
+
+.dropdown-menu-end {
+    right: 0;
+    left: auto;
+}
+
+/* Alert dismissible */
+.alert-dismissible {
+    padding-right: 3rem;
+}
+
+.alert-dismissible .btn-close {
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 2;
+    padding: 0.75rem 1rem;
+}
+
+/* Hidden class for JavaScript-controlled visibility */
+.hidden {
+    display: none !important;
+}

bemo/static/bootstrap-icons-minimal.css

@@ -0,0 +1,18 @@
+/* Minimal Bootstrap Icons replacement using Unicode/Emoji */
+.bi::before {
+    display: inline-block;
+    font-style: normal;
+    font-variant: normal;
+    text-rendering: auto;
+    -webkit-font-smoothing: antialiased;
+}
+
+.bi-trophy-fill::before { content: "🏆"; }
+.bi-star-fill::before { content: "⭐"; }
+.bi-code-square::before { content: "💻"; }
+.bi-person-circle::before { content: "👤"; }
+.bi-credit-card::before { content: "💳"; }
+.bi-gear-fill::before { content: "⚙️"; }
+.bi-moon-fill::before { content: "🌙"; }
+.bi-box-arrow-right::before { content: "➡️"; }
+.bi-box-arrow-in-right::before { content: "🔑"; }

bemo/static/bootstrap-minimal.js

@@ -0,0 +1,52 @@
+// Minimal Bootstrap JS replacement for dropdowns and collapsible navbar
+document.addEventListener('DOMContentLoaded', function() {
+    // Handle navbar toggle
+    const navbarToggler = document.querySelector('.navbar-toggler');
+    const navbarCollapse = document.querySelector('.navbar-collapse');
+
+    if (navbarToggler && navbarCollapse) {
+        navbarToggler.addEventListener('click', function() {
+            const isExpanded = navbarCollapse.classList.contains('show');
+            navbarCollapse.classList.toggle('show');
+            // Update ARIA attribute for accessibility
+            this.setAttribute('aria-expanded', !isExpanded);
+        });
+    }
+
+    // Handle dropdown toggles
+    const dropdownToggles = document.querySelectorAll('[data-bs-toggle="dropdown"]');
+    dropdownToggles.forEach(function(toggle) {
+        toggle.addEventListener('click', function(e) {
+            e.preventDefault();
+            const menu = this.nextElementSibling;
+            // Check if next element is a dropdown menu
+            if (menu && menu.classList.contains('dropdown-menu')) {
+                // Close other dropdowns
+                document.querySelectorAll('.dropdown-menu.show').forEach(function(m) {
+                    if (m !== menu) m.classList.remove('show');
+                });
+                menu.classList.toggle('show');
+            }
+        });
+    });
+
+    // Close dropdowns when clicking outside
+    document.addEventListener('click', function(e) {
+        if (!e.target.closest('[data-bs-toggle="dropdown"]')) {
+            document.querySelectorAll('.dropdown-menu.show').forEach(function(menu) {
+                menu.classList.remove('show');
+            });
+        }
+    });
+
+    // Handle alert dismissals
+    const alertCloses = document.querySelectorAll('[data-bs-dismiss="alert"]');
+    alertCloses.forEach(function(btn) {
+        btn.addEventListener('click', function() {
+            const alert = this.closest('.alert');
+            if (alert) {
+                alert.classList.add('hidden');
+            }
+        });
+    });
+});

bemo/templates/layout.html

@@ -6,11 +6,11 @@
 	<meta name="description" content="Bemo - Competitive Programming Platform for Rural Indian High Schools">
 	<meta name="author" content="Kush Bhagat">
 	<title>Bemo 🐄 {{title}}</title>
-	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
-	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.0/font/bootstrap-icons.css">
-	<link href="../static/starter-template.css" rel="stylesheet">
-	<link href="../static/theme.css" rel="stylesheet">
-	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css">
+	<link rel="stylesheet" href="{{ url_for('static', filename='bootstrap.min.css') }}">
+	<link rel="stylesheet" href="{{ url_for('static', filename='bootstrap-icons-minimal.css') }}">
+	<link rel="stylesheet" href="{{ url_for('static', filename='bootstrap-components.css') }}">
+	<link href="{{ url_for('static', filename='starter-template.css') }}" rel="stylesheet">
+	<link href="{{ url_for('static', filename='theme.css') }}" rel="stylesheet">
 	<style type="text/css" media="screen">
 		#editor {
 			position: relative;
@@ -50,7 +50,7 @@
 	<nav class="navbar navbar-expand-lg navbar-light bg-white fixed-top shadow-sm">
 		<div class="container-fluid">
 			<a class="navbar-brand d-flex align-items-center" href="{{url_for('home')}}">
-				<img src="https://upload.wikimedia.org/wikipedia/commons/2/24/Spot_the_cow.gif" width="35" height="35" class="d-inline-block align-top me-2" alt="Bemo Logo">
+				<span style="font-size: 1.5rem; margin-right: 0.5rem;">🐄</span>
 				<span>Bemo</span>
 			</a>
 			<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
@@ -125,7 +125,7 @@
 		{%endblock content%}
 	</div>
 
-	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-	<script src="../static/theme.js"></script>
+	<script src="{{ url_for('static', filename='bootstrap-minimal.js') }}"></script>
+	<script src="{{ url_for('static', filename='theme.js') }}"></script>
 </body>
 </html>