154 lines
5.5 KiB
HTML
154 lines
5.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<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 gradient */
|
|
body {
|
|
margin: 0;
|
|
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;
|
|
}
|
|
|
|
/* Liquid glass panels */
|
|
.glass {
|
|
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;
|
|
}
|
|
|
|
.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>
|
|
|
|
<!-- 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>
|
|
|
|
<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 -->
|
|
<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 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-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-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 -->
|
|
<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="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>
|
|
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 });</script>
|
|
</body>
|
|
</html>
|