🌌 ModderUI + ModderOS Core

Deep Blue Liquid Glass UI Framework with Auto-Inject System Engine

Version: 4.0
Author: @modderboy

ModderUI is a next-generation Liquid Glass UI kit designed for premium dashboards, super-apps, and macOS/iOS-inspired systems.
ModderOS Core is the JavaScript engine that powers menus, modals, context actions, system clock, auto-inject features, and desktop-like interactions.

Together they form a complete UI + UX System Framework.

---

🇬🇧 English Version

✨ Features (UI Layer — ModderUI)

• Liquid Glass components (blur, gradients, glow)
• macOS/iOS-style top bar & sidebar
• 3D interactive card engine
• Floating Dock (iOS-style)
• Calendar widget
• WiFi Loader (animated)
• Modal system with smooth scale animations
• Native Dark Mode
• Full palette + variable-driven theming
• Responsive grid system
• Neumorphic + glass hybrid effects

---

⚙️ Features (System Layer — ModderOS Core JS Engine)

• Auto-inject menus (context & edit menu, even if HTML doesn’t contain them)
• Error-free initialization (null checks everywhere)
• Smart Context Menu (right-click tracking + bounds checking)
• Smart Edit Menu (selection tracking + position auto alignment)
• Modal Controller (open / close with animations)
• System Clock rendering
• Password visibility toggle
• Global click handler for UI cleanup
• App toggle endpoint support (Django-ready)
• CSRF-safe requests

---

📦 Folder Structure

modderui/
│
├── modderui.css          # Full CSS UI Framework
├── main.js               # ModderOS Core System Engine
├── README.md
└── demo/
    └── index.html        # Live example

---

# 🚀 Installation

1. Add CSS

<link rel="stylesheet" href="modderui.css">

2. Add JS

<script src="main.js" defer></script>

3. Django Example

<link href="{% static 'css/modderui.css' %}" rel="stylesheet">
<script src="{% static 'js/main.js' %}" defer></script>

---

# 🧪 Usage Examples

Glass Card

<section class="card">
    <h1>Welcome to ModderUI</h1>
</section>

Primary Button

<button class="primary">Continue</button>

Floating Dock

<div class="floating-dock">
    <div class="dock-icon active">🏠</div>
    <div class="dock-icon">⚙️</div>
</div>

## Context Menu (Auto Injected) No HTML needed. The JS engine creates it automatically.

Modal Trigger

<button onclick="toggleModal('settingsModal')">Open Settings</button>

---

🔧 System Engine API (ModderOS Core)

toggleModal(id)

Opens or closes a modal with animated scaling.

getCookie(name)

Django-compatible CSRF cookie extraction.

Auto-Injected Menus

Generated if missing:

Context Menu:

• Refresh
• Back
• Settings
• Logout

Edit Menu:

• Copy
• Paste
• Cut

No HTML required — system engine handles everything.

---

🎨 Theming

Modify palette via CSS root variables:

--c-electric: #0d00a4;
--c-navy: #22007c;
--glass-blur: blur(30px);

All components inherit theme automatically.

---

📊 Suitable For:

• Super Apps
• Admin Panels
• Dashboards
• Authentication Systems
• Desktop-like Web Apps
• ModderOS ecosystem

---

🇺🇿 O‘zbekcha Versiya

✨ UI Xususiyatlari (ModderUI)

• Liquid Glass dizayn (blur + shaffof)
• macOS/iOS uslubidagi menyu bar
• 3D karta effektlari
• Floating Dock
• Kalendar vidjeti
• WiFi loader animatsiyasi
• Modal tizimi
• To‘liq Dark Mode
• O‘zgaruvchilar orqali boshqariladigan tema
• Responsive Grid sistemasi

---

⚙️ JS Xususiyatlari (ModderOS Core)

• HTML bo‘lmasa ham menyularni avto-yaratish
• Xatosiz ishlaydigan null-check asosli kod
• Smart Context Menu (o‘ng bosishda joylashuvni aniqlash)
• Smart Edit Menu (matn tanlanganda chiqadi)
• Modal boshqaruvi
• Soat funksiyasi
• Parolni ko‘rsatish tugmasi
• Django CSRF qo‘llab-quvvatlashi
• Global UI tozalash mexanizmi

---

🧭 Foydalanish

Glass Card:

<section class="card">Salom ModderUI!</section>

Tugma:

<button class="primary">Davom etish</button>

Modal:

<button onclick="toggleModal('modal1')">Ochish</button>

---

👨‍💻 Developer

Made with ❤️ by @modderboy
ModderOS · ModderUI Ecosystem