Skip to content

Commit a3f8370

Browse files
mubin25smubin25s
committed
update
1 parent aa09796 commit a3f8370

4 files changed

Lines changed: 262 additions & 12 deletions

File tree

‎X_Calculator/Grade_Calculator/Grade.css‎

Lines changed: 160 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2633,3 +2633,163 @@ tr:hover td {
26332633
transform: none;
26342634
}
26352635
}
2636+
2637+
/* About Page Styling */
2638+
.about-btn-container {
2639+
display: flex;
2640+
justify-content: center;
2641+
margin-top: 1.5rem;
2642+
width: 100%;
2643+
}
2644+
2645+
.about-btn {
2646+
display: inline-flex;
2647+
align-items: center;
2648+
gap: 0.5rem;
2649+
background: rgba(109, 0, 26, 0.12);
2650+
border: 1px solid rgba(109, 0, 26, 0.3);
2651+
color: var(--text-main);
2652+
padding: 0.75rem 1.5rem;
2653+
border-radius: 50px;
2654+
font-size: 0.95rem;
2655+
font-weight: 600;
2656+
cursor: pointer;
2657+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
2658+
text-decoration: none;
2659+
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
2660+
}
2661+
2662+
.about-btn:hover {
2663+
background: rgba(109, 0, 26, 0.35);
2664+
border-color: rgba(109, 0, 26, 0.6);
2665+
color: #FFFFFF;
2666+
transform: translateY(-2px);
2667+
box-shadow: 0 8px 25px rgba(109, 0, 26, 0.25);
2668+
}
2669+
2670+
.about-btn i {
2671+
color: var(--accent);
2672+
font-size: 1.1rem;
2673+
transition: transform 0.3s ease;
2674+
}
2675+
2676+
.about-btn:hover i {
2677+
transform: scale(1.15);
2678+
}
2679+
2680+
.about-card {
2681+
background: rgba(109, 0, 26, 0.05);
2682+
border: 1.5px solid rgba(109, 0, 26, 0.25);
2683+
padding: 2.5rem;
2684+
border-radius: 30px;
2685+
backdrop-filter: blur(25px) saturate(180%);
2686+
-webkit-backdrop-filter: blur(25px) saturate(180%);
2687+
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6),
2688+
0 0 40px rgba(109, 0, 26, 0.15),
2689+
inset 0 0 30px rgba(109, 0, 26, 0.05);
2690+
width: 100%;
2691+
max-width: 600px;
2692+
margin-top: 1.5rem;
2693+
text-align: center;
2694+
}
2695+
2696+
.about-description {
2697+
font-size: 1.1rem;
2698+
line-height: 1.6;
2699+
color: var(--text-main);
2700+
margin-bottom: 2rem;
2701+
font-weight: 400;
2702+
opacity: 0.95;
2703+
}
2704+
2705+
.about-divider {
2706+
height: 1px;
2707+
background: linear-gradient(90deg, transparent, rgba(109, 0, 26, 0.3), transparent);
2708+
margin: 2rem 0;
2709+
}
2710+
2711+
.about-developer {
2712+
margin-bottom: 2rem;
2713+
}
2714+
2715+
.about-developer .label {
2716+
font-size: 0.9rem;
2717+
color: var(--text-muted);
2718+
text-transform: uppercase;
2719+
letter-spacing: 1.5px;
2720+
margin-bottom: 0.5rem;
2721+
display: block;
2722+
}
2723+
2724+
.about-developer .name {
2725+
font-size: 1.6rem;
2726+
font-weight: 800;
2727+
background: linear-gradient(to right, #FFFFFF, #E14D6A, #FFFFFF);
2728+
background-clip: text;
2729+
-webkit-background-clip: text;
2730+
-webkit-text-fill-color: transparent;
2731+
letter-spacing: 0.5px;
2732+
display: inline-block;
2733+
filter: drop-shadow(0 0 10px rgba(109, 0, 26, 0.4));
2734+
}
2735+
2736+
.about-disclaimer-box {
2737+
background: rgba(0, 0, 0, 0.4);
2738+
border: 1px solid rgba(109, 0, 26, 0.15);
2739+
padding: 1.25rem;
2740+
border-radius: 16px;
2741+
margin-bottom: 2.5rem;
2742+
}
2743+
2744+
.about-disclaimer-box p {
2745+
font-size: 0.8rem;
2746+
line-height: 1.5;
2747+
color: rgba(255, 255, 255, 0.5);
2748+
font-weight: 300;
2749+
}
2750+
2751+
/* Social Links styling for About page */
2752+
.social-links {
2753+
display: flex;
2754+
justify-content: center;
2755+
align-items: center;
2756+
gap: 2.25rem;
2757+
margin-top: 1.75rem;
2758+
margin-bottom: 0.25rem;
2759+
}
2760+
2761+
.social-raw-icon {
2762+
display: inline-flex;
2763+
align-items: center;
2764+
justify-content: center;
2765+
font-size: 4.5rem;
2766+
color: #f2c4ce !important;
2767+
text-decoration: none;
2768+
/* Embossed 3D effect: light from top-left, shadow bottom-right */
2769+
filter:
2770+
drop-shadow(1px 2px 0px rgba(255, 180, 190, 0.2))
2771+
drop-shadow(-1px -1px 0px rgba(0, 0, 0, 0.55))
2772+
drop-shadow(0 4px 14px rgba(0, 0, 0, 0.45));
2773+
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
2774+
}
2775+
2776+
.social-raw-icon i {
2777+
color: #f2c4ce !important;
2778+
}
2779+
2780+
.social-raw-icon:hover {
2781+
color: #fce4e9 !important;
2782+
transform: translateY(-5px) scale(1.1);
2783+
filter:
2784+
drop-shadow(1px 2px 0px rgba(255, 200, 210, 0.35))
2785+
drop-shadow(-1px -1px 0px rgba(0, 0, 0, 0.5))
2786+
drop-shadow(0 8px 22px rgba(109, 0, 26, 0.65))
2787+
drop-shadow(0 0 16px rgba(242, 100, 130, 0.45));
2788+
}
2789+
2790+
.social-raw-icon:hover i {
2791+
color: #fce4e9 !important;
2792+
}
2793+
2794+
2795+

‎X_Calculator/Grade_Calculator/about.html‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>About - Universal Grade Calculator</title>
7+
<link rel="icon" type="image/png" href="../../LOGO.png">
8+
<!-- PWA Meta Tags -->
9+
<link rel="manifest" href="/manifest.json?v=3">
10+
<meta name="theme-color" content="#6D001A">
11+
<meta name="apple-mobile-web-app-capable" content="yes">
12+
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
13+
<meta name="apple-mobile-web-app-title" content="About">
14+
<link rel="apple-touch-icon" href="../../LOGO.png">
15+
<link rel="stylesheet" href="Grade.css">
16+
<style>
17+
/* Force pinkish-white on social icons — bypasses SW cache */
18+
.social-links { display:flex; justify-content:center; align-items:center; gap:1.5rem; margin-top:0.9rem; margin-bottom:0; }
19+
.social-raw-icon { font-size:1.4rem !important; color:#f2c4ce !important; text-decoration:none !important; display:inline-flex; align-items:center; justify-content:center; transition:all 0.35s ease; filter: drop-shadow(0 3px 12px rgba(0,0,0,0.5)) drop-shadow(1px 2px 0 rgba(255,180,190,0.15)) drop-shadow(-1px -1px 0 rgba(0,0,0,0.6)); }
20+
.social-raw-icon * { color:#f2c4ce !important; }
21+
.social-raw-icon:hover { color:#fce4e9 !important; transform:translateY(-4px) scale(1.1); filter: drop-shadow(0 10px 24px rgba(109,0,26,0.7)) drop-shadow(0 0 18px rgba(242,100,130,0.5)); }
22+
.social-raw-icon:hover * { color:#fce4e9 !important; }
23+
24+
/* Compact layout — fits entire page in one viewport */
25+
body.dashboard-page { padding: 2rem 2rem !important; }
26+
.dashboard-header { margin-bottom: 1.1rem !important; gap: 0.5rem !important; }
27+
.header-icon img { width:62px !important; height:62px !important; }
28+
.dashboard-title { font-size: 2.2rem !important; margin-bottom: 0.2rem !important; }
29+
.dashboard-subtitle { font-size: 0.95rem !important; }
30+
.about-card { padding: 1.75rem 2rem !important; margin-top: 0 !important; }
31+
.about-description { font-size: 1.05rem !important; margin-bottom: 1rem !important; }
32+
.about-divider { margin: 1rem 0 !important; }
33+
.about-developer { margin-bottom: 1rem !important; }
34+
.about-developer .label { font-size: 0.85rem !important; margin-bottom: 0.3rem !important; }
35+
.about-developer .name { font-size: 1.5rem !important; }
36+
.about-disclaimer-box { padding: 0.9rem 1.2rem !important; margin-bottom: 1.25rem !important; }
37+
.about-disclaimer-box p { font-size: 0.78rem !important; }
38+
.dashboard-btn { padding: 0.9rem 1.5rem !important; font-size: 1.05rem !important; }
39+
</style>
40+
<link rel="preconnect" href="https://fonts.googleapis.com">
41+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
42+
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
43+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
44+
</head>
45+
<body class="dashboard-page">
46+
<div class="background-globes">
47+
<div class="globe globe-1"></div>
48+
<div class="globe globe-2"></div>
49+
<div class="globe globe-3"></div>
50+
</div>
51+
52+
<div class="dashboard-container" style="min-height: auto;">
53+
<div class="dashboard-header">
54+
<div class="header-icon">
55+
<img src="../../LOGO.png" alt="Logo" style="width:72px; height:72px; object-fit:contain; display:block;">
56+
</div>
57+
<h1 class="dashboard-title">About the App</h1>
58+
<p class="dashboard-subtitle">Universal Course Grading System</p>
59+
</div>
60+
61+
<div class="about-card">
62+
<p class="about-description">
63+
Calculate your course grades with precision and track your academic progress
64+
</p>
65+
66+
<div class="about-divider"></div>
67+
68+
<div class="about-developer">
69+
<span class="label">Designed & Developed by</span>
70+
<span class="name">K. M. Fathum Mubin Sachcha</span>
71+
<div class="social-links">
72+
<a href="https://www.linkedin.com/in/mubin25s/" target="_blank" rel="noopener noreferrer" class="social-raw-icon" title="LinkedIn">
73+
<i class="fa-brands fa-linkedin-in" style="color:#f2c4ce !important;"></i>
74+
</a>
75+
<a href="https://github.com/mubin25s" target="_blank" rel="noopener noreferrer" class="social-raw-icon" title="GitHub">
76+
<i class="fa-brands fa-github" style="color:#f2c4ce !important;"></i>
77+
</a>
78+
</div>
79+
</div>
80+
81+
<div class="about-disclaimer-box">
82+
<p>
83+
This is an independent, unofficial student resource and is not affiliated with or endorsed by any university.
84+
Grading information is based on publicly available sources and may change.
85+
</p>
86+
</div>
87+
88+
<button class="dashboard-btn" onclick="window.location.href='index.html'">
89+
<i class="fa-solid fa-arrow-left"></i>
90+
<span>Back to Dashboard</span>
91+
</button>
92+
</div>
93+
</div>
94+
</body>
95+
</html>

‎X_Calculator/Grade_Calculator/index.html‎

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -80,17 +80,11 @@ <h1 class="dashboard-title">Universal Grade Calculator</h1>
8080
</div>
8181

8282
<div class="dashboard-footer">
83-
<p class="footer-info">
84-
<i class="fa-solid fa-circle-info"></i>
85-
Calculate your course grades with precision and track your academic progress
86-
</p>
87-
<div class="developer-credit">
88-
<span>Designed & Developed by</span>
89-
<span class="dev-name">K. M. Fathum Mubin Sachcha</span>
90-
</div>
91-
<div class="dashboard-disclaimer">
92-
This is an independent, unofficial student resource and is not affiliated with or endorsed by any university.
93-
Grading information is based on publicly available sources and may change.
83+
<div class="about-btn-container">
84+
<a href="about.html" class="about-btn">
85+
<i class="fa-solid fa-circle-info"></i>
86+
<span>About the App</span>
87+
</a>
9488
</div>
9589
</div>
9690
</div>

‎sw.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
const CACHE_NAME = 'grade-calculator-cache-v4';
1+
const CACHE_NAME = 'grade-calculator-cache-v6';
22
const ASSETS_TO_CACHE = [
33
'/',
44
'/index.html',
@@ -8,6 +8,7 @@ const ASSETS_TO_CACHE = [
88
'/icons/icon-512x512.png',
99
'/icons/apple-touch-icon.png',
1010
'/X_Calculator/Grade_Calculator/Universal_Calculator.html',
11+
'/X_Calculator/Grade_Calculator/about.html',
1112
'/X_Calculator/Grade_Calculator/Universal_Calculator.js',
1213
'/X_Calculator/Grade_Calculator/Grade.css',
1314
'/X_Calculator/CGPA_Calculator/CGPA.html',

0 commit comments

Comments
 (0)