398 lines
17 KiB
HTML
Executable File
398 lines
17 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Ultimate UI Showcase | MSPE</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Playfair+Display:wght@600;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha384-t1nt8BQoYMLFN5p42tRAtuAAFQaCQODekUVeKKZrEnEyp4H2R0RHFz0KWpmj7i8g" crossorigin="anonymous">
|
|
<link rel="stylesheet" href="css/style.css">
|
|
<link rel="stylesheet" href="css/ultimate-ui.css">
|
|
<link rel="stylesheet" href="css/header-fix.css">
|
|
<style>
|
|
.showcase-section {
|
|
padding: 4rem 0;
|
|
border-bottom: 1px solid var(--glass-border);
|
|
}
|
|
.feature-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 2rem;
|
|
margin-top: 2rem;
|
|
}
|
|
.feature-demo {
|
|
background: var(--glass-bg);
|
|
backdrop-filter: blur(10px);
|
|
border: 1px solid var(--glass-border);
|
|
border-radius: 1rem;
|
|
padding: 2rem;
|
|
text-align: center;
|
|
transition: all 0.4s ease;
|
|
}
|
|
.feature-demo:hover {
|
|
transform: translateY(-10px);
|
|
border-color: var(--neon-cyan);
|
|
box-shadow: 0 0 30px rgba(0, 245, 255, 0.3);
|
|
}
|
|
.feature-demo h3 {
|
|
color: var(--neon-cyan);
|
|
margin-bottom: 1rem;
|
|
font-size: 1.5rem;
|
|
}
|
|
.feature-demo p {
|
|
color: rgba(255, 255, 255, 0.7);
|
|
line-height: 1.6;
|
|
}
|
|
.feature-icon {
|
|
font-size: 3rem;
|
|
color: var(--neon-purple);
|
|
margin-bottom: 1rem;
|
|
animation: float 3s ease-in-out infinite;
|
|
}
|
|
.color-palette {
|
|
display: flex;
|
|
gap: 1rem;
|
|
flex-wrap: wrap;
|
|
margin-top: 2rem;
|
|
}
|
|
.color-swatch {
|
|
width: 120px;
|
|
height: 120px;
|
|
border-radius: 1rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
font-size: 0.8rem;
|
|
font-weight: 600;
|
|
text-shadow: 0 2px 4px rgba(0,0,0,0.5);
|
|
transition: transform 0.3s ease;
|
|
}
|
|
.color-swatch:hover {
|
|
transform: scale(1.1) rotate(5deg);
|
|
}
|
|
.demo-button-group {
|
|
display: flex;
|
|
gap: 1rem;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
margin-top: 2rem;
|
|
}
|
|
.glow-text {
|
|
font-size: 3rem;
|
|
font-weight: 700;
|
|
text-align: center;
|
|
background: linear-gradient(135deg, var(--neon-cyan), var(--neon-purple), var(--neon-pink));
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
animation: neonPulse 2s ease-in-out infinite;
|
|
}
|
|
.stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 2rem;
|
|
margin-top: 2rem;
|
|
}
|
|
.stat-box {
|
|
background: var(--glass-bg);
|
|
backdrop-filter: blur(10px);
|
|
border: 1px solid var(--glass-border);
|
|
border-radius: 1rem;
|
|
padding: 2rem;
|
|
text-align: center;
|
|
}
|
|
.stat-value {
|
|
font-size: 3rem;
|
|
font-weight: 700;
|
|
color: var(--neon-cyan);
|
|
text-shadow: 0 0 20px var(--neon-cyan);
|
|
}
|
|
.stat-label {
|
|
color: rgba(255, 255, 255, 0.7);
|
|
margin-top: 0.5rem;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Navigation -->
|
|
<header class="header" id="header">
|
|
<nav class="nav container">
|
|
<a href="index.html" class="nav-logo">
|
|
<img src="images/logo/logo.png" alt="MSPE PRO" class="logo-image" width="200" height="50">
|
|
</a>
|
|
|
|
<div class="nav-actions">
|
|
<a href="index.html" class="btn btn-outline">Back to Home</a>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
|
|
<!-- Hero Section -->
|
|
<section class="hero" style="padding: 8rem 0 4rem; min-height: 60vh; display: flex; align-items: center;">
|
|
<div class="container">
|
|
<h1 class="glow-text" style="margin-bottom: 1rem;">Ultimate UI Design System</h1>
|
|
<p style="text-align: center; color: rgba(255, 255, 255, 0.8); font-size: 1.25rem; max-width: 800px; margin: 0 auto;">
|
|
Experience the cutting-edge design featuring glassmorphism, neon accents, custom cursors, particle effects, and advanced interactions.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Features Section -->
|
|
<section class="showcase-section">
|
|
<div class="container">
|
|
<h2 style="text-align: center; color: var(--neon-cyan); font-size: 2.5rem; margin-bottom: 1rem;">
|
|
<i class="fas fa-sparkles"></i> Key Features
|
|
</h2>
|
|
<p style="text-align: center; color: rgba(255, 255, 255, 0.7); margin-bottom: 3rem;">
|
|
Hover over the cards to see the magic happen
|
|
</p>
|
|
|
|
<div class="feature-grid">
|
|
<div class="feature-demo">
|
|
<div class="feature-icon"><i class="fas fa-mouse-pointer"></i></div>
|
|
<h3>Custom Cursor</h3>
|
|
<p>Unique neon cursor with trailing particles that follows your mouse. Transforms on hover over interactive elements.</p>
|
|
</div>
|
|
|
|
<div class="feature-demo">
|
|
<div class="feature-icon"><i class="fas fa-layer-group"></i></div>
|
|
<h3>Glassmorphism</h3>
|
|
<p>Frosted glass effects with backdrop blur, semi-transparent backgrounds, and elegant borders.</p>
|
|
</div>
|
|
|
|
<div class="feature-demo">
|
|
<div class="feature-icon"><i class="fas fa-stars"></i></div>
|
|
<h3>Particle System</h3>
|
|
<p>50 animated particles floating across the screen with varied colors and animation timings.</p>
|
|
</div>
|
|
|
|
<div class="feature-demo">
|
|
<div class="feature-icon"><i class="fas fa-chart-line"></i></div>
|
|
<h3>Scroll Progress</h3>
|
|
<p>Dynamic gradient progress bar at the top showing your scroll position with neon glow.</p>
|
|
</div>
|
|
|
|
<div class="feature-demo">
|
|
<div class="feature-icon"><i class="fas fa-magnet"></i></div>
|
|
<h3>Magnetic Hover</h3>
|
|
<p>Interactive elements attract toward your cursor creating a dynamic, responsive feel.</p>
|
|
</div>
|
|
|
|
<div class="feature-demo">
|
|
<div class="feature-icon"><i class="fas fa-cube"></i></div>
|
|
<h3>3D Card Tilt</h3>
|
|
<p>Cards tilt in 3D space based on cursor position for an immersive experience.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Color Palette Section -->
|
|
<section class="showcase-section">
|
|
<div class="container">
|
|
<h2 style="text-align: center; color: var(--neon-purple); font-size: 2.5rem; margin-bottom: 1rem;">
|
|
<i class="fas fa-palette"></i> Neon Color Palette
|
|
</h2>
|
|
<p style="text-align: center; color: rgba(255, 255, 255, 0.7); margin-bottom: 2rem;">
|
|
Hover over the colors to see them grow
|
|
</p>
|
|
|
|
<div class="color-palette" style="justify-content: center;">
|
|
<div class="color-swatch" style="background: #00f5ff; box-shadow: 0 0 40px rgba(0, 245, 255, 0.5);">
|
|
<span>Neon Cyan</span>
|
|
<span style="font-size: 0.7rem; margin-top: 0.5rem;">#00f5ff</span>
|
|
</div>
|
|
<div class="color-swatch" style="background: #b537f2; box-shadow: 0 0 40px rgba(181, 55, 242, 0.5);">
|
|
<span>Neon Purple</span>
|
|
<span style="font-size: 0.7rem; margin-top: 0.5rem;">#b537f2</span>
|
|
</div>
|
|
<div class="color-swatch" style="background: #ff006e; box-shadow: 0 0 40px rgba(255, 0, 110, 0.5);">
|
|
<span>Neon Pink</span>
|
|
<span style="font-size: 0.7rem; margin-top: 0.5rem;">#ff006e</span>
|
|
</div>
|
|
<div class="color-swatch" style="background: #0080ff; box-shadow: 0 0 40px rgba(0, 128, 255, 0.5);">
|
|
<span>Neon Blue</span>
|
|
<span style="font-size: 0.7rem; margin-top: 0.5rem;">#0080ff</span>
|
|
</div>
|
|
<div class="color-swatch" style="background: #00ff88; box-shadow: 0 0 40px rgba(0, 255, 136, 0.5);">
|
|
<span>Neon Green</span>
|
|
<span style="font-size: 0.7rem; margin-top: 0.5rem;">#00ff88</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Buttons Section -->
|
|
<section class="showcase-section">
|
|
<div class="container">
|
|
<h2 style="text-align: center; color: var(--neon-pink); font-size: 2.5rem; margin-bottom: 1rem;">
|
|
<i class="fas fa-hand-pointer"></i> Interactive Buttons
|
|
</h2>
|
|
<p style="text-align: center; color: rgba(255, 255, 255, 0.7); margin-bottom: 2rem;">
|
|
Click to see the ripple effect, hover for magnetic attraction
|
|
</p>
|
|
|
|
<div class="demo-button-group">
|
|
<button class="btn btn-primary btn-lg">
|
|
<i class="fas fa-rocket"></i> Primary Button
|
|
</button>
|
|
<button class="btn btn-outline btn-lg">
|
|
<i class="fas fa-star"></i> Outline Button
|
|
</button>
|
|
<button class="btn btn-primary">
|
|
<i class="fas fa-heart"></i> Medium Button
|
|
</button>
|
|
<button class="btn btn-outline">
|
|
<i class="fas fa-bolt"></i> Regular Size
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Stats Section -->
|
|
<section class="showcase-section">
|
|
<div class="container">
|
|
<h2 style="text-align: center; color: var(--neon-blue); font-size: 2.5rem; margin-bottom: 3rem;">
|
|
<i class="fas fa-chart-bar"></i> UI Statistics
|
|
</h2>
|
|
|
|
<div class="stats-grid">
|
|
<div class="stat-box">
|
|
<div class="stat-value">50+</div>
|
|
<div class="stat-label">Floating Particles</div>
|
|
</div>
|
|
<div class="stat-box">
|
|
<div class="stat-value">20</div>
|
|
<div class="stat-label">Cursor Trails</div>
|
|
</div>
|
|
<div class="stat-box">
|
|
<div class="stat-value">5</div>
|
|
<div class="stat-label">Neon Colors</div>
|
|
</div>
|
|
<div class="stat-box">
|
|
<div class="stat-value">∞</div>
|
|
<div class="stat-label">Possibilities</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Effects Showcase -->
|
|
<section class="showcase-section">
|
|
<div class="container">
|
|
<h2 style="text-align: center; color: var(--neon-green); font-size: 2.5rem; margin-bottom: 1rem;">
|
|
<i class="fas fa-wand-magic-sparkles"></i> Visual Effects
|
|
</h2>
|
|
<p style="text-align: center; color: rgba(255, 255, 255, 0.7); margin-bottom: 3rem;">
|
|
Multiple layers of animation and interaction
|
|
</p>
|
|
|
|
<div class="feature-grid">
|
|
<div class="card" style="padding: 2rem;">
|
|
<i class="fas fa-eye" style="font-size: 2rem; color: var(--neon-cyan); margin-bottom: 1rem;"></i>
|
|
<h3 style="color: white; margin-bottom: 0.5rem;">Hover Effects</h3>
|
|
<p style="color: rgba(255, 255, 255, 0.7);">Scale, lift, glow, and tilt transformations</p>
|
|
</div>
|
|
|
|
<div class="card" style="padding: 2rem;">
|
|
<i class="fas fa-scroll" style="font-size: 2rem; color: var(--neon-purple); margin-bottom: 1rem;"></i>
|
|
<h3 style="color: white; margin-bottom: 0.5rem;">Scroll Reveals</h3>
|
|
<p style="color: rgba(255, 255, 255, 0.7);">Elements fade in as you scroll down</p>
|
|
</div>
|
|
|
|
<div class="card" style="padding: 2rem;">
|
|
<i class="fas fa-droplet" style="font-size: 2rem; color: var(--neon-pink); margin-bottom: 1rem;"></i>
|
|
<h3 style="color: white; margin-bottom: 0.5rem;">Ripple Effect</h3>
|
|
<p style="color: rgba(255, 255, 255, 0.7);">Click anywhere to create ripples</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Call to Action -->
|
|
<section class="showcase-section" style="border-bottom: none; padding: 6rem 0;">
|
|
<div class="container" style="text-align: center;">
|
|
<h2 class="glow-text" style="font-size: 2.5rem; margin-bottom: 1rem;">
|
|
Ready to Experience More?
|
|
</h2>
|
|
<p style="color: rgba(255, 255, 255, 0.8); font-size: 1.125rem; margin-bottom: 2rem; max-width: 600px; margin-left: auto; margin-right: auto;">
|
|
This ultimate UI design system is applied across all pages of the MSPE website for a consistent, stunning experience.
|
|
</p>
|
|
<div style="display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;">
|
|
<a href="index.html" class="btn btn-primary btn-lg">
|
|
<i class="fas fa-home"></i> Go to Homepage
|
|
</a>
|
|
<a href="about.html" class="btn btn-outline btn-lg">
|
|
<i class="fas fa-info-circle"></i> Learn More
|
|
</a>
|
|
<a href="contact.html" class="btn btn-outline btn-lg">
|
|
<i class="fas fa-envelope"></i> Get in Touch
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer style="background: var(--glass-bg); backdrop-filter: blur(20px); border-top: 1px solid var(--glass-border); padding: 2rem 0; text-align: center;">
|
|
<div class="container">
|
|
<p style="color: rgba(255, 255, 255, 0.7);">
|
|
<i class="fas fa-heart" style="color: var(--neon-pink);"></i>
|
|
Crafted with passion for MSPE - Architects of Digital Resilience
|
|
</p>
|
|
<p style="color: rgba(255, 255, 255, 0.5); margin-top: 0.5rem; font-size: 0.9rem;">
|
|
Ultimate UI Design System v1.0.0 | January 2026
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Back to Top -->
|
|
<button class="back-to-top" id="back-to-top" style="display: flex;">
|
|
<i class="fas fa-chevron-up"></i>
|
|
</button>
|
|
|
|
<!-- Scripts -->
|
|
<script src="js/main.js" defer></script>
|
|
<script src="js/ultimate-ui.js" defer></script>
|
|
<script>
|
|
// Animate stat values
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const statValues = document.querySelectorAll('.stat-value');
|
|
|
|
const animateValue = (el, start, end, duration) => {
|
|
if (el.textContent === '∞') return;
|
|
|
|
let startTimestamp = null;
|
|
const step = (timestamp) => {
|
|
if (!startTimestamp) startTimestamp = timestamp;
|
|
const progress = Math.min((timestamp - startTimestamp) / duration, 1);
|
|
const value = Math.floor(progress * (end - start) + start);
|
|
el.textContent = value + (el.textContent.includes('+') ? '+' : '');
|
|
if (progress < 1) {
|
|
window.requestAnimationFrame(step);
|
|
}
|
|
};
|
|
window.requestAnimationFrame(step);
|
|
};
|
|
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
const value = parseInt(entry.target.textContent);
|
|
if (!isNaN(value)) {
|
|
animateValue(entry.target, 0, value, 2000);
|
|
observer.unobserve(entry.target);
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
statValues.forEach(el => observer.observe(el));
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|