Skip to content

Commit

Permalink
upgrade version 1.1
Browse files Browse the repository at this point in the history 
upgrade version 1.1 fix bugs
  • Loading branch information
@Munir86
Munir86 authored Sep 9, 2024
1 parent 5455568 commit 0eeda20
Show file tree
Hide file tree
Showing 3 changed files with 381 additions and 359 deletions.
365 changes: 6 additions & 359 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,277 +4,16 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>تطبيق حساب درجات الطلاب</title>
<link rel="stylesheet" href="styles.css"> <!-- رابط ملف CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
/* نفس التنسيقات السابقة بدون تغييرات */
body {
font-family: Arial, sans-serif;
background-color: #2b2b2b; /* الوضع الداكن كإعداد افتراضي */
color: #cfcfcf;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
min-height: 100vh;
direction: rtl;
text-align: right;
transition: background-color 0.3s, color 0.3s;
}

.header {
background-color: #1e1e1e;
color: #cfcfcf;
padding: 10px 20px;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.nav-menu {
display: flex;
gap: 20px;
}

.nav-menu a {
color: #cfcfcf;
text-decoration: none;
display: flex;
align-items: center;
transition: color 0.3s;
}

.nav-menu a:hover {
color: #4caf50; /* لون عند التمرير */
}

.nav-menu a i {
margin-left: 8px;
}

.theme-toggle {
background-color: #555;
border: none;
border-radius: 50%;
cursor: pointer;
transition: background-color 0.3s;
padding: 5px;
display: flex;
align-items: center;
justify-content: center;
}

.theme-toggle i {
font-size: 24px;
color: #fff;
transition: opacity 0.3s;
}

.theme-toggle .hidden {
opacity: 0;
}

.container {
background-color: #3a3a3a;
color: #cfcfcf;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
width: 90%;
max-width: 400px;
margin: auto;
transition: background-color 0.3s, color 0.3s;
position: relative;
margin-top: 10px;
}

h1, h2 {
text-align: center;
margin-bottom: 20px;
}

label {
display: block;
margin: 10px 0 5px;
}

input {
width: calc(100% - 20px);
padding: 8px;
margin-bottom: 10px;
background-color: #555;
color: #cfcfcf;
border: 1px solid #666;
border-radius: 4px;
}

button {
background-color: #444;
color: #fff;
border: none;
border-radius: 4px;
padding: 10px 15px;
cursor: pointer;
margin-top: 10px;
transition: background-color 0.3s;
}

button:hover {
background-color: #666;
}

.course-section {
display: none;
margin-top: 20px;
border: 1px solid transparent; /* لإضافة إطار عند تنشيط القسم */
}

.course-section.active {
border: 2px solid #4caf50; /* إطار مميز للقسم النشط */
}

#courseSelect {
width: 100%;
padding: 10px;
margin-bottom: 20px;
background-color: #555;
color: #cfcfcf;
border-radius: 4px;
border: 1px solid #666;
}

.result {
margin-top: 15px;
padding: 10px;
border-radius: 4px;
font-weight: bold;
text-align: center;
aria-live: polite;
}

.result.success {
background-color: #388e3c;
}

.result.warning {
background-color: #f57c00;
}

.result.failure {
background-color: #d32f2f;
}

.footer {
padding: 20px 0;
background-color: #1e1e1e;
color: #cfcfcf;
text-align: center;
transition: background-color 0.3s, color 0.3s;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.social-icons {
display: flex;
justify-content: center;
margin-bottom: 10px;
}

.social-icons a {
margin: 0 10px;
text-decoration: none;
color: white;
}

.social-icons a i {
font-size: 24px;
}

.dark-mode .header {
background-color: #1e1e1e;
}

.dark-mode .container {
background-color: #3a3a3a;
color: #cfcfcf;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
}

.dark-mode input {
background-color: #555;
color: #cfcfcf;
border: 1px solid #666;
}

.dark-mode #courseSelect {
background-color: #555;
color: #cfcfcf;
border: 1px solid #666;
}

.dark-mode .result.success {
background-color: #388e3c;
}

.dark-mode .result.warning {
background-color: #f57c00;
}

.dark-mode .result.failure {
background-color: #d32f2f;
}

.light-mode {
background-color: #2c3e50; /* الأزرق الداكن للمظهر الفاتح */
color: #ecf0f1; /* اللون الأبيض الفاتح للنص */
}

.light-mode .container {
background-color: #34495e; /* لون أفتح قليلاً من الخلفية */
color: #ecf0f1;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.light-mode input {
background-color: #7f8c8d; /* لون مدخلات أفتح قليلاً */
color: #ecf0f1;
border: 1px solid #95a5a6; /* حدود أفتح قليلاً */
}

.light-mode #courseSelect {
background-color: #7f8c8d; /* لون مدخلات أفتح قليلاً */
color: #ecf0f1;
border: 1px solid #95a5a6; /* حدود أفتح قليلاً */
}

.light-mode .result.success {
background-color: #27ae60; /* لون النجاح في المظهر الفاتح */
}

.light-mode .result.warning {
background-color: #e67e22; /* لون التنبيه في المظهر الفاتح */
}

.light-mode .result.failure {
background-color: #e74c3c; /* لون الفشل في المظهر الفاتح */
}

.light-mode .header, .light-mode .footer {
background-color: #1a252f; /* لون الفوتر والهيدر في المظهر الفاتح */
color: #ecf0f1; /* اللون الأبيض الفاتح للنص */
}

.light-mode .footer {
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
</style>
</head>
<body class="dark-mode">
<div class="header">
<nav class="nav-menu">
<a href="https://www.th3frontier.com"><i class="fas fa-home"></i>الرئيسية</a>
<a href="https://www.th3frontier.com/search/label/%D8%AA%D8%B7%D8%A8%D9%8A%D9%82%D8%A7%D8%AA"><i class="fas fa-mobile-alt"></i> تطبيقات</a> <!-- تغيير الأيقونة لاحقًا -->
<a href="https://www.th3frontier.com/search/label/%D8%AA%D9%82%D9%86%D9%8A%D8%A7%D8%AA"><i class="fas fa-cogs"></i> تقنيات</a> <!-- تغيير الأيقونة لاحقًا -->
<a href="https://www.th3frontier.com/search/label/%D9%85%D9%82%D8%A7%D9%84%D8%A7%D8%AA"><i class="fas fa-file-alt"></i> مقالات</a> <!-- تغيير الأيقونة لاحقًا -->
<a href="https://www.th3frontier.com/search/label/%D8%AA%D8%B7%D8%A8%D9%8A%D9%82%D8%A7%D8%AA"><i class="fas fa-mobile-alt"></i> تطبيقات</a>
<a href="https://www.th3frontier.com/search/label/%D8%AA%D9%82%D9%86%D9%8A%D8%A7%D8%AA"><i class="fas fa-cogs"></i> تقنيات</a>
<a href="https://www.th3frontier.com/search/label/%D9%85%D9%82%D8%A7%D9%84%D8%A7%D8%AA"><i class="fas fa-file-alt"></i> مقالات</a>
</nav>
<button class="theme-toggle" onclick="toggleTheme()">
<i id="sunIcon" class="fas fa-sun"></i>
Expand Down Expand Up @@ -318,8 +57,7 @@ <h2>تقانة الاتصالات (BACT)</h2>
<p id="bactResult" class="result" aria-live="polite"></p>
</div>

<button onclick="resetFields()">تفريغ الخانات</button> <!-- زر لتفريغ الخانات -->

<button onclick="resetFields()">تفريغ الخانات</button>
</div>

<div class="footer">
Expand All @@ -333,97 +71,6 @@ <h2>تقانة الاتصالات (BACT)</h2>
<p>&copy; 2024 مدونة فرونتير. جميع الحقوق محفوظة.</p>
</div>

<script>
function toggleTheme() {
const body = document.body;
const sunIcon = document.getElementById('sunIcon');
const moonIcon = document.getElementById('moonIcon');
if (body.classList.contains('dark-mode')) {
body.classList.remove('dark-mode');
body.classList.add('light-mode');
sunIcon.classList.remove('hidden');
moonIcon.classList.add('hidden');
} else {
body.classList.remove('light-mode');
body.classList.add('dark-mode');
sunIcon.classList.add('hidden');
moonIcon.classList.remove('hidden');
}
}

function showSection() {
const selectedCourse = document.getElementById('courseSelect').value;
const sections = document.querySelectorAll('.course-section');
sections.forEach(section => {
section.style.display = 'none';
section.classList.remove('active');
});
if (selectedCourse) {
const selectedSection = document.getElementById(selectedCourse);
selectedSection.style.display = 'block';
selectedSection.classList.add('active');
}
}

function isValidMark(mark) {
return !isNaN(mark) && mark >= 0 && mark <= 100;
}

function calculateResult(assignmentMark, examMark, weights, passMark, resultElementId) {
if (!isValidMark(assignmentMark) || !isValidMark(examMark)) {
document.getElementById(resultElementId).textContent = 'الرجاء إدخال علامات صحيحة.';
return;
}
const [assignmentWeight, examWeight] = weights;
const total = (assignmentMark * assignmentWeight) + (examMark * examWeight);
const resultElement = document.getElementById(resultElementId);

if (total > 100) {
resultElement.className = 'result failure';
resultElement.textContent = 'خطأ: العلامة المدخلة لا يجب أن تتجاوز 100 درجة.';
return;
}

if (total >= passMark) {
resultElement.className = total >= (passMark + 1) ? 'result success' : 'result warning';
resultElement.textContent = total >= (passMark + 1) ? 'مبروك، لقد نجحت! مجموعك: ' + total.toFixed(2) : 'مبروك: لقد نجحت بشق الأنفس! مجموعك: ' + total.toFixed(2);
} else if (total >= (passMark - 2) && total < passMark) {
resultElement.className = 'result warning';
resultElement.textContent = 'تنبيه: تحتاج إلى علامة اوعلامتين للنجاح. مجموعك: ' + total.toFixed(2);
} else if (total >= (passMark - 1) && total < (passMark - 2)) {
resultElement.className = 'result warning';
resultElement.textContent = 'تنبيه: تحتاج إلى علامة مساعدة واحدة للنجاح. مجموعك: ' + total.toFixed(2);
} else {
resultElement.className = 'result failure';
resultElement.textContent = 'للأسف، لم تنجح. مجموعك: ' + total.toFixed(2);
}
}

function calculateEnglish() {
const assignmentMark = parseFloat(document.getElementById('englishAssignment').value) || 0;
const examMark = parseFloat(document.getElementById('englishExam').value) || 0;
const total = (assignmentMark * 0.20) + (examMark * 0.80);
calculateResult(assignmentMark, examMark, [0.20, 0.80], 50, 'englishResult');
}

function calculateBAIT() {
const assignmentMark = parseFloat(document.getElementById('baitAssignment').value) || 0;
const examMark = parseFloat(document.getElementById('baitExam').value) || 0;
calculateResult(assignmentMark, examMark, [0.25, 0.75], 60, 'baitResult');
}

function calculateBACT() {
const assignmentMark = parseFloat(document.getElementById('bactAssignment').value) || 0;
const examMark = parseFloat(document.getElementById('bactExam').value) || 0;
calculateResult(assignmentMark, examMark, [0.30, 0.70], 60, 'bactResult');
}

function resetFields() {
const inputs = document.querySelectorAll('input[type="number"]');
inputs.forEach(input => input.value = '');
const results = document.querySelectorAll('.result');
results.forEach(result => result.textContent = '');
}
</script>
<script src="script.js"></script> <!-- رابط الجافا سكريبت -->
</body>
</html>
Loading

0 comments on commit 0eeda20

Please sign in to comment.