README فارسی
README فارسی را در ویرایشگر کامل کنید.
README.md
CodeCraft - قالب مدرن پلتفرم آموزش برنامه‌نویسی معرفی CodeCraft یک قالب HTML مدرن، حرفه‌ای و کاملاً واکنش‌گرا (Responsive) برای معرفی پلتفرم‌های آموزش برنامه‌نویسی، بوت‌کمپ‌ها، آکادمی‌های آنلاین و سرویس‌های کدنویسی است. این قالب با طراحی Dark Mode، انیمیشن‌های نرم و رابط کاربری مدرن، تجربه‌ای جذاب و حرفه‌ای برای کاربران فراهم می‌کند. --- ویژگی‌ها - طراحی کاملاً مدرن و حرفه‌ای - رابط کاربری Dark Mode - کاملاً Responsive برای موبایل، تبلت و دسکتاپ - افکت‌های نوری (Glow) و پس‌زمینه Grid - انیمیشن ذرات شناور با کدهای برنامه‌نویسی - بخش Hero جذاب با معرفی پلتفرم - شبیه‌سازی محیط ویرایشگر کد - معرفی قابلیت‌های پلتفرم - نمایش زبان‌های برنامه‌نویسی محبوب - بخش دعوت به ثبت‌نام (CTA) - ناوبری (Navbar) حرفه‌ای - انیمیشن‌های CSS بدون نیاز به کتابخانه خارجی - کدنویسی تمیز، ساختاریافته و قابل توسعه --- تکنولوژی‌های استفاده شده - HTML5 - CSS3 - JavaScript (Vanilla) - Google Fonts --- مناسب برای - پلتفرم‌های آموزش برنامه‌نویسی - آکادمی‌های آنلاین - بوت‌کمپ‌های آموزشی - معرفی استارتاپ‌های فناوری - وب‌سایت‌های توسعه نرم‌افزار - صفحات فرود (Landing Page) - نمونه‌کار (Portfolio) - پروژه‌های شخصی و شرکتی --- امکانات رابط کاربری - طراحی مینیمال و مدرن - کارت‌های تعاملی - دکمه‌های دارای افکت Hover - گرادیانت‌های حرفه‌ای - آیکون‌های جذاب - نمایش آمار کاربران - نمایش زبان‌های برنامه‌نویسی - افکت تایپ و چشمک‌زن مکان‌نما - انیمیشن‌های روان و سبک --- ساختار پروژه CodeCraft/ │ ├── index.html └── README.md --- اجرا فقط فایل "index.html" را در مرورگر باز کنید. یا پروژه را روی هر هاست استاتیک مانند GitHub Pages، Netlify، Vercel یا هر وب‌سرور دیگری قرار دهید. --- شخصی‌سازی به راحتی می‌توانید موارد زیر را تغییر دهید: - رنگ‌بندی قالب - لوگو - متن‌ها - دکمه‌ها - آمار کاربران - زبان‌های برنامه‌نویسی - بخش ویژگی‌ها - انیمیشن‌ها - فونت‌ها - تصاویر و آیکون‌ها --- مزایا - سرعت بارگذاری بالا - بدون وابستگی به فریم‌ورک - کدنویسی خوانا - مناسب توسعه‌های آینده - سئو مناسب - تجربه کاربری روان - طراحی حرفه‌ای و مدرن --- مجوز این پروژه را می‌توانید برای پروژه‌های شخصی یا تجاری، مطابق با مجوزی که برای آن در نظر می‌گیرید، استفاده و شخصی‌سازی کنید. --- اگر این پروژه برای شما مفید بود، با ثبت Star یا اشتراک‌گذاری آن از توسعه پروژه حمایت کنید.
index.html
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CodeCraft - پلتفرم کدنویسی آنلاین</title>
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<style>
:root {
--bg-primary: #0a0a0f;
--bg-secondary: #12121a;
--bg-card: #161620;
--bg-card-hover: #1e1e2e;
--accent-cyan: #00d4ff;
--accent-purple: #a855f7;
--accent-pink: #ec4899;
--accent-green: #22c55e;
--accent-orange: #f97316;
--text-primary: #f8fafc;
--text-secondary: #94a3b8;
--text-muted: #64748b;
--border-color: rgba(255,255,255,0.06);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: 'Inter', sans-serif;
background: var(--bg-primary);
color: var(--text-primary);
min-height: 100vh;
overflow-x: hidden;
}
.bg-grid {
position: fixed;
inset: 0;
background-image:
linear-gradient(rgba(0,212,255,0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,212,255,0.03) 1px, transparent 1px);
background-size: 60px 60px;
pointer-events: none;
z-index: 0;
}
.bg-glow {
position: fixed;
width: 600px;
height: 600px;
border-radius: 50%;
filter: blur(120px);
opacity: 0.15;
pointer-events: none;
z-index: 0;
}
.glow-1 { background: var(--accent-cyan); top: -200px; left: -100px; }
.glow-2 { background: var(--accent-purple); bottom: -200px; right: -100px; }
.glow-3 { background: var(--accent-pink); top: 50%; left: 50%; transform: translate(-50%, -50%); }
.particles {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 1;
overflow: hidden;
}
.particle {
position: absolute;
font-family: 'Fira Code', monospace;
font-size: 12px;
color: rgba(0,212,255,0.15);
animation: float-up linear infinite;
white-space: nowrap;
}
@keyframes float-up {
0% { transform: translateY(100vh) rotate(0deg); opacity: 0; }
10% { opacity: 1; }
90% { opacity: 1; }
100% { transform: translateY(-20vh) rotate(5deg); opacity: 0; }
}
.navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
padding: 16px 40px;
display: flex;
align-items: center;
justify-content: space-between;
background: rgba(10,10,15,0.8);
backdrop-filter: blur(20px);
border-bottom: 1px solid var(--border-color);
}
.logo {
display: flex;
align-items: center;
gap: 12px;
font-family: 'Fira Code', monospace;
font-weight: 700;
font-size: 22px;
color: var(--text-primary);
text-decoration: none;
}
.logo-icon {
width: 40px;
height: 40px;
background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
box-shadow: 0 0 20px rgba(0,212,255,0.3);
}
.nav-links {
display: flex;
gap: 32px;
list-style: none;
}
.nav-links a {
color: var(--text-secondary);
text-decoration: none;
font-size: 14px;
font-weight: 500;
transition: color 0.3s;
position: relative;
}
.nav-links a:hover {
color: var(--accent-cyan);
}
.nav-links a::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 0;
height: 2px;
background: linear-gradient(90deg, var(--accent-cyan), var(--accent-purple));
transition: width 0.3s;
}
.nav-links a:hover::after {
width: 100%;
}
.nav-btns {
display: flex;
gap: 12px;
}
.btn {
padding: 10px 24px;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
border: none;
font-family: 'Inter', sans-serif;
}
.btn-outline {
background: transparent;
color: var(--text-secondary);
border: 1px solid var(--border-color);
}
.btn-outline:hover {
border-color: var(--accent-cyan);
color: var(--accent-cyan);
box-shadow: 0 0 15px rgba(0,212,255,0.1);
}
.btn-primary {
background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
color: white;
box-shadow: 0 4px 20px rgba(0,212,255,0.3);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 30px rgba(0,212,255,0.4);
}
.hero {
position: relative;
z-index: 2;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 120px 40px 80px;
gap: 60px;
}
.hero-content {
max-width: 600px;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
background: rgba(0,212,255,0.08);
border: 1px solid rgba(0,212,255,0.2);
border-radius: 100px;
font-size: 13px;
color: var(--accent-cyan);
margin-bottom: 24px;
font-family: 'Fira Code', monospace;
}
.hero-badge .dot {
width: 8px;
height: 8px;
background: var(--accent-cyan);
border-radius: 50%;
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
.hero h1 {
font-size: 56px;
font-weight: 800;
line-height: 1.1;
margin-bottom: 24px;
letter-spacing: -1px;
}
.hero h1 .gradient-text {
background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple), var(--accent-pink));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero p {
font-size: 18px;
color: var(--text-secondary);
line-height: 1.7;
margin-bottom: 36px;
}
.hero-btns {
display: flex;
gap: 16px;
margin-bottom: 48px;
}
.hero-btns .btn-primary {
padding: 14px 32px;
font-size: 16px;
}
.hero-btns .btn-outline {
padding: 14px 32px;
font-size: 16px;
}
.stats {
display: flex;
gap: 40px;
}
.stat-item h3 {
font-size: 32px;
font-weight: 700;
color: var(--text-primary);
font-family: 'Fira Code', monospace;
}
.stat-item p {
font-size: 14px;
color: var(--text-muted);
margin: 0;
}
.code-editor {
width: 520px;
background: var(--bg-card);
border-radius: 16px;
border: 1px solid var(--border-color);
overflow: hidden;
box-shadow:
0 25px 50px -12px rgba(0,0,0,0.5),
0 0 0 1px rgba(0,212,255,0.1),
0 0 60px rgba(0,212,255,0.05);
position: relative;
}
.code-editor::before {
content: '';
position: absolute;
top: -1px;
left: -1px;
right: -1px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--accent-cyan), var(--accent-purple), transparent);
}
.editor-header {
display: flex;
align-items: center;
gap: 8px;
padding: 14px 18px;
background: rgba(255,255,255,0.02);
border-bottom: 1px solid var(--border-color);
}
.editor-dot {
width: 12px;
height: 12px;
border-radius: 50%;
}
.dot-red { background: #ff5f56; }
.dot-yellow { background: #ffbd2e; }
.dot-green { background: #27c93f; }
.editor-title {
margin-left: 8px;
font-size: 13px;
color: var(--text-muted);
font-family: 'Fira Code', monospace;
}
.editor-body {
padding: 20px;
font-family: 'Fira Code', monospace;
font-size: 13px;
line-height: 1.8;
}
.code-line {
display: flex;
gap: 16px;
}
.line-num {
color: var(--text-muted);
min-width: 24px;
text-align: right;
user-select: none;
}
.code-content {
color: var(--text-secondary);
}
.kw { color: var(--accent-purple); }
.fn { color: var(--accent-cyan); }
.str { color: var(--accent-green); }
.num { color: var(--accent-orange); }
.cm { color: var(--text-muted); }
.cursor {
display: inline-block;
width: 2px;
height: 18px;
background: var(--accent-cyan);
animation: blink 1s infinite;
vertical-align: middle;
margin-left: 2px;
}
@keyframes blink {
0%, 50% { opacity: 1; }
51%, 100% { opacity: 0; }
}
.features {
position: relative;
z-index: 2;
padding: 100px 40px;
text-align: center;
}
.section-header {
margin-bottom: 60px;
}
.section-header h2 {
font-size: 42px;
font-weight: 800;
margin-bottom: 16px;
}
.section-header p {
font-size: 18px;
color: var(--text-secondary);
max-width: 500px;
margin: 0 auto;
}
.features-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
max-width: 1100px;
margin: 0 auto;
}
.feature-card {
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: 16px;
padding: 36px 28px;
text-align: left;
transition: all 0.4s;
position: relative;
overflow: hidden;
}
.feature-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, var(--accent-cyan), var(--accent-purple));
transform: scaleX(0);
transition: transform 0.4s;
}
.feature-card:hover {
background: var(--bg-card-hover);
transform: translateY(-4px);
box-shadow: 0 20px 40px rgba(0,0,0,0.3);
border-color: rgba(0,212,255,0.15);
}
.feature-card:hover::before {
transform: scaleX(1);
}
.feature-icon {
width: 52px;
height: 52px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
margin-bottom: 20px;
}
.feature-card:nth-child(1) .feature-icon { background: rgba(0,212,255,0.1); }
.feature-card:nth-child(2) .feature-icon { background: rgba(168,85,247,0.1); }
.feature-card:nth-child(3) .feature-icon { background: rgba(236,72,153,0.1); }
.feature-card:nth-child(4) .feature-icon { background: rgba(34,197,94,0.1); }
.feature-card:nth-child(5) .feature-icon { background: rgba(249,115,22,0.1); }
.feature-card:nth-child(6) .feature-icon { background: rgba(0,212,255,0.1); }
.feature-card h3 {
font-size: 18px;
font-weight: 700;
margin-bottom: 10px;
}
.feature-card p {
font-size: 14px;
color: var(--text-secondary);
line-height: 1.6;
}
.languages {
position: relative;
z-index: 2;
padding: 80px 40px;
text-align: center;
}
.lang-grid {
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
max-width: 900px;
margin: 40px auto 0;
}
.lang-item {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 24px;
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: 12px;
font-family: 'Fira Code', monospace;
font-size: 14px;
color: var(--text-secondary);
transition: all 0.3s;
cursor: pointer;
}
.lang-item:hover {
border-color: var(--accent-cyan);
color: var(--text-primary);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0,212,255,0.1);
}
.lang-icon {
font-size: 20px;
}
.cta {
position: relative;
z-index: 2;
padding: 100px 40px;
text-align: center;
}
.cta-box {
max-width: 700px;
margin: 0 auto;
padding: 60px 40px;
background: linear-gradient(135deg, rgba(0,212,255,0.05), rgba(168,85,247,0.05));
border: 1px solid rgba(0,212,255,0.15);
border-radius: 24px;
position: relative;
overflow: hidden;
}
.cta-box::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(0,212,255,0.03) 0%, transparent 60%);
animation: rotate 20s linear infinite;
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.cta-box h2 {
font-size: 36px;
font-weight: 800;
margin-bottom: 16px;
position: relative;
}
.cta-box p {
font-size: 16px;
color: var(--text-secondary);
margin-bottom: 32px;
position: relative;
}
.cta-box .btn-primary {
padding: 16px 40px;
font-size: 16px;
position: relative;
}
.footer {
position: relative;
z-index: 2;
padding: 40px;
text-align: center;
border-top: 1px solid var(--border-color);
color: var(--text-muted);
font-size: 14px;
}
@media (max-width: 1024px) {
.hero { flex-direction: column; text-align: center; }
.hero-content { max-width: 100%; }
.code-editor { width: 100%; max-width: 520px; }
.stats { justify-content: center; }
.features-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
.navbar { padding: 12px 20px; }
.nav-links { display: none; }
.hero h1 { font-size: 36px; }
.features-grid { grid-template-columns: 1fr; }
.hero { padding: 100px 20px 60px; }
}
</style>
</head>
<body>
<div class="bg-grid"></div>
<div class="bg-glow glow-1"></div>
<div class="bg-glow glow-2"></div>
<div class="bg-glow glow-3"></div>
<div class="particles" id="particles"></div>
<!-- Navbar -->
<nav class="navbar">
<a href="#" class="logo">
<div class="logo-icon"></></div>
CodeCraft
</a>
<ul class="nav-links">
<li><a href="#">صفحه اصلی</a></li>
<li><a href="#">دوره‌ها</a></li>
<li><a href="#">تمرینات</a></li>
<li><a href="#">مسابقات</a></li>
<li><a href="#">مقالات</a></li>
</ul>
<div class="nav-btns">
<button class="btn btn-outline">ورود</button>
<button class="btn btn-primary">ثبت‌نام</button>
</div>
</nav>
<!-- Hero -->
<section class="hero">
<div class="hero-content">
<div class="hero-badge">
<span class="dot"></span>
پلتفرم کدنویسی آنلاین
</div>
<h1>
کد بزن، یاد بگیر،<br>
<span class="gradient-text">رشد کن</span>
</h1>
<p>
با محیط توسعه آنلاین پیشرفته ما، کدنویسی را از هر جایی و با هر زبانی تجربه کن.
از پایتون تا جاوااسکریپت، همه چیز در یک کلیک فاصله است.
</p>
<div class="hero-btns">
<button class="btn btn-primary">شروع کدنویسی رایگان</button>
<button class="btn btn-outline">مشاهده دوره‌ها</button>
</div>
<div class="stats">
<div class="stat-item">
<h3>50K+</h3>
<p>کاربر فعال</p>
</div>
<div class="stat-item">
<h3>120+</h3>
<p>دوره آموزشی</p>
</div>
<div class="stat-item">
<h3>1M+</h3>
<p>خط کد اجرا شده</p>
</div>
</div>
</div>
<div class="code-editor">
<div class="editor-header">
<div class="editor-dot dot-red"></div>
<div class="editor-dot dot-yellow"></div>
<div class="editor-dot dot-green"></div>
<span class="editor-title">main.py</span>
</div>
<div class="editor-body">
<div class="code-line">
<span class="line-num">1</span>
<span class="code-content"><span class="kw">def</span> <span class="fn">fibonacci</span>(n):</span>
</div>
<div class="code-line">
<span class="line-num">2</span>
<span class="code-content"> <span class="kw">if</span> n <= <span class="num">1</span>:</span>
</div>
<div class="code-line">
<span class="line-num">3</span>
<span class="code-content"> <span class="kw">return</span> n</span>
</div>
<div class="code-line">
<span class="line-num">4</span>
<span class="code-content"> <span class="kw">return</span> <span class="fn">fibonacci</span>(n-<span class="num">1</span>) + <span class="fn">fibonacci</span>(n-<span class="num">2</span>)</span>
</div>
<div class="code-line">
<span class="line-num">5</span>
<span class="code-content"></span>
</div>
<div class="code-line">
<span class="line-num">6</span>
<span class="code-content"><span class="cm"># اجرای کد</span></span>
</div>
<div class="code-line">
<span class="line-num">7</span>
<span class="code-content">result = <span class="fn">fibonacci</span>(<span class="num">10</span>)</span>
</div>
<div class="code-line">
<span class="line-num">8</span>
<span class="code-content"><span class="fn">print</span>(<span class="str">f"نتیجه: </span>{result}<span class="str">"</span>)<span class="cursor"></span></span>
</div>
</div>
</div>
</section>
<!-- Features -->
<section class="features">
<div class="section-header">
<h2>چرا <span class="gradient-text">CodeCraft</span>؟</h2>
<p>همه ابزارهایی که برای تبدیل شدن به یک برنامه‌نویس حرفه‌ای نیاز داری</p>
</div>
<div class="features-grid">
<div class="feature-card">
<div class="feature-icon">⚡</div>
<h3>محیط آنلاین</h3>
<p>کامپایلر و مفسر آنلاین با پشتیبانی از ۲۰+ زبان برنامه‌نویسی بدون نیاز به نصب</p>
</div>
<div class="feature-card">
<div class="feature-icon">🎯</div>
<h3>تمرین تعاملی</h3>
<p>بیش از ۵۰۰ تمرین برنامه‌نویسی با سطح‌بندی از مبتدی تا پیشرفته</p>
</div>
<div class="feature-card">
<div class="feature-icon">🏆</div>
<h3>مسابقات هفتگی</h3>
<p>شرکت در مسابقات کدنویسی و رقابت با برنامه‌نویسان از سراسر دنیا</p>
</div>
<div class="feature-card">
<div class="feature-icon">👥</div>
<h3>کدنویسی گروهی</h3>
<p>ویرایش همزمان کد با دوستان و همکاران به صورت real-time</p>
</div>
<div class="feature-card">
<div class="feature-icon">📊</div>
<h3>تحلیل عملکرد</h3>
<p>گزارش دقیق از پیشرفت، سرعت کدنویسی و نقاط قوت و ضعف</p>
</div>
<div class="feature-card">
<div class="feature-icon">🎓</div>
<h3>مدرک معتبر</h3>
<p>دریافت گواهینامه پایان دوره با اعتبار بین‌المللی</p>
</div>
</div>
</section>
<!-- Languages -->
<section class="languages">
<div class="section-header">
<h2>زبان‌های <span class="gradient-text">پشتیبانی شده</span></h2>
<p>از محبوب‌ترین زبان‌های برنامه‌نویسی تا تکنولوژی‌های روز</p>
</div>
<div class="lang-grid">
<div class="lang-item"><span class="lang-icon">🐍</span> Python</div>
<div class="lang-item"><span class="lang-icon">📜</span> JavaScript</div>
<div class="lang-item"><span cla
نظرات (0)
هنوز نظری نیست.