Upload files to "/"
This commit is contained in:
commit
76eb07896c
41
README.md
Normal file
41
README.md
Normal file
@ -0,0 +1,41 @@
|
|||||||
|
# AOU GPA Calculator
|
||||||
|
|
||||||
|
Visit the site here: [AOU GPA Calculator](https://aougpa.netlify.app/)
|
||||||
|
|
||||||
|
## Overview
|
||||||
|
|
||||||
|
The AOU GPA Calculator is a web-based tool designed to assist students at the Arab Open University (AOU) in calculating their Grade Point Average (GPA) based on the university's grading system. This calculator provides a user-friendly interface for students to input their grades and study hours, offering a quick and accurate assessment of their academic performance.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## Features
|
||||||
|
|
||||||
|
- **Dynamic Subject Input**:
|
||||||
|
Easily add subjects with individual grade and study hour inputs. Remove specific subjects to tailor your GPA calculation.
|
||||||
|
|
||||||
|
- **Intuitive User Interface**:
|
||||||
|
Clear and straightforward design for efficient use. Responsive layout for a seamless experience on various devices.
|
||||||
|
|
||||||
|
- **AOU Grading System**:
|
||||||
|
Follows the AOU grading system, providing accurate GPA calculations. Corresponding grades include A, B+, B, C+, C, D, and F.
|
||||||
|
|
||||||
|
## How to Use
|
||||||
|
|
||||||
|
1. **Add Subjects**: Click the "Add Subject" button to input your grades and study hours for each subject.
|
||||||
|
|
||||||
|
2. **Calculate GPA**: Use the "Calculate GPA" button to obtain your GPA based on the entered subjects.
|
||||||
|
|
||||||
|
3. **Remove Subjects**: Click the "Remove All" button to clear all subjects and start fresh.
|
||||||
|
|
||||||
|
## Contributing
|
||||||
|
|
||||||
|
Contributions are welcome! If you have ideas for improvements, bug fixes, or additional features, feel free to open an issue or submit a pull request.
|
||||||
|
|
||||||
|
## Author
|
||||||
|
|
||||||
|
This GPA Calculator was created by **Mohammed Nuseirat**. Connect with me on [LinkedIn](https://www.linkedin.com/in/mohammednuseirat/) and [X](https://x.com/MohaNuseirat).
|
||||||
|
|
||||||
|
## License
|
||||||
|
|
||||||
|
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
|
||||||
|
|
||||||
35
Update2.0.md
Normal file
35
Update2.0.md
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
## Update 2.0 - AOU GPA Calculator
|
||||||
|
|
||||||
|
### Overview
|
||||||
|
In this update, I have introduced several new features and enhancements to improve the user experience of the AOU GPA Calculator.
|
||||||
|
The primary goal of this release is to provide users with a more intuitive interface and streamline the process of calculating GPA.
|
||||||
|
|
||||||
|
|
||||||
|
## New
|
||||||
|
|
||||||
|
|
||||||
|
## Old
|
||||||
|
|
||||||
|
|
||||||
|
### New Features
|
||||||
|
- **Dynamic Subject Input**: Users can now add multiple subjects dynamically, allowing for a more personalized and flexible GPA calculation experience. Each subject can be easily added and removed as needed.
|
||||||
|
|
||||||
|
- **Enhanced Button Functionality**:
|
||||||
|
- **Calculate GPA**: A dedicated button for calculating GPA has been implemented, making it easier for users to perform calculations with a single click.
|
||||||
|
- **Remove All Subjects**: Users can now clear all subject inputs with a single button click, providing a quick way to reset the form.
|
||||||
|
|
||||||
|
- **Improved User Interface**:
|
||||||
|
- The overall design has been refined with better spacing, layout adjustments, and a more modern aesthetic.
|
||||||
|
- The input fields have been styled for improved accessibility and usability, including focused states for better user feedback.
|
||||||
|
|
||||||
|
- **Responsive Design**: The application has been optimized for mobile devices, ensuring a seamless experience across various screen sizes.
|
||||||
|
|
||||||
|
### Visual Updates
|
||||||
|
- The logo and overall color scheme have been updated to enhance visual appeal and align with modern design trends.
|
||||||
|
- Buttons have been styled with hover effects to provide interactive feedback.
|
||||||
|
|
||||||
|
### Author
|
||||||
|
This update was developed by **Mohammed Nuseirat**.
|
||||||
|
|
||||||
|
### Future Plans
|
||||||
|
I am committed to continuously improving the AOU GPA Calculator. In future updates, I plan to explore additional features such as GPA history tracking, a dark mode option, and more detailed grading scales.
|
||||||
121
index.html
Normal file
121
index.html
Normal file
@ -0,0 +1,121 @@
|
|||||||
|
<!-- Created by Mohammed Nuseirat -->
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<!-- Setting language to English -->
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<!-- Character encoding for Unicode support -->
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<!-- Responsive viewport settings for mobile devices -->
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<!-- Page title showing app name and institution -->
|
||||||
|
<title>GPA Calculator | AOU</title>
|
||||||
|
<!-- Link to custom CSS stylesheet -->
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
<!-- Font Awesome icons library -->
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!-- Main container wrapper -->
|
||||||
|
<main class="container">
|
||||||
|
<!-- Logo section with glass effect -->
|
||||||
|
<div class="logo-container glass-effect">
|
||||||
|
<!-- University logo image -->
|
||||||
|
<img src="https://www.arabou.edu.sa/assets/common/images/logo-footer-ar.png" alt="AOU Logo" class="logo">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Main calculator container with glass effect -->
|
||||||
|
<div class="calculator-container glass-effect">
|
||||||
|
<!-- Arabic title for GPA calculator -->
|
||||||
|
<h1>حساب المعدل التراكمي للجامعة العربية المفتوحة</h1>
|
||||||
|
|
||||||
|
<!-- Previous GPA input section -->
|
||||||
|
<div class="previous-gpa-section">
|
||||||
|
<div class="input-group">
|
||||||
|
<!-- Previous GPA input field -->
|
||||||
|
<div class="input-wrapper">
|
||||||
|
<label for="prev-gpa"></label>
|
||||||
|
<input type="number"
|
||||||
|
id="prev-gpa"
|
||||||
|
step="0.01"
|
||||||
|
min="0"
|
||||||
|
max="4"
|
||||||
|
placeholder="Enter previous GPA / المعدل السابق">
|
||||||
|
</div>
|
||||||
|
<!-- Previous hours input field -->
|
||||||
|
<div class="input-wrapper">
|
||||||
|
<label for="prev-hours"></label>
|
||||||
|
<input type="number"
|
||||||
|
id="prev-hours"
|
||||||
|
min="0"
|
||||||
|
placeholder="Enter previous hours / الساعات السابقة">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Container for dynamically added subjects -->
|
||||||
|
<div id="subjects-container" class="subjects-container">
|
||||||
|
<!-- Subjects will be added here dynamically via JavaScript -->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Action buttons group -->
|
||||||
|
<div class="button-group">
|
||||||
|
<!-- Add subject button -->
|
||||||
|
<button class="btn btn-primary" onclick="addSubject()">
|
||||||
|
<i class="fas fa-plus"></i>
|
||||||
|
Add Subject
|
||||||
|
</button>
|
||||||
|
<!-- Calculate GPA button -->
|
||||||
|
<button class="btn btn-success" onclick="calculateGPA()">
|
||||||
|
<i class="fas fa-calculator"></i>
|
||||||
|
Calculate
|
||||||
|
</button>
|
||||||
|
<!-- Clear all inputs button -->
|
||||||
|
<button class="btn btn-danger" onclick="clearAll()">
|
||||||
|
<i class="fas fa-trash"></i>
|
||||||
|
Clear All
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Results container (hidden by default) -->
|
||||||
|
<div id="result" class="result glass-effect hidden">
|
||||||
|
<!-- Results will be displayed here via JavaScript -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Footer section -->
|
||||||
|
<footer class="footer glass-effect">
|
||||||
|
<div class="footer-content">
|
||||||
|
<!-- Developer credit -->
|
||||||
|
<p class="footer-text">Developed by Mohammed Nuseirat
|
||||||
|
<br>• v2.0</p>
|
||||||
|
<!-- Social media links -->
|
||||||
|
<div class="social-links">
|
||||||
|
<!-- GitHub profile link -->
|
||||||
|
<a href="https://github.com/nuseirat" target="_blank" class="social-link">
|
||||||
|
<i class="fab fa-github fa-2x"></i>
|
||||||
|
</a>
|
||||||
|
<!-- LinkedIn profile link -->
|
||||||
|
<a href="https://linkedin.com/in/mohammednuseirat" target="_blank" class="social-link">
|
||||||
|
<i class="fab fa-linkedin fa-2x"></i>
|
||||||
|
</a>
|
||||||
|
<!-- Twitter/X profile link -->
|
||||||
|
<a href="https://x.com/mohanuseirat" target="_blank" class="social-link">
|
||||||
|
<i class="fa-brands fa-x-twitter fa-2x"></i>
|
||||||
|
<!-- Website link -->
|
||||||
|
<a href="https://nuseirat.github.io/" target="_blank" class="social-link">
|
||||||
|
<i class="fas fa-globe fa-2x"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<!-- JavaScript libraries and scripts -->
|
||||||
|
<!-- GSAP animation library -->
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
|
||||||
|
<!-- Custom JavaScript file -->
|
||||||
|
<script src="script.js"></script>
|
||||||
|
<!-- Font Awesome kit -->
|
||||||
|
<script src="https://kit.fontawesome.com/86e812f22e.js" crossorigin="anonymous"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
262
script.js
Normal file
262
script.js
Normal file
@ -0,0 +1,262 @@
|
|||||||
|
// Created by Mohammed Nuseirat
|
||||||
|
|
||||||
|
// script.js
|
||||||
|
document.addEventListener("DOMContentLoaded", function () {
|
||||||
|
// Array to store all subject input elements
|
||||||
|
const subjects = [];
|
||||||
|
|
||||||
|
// Add Subject Button Handler
|
||||||
|
window.addSubject = function() {
|
||||||
|
// Create container for new subject inputs
|
||||||
|
const subjectInput = document.createElement("div");
|
||||||
|
subjectInput.className = "subject";
|
||||||
|
|
||||||
|
// Create grade input field
|
||||||
|
const gradeInput = document.createElement("input");
|
||||||
|
gradeInput.type = "text";
|
||||||
|
gradeInput.placeholder = "Enter grade (A, B+, B, C+, C, D, F)";
|
||||||
|
gradeInput.className = "grade-input";
|
||||||
|
|
||||||
|
// Create credit hours input field
|
||||||
|
const hoursInput = document.createElement("input");
|
||||||
|
hoursInput.type = "number";
|
||||||
|
hoursInput.placeholder = "Enter hours";
|
||||||
|
hoursInput.className = "hours-input";
|
||||||
|
hoursInput.min = "1";
|
||||||
|
|
||||||
|
// Create remove button with icon
|
||||||
|
const removeButton = document.createElement("button");
|
||||||
|
removeButton.innerHTML = '<i class="fas fa-times"></i>';
|
||||||
|
removeButton.className = "remove-button";
|
||||||
|
|
||||||
|
// Add animation and removal functionality to remove button
|
||||||
|
removeButton.addEventListener("click", function () {
|
||||||
|
gsap.to(subjectInput, {
|
||||||
|
duration: 0.3,
|
||||||
|
opacity: 0,
|
||||||
|
y: -20,
|
||||||
|
ease: 'power2.in',
|
||||||
|
onComplete: () => {
|
||||||
|
subjectInput.remove();
|
||||||
|
updateSubjectsArray();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Assemble the subject input container
|
||||||
|
subjectInput.appendChild(gradeInput);
|
||||||
|
subjectInput.appendChild(hoursInput);
|
||||||
|
subjectInput.appendChild(removeButton);
|
||||||
|
|
||||||
|
// Add to DOM and subjects array
|
||||||
|
document.getElementById("subjects-container").appendChild(subjectInput);
|
||||||
|
subjects.push(subjectInput);
|
||||||
|
|
||||||
|
// Animate new subject entry
|
||||||
|
gsap.from(subjectInput, {
|
||||||
|
duration: 0.5,
|
||||||
|
opacity: 0,
|
||||||
|
y: 20,
|
||||||
|
ease: 'power2.out'
|
||||||
|
});
|
||||||
|
|
||||||
|
// Validate grade input
|
||||||
|
gradeInput.addEventListener('input', function() {
|
||||||
|
this.value = this.value.toUpperCase();
|
||||||
|
const validGrades = ['A', 'B+', 'B', 'C+', 'C', 'D', 'F'];
|
||||||
|
if (!validGrades.includes(this.value) && this.value !== '') {
|
||||||
|
this.classList.add('invalid');
|
||||||
|
} else {
|
||||||
|
this.classList.remove('invalid');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Validate hours input
|
||||||
|
hoursInput.addEventListener('input', function() {
|
||||||
|
if (this.value < 1) {
|
||||||
|
this.classList.add('invalid');
|
||||||
|
} else {
|
||||||
|
this.classList.remove('invalid');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// Clear All Button Handler
|
||||||
|
window.clearAll = function() {
|
||||||
|
const subjectInputs = document.querySelectorAll(".subject");
|
||||||
|
|
||||||
|
// Animate removal of all subjects
|
||||||
|
gsap.to(subjectInputs, {
|
||||||
|
duration: 0.3,
|
||||||
|
opacity: 0,
|
||||||
|
y: -20,
|
||||||
|
stagger: 0.1,
|
||||||
|
ease: 'power2.in',
|
||||||
|
onComplete: () => {
|
||||||
|
// Clear all inputs and results
|
||||||
|
document.getElementById("subjects-container").innerHTML = '';
|
||||||
|
subjects.length = 0;
|
||||||
|
document.getElementById("prev-gpa").value = "";
|
||||||
|
document.getElementById("prev-hours").value = "";
|
||||||
|
document.getElementById("result").innerHTML = "";
|
||||||
|
document.getElementById("result").classList.add("hidden");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Animate calculator container
|
||||||
|
gsap.to('.calculator-container', {
|
||||||
|
duration: 0.2,
|
||||||
|
scale: 0.98,
|
||||||
|
ease: 'power2.in',
|
||||||
|
yoyo: true,
|
||||||
|
repeat: 1
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// Calculate GPA Button Handler
|
||||||
|
window.calculateGPA = function() {
|
||||||
|
// Validate all inputs before calculation
|
||||||
|
const invalidInputs = document.querySelectorAll('.invalid');
|
||||||
|
if (invalidInputs.length > 0) {
|
||||||
|
showResult("Please correct invalid inputs before calculating", "error");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Calculate totals
|
||||||
|
const totalGradePoints = calculateTotalGradePoints();
|
||||||
|
const totalHours = calculateTotalHours();
|
||||||
|
|
||||||
|
// Get previous GPA data
|
||||||
|
const prevGPA = parseFloat(document.getElementById("prev-gpa").value) || 0;
|
||||||
|
const prevHours = parseFloat(document.getElementById("prev-hours").value) || 0;
|
||||||
|
|
||||||
|
// Validate previous GPA
|
||||||
|
if (prevGPA > 4) {
|
||||||
|
showResult("Previous GPA cannot be greater than 4.0", "error");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Calculate cumulative statistics
|
||||||
|
const cumulativeGradePoints = totalGradePoints + (prevGPA * prevHours);
|
||||||
|
const cumulativeTotalHours = totalHours + prevHours;
|
||||||
|
|
||||||
|
// Validate hours
|
||||||
|
if (totalHours === 0 && prevHours === 0) {
|
||||||
|
showResult("Please enter valid grades and hours", "error");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Calculate GPAs
|
||||||
|
const currentGPA = totalHours === 0 ? 0 : totalGradePoints / totalHours;
|
||||||
|
const cumulativeGPA = cumulativeTotalHours === 0 ? 0 : cumulativeGradePoints / cumulativeTotalHours;
|
||||||
|
|
||||||
|
// Format and display results
|
||||||
|
const resultHTML = `
|
||||||
|
<div class="result-content">
|
||||||
|
<div class="result-item">
|
||||||
|
<span class="result-label">Semester Hours:</span>
|
||||||
|
<span class="result-value">${totalHours}</span>
|
||||||
|
</div>
|
||||||
|
<div class="result-item">
|
||||||
|
<span class="result-label">Total Hours:</span>
|
||||||
|
<span class="result-value">${cumulativeTotalHours}</span>
|
||||||
|
</div>
|
||||||
|
<div class="result-item">
|
||||||
|
<span class="result-label">Semester GPA:</span>
|
||||||
|
<span class="result-value">${currentGPA.toFixed(2)}</span>
|
||||||
|
</div>
|
||||||
|
<div class="result-item">
|
||||||
|
<span class="result-label">Cumulative GPA:</span>
|
||||||
|
<span class="result-value">${cumulativeGPA.toFixed(2)}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
showResult(resultHTML);
|
||||||
|
|
||||||
|
// Animate result items
|
||||||
|
gsap.from('.result-item', {
|
||||||
|
duration: 0.5,
|
||||||
|
opacity: 0,
|
||||||
|
y: 20,
|
||||||
|
stagger: 0.1,
|
||||||
|
ease: 'power2.out'
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// Helper function to calculate total grade points
|
||||||
|
function calculateTotalGradePoints() {
|
||||||
|
let totalGradePoints = 0;
|
||||||
|
|
||||||
|
subjects.forEach(subject => {
|
||||||
|
const grade = subject.querySelector(".grade-input").value;
|
||||||
|
const hours = parseFloat(subject.querySelector(".hours-input").value) || 0;
|
||||||
|
|
||||||
|
const gradePoint = getGradePoint(grade);
|
||||||
|
totalGradePoints += (gradePoint * hours);
|
||||||
|
});
|
||||||
|
|
||||||
|
return totalGradePoints;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Helper function to calculate total hours
|
||||||
|
function calculateTotalHours() {
|
||||||
|
let totalHours = 0;
|
||||||
|
|
||||||
|
subjects.forEach(subject => {
|
||||||
|
const hours = parseFloat(subject.querySelector(".hours-input").value) || 0;
|
||||||
|
totalHours += hours;
|
||||||
|
});
|
||||||
|
|
||||||
|
return totalHours;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Convert letter grades to grade points
|
||||||
|
function getGradePoint(grade) {
|
||||||
|
const gradePoints = {
|
||||||
|
'A': 4,
|
||||||
|
'B+': 3.5,
|
||||||
|
'B': 3,
|
||||||
|
'C+': 2.5,
|
||||||
|
'C': 2,
|
||||||
|
'D': 1.5,
|
||||||
|
'F': 0
|
||||||
|
};
|
||||||
|
return gradePoints[grade.toUpperCase()] || 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Display result with animation
|
||||||
|
function showResult(message, type = "success") {
|
||||||
|
const resultDiv = document.getElementById("result");
|
||||||
|
resultDiv.innerHTML = message;
|
||||||
|
resultDiv.classList.remove("hidden");
|
||||||
|
resultDiv.style.opacity = "0";
|
||||||
|
|
||||||
|
// Animate result appearance
|
||||||
|
gsap.to(resultDiv, {
|
||||||
|
duration: 0.5,
|
||||||
|
opacity: 1,
|
||||||
|
y: 0,
|
||||||
|
ease: 'power2.out'
|
||||||
|
});
|
||||||
|
|
||||||
|
// Scroll result into view
|
||||||
|
resultDiv.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update subjects array after removal
|
||||||
|
function updateSubjectsArray() {
|
||||||
|
subjects.length = 0;
|
||||||
|
document.querySelectorAll(".subject").forEach(subject => subjects.push(subject));
|
||||||
|
}
|
||||||
|
|
||||||
|
// Validate previous GPA input
|
||||||
|
const prevGPAInput = document.getElementById("prev-gpa");
|
||||||
|
prevGPAInput.addEventListener('input', function() {
|
||||||
|
if (this.value > 4) {
|
||||||
|
this.classList.add('invalid');
|
||||||
|
} else {
|
||||||
|
this.classList.remove('invalid');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
361
style.css
Normal file
361
style.css
Normal file
@ -0,0 +1,361 @@
|
|||||||
|
/* Created by Mohammed Nuseirat*/
|
||||||
|
|
||||||
|
/* Define CSS custom properties (variables) for consistent theming across the application */
|
||||||
|
:root {
|
||||||
|
--primary-bg: linear-gradient(135deg, #020617, #1e293b); /* Dark gradient background */
|
||||||
|
--glass-bg: rgba(30, 41, 59, 0.7); /* Semi-transparent background for glass effect */
|
||||||
|
--text-color: #e2e8f0; /* Light text color for dark theme */
|
||||||
|
--input-bg: rgba(30, 41, 59, 0.8); /* Slightly darker background for input fields */
|
||||||
|
--btn-primary: #1e3a8a; /* Deep blue for primary buttons */
|
||||||
|
--btn-success: #059669; /* Green for success buttons */
|
||||||
|
--btn-danger: #991b1b; /* Red for danger/delete buttons */
|
||||||
|
--shadow: 0 8px 32px rgba(0, 0, 0, 0.3); /* Subtle shadow for depth */
|
||||||
|
--border: rgba(255, 255, 255, 0.1); /* Light border for glass effect */
|
||||||
|
--invalid-color: #ef4444; /* Red for validation errors */
|
||||||
|
--success-color: #10b981; /* Green for success states */
|
||||||
|
--warning-color: #f59e0b; /* Orange for warnings */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Reset default browser styles */
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Base body styles with flexbox centering */
|
||||||
|
body {
|
||||||
|
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
||||||
|
min-height: 100vh;
|
||||||
|
background: var(--primary-bg);
|
||||||
|
color: var(--text-color);
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Reusable glass morphism effect */
|
||||||
|
.glass-effect {
|
||||||
|
background: var(--glass-bg);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 1.5rem;
|
||||||
|
box-shadow: var(--shadow);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Main container layout */
|
||||||
|
.container {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 900px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Logo section styling */
|
||||||
|
.logo-container {
|
||||||
|
position: relative;
|
||||||
|
text-align: center;
|
||||||
|
padding: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Logo image styling with smooth transition */
|
||||||
|
.logo {
|
||||||
|
height: 100px;
|
||||||
|
width: auto;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Calculator section container */
|
||||||
|
.calculator-container {
|
||||||
|
padding: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Main heading styles */
|
||||||
|
h1 {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
font-size: 2.5rem;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Grid layout for input fields */
|
||||||
|
.input-group {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
gap: 1.5rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Individual input field container */
|
||||||
|
.input-wrapper {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Input field styling */
|
||||||
|
input {
|
||||||
|
width: 100%;
|
||||||
|
padding: 1rem;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 0.75rem;
|
||||||
|
background: var(--input-bg);
|
||||||
|
color: var(--text-color);
|
||||||
|
font-size: 1rem;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Input focus state */
|
||||||
|
input:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: var(--btn-primary);
|
||||||
|
box-shadow: 0 0 0 2px rgba(30, 58, 138, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Input label styling */
|
||||||
|
.input-label {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: var(--text-color);
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Container for subject entries */
|
||||||
|
.subjects-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Individual subject entry styling */
|
||||||
|
.subject {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1.5fr 1fr auto;
|
||||||
|
gap: 1rem;
|
||||||
|
align-items: center;
|
||||||
|
padding: 1rem;
|
||||||
|
background: var(--glass-bg);
|
||||||
|
border-radius: 0.75rem;
|
||||||
|
animation: slideIn 0.3s ease forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Button group layout */
|
||||||
|
.button-group {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
gap: 1rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Base button styles */
|
||||||
|
.btn {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 0.75rem;
|
||||||
|
padding: 1rem;
|
||||||
|
border: none;
|
||||||
|
border-radius: 0.75rem;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Icon sizing within buttons */
|
||||||
|
.btn i {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Button variants */
|
||||||
|
.btn-primary { background: var(--btn-primary); }
|
||||||
|
.btn-success { background: var(--btn-success); }
|
||||||
|
.btn-danger { background: var(--btn-danger); }
|
||||||
|
|
||||||
|
/* Button hover effects */
|
||||||
|
.btn:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: var(--shadow);
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Button active state */
|
||||||
|
.btn:active {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Remove button styling */
|
||||||
|
.remove-button {
|
||||||
|
background: var(--btn-danger);
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Remove button hover effect */
|
||||||
|
.remove-button:hover {
|
||||||
|
transform: scale(1.1);
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Results section container */
|
||||||
|
.result {
|
||||||
|
padding: 2rem;
|
||||||
|
margin-top: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Results content layout */
|
||||||
|
.result-content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Individual result item styling */
|
||||||
|
.result-item {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 1rem;
|
||||||
|
background: rgba(30, 41, 59, 0.5);
|
||||||
|
border-radius: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Result label styling */
|
||||||
|
.result-label {
|
||||||
|
font-weight: 500;
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Result value styling */
|
||||||
|
.result-value {
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Footer section styling */
|
||||||
|
.footer-content {
|
||||||
|
text-align: center;
|
||||||
|
padding: 2rem;
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Social links container */
|
||||||
|
.social-links {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 2rem;
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Individual social link styling */
|
||||||
|
.social-link {
|
||||||
|
color: var(--text-color);
|
||||||
|
opacity: 0.8;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Social link hover effect */
|
||||||
|
.social-link:hover {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(-3px);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Invalid input state */
|
||||||
|
.invalid {
|
||||||
|
border-color: var(--invalid-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hide elements */
|
||||||
|
.hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Animation keyframes */
|
||||||
|
@keyframes fadeIn {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(20px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slideIn {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(-10px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive design for mobile devices */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
body {
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-group,
|
||||||
|
.button-group {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subject {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 1.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.result-item {
|
||||||
|
flex-direction: column;
|
||||||
|
text-align: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Loading state styles */
|
||||||
|
.loading {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Loading overlay animation */
|
||||||
|
.loading::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: rgba(30, 41, 59, 0.7);
|
||||||
|
border-radius: 0.75rem;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
animation: pulse 1.5s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Loading pulse animation */
|
||||||
|
@keyframes pulse {
|
||||||
|
0% { opacity: 0.7; }
|
||||||
|
50% { opacity: 0.4; }
|
||||||
|
100% { opacity: 0.7; }
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user