Welcome to the official documentation for the Persian Caesar Team website hosted at persian-caesar.github.io. This is a static single-page website built with HTML, inline CSS, and JavaScript, showcasing the team's history, members, projects, and GitHub repositories. The design features a neon-gold theme with glassmorphism effects for a modern, cyberpunk-inspired look.
This documentation is designed to be comprehensive, covering the structure, features, key components, and usage details. It's optimized for GitHub Markdown rendering. If you're contributing or forking, feel free to expand it! 🚀
The website serves as the online presence for the Persian Caesar Team, an Iranian open-source development team focused on Discord bots and web projects. Key highlights:
- Language & Direction: Persian (Farsi) with RTL (right-to-left) support.
- Theme: Dark background with neon-gold accents, subtle glow animations, and glassmorphism cards for a premium feel.
- Dependencies:
- Google Fonts: Vazirmatn for Persian typography.
- External APIs: GitHub API for fetching repositories.
- External JSON: Fetches from
https://raw.githubusercontent.com/Sobhan-SRZA/Sobhan-SRZA/main/projects.jsonfor custom repo data.
- Tech Stack: Pure HTML5, CSS3 (with CSS variables and keyframes), and vanilla JavaScript (ES6+ for async fetches).
- No Backend/Database: This is a fully static site. No server-side logic, databases, or external dependencies beyond API calls. All data is fetched client-side.
- Deployment: Hosted on GitHub Pages. Simply push to the
gh-pagesbranch or main for auto-deployment.
The site emphasizes the team's journey from 2021, inspired by "Sizar Team" and evolving to "Persian Caesar." It lists team members, projects (including Discord bots), and dynamically loads GitHub repos.
The entire source is contained in a single file: index.html. This keeps it simple for static hosting. Here's the high-level breakdown:
- index.html (Main and only file):
- : Standard HTML5 declaration.
- : Metadata, viewport, description, title, and inline CSS styles.
- : Content sections including header, story, team members, projects, GitHub repos, and footer.
- <script>: Inline JavaScript at the end for fetching and rendering GitHub repos.
No additional files (e.g., no separate CSS/JS files, images, or assets). All styles and scripts are embedded for portability. 📁
The HTML is semantically organized into sections for easy navigation and SEO:
- : Team title and tagline.
<h1>: "Persian Caesar Team" with neon glow animation.<p>: Slogan in Persian.
(Story): History of the team, from 2021 origins to name changes and logo inspirations. (Team Members): List of members with links to their profiles. (Projects): Unordered list of official projects, including links to GitHub or external sites. (GitHub Repos): Dynamic container ( #repo-container) that loads repos via JS.- : Copyright notice.
Utility classes like .rtl, .ltr, .text-center are used for direction and alignment.
All CSS is inline in <style> tag within <head>. It's modularized with comments for clarity:
- @import: Loads Vazirmatn font from Google Fonts.
- :root: CSS variables for theme colors (e.g.,
--neon-gold: #fad815;for easy theming). - Global Resets:
* { box-sizing: border-box; }and body styles for dark gradient background. - @keyframes subtle-glow: Animation for neon effects (used on
<h1>). - Component Styles:
- Headers, sections, cards (glassmorphism with
backdrop-filter: blur(10px);). - Links with hover glow transitions.
- Project lists with hover effects (transform and background change).
- Repo cards in a grid layout (
.repo-list) with strong neon hover (box-shadow and scale). - Code snippets styled with gold backgrounds.
- Headers, sections, cards (glassmorphism with
- Media Queries: None (responsive via viewport meta and flexible layouts like grid).
Key Features in CSS:
- Glassmorphism: Semi-transparent backgrounds with blur for cards.
- Neon Glow: Text shadows and box shadows that animate subtly.
- Transitions: Smooth hovers for interactivity.
Inline <script> at the end of <body>. It's a simple async function to fetch and render repos:
- Constants:
repoContainer: DOM element for rendering.username: "Persian-Caesar" for GitHub API.
- Event Listener:
DOMContentLoadedto run async code. - Fetches:
projects_res: From custom JSON (https://raw.githubusercontent.com/Sobhan-SRZA/Sobhan-SRZA/main/projects.json).git_res: From GitHub API (https://api.github.com/users/${username}/repos).
- Processing:
- Filter repos where
organization === "Persian-Caesar". - Match with GitHub data for stars, forks, and update date.
- Create
.repo-cardelements dynamically with Persian descriptions (fallback to "بدون توضیحات").
- Filter repos where
- Error Handling: Catch block sets error message in container.
- No External Libraries: Pure vanilla JS.
No databases are used. Data is ephemeral and fetched on load. No storage (e.g., localStorage) or persistent state. 🔌
- Responsive Design: Mobile-friendly with grid layouts and flexible padding.
- RTL Support:
dir="rtl"on<html>and utility classes for mixed LTR content (e.g., footer). - Dynamic Content: GitHub repos loaded via API/JSON for real-time updates without redeploying.
- Animations: Subtle neon glow on title and hovers for engagement.
- Accessibility: Semantic HTML, high-contrast colors, and alt-text potential (though no images yet).
- No Commands/Templates: This is a static site, not a bot or CLI. No user-input commands.
- Popular Functions/Tools:
- fetch(): Used twice for API/JSON (async/await pattern).
- document.createElement() & appendChild(): For dynamic repo cards.
- Array methods:
filter(),find(),forEach()for data processing. - Date formatting:
new Date().toLocaleDateString('fa-IR')for Persian dates.
- Data Types/Samples:
- Repo Data (from JSON/API): Objects like
{ name: string, description_fa: string|null, html_url: string, stars: number, forks: number }.- Sample:
{ "name": "DJ-Boy", "description_fa": "ربات پخش موسیقی دیسکورد", "organization": "Persian-Caesar", "stars": 10, "forks": 2 }.
- Sample:
- No Stored Databases: All data is fetched runtime. No schemas, just JSON arrays of objects.
- Repo Data (from JSON/API): Objects like
The site highlights open-source projects, primarily Discord bots. Below is a detailed list of features, commands, and usage for each mentioned bot. These are based on the site's content and linked GitHub repos. (Note: Bots are separate repos; this site only showcases them.)
- Description: Discord bot for music playback with a dedicated control panel.
- Features: Queue management, play/pause/skip, volume control, search from sources like YouTube/Spotify.
- Commands (Prefix:
!or customizable):!play <song/url>: Play a song or add to queue.!pause: Pause current track.!resume: Resume playback.!skip: Skip to next track.!queue: View current queue.!volume <level>: Set volume (0-100).!stop: Clear queue and stop.
- GitHub: Persian-Caesar/DJ-Boy
- Tech: Likely Node.js/Discord.js with music libraries (e.g., ytdl-core).
- Description: Multi-purpose Discord bot for moderation, fun, and utilities.
- Features: Moderation tools (ban/kick/mute), fun commands (memes, games), utility (weather, polls).
- Commands (Prefix:
/or!):/ban @user <reason>: Ban a user./kick @user: Kick a user./mute @user <time>: Mute for duration./poll <question> <options>: Create a poll./meme: Random meme./weather <city>: Get weather info./help: List all commands.
- GitHub: Persian-Caesar/All-For-One-Bot
- Tech: Python or Node.js with Discord API wrappers.
- Description: Complete ticket system for Discord support with dashboard and easy management.
- Features: Create/close tickets, assign staff, transcripts, custom categories.
- Commands (Prefix:
!ticket):!ticket create <reason>: Open a new ticket.!ticket close: Close current ticket.!ticket add @user: Add user to ticket.!ticket transcript: Generate chat log.!ticket setup: Configure bot in server.
- GitHub: Persian-Caesar/Ticker-Boy
- Tech: Likely Discord.js with database (e.g., MongoDB/SQLite) for ticket states.
- aparat.js: Node.js package for Aparat API integration. Features: Video search/upload/download. Usage:
npm install aparat.js. - Website for Arta Omran Varagh: Custom site design (linked externally).
- Discord Bot for Daramet/Awizhe: Management bot for the platform (under development).
No global command templates; each bot has its own prefix/system. Bots may use databases like MongoDB for persistent data (e.g., tickets: { ticket_id: string, user_id: snowflake, status: "open"|"closed", created_at: date }).
- Run Locally: Open
index.htmlin a browser. No build tools needed. - Customize: Edit CSS variables in
:rootfor theme changes. - Add Repos: Update the external
projects.jsonfile for new entries. - Contribute: Fork on GitHub, PR changes. Follow standard Git flow.
- Issues: Report bugs via GitHub Issues. Common: API rate limits on fetches.
For questions, contact team leads via linked profiles. Let's build together! 🌟
© 2021–2026 Persian Caesar Team. All rights reserved.