Skip to content

feat: بناء الواجهة الأمامية لمنصة إدوفيا التعليمية #286

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
abdeak5 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: بناء الواجهة الأمامية لمنصة إدوفيا التعليمية #286

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
73 changes: 73 additions & 0 deletions courses.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>استعراض الدورات - منصة إدوفيا</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>

<header class="main-header">
<div class="container">
<h1 class="logo">إدوفيا</h1>
<nav class="main-nav">
<ul>
<li><a href="landing.html">الرئيسية</a></li>
<li><a href="courses.html">الدورات</a></li>
<li><a href="index.html">تسجيل الدخول</a></li>
</ul>
</nav>
</div>
</header>

<main>
<div class="container">
<div class="page-header" style="text-align: right; margin-bottom: 40px;">
<h2 style="font-size: 2.2rem; color: #023e8a; margin-bottom: 5px;">استكشف جميع دوراتنا</h2>
<p style="font-size: 1.1rem; color: #555;">اختر الدورة التي تناسبك وابدأ التعلم اليوم.</p>
</div>

<section class="courses-grid">
<div class="grid-container">
<!-- Course Card 1 -->
<div class="course-card">
<img src="images/course1.jpg" alt="صورة دورة">
<h4>مقدمة في تطوير الويب</h4>
<p>تعلم أساسيات HTML, CSS, و JavaScript لبناء مواقع ويب تفاعلية.</p>
<a href="#" class="btn-primary">تفاصيل الدورة</a>
</div>
<!-- Course Card 2 -->
<div class="course-card">
<img src="images/course2.jpg" alt="صورة دورة">
<h4>التصميم الجرافيكي للمبتدئين</h4>
<p>اكتشف عالم التصميم وتعلم استخدام الأدوات الأساسية لإنشاء تصاميم مذهلة.</p>
<a href="#" class="btn-primary">تفاصيل الدورة</a>
</div>
<!-- Course Card 3 -->
<div class="course-card">
<img src="images/course3.jpg" alt="صورة دورة">
<h4>علوم البيانات باستخدام بايثون</h4>
<p>انطلق في عالم تحليل البيانات وتعلم الآلة باستخدام مكتبات بايثون الشهيرة.</p>
<a href="#" class="btn-primary">تفاصيل الدورة</a>
</div>
<!-- Course Card 4 -->
<div class="course-card">
<img src="images/course4.jpg" alt="صورة دورة">
<h4>التسويق الرقمي الشامل</h4>
<p>أتقن استراتيجيات التسويق عبر وسائل التواصل الاجتماعي ومحركات البحث.</p>
<a href="#" class="btn-primary">تفاصيل الدورة</a>
</div>
</div>
</section>
</div>
</main>

<footer class="main-footer">
<div class="container">
<p>&copy; 2024 إدوفيا. جميع الحقوق محفوظة.</p>
</div>
</footer>

</body>
</html>
236 changes: 236 additions & 0 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,236 @@
/* خطوط وألوان */
@import url('https://fonts.googleapis.com/css2?family=Cairo&display=swap');

/* الأنماط العامة */
body {
font-family: 'Cairo', sans-serif;
background: #f5f8ff;
margin: 0;
padding: 0;
color: #333;
display: flex;
flex-direction: column;
min-height: 100vh;
}

.container {
width: 90%;
max-width: 1100px;
margin: 0 auto;
}

/* نمط صفحة تسجيل الدخول */
.auth-body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #f5f8ff;
}

.auth-container {
background: white;
padding: 30px 40px;
border-radius: 12px;
box-shadow: 0 8px 25px rgba(2, 62, 138, 0.2);
width: 350px;
max-width: 90vw;
text-align: center;
color: #023e8a;
}
.auth-container h2 {
margin-bottom: 25px;
font-weight: 700;
font-size: 1.6rem;
}
.auth-container input[type="email"],
.auth-container input[type="password"],
.auth-container input[type="text"] {
width: 100%;
padding: 12px 15px;
margin: 12px 0 20px;
border: 2px solid #90caf9;
border-radius: 8px;
font-size: 1rem;
transition: border-color 0.3s;
}
.auth-container input:focus {
outline: none;
border-color: #0077cc;
box-shadow: 0 0 6px #0077ccaa;
}
.auth-container button {
background-color: #0077cc;
color: white;
border: none;
padding: 14px;
width: 100%;
font-size: 1.1rem;
border-radius: 8px;
cursor: pointer;
transition: background-color 0.3s;
font-weight: 600;
}
.auth-container button:hover {
background-color: #005fa3;
}
.toggle-link {
margin-top: 18px;
color: #0077cc;
cursor: pointer;
font-weight: 600;
user-select: none;
}
.toggle-link:hover {
text-decoration: underline;
}
.message {
margin-bottom: 15px;
font-weight: 600;
color: #d00000;
}

/* Header */
.main-header {
background: white;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
padding: 10px 0;
width: 100%;
}
.main-header .container {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
color: #0077cc;
font-size: 1.8rem;
font-weight: 700;
margin: 0;
}
.main-nav ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
}
.main-nav a {
color: #023e8a;
text-decoration: none;
font-size: 1rem;
padding: 10px 15px;
font-weight: 600;
transition: color 0.3s;
}
.main-nav a:hover, .main-nav a.active {
color: #0077cc;
}

/* Main Content */
main {
flex: 1;
padding: 40px 0;
}
.hero {
text-align: center;
padding: 60px 0;
}
.hero h2 {
font-size: 2.5rem;
color: #023e8a;
margin-bottom: 20px;
}
.hero p {
font-size: 1.2rem;
color: #555;
margin-bottom: 30px;
}
.btn-primary {
background-color: #0077cc;
color: white;
padding: 15px 30px;
text-decoration: none;
border-radius: 8px;
font-size: 1.1rem;
font-weight: 600;
transition: background-color 0.3s;
}
.btn-primary:hover {
background-color: #005fa3;
}

/* Footer */
.main-footer {
background: #023e8a;
color: white;
text-align: center;
padding: 20px 0;
width: 100%;
}

/* Dashboard */
.dashboard-header {
text-align: right;
margin-bottom: 40px;
}
.dashboard-header h2 {
font-size: 2.2rem;
color: #023e8a;
margin-bottom: 5px;
}
.dashboard-header p {
font-size: 1.1rem;
color: #555;
}

.courses-grid h3 {
font-size: 1.8rem;
color: #023e8a;
margin-bottom: 25px;
text-align: right;
border-bottom: 2px solid #0077cc;
padding-bottom: 10px;
}

.grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 25px;
text-align: right;
}

.course-card {
background: white;
border-radius: 12px;
box-shadow: 0 5px 15px rgba(0,0,0,0.08);
overflow: hidden;
transition: transform 0.3s, box-shadow 0.3s;
}
.course-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}
.course-card img {
width: 100%;
height: 180px;
object-fit: cover;
background-color: #eee; /* Placeholder color */
}
.course-card h4 {
font-size: 1.3rem;
color: #023e8a;
margin: 20px 20px 10px;
}
.course-card p {
font-size: 0.95rem;
color: #555;
padding: 0 20px;
line-height: 1.6;
margin-bottom: 20px;
}
.course-card .btn-primary {
display: block;
width: calc(100% - 40px);
margin: 0 auto 20px;
text-align: center;
}
61 changes: 61 additions & 0 deletions dashboard.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>لوحة التحكم - منصة إدوفيا</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>

<header class="main-header">
<div class="container">
<h1 class="logo">إدوفيا</h1>
<nav class="main-nav">
<ul>
<li><a href="dashboard.html">لوحة التحكم</a></li>
<li><a href="courses.html">استعراض الدورات</a></li>
<li><a href="index.html" id="logout-btn">تسجيل الخروج</a></li>
</ul>
</nav>
</div>
</header>

<main>
<div class="container">
<div class="dashboard-header">
<h2>مرحباً بك مجدداً!</h2>
<p>واصل رحلتك التعليمية من حيث توقفت.</p>
</div>

<section class="courses-grid" id="my-courses">
<h3>دوراتي المسجلة</h3>
<div class="grid-container">
<!-- Course Card 1 -->
<div class="course-card">
<img src="images/course1.jpg" alt="صورة دورة">
<h4>مقدمة في تطوير الويب</h4>
<p>تعلم أساسيات HTML, CSS, و JavaScript لبناء مواقع ويب تفاعلية.</p>
<a href="#" class="btn-primary">أكمل الدورة</a>
</div>
<!-- Course Card 2 -->
<div class="course-card">
<img src="images/course2.jpg" alt="صورة دورة">
<h4>التصميم الجرافيكي للمبتدئين</h4>
<p>اكتشف عالم التصميم وتعلم استخدام الأدوات الأساسية لإنشاء تصاميم مذهلة.</p>
<a href="#" class="btn-primary">أكمل الدورة</a>
</div>
<!-- Add more cards as needed -->
</div>
</section>
</div>
</main>

<footer class="main-footer">
<div class="container">
<p>&copy; 2024 إدوفيا. جميع الحقوق محفوظة.</p>
</div>
</footer>

</body>
</html>
23 changes: 23 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>منصة إدوفيا - تسجيل الدخول والتسجيل</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body class="auth-body">
<div class="auth-container" id="auth-container">
<h2 id="form-title">تسجيل الدخول</h2>
<div class="message" id="message"></div>
<form id="auth-form">
<input type="email" id="email" placeholder="البريد الإلكتروني" required />
<input type="password" id="password" placeholder="كلمة المرور" required />
<button type="submit" id="submit-btn">دخول</button>
</form>
<div class="toggle-link" id="toggle-form">ليس لديك حساب؟ سجل الآن</div>
</div>

<script src="js/auth.js"></script>
</body>
</html>
Loading