Skip to content

Commit

Permalink
Refactor QR code component styles and add password history storage
Browse files Browse the repository at this point in the history
  • Loading branch information
TMHSDigital committed Dec 24, 2024
1 parent 0c4c2c0 commit cf62a2d
Show file tree
Hide file tree
Showing 19 changed files with 3,770 additions and 1,164 deletions.
2 changes: 1 addition & 1 deletion CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).

## [1.0.0] - 2024-01-01
## [1.0.0] - 2024-12-24

### Added
- Initial release of Digital Services Hub
Expand Down
299 changes: 209 additions & 90 deletions css/components/about.css
Original file line number Diff line number Diff line change
@@ -1,150 +1,269 @@
.about-content {
display: flex;
flex-direction: column;
gap: 2rem;
/* Mission Section */
.mission-section {
text-align: center;
padding: 4rem 0;
background: linear-gradient(135deg, rgba(var(--primary-color-rgb), 0.1), rgba(var(--secondary-color-rgb), 0.1));
border-radius: 10px;
margin-bottom: 3rem;
}

.about-section {
text-align: center;
.section-content {
max-width: 800px;
margin: 0 auto;
padding: 0 2rem;
}

.about-section p {
.stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
margin-top: 3rem;
}

.stat-item {
display: flex;
flex-direction: column;
align-items: center;
}

.stat-number {
font-size: 3rem;
font-weight: 700;
font-family: 'Orbitron', sans-serif;
color: var(--primary-color);
margin-bottom: 0.5rem;
}

.stat-label {
font-size: 1.1rem;
line-height: 1.6;
color: var(--text-color);
color: var(--text-light);
opacity: 0.8;
}

.features-section {
padding: 2rem 0;
/* Tools Section */
.tools-section {
margin-bottom: 3rem;
}

.feature-grid {
.tools-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
margin-top: 1.5rem;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-top: 2rem;
}

.feature-card {
background-color: var(--container-bg);
border: 2px solid var(--accent-color);
.tool-item {
background: rgba(255, 255, 255, 0.05);
border-radius: 10px;
padding: 1.5rem;
padding: 2rem;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}

.feature-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg, var(--accent-color-transparent), transparent);
opacity: 0;
transition: opacity 0.3s ease;
transition: var(--transition);
}

.feature-card:hover::before,
.feature-card.hover::before {
opacity: 0.1;
.tool-item:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.feature-card:hover,
.feature-card.hover {
transform: translateY(-5px);
box-shadow: 0 5px 15px var(--shadow-color);
.tool-icon {
width: 60px;
height: 60px;
margin: 0 auto 1.5rem;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
border-radius: 50%;
}

.feature-icon {
font-size: 2.5rem;
margin-bottom: 1rem;
.tool-icon i {
font-size: 1.5rem;
color: var(--text-dark);
}

.feature-card h3 {
color: var(--accent-color);
margin: 0.5rem 0;
.tool-item h3 {
margin-bottom: 1rem;
color: var(--text-light);
}

.feature-card p {
font-size: 0.9rem;
color: var(--text-color);
margin: 0;
.tool-item p {
margin-bottom: 1.5rem;
color: var(--text-light);
opacity: 0.8;
}

/* Technologies Section */
.tech-section {
background-color: var(--container-bg);
margin-bottom: 3rem;
padding: 3rem;
background: rgba(255, 255, 255, 0.05);
border-radius: 10px;
padding: 2rem;
}

.tech-stack {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin-top: 2rem;
}

.tech-category h3 {
margin-bottom: 1rem;
color: var(--primary-color);
}

.tech-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 1rem;
list-style: none;
padding: 0;
margin: 1rem 0;
}

.tech-list li {
background-color: var(--input-bg);
padding: 0.8rem;
border-radius: 5px;
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1rem;
color: var(--text-light);
}

.tech-list li i {
font-size: 1.5rem;
color: var(--primary-color);
}

/* Features Section */
.features-section {
margin-bottom: 3rem;
}

.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin-top: 2rem;
}

.feature-item {
background: rgba(255, 255, 255, 0.05);
border-radius: 10px;
padding: 2rem;
text-align: center;
font-family: 'Orbitron', sans-serif;
font-size: 0.9rem;
color: var(--accent-color);
transition: var(--transition);
}

.feature-item:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.info-section {
.feature-icon {
width: 50px;
height: 50px;
margin: 0 auto 1.5rem;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
border-radius: 50%;
}

.feature-icon i {
font-size: 1.2rem;
color: var(--text-dark);
}

.feature-item h3 {
margin-bottom: 1rem;
color: var(--text-light);
}

.feature-item p {
color: var(--text-light);
opacity: 0.8;
}

/* Contribution Section */
.contribute-section {
text-align: center;
padding: 2rem;
background-color: var(--container-bg);
padding: 4rem 2rem;
background: linear-gradient(135deg, rgba(var(--primary-color-rgb), 0.1), rgba(var(--secondary-color-rgb), 0.1));
border-radius: 10px;
margin-bottom: 3rem;
}

.version-info {
font-family: 'Orbitron', sans-serif;
color: var(--accent-color);
margin: 1rem 0;
.contribute-section p {
max-width: 600px;
margin: 1rem auto 2rem;
color: var(--text-light);
opacity: 0.8;
}

.contribute-links {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}

.contribute-links .tech-button {
display: inline-flex;
align-items: center;
gap: 0.5rem;
}

/* Animations */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

.tool-item,
.feature-item,
.stat-item {
animation: fadeInUp 0.6s ease-out forwards;
opacity: 0;
}

.tool-item:nth-child(2),
.feature-item:nth-child(2) {
animation-delay: 0.2s;
}

.version-info p {
margin: 0.5rem 0;
.tool-item:nth-child(3),
.feature-item:nth-child(3) {
animation-delay: 0.4s;
}

/* Responsive Design */
@media (max-width: 768px) {
.feature-grid {
.stats-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}

.tech-list {
grid-template-columns: 1fr 1fr;
}

.about-section p {
font-size: 1rem;

.tools-grid,
.features-grid {
grid-template-columns: 1fr;
}
}

@media (max-width: 480px) {
.tech-list {
.tech-stack {
grid-template-columns: 1fr;
}

.feature-icon {
font-size: 2rem;

.section-content {
padding: 0 1rem;
}

.contribute-links {
flex-direction: column;
}
.feature-card {
padding: 1rem;

.contribute-links .tech-button {
width: 100%;
}
}
Loading

0 comments on commit cf62a2d

Please sign in to comment.