e9899d2e6d
Some checks failed
Android CI Build / check (push) Has been cancelled
Android CI Build / package-apks (push) Has been cancelled
Docs Deploy / build (push) Has been cancelled
Module Market Check / Validate modules/ (push) Has been cancelled
Module Market Publish / Generate submissions.json (push) Has been cancelled
Docs Deploy / deploy (push) Has been cancelled
- Package rename com.webtoapp -> br.com.drukstech.codeapp - Product rename WebToApp/web-to-app -> DruksCode/drukscode - Design system Wta* -> Dkc* - applicationId br.com.drukstech.codeapp (.play for gplay flavor) - rootProject.name DruksCode - Fresh git history (upstream kept as remote for sync)
309 lines
8.2 KiB
HTML
309 lines
8.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ar" dir="rtl">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
|
|
<title>وثائق MkDocs</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box
|
|
}
|
|
|
|
:root {
|
|
--bg: #0a0a1a;
|
|
--card: rgba(255, 255, 255, 0.04);
|
|
--border: rgba(255, 255, 255, 0.07);
|
|
--text: #f0f0ff;
|
|
--text2: rgba(240, 240, 255, 0.55);
|
|
--text3: rgba(240, 240, 255, 0.3);
|
|
--teal: #14b8a6;
|
|
--radius: 14px
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Tahoma, sans-serif;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
min-height: 100vh;
|
|
direction: rtl
|
|
}
|
|
|
|
body::before {
|
|
content: '';
|
|
position: fixed;
|
|
top: -40%;
|
|
left: -40%;
|
|
width: 180%;
|
|
height: 180%;
|
|
background: radial-gradient(ellipse at 50% 20%, rgba(20, 184, 166, 0.06) 0%, transparent 55%);
|
|
pointer-events: none
|
|
}
|
|
|
|
.c {
|
|
max-width: 460px;
|
|
margin: 0 auto;
|
|
padding: 0 14px 32px;
|
|
position: relative;
|
|
z-index: 1
|
|
}
|
|
|
|
.hero {
|
|
text-align: center;
|
|
padding: 40px 0 32px
|
|
}
|
|
|
|
.hero-icon {
|
|
font-size: 48px;
|
|
margin-bottom: 12px;
|
|
animation: float 3s ease-in-out infinite
|
|
}
|
|
|
|
@keyframes float {
|
|
|
|
0%,
|
|
100% {
|
|
transform: translateY(0)
|
|
}
|
|
|
|
50% {
|
|
transform: translateY(-8px)
|
|
}
|
|
}
|
|
|
|
.hero h1 {
|
|
font-size: 28px;
|
|
font-weight: 800;
|
|
background: linear-gradient(135deg, #14b8a6, #2dd4bf);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
margin-bottom: 8px
|
|
}
|
|
|
|
.hero p {
|
|
font-size: 14px;
|
|
color: var(--text2);
|
|
line-height: 1.6;
|
|
max-width: 320px;
|
|
margin: 0 auto
|
|
}
|
|
|
|
.badge-row {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
margin-top: 16px;
|
|
flex-wrap: wrap
|
|
}
|
|
|
|
.badge {
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
padding: 4px 12px;
|
|
border-radius: 20px;
|
|
background: var(--card);
|
|
border: 1px solid var(--border);
|
|
color: var(--text2)
|
|
}
|
|
|
|
.badge.active {
|
|
background: rgba(20, 184, 166, 0.1);
|
|
color: var(--teal)
|
|
}
|
|
|
|
.cards {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 10px;
|
|
margin-bottom: 16px
|
|
}
|
|
|
|
.card {
|
|
background: var(--card);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
padding: 18px;
|
|
cursor: pointer;
|
|
transition: all .2s
|
|
}
|
|
|
|
.card:active {
|
|
transform: scale(.97)
|
|
}
|
|
|
|
.card-icon {
|
|
font-size: 24px;
|
|
margin-bottom: 10px
|
|
}
|
|
|
|
.card-title {
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
margin-bottom: 4px
|
|
}
|
|
|
|
.card-desc {
|
|
font-size: 12px;
|
|
color: var(--text2);
|
|
line-height: 1.5
|
|
}
|
|
|
|
.section {
|
|
background: var(--card);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
padding: 18px;
|
|
margin-bottom: 14px
|
|
}
|
|
|
|
.section-h {
|
|
font-size: 15px;
|
|
font-weight: 700;
|
|
margin-bottom: 14px
|
|
}
|
|
|
|
.code {
|
|
background: rgba(0, 0, 0, 0.4);
|
|
border-radius: 8px;
|
|
padding: 12px 14px;
|
|
font-family: monospace;
|
|
font-size: 12px;
|
|
color: #2dd4bf;
|
|
margin: 8px 0;
|
|
direction: ltr;
|
|
text-align: left
|
|
}
|
|
|
|
.step {
|
|
display: flex;
|
|
gap: 12px;
|
|
padding: 12px 0;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.03)
|
|
}
|
|
|
|
.step:last-child {
|
|
border: none
|
|
}
|
|
|
|
.step-num {
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: 8px;
|
|
background: rgba(20, 184, 166, 0.1);
|
|
color: var(--teal);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 12px;
|
|
font-weight: 800;
|
|
flex-shrink: 0
|
|
}
|
|
|
|
.step-info {
|
|
flex: 1
|
|
}
|
|
|
|
.step-title {
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
margin-bottom: 2px
|
|
}
|
|
|
|
.ft {
|
|
text-align: center;
|
|
padding: 16px
|
|
}
|
|
|
|
.ft-b {
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
color: var(--text3);
|
|
padding: 5px 12px;
|
|
border-radius: 20px;
|
|
background: rgba(20, 184, 166, 0.04);
|
|
border: 1px solid rgba(20, 184, 166, 0.08)
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(16px)
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0)
|
|
}
|
|
}
|
|
|
|
.card,
|
|
.section {
|
|
animation: fadeIn .5s ease backwards
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="c">
|
|
<div class="hero">
|
|
<div class="hero-icon">📗</div>
|
|
<h1>وثائق MkDocs</h1>
|
|
<p>أنشئ وثائق المشروع بـ Markdown مع سمة Material</p>
|
|
<div class="badge-row"><span class="badge active">Material</span><span class="badge">Python</span><span
|
|
class="badge">Markdown</span></div>
|
|
</div>
|
|
<div class="cards">
|
|
<div class="card">
|
|
<div class="card-icon">🚀</div>
|
|
<div class="card-title">بداية سريعة</div>
|
|
<div class="card-desc">إعداد الوثائق في 5 دقائق</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-icon">🎨</div>
|
|
<div class="card-title">سمة Material</div>
|
|
<div class="card-desc">تصميم عصري ووضع داكن</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-icon">🔍</div>
|
|
<div class="card-title">البحث</div>
|
|
<div class="card-desc">محرك بحث نصي مدمج</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-icon">📱</div>
|
|
<div class="card-title">متجاوب</div>
|
|
<div class="card-desc">دعم مثالي للهاتف</div>
|
|
</div>
|
|
</div>
|
|
<div class="section" style="animation-delay:.3s">
|
|
<div class="section-h">⚡ البداية السريعة</div>
|
|
<div class="step">
|
|
<div class="step-num">1</div>
|
|
<div class="step-info">
|
|
<div class="step-title">تثبيت MkDocs</div>
|
|
<div class="code">pip install mkdocs-material</div>
|
|
</div>
|
|
</div>
|
|
<div class="step">
|
|
<div class="step-num">2</div>
|
|
<div class="step-info">
|
|
<div class="step-title">إنشاء مشروع</div>
|
|
<div class="code">mkdocs new my-docs && cd my-docs</div>
|
|
</div>
|
|
</div>
|
|
<div class="step">
|
|
<div class="step-num">3</div>
|
|
<div class="step-info">
|
|
<div class="step-title">معاينة</div>
|
|
<div class="code">mkdocs serve</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="ft">
|
|
<div class="ft-b">📗 MkDocs Material · مقدم من WebToApp</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
|
|
</html> |