chore: many changes
This commit is contained in:
souldbminersmwc
232
docs/index.html
232
docs/index.html
@@ -1,167 +1,153 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Horizon OC - Switch Overclocking Tool</title>
|
||||
<title>Horizon OC</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
|
||||
<style>
|
||||
/* Background Image Cycling */
|
||||
/* Background gradient */
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: sans-serif;
|
||||
font-family: 'Segoe UI', Roboto, system-ui, sans-serif;
|
||||
color: white;
|
||||
background: linear-gradient(160deg, #1a1a1a 0%, #2a2a2a 50%, #3a3a3a 100%);
|
||||
min-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
color: white;
|
||||
}
|
||||
.bg-slide {
|
||||
position: fixed;
|
||||
top: 0; left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
z-index: -2;
|
||||
opacity: 0;
|
||||
transition: opacity 2s ease-in-out;
|
||||
}
|
||||
.bg-slide.active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Gradient overlay that changes with image */
|
||||
.gradient-overlay {
|
||||
position: fixed;
|
||||
top: 0; left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
transition: background 2s ease-in-out;
|
||||
}
|
||||
|
||||
/* Pop-in effect */
|
||||
.popin {
|
||||
transform: scale(0.8);
|
||||
opacity: 0;
|
||||
transition: transform 0.6s ease, opacity 0.6s ease;
|
||||
}
|
||||
.popin.aos-animate {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Glassmorphism cards */
|
||||
/* Liquid glass panels */
|
||||
.glass {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
backdrop-filter: blur(12px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.25);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
/* Apple-style liquid glass buttons */
|
||||
.liquid-button {
|
||||
padding: 0.75rem 2rem;
|
||||
border-radius: 1.5rem;
|
||||
font-weight: 600;
|
||||
background: rgba(255,255,255,0.2);
|
||||
backdrop-filter: blur(12px);
|
||||
border: 1px solid rgba(255,255,255,0.3);
|
||||
box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 4px 15px rgba(0,0,0,0.25);
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
backdrop-filter: blur(20px);
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.liquid-button:hover {
|
||||
background: rgba(255,255,255,0.3);
|
||||
box-shadow: inset 0 2px 0 rgba(255,255,255,0.35), 0 6px 20px rgba(0,0,0,0.3);
|
||||
|
||||
.glass:hover {
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
|
||||
/* Hero gradient text */
|
||||
.gradient-text {
|
||||
background: linear-gradient(to right, #a3baff, #b8f3ff);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
/* Buttons: Liquid glass style */
|
||||
.button-glass {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.25);
|
||||
color: #fff;
|
||||
padding: 0.8rem 2rem;
|
||||
border-radius: 9999px;
|
||||
font-weight: 600;
|
||||
transition: all 0.25s ease;
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.button-glass:hover {
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
footer {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.15);
|
||||
padding: 1.5rem 0;
|
||||
text-align: center;
|
||||
color: #ccc;
|
||||
font-size: 0.9rem;
|
||||
margin-top: 4rem;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
/* GitHub Icon */
|
||||
.github-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
fill: white;
|
||||
transition: fill 0.3s;
|
||||
}
|
||||
.button-glass:hover .github-icon {
|
||||
fill: #b8f3ff;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="text-white">
|
||||
<!-- Background Images -->
|
||||
<div class="bg-slide" style="background-image: url('img1.png');"></div>
|
||||
<div class="bg-slide" style="background-image: url('img2.png');"></div>
|
||||
<div class="bg-slide" style="background-image: url('img3.png');"></div>
|
||||
<body>
|
||||
|
||||
<!-- Gradient overlay -->
|
||||
<div class="gradient-overlay" id="gradient-overlay" style="background: linear-gradient(135deg, rgba(50,0,100,0.6), rgba(0,0,50,0.6));"></div>
|
||||
<!-- Header -->
|
||||
<header class="text-center py-20">
|
||||
<h1 class="text-6xl font-extrabold mb-4 gradient-text">Horizon OC</h1>
|
||||
<p class="text-gray-300 text-lg">Upgrade the performance of your Nintendo Switch Console</p>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<header class="text-center py-28 relative overflow-hidden popin" data-aos="popin">
|
||||
<h1 class="text-6xl font-extrabold mb-4 drop-shadow-lg">Horizon OC</h1>
|
||||
<p class="text-lg text-gray-200 mt-4">
|
||||
Upgrade the performance of your Nintendo Switch Console
|
||||
</p>
|
||||
<div class="mt-8 flex justify-center gap-6">
|
||||
<a href="#download" class="liquid-button">Download Now</a>
|
||||
<a href="benchmarks.html" class="liquid-button">View Benchmarks</a>
|
||||
<div class="mt-6 flex justify-center gap-4">
|
||||
<a href="#download" class="button-glass">Download Now</a>
|
||||
<a href="configurator.html" class="button-glass">Open Configurator</a>
|
||||
<a href="https://github.com/Horizon-OC/Horizon-OC" target="_blank" class="button-glass">
|
||||
<!-- GitHub SVG Icon -->
|
||||
<svg class="github-icon" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8a8 8 0 005.47 7.59c.4.07.55-.17.55-.38v-1.32C3.73 14.9 3.27 13.4 3.27 13.4c-.36-.9-.88-1.14-.88-1.14-.72-.49.05-.48.05-.48.8.06 1.22.83 1.22.83.71 1.21 1.87.86 2.33.66.07-.52.28-.86.5-1.06-2.22-.25-4.55-1.11-4.55-4.95 0-1.09.39-1.98 1.03-2.68-.1-.25-.45-1.27.1-2.65 0 0 .84-.27 2.75 1.02A9.56 9.56 0 018 3.43a9.6 9.6 0 012.5.34c1.9-1.29 2.74-1.02 2.74-1.02.55 1.38.2 2.4.1 2.65.64.7 1.03 1.59 1.03 2.68 0 3.85-2.34 4.7-4.57 4.95.29.25.54.73.54 1.48v2.2c0 .21.15.45.55.38A8 8 0 0016 8c0-4.42-3.58-8-8-8z"/>
|
||||
</svg>
|
||||
GitHub
|
||||
</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- About -->
|
||||
<section class="max-w-4xl mx-auto text-center py-20 px-6 popin" data-aos="popin" data-aos-delay="100">
|
||||
<h2 class="text-4xl font-bold mb-6">What is Horizon OC?</h2>
|
||||
<p class="text-gray-300 text-lg leading-relaxed">
|
||||
HOC is a tool to overclock your modded Nintendo Switch Console.
|
||||
This can help improve framrates, load times and latency in games.
|
||||
<!-- About Section -->
|
||||
<section class="max-w-3xl mx-auto text-center py-16 px-6 glass" data-aos="fade-up">
|
||||
<h2 class="text-3xl font-bold mb-4">What is Horizon OC?</h2>
|
||||
<p class="text-gray-300">
|
||||
Horizon OC is a tool to overclock your modded Nintendo Switch console.
|
||||
This can help improve frame rates, load times, and latency in games.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<!-- Features -->
|
||||
<section class="py-20">
|
||||
<div class="max-w-6xl mx-auto px-6 grid md:grid-cols-3 gap-10">
|
||||
<div class="glass p-8 rounded-2xl shadow-xl hover:scale-105 transition popin" data-aos="popin" data-aos-delay="200">
|
||||
<h3 class="text-2xl font-semibold mb-3">⚡ Performance</h3>
|
||||
<p class="text-gray-300">Overclocking your console can lead to significantly better performance in demanding titles</p>
|
||||
<div class="max-w-6xl mx-auto grid md:grid-cols-3 gap-8 px-6">
|
||||
<div class="glass p-6 text-center" data-aos="zoom-in" data-aos-delay="100">
|
||||
<h3 class="text-xl font-semibold mb-2">⚡ Performance</h3>
|
||||
<p class="text-gray-300">Overclocking your console can lead to significantly better performance in demanding titles.</p>
|
||||
</div>
|
||||
<div class="glass p-8 rounded-2xl shadow-xl hover:scale-105 transition popin" data-aos="popin" data-aos-delay="300">
|
||||
<h3 class="text-2xl font-semibold mb-3">☣ Safely</h3>
|
||||
<p class="text-gray-300">Horizon OC aims to be as safe as possible, while allowing advanced users to customize it further</p>
|
||||
<div class="glass p-6 text-center" data-aos="zoom-in" data-aos-delay="200">
|
||||
<h3 class="text-xl font-semibold mb-2">☣ Safety</h3>
|
||||
<p class="text-gray-300">Horizon OC aims to be as safe as possible, while allowing advanced users to customize it further.</p>
|
||||
</div>
|
||||
<div class="glass p-8 rounded-2xl shadow-xl hover:scale-105 transition popin" data-aos="popin" data-aos-delay="400">
|
||||
<h3 class="text-2xl font-semibold mb-3">🔧 Customizable</h3>
|
||||
<p class="text-gray-300">Horizon OC comes with a advanced configurator which allows you to customize it to your own needs</p>
|
||||
<div class="glass p-6 text-center" data-aos="zoom-in" data-aos-delay="300">
|
||||
<h3 class="text-xl font-semibold mb-2">🔧 Customizable</h3>
|
||||
<p class="text-gray-300">Horizon OC comes with an advanced configurator allowing you to tune it for your own needs.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Download -->
|
||||
<section id="download" class="text-center py-24 popin" data-aos="popin" data-aos-delay="500">
|
||||
<!-- Download Section -->
|
||||
<section id="download" class="text-center py-20 glass max-w-3xl mx-auto px-6" data-aos="fade-up">
|
||||
<h2 class="text-3xl font-bold mb-6">Get Horizon OC</h2>
|
||||
<a href="#" class="liquid-button">Download Latest Release</a>
|
||||
<p class="text-gray-400 mt-4">Ensure to use the latest version of Atmosphere</p>
|
||||
<a href="#" class="button-glass">Download Latest Release</a>
|
||||
<p class="text-gray-400 mt-4">Ensure you are using the latest version of Atmosphere.</p>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-black bg-opacity-60 text-center py-6 text-gray-500 text-sm popin" data-aos="popin">
|
||||
This website is open source!
|
||||
<footer>
|
||||
This website is open source and licensed under the GPLv2.
|
||||
</footer>
|
||||
|
||||
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
|
||||
<script>
|
||||
AOS.init({ once: true, duration: 800 });
|
||||
|
||||
// Background image cycling with gradient
|
||||
const slides = document.querySelectorAll('.bg-slide');
|
||||
const gradientOverlay = document.getElementById('gradient-overlay');
|
||||
|
||||
const gradients = [
|
||||
'linear-gradient(135deg, rgba(80,0,150,0.6), rgba(0,0,60,0.6))',
|
||||
'linear-gradient(135deg, rgba(150,50,0,0.6), rgba(50,0,0,0.6))',
|
||||
'linear-gradient(135deg, rgba(0,100,150,0.6), rgba(0,30,50,0.6))'
|
||||
];
|
||||
|
||||
let current = 0;
|
||||
function cycleBg() {
|
||||
slides.forEach((s,i)=>s.classList.remove('active'));
|
||||
slides[current].classList.add('active');
|
||||
gradientOverlay.style.background = gradients[current];
|
||||
current = (current+1)%slides.length;
|
||||
}
|
||||
cycleBg();
|
||||
setInterval(cycleBg, 6000); // every 6s
|
||||
</script>
|
||||
<script>AOS.init({ once: true, duration: 800 });</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user