Qoqnoos Template

A beautiful RTL user panel template for Marzban/Marzneshin services with dynamic configuration. Inspired by Marzbanify Template

Features

• 🌙 Dark mode support
• 📱 Fully responsive design
• 🎨 Customizable color scheme and branding
• 🔗 Dynamic content loading
• 📊 Traffic usage visualization
• 📱 QR code generation for easy setup
• 🚀 Ready-to-use configuration
• 🇮🇷 Persian (Farsi) language support
• 🛠️ Easy to customize and extend

Preview

Installation

1. Upload the template file to the server

Choose the version and run the corresponding command.

Marzban version:

sudo wget -O /var/lib/marzban/templates/subscription/index.html https://raw.githubusercontent.com/rezazoom/qoqnoos-template/main/index.html

Marzneshin version:

sudo wget -O /var/lib/marzban/templates/subscription/index.html https://raw.githubusercontent.com/rezazoom/qoqnoos-template/main/index-marzneshin.html

2. Configure the subscription page path

Automatically

Run these commands to set the path:

echo 'CUSTOM_TEMPLATES_DIRECTORY="/var/lib/marzban/templates/"' | sudo tee -a /opt/marzban/.env
echo 'SUBSCRIPTION_PAGE_TEMPLATE="subscription/index.html"' | sudo tee -a /opt/marzban/.env

Manually

Edit the Marzban .env file and add the following lines:

CUSTOM_TEMPLATES_DIRECTORY="/var/lib/marzban/templates/"
SUBSCRIPTION_PAGE_TEMPLATE="subscription/index.html"

3. Restart Marzban

Apply the changes by restarting Marzban:

marzban restart

Configuration

The template is highly configurable through the JavaScript configuration object:

const config = {
    siteName: "My VPN Service",
    logoUrl: "https://example.com/logo.png",
    primaryColor: "#c64e69",
    backgroundImage: "https://example.com/background.jpg",
    supportLink: "https://t.me/supportlink",
    shopLink: "https://example.com/shop",
    welcomeMessage: {
        enabled: true,
        title: "Welcome to our service",
        content: "Your welcome message here..."
    },
    downloadLinks: [
        {
            icon: "bx bxl-android",
            name: "Android App",
            url: "https://play.google.com/store/apps/details?id=com.example.app"
        }
        // Add more download links as needed
    ]
};

Customization

Colors

Edit the CSS variables in the <style> section to change the color scheme:

:root {
    --primary: #c64e69;
    --success: #34d399;
    --warning: #fbbf24;
    --danger: #f87171;
    --gray: #9ca3af;
    --bg-dark: #111827;
    --bg-darker: #0f172a;
    --card-dark: #1e293bcc;
    --text-light: #f8fafc;
    --text-lighter: #e2e8f0;
}

Dependencies

This template uses the following external resources:

• Bootstrap 5 RTL
• Shabnam Font
• Boxicons
• QRCode.js

License

This project is licensed under the MIT License - see the LICENSE file for details.

Contributing

Contributions are welcome! Please open an issue or submit a pull request.