cyberorigin-ai-video / index.html
maxtom0's picture
Add 2 files
3328cee verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Adrenaline Rush | Exciting Videos</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
:root {
--primary-color: #ff3e00;
--secondary-color: #0011ff;
--dark-color: #111;
--light-color: #f0f0f0;
--gradient: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background-color: var(--dark-color);
color: var(--light-color);
overflow-x: hidden;
}
header {
background: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(10px);
padding: 1.5rem 5%;
position: fixed;
width: 100%;
z-index: 100;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 5px 30px rgba(0, 0, 0, 0.3);
}
.logo {
display: flex;
align-items: center;
gap: 10px;
}
.logo i {
font-size: 2rem;
background: var(--gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.logo h1 {
font-size: 1.8rem;
font-weight: 800;
background: var(--gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
nav ul {
display: flex;
gap: 2rem;
list-style: none;
}
nav a {
color: var(--light-color);
text-decoration: none;
font-weight: 600;
position: relative;
transition: all 0.3s ease;
}
nav a::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 0;
height: 2px;
background: var(--gradient);
transition: width 0.3s ease;
}
nav a:hover::after {
width: 100%;
}
.hero {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 0 5%;
position: relative;
overflow: hidden;
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.8)), url('https://images.unsplash.com/photo-1518455027359-f3f8164ba6bd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1800&q=80');
background-size: cover;
background-position: center;
}
.hero h1 {
font-size: 4rem;
margin-bottom: 1rem;
background: var(--gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: fadeInDown 1s ease;
}
.hero p {
font-size: 1.5rem;
margin-bottom: 2rem;
max-width: 800px;
animation: fadeInUp 1s ease 0.3s forwards;
opacity: 0;
}
.scroll-down {
position: absolute;
bottom: 30px;
animation: bounce 2s infinite;
}
.scroll-down i {
font-size: 2rem;
color: var(--light-color);
opacity: 0.7;
}
main {
padding: 5rem 5% 3rem;
}
.section-title {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
position: relative;
padding-bottom: 1rem;
}
.section-title h2 {
font-size: 2.5rem;
background: var(--gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.section-title::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100px;
height: 4px;
background: var(--gradient);
border-radius: 2px;
}
.video-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 2rem;
margin-bottom: 5rem;
}
.video-card {
background: rgba(255, 255, 255, 0.08);
border-radius: 10px;
overflow: hidden;
transition: all 0.3s ease;
position: relative;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
.video-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
}
.video-thumbnail {
position: relative;
height: 200px;
overflow: hidden;
}
.video-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.video-card:hover .video-thumbnail img {
transform: scale(1.1);
}
.play-button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 60px;
height: 60px;
background: rgba(255, 255, 255, 0.8);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
transition: all 0.3s ease;
}
.play-button i {
color: var(--primary-color);
font-size: 1.5rem;
margin-left: 5px;
}
.video-card:hover .play-button {
opacity: 1;
}
.video-info {
padding: 1.5rem;
}
.video-info h3 {
font-size: 1.2rem;
margin-bottom: 0.5rem;
}
.video-info p {
color: rgba(255, 255, 255, 0.7);
font-size: 0.9rem;
margin-bottom: 1rem;
}
.video-stats {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.5);
}
.video-stats span {
display: flex;
align-items: center;
gap: 5px;
}
.category-tabs {
display: flex;
gap: 1rem;
margin-bottom: 2rem;
flex-wrap: wrap;
}
.category-tab {
padding: 0.5rem 1rem;
background: rgba(255, 255, 255, 0.1);
border-radius: 20px;
cursor: pointer;
transition: all 0.3s ease;
font-size: 0.9rem;
}
.category-tab:hover {
background: var(--primary-color);
}
.category-tab.active {
background: var(--gradient);
font-weight: 600;
}
.featured-video {
margin-bottom: 5rem;
position: relative;
height: 600px;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}
.featured-video iframe {
width: 100%;
height: 100%;
border: none;
}
.featured-content {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 2rem;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
}
.featured-content h3 {
font-size: 2rem;
margin-bottom: 0.5rem;
}
.featured-content p {
color: rgba(255, 255, 255, 0.8);
max-width: 800px;
}
footer {
background: rgba(0, 0, 0, 0.8);
padding: 3rem 5%;
text-align: center;
}
.footer-content {
max-width: 800px;
margin: 0 auto;
}
.footer-logo {
font-size: 2rem;
font-weight: 800;
background: var(--gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 1rem;
}
.social-links {
display: flex;
justify-content: center;
gap: 1.5rem;
margin-bottom: 2rem;
}
.social-links a {
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
display: flex;
justify-content: center;
align-items: center;
color: var(--light-color);
transition: all 0.3s ease;
}
.social-links a:hover {
background: var(--gradient);
transform: translateY(-5px);
}
.copyright {
color: rgba(255, 255, 255, 0.5);
font-size: 0.9rem;
}
/* Animations */
@keyframes fadeInDown {
from {
opacity: 0;
transform: translateY(-30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-20px);
}
60% {
transform: translateY(-10px);
}
}
/* Modal */
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.9);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.modal.active {
opacity: 1;
visibility: visible;
}
.modal-content {
width: 80%;
max-width: 1000px;
position: relative;
}
.modal-close {
position: absolute;
top: -50px;
right: 0;
color: white;
font-size: 2rem;
cursor: pointer;
transition: all 0.3s ease;
}
.modal-close:hover {
color: var(--primary-color);
}
.modal-video {
width: 100%;
aspect-ratio: 16/9;
}
/* Responsive */
@media (max-width: 768px) {
.hero h1 {
font-size: 2.5rem;
}
.hero p {
font-size: 1.1rem;
}
.section-title h2 {
font-size: 1.8rem;
}
.featured-video {
height: 400px;
}
.featured-content h3 {
font-size: 1.5rem;
}
nav ul {
gap: 1rem;
}
}
@media (max-width: 480px) {
.hero {
height: 80vh;
}
.hero h1 {
font-size: 2rem;
}
.video-grid {
grid-template-columns: 1fr;
}
.featured-video {
height: 250px;
}
.featured-content {
padding: 1rem;
}
.featured-content h3 {
font-size: 1.2rem;
}
}
</style>
</head>
<body>
<header>
<div class="logo">
<i class="fas fa-bolt"></i>
<h1>Adrenaline Rush</h1>
</div>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Videos</a></li>
<li><a href="#">Channels</a></li>
<li><a href="#">Subscribe</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
</header>
<section class="hero">
<h1>Experience the Ultimate Thrill</h1>
<p>Watch the most exciting, action-packed videos from around the world. From extreme sports to breathtaking adventures, we've got it all.</p>
<div class="scroll-down">
<i class="fas fa-chevron-down"></i>
</div>
</section>
<main>
<section class="featured-video">
<iframe src="https://www.youtube.com/embed/6z4qH3o_cT8?autoplay=1&mute=1&controls=0" allowfullscreen></iframe>
<div class="featured-content">
<h3>Extreme Wingsuit Flight Through Mountain Pass</h3>
<p>Watch as professional wingsuit flyer navigates through narrow mountain valleys at over 200km/h - one of the most breathtaking flights ever captured on camera.</p>
</div>
</section>
<div class="category-tabs">
<div class="category-tab active">All Videos</div>
<div class="category-tab">Extreme Sports</div>
<div class="category-tab">Adventure</div>
<div class="category-tab">Action Cam</div>
<div class="category-tab">Motorsports</div>
<div class="category-tab">Stunts</div>
</div>
<div class="section-title">
<h2>Trending Now</h2>
</div>
<div class="video-grid">
<div class="video-card" data-video="https://www.youtube.com/embed/JkWaprX2Z1c">
<div class="video-thumbnail">
<img src="https://i.ytimg.com/vi/JkWaprX2Z1c/maxresdefault.jpg" alt="Cliff Jumping">
<div class="play-button">
<i class="fas fa-play"></i>
</div>
</div>
<div class="video-info">
<h3>World's Highest Cliff Jump - 58 Meters!</h3>
<p>Professional cliff diver takes on the world record attempt from an insane height.</p>
<div class="video-stats">
<span><i class="fas fa-eye"></i> 12M views</span>
<span><i class="fas fa-calendar-alt"></i> 1 week ago</span>
</div>
</div>
</div>
<div class="video-card" data-video="https://www.youtube.com/embed/6f5FB9ZbDY0">
<div class="video-thumbnail">
<img src="https://i.ytimg.com/vi/6f5FB9ZbDY0/maxresdefault.jpg" alt="Mountain Biking">
<div class="play-button">
<i class="fas fa-play"></i>
</div>
</div>
<div class="video-info">
<h3>Insane Downhill Mountain Bike Run</h3>
<p>Record-breaking descent through treacherous terrain at speeds exceeding 80km/h.</p>
<div class="video-stats">
<span><i class="fas fa-eye"></i> 8.5M views</span>
<span><i class="fas fa-calendar-alt"></i> 3 days ago</span>
</div>
</div>
</div>
<div class="video-card" data-video="https://www.youtube.com/embed/RMqiw2h2z1g">
<div class="video-thumbnail">
<img src="https://i.ytimg.com/vi/RMqiw2h2z1g/maxresdefault.jpg" alt="Surfing">
<div class="play-button">
<i class="fas fa-play"></i>
</div>
</div>
<div class="video-info">
<h3>Monster Waves at Nazaré, Portugal</h3>
<p>Surfers tackle some of the biggest waves ever ridden during massive winter swell.</p>
<div class="video-stats">
<span><i class="fas fa-eye"></i> 15.2M views</span>
<span><i class="fas fa-calendar-alt"></i> 2 weeks ago</span>
</div>
</div>
</div>
<div class="video-card" data-video="https://www.youtube.com/embed/W_s7K2FofTw">
<div class="video-thumbnail">
<img src="https://i.ytimg.com/vi/W_s7K2FofTw/maxresdefault.jpg" alt="Base Jumping">
<div class="play-button">
<i class="fas fa-play"></i>
</div>
</div>
<div class="video-info">
<h3>Night Base Jump From Dubai Skyscraper</h3>
<p>Daring jumpers leap from one of the world's tallest buildings under cover of darkness.</p>
<div class="video-stats">
<span><i class="fas fa-eye"></i> 9.7M views</span>
<span><i class="fas fa-calendar-alt"></i> 5 days ago</span>
</div>
</div>
</div>
<div class="video-card" data-video="https://www.youtube.com/embed/9kUfqhTwZkQ">
<div class="video-thumbnail">
<img src="https://i.ytimg.com/vi/9kUfqhTwZkQ/maxresdefault.jpg" alt="Rally Racing">
<div class="play-button">
<i class="fas fa-play"></i>
</div>
</div>
<div class="video-info">
<h3>Dirt Rally 2.0 - Most Intense Crashes</h3>
<p>Compilation of the most spectacular rally crashes from past decade of competition.</p>
<div class="video-stats">
<span><i class="fas fa-eye"></i> 7.3M views</span>
<span><i class="fas fa-calendar-alt"></i> 1 week ago</span>
</div>
</div>
</div>
<div class="video-card" data-video="https://www.youtube.com/embed/lK0vph1z0B8">
<div class="video-thumbnail">
<img src="https://i.ytimg.com/vi/lK0vph1z0B8/maxresdefault.jpg" alt="Snowboarding">
<div class="play-button">
<i class="fas fa-play"></i>
</div>
</div>
<div class="video-info">
<h3>Backcountry Snowboarding in Alaska</h3>
<p>Riding untouched powder in the most remote Alaskan mountains with pro riders.</p>
<div class="video-stats">
<span><i class="fas fa-eye"></i> 6.1M views</span>
<span><i class="fas fa-calendar-alt"></i> 3 days ago</span>
</div>
</div>
</div>
</div>
<div class="section-title">
<h2>Recently Added</h2>
</div>
<div class="video-grid">
<div class="video-card" data-video="https://www.youtube.com/embed/Mv8Mok5obpg">
<div class="video-thumbnail">
<img src="https://i.ytimg.com/vi/Mv8Mok5obpg/maxresdefault.jpg" alt="Freestyle Motocross">
<div class="play-button">
<i class="fas fa-play"></i>
</div>
</div>
<div class="video-info">
<h3>Freestyle Motocross Backflip Fail Compilation</h3>
<p>Craziest FMX fails that will make your jaw drop - riders walking away miraculously.</p>
<div class="video-stats">
<span><i class="fas fa-eye"></i> 3.2M views</span>
<span><i class="fas fa-calendar-alt"></i> 1 day ago</span>
</div>
</div>
</div>
<div class="video-card" data-video="https://www.youtube.com/embed/yZ6MekPltwk">
<div class="video-thumbnail">
<img src="https://i.ytimg.com/vi/yZ6MekPltwk/maxresdefault.jpg" alt="Parkour">
<div class="play-button">
<i class="fas fa-play"></i>
</div>
</div>
<div class="video-info">
<h3>Urban Parkour in Abandoned City</h3>
<p>Parkour athletes take on an entire abandoned city with incredible precision.</p>
<div class="video-stats">
<span><i class="fas fa-eye"></i> 4.7M views</span>
<span><i class="fas fa-calendar-alt"></i> 2 days ago</span>
</div>
</div>
</div>
<div class="video-card" data-video="https://www.youtube.com/embed/rFuR1j7vDfY">
<div class="video-thumbnail">
<img src="https://i.ytimg.com/vi/rFuR1j7vDfY/maxresdefault.jpg" alt="Skateboarding">
<div class="play-button">
<i class="fas fa-play"></i>
</div>
</div>
<div class="video-info">
<h3>Skateboarding's Most Impossible Tricks</h3>
<p>Groundbreaking tricks that seemed impossible just a few years ago.</p>
<div class="video-stats">
<span><i class="fas fa-eye"></i> 5.8M views</span>
<span><i class="fas fa-calendar-alt"></i> 4 days ago</span>
</div>
</div>
</div>
</div>
</main>
<footer>
<div class="footer-content">
<div class="footer-logo">Adrenaline Rush</div>
<div class="social-links">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-youtube"></i></a>
<a href="#"><i class="fab fa-tiktok"></i></a>
</div>
<div class="copyright">
&copy; 2023 Adrenaline Rush. All rights reserved.
</div>
</div>
</footer>
<!-- Video Modal -->
<div class="modal">
<div class="modal-content">
<span class="modal-close"><i class="fas fa-times"></i></span>
<iframe class="modal-video" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Video modal functionality
const videoCards = document.querySelectorAll('.video-card');
const modal = document.querySelector('.modal');
const modalClose = document.querySelector('.modal-close');
const modalVideo = document.querySelector('.modal-video');
videoCards.forEach(card => {
card.addEventListener('click', function() {
const videoSrc = this.getAttribute('data-video');
modalVideo.src = videoSrc;
modal.classList.add('active');
});
});
modalClose.addEventListener('click', function() {
modal.classList.remove('active');
modalVideo.src = '';
});
// Category tabs functionality
const categoryTabs = document.querySelectorAll('.category-tab');
categoryTabs.forEach(tab => {
tab.addEventListener('click', function() {
categoryTabs.forEach(t => t.classList.remove('active'));
this.classList.add('active');
// In a real implementation, you would filter videos here
});
});
// Smooth scroll for hero down arrow
const scrollDown = document.querySelector('.scroll-down');
scrollDown.addEventListener('click', function() {
window.scrollTo({
top: document.querySelector('main').offsetTop - 80,
behavior: 'smooth'
});
});
// Parallax effect for hero section
window.addEventListener('scroll', function() {
const scrollPosition = window.scrollY;
const hero = document.querySelector('.hero');
hero.style.backgroundPositionY = scrollPosition * 0.5 + 'px';
});
});
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body>
</html>