Hugging Face's logo

Spaces:
fLausch
/
anycoder-bf6ff1ff
Running

App Files Community
anycoder-bf6ff1ff / index.html
fLausch's picture
fLausch
Upload folder using huggingface_hub
e6b697e verified
raw
history blame contribute delete
27.1 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Filmpremier | Exclusive Movie Events</title>
<!-- Google Fonts -->
<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=Playfair+Display:wght@400;700;900&family=Lato:wght@300;400;700&display=swap" rel="stylesheet">
<!-- Font Awesome for Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
:root {
--primary-color: #d4af37; /* Gold */
--primary-hover: #b5952f;
--dark-bg: #0a0a0a;
--light-text: #f5f5f5;
--gray-text: #a0a0a0;
--card-bg: #1a1a1a;
--transition: all 0.3s ease;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Lato', sans-serif;
background-color: var(--dark-bg);
color: var(--light-text);
line-height: 1.6;
overflow-x: hidden;
}
h1, h2, h3, h4 {
font-family: 'Playfair Display', serif;
font-weight: 700;
}
a {
text-decoration: none;
color: inherit;
}
ul {
list-style: none;
}
/* --- Navigation --- */
nav {
position: fixed;
top: 0;
width: 100%;
padding: 1.5rem 5%;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 1000;
transition: var(--transition);
}
nav.scrolled {
background-color: rgba(10, 10, 10, 0.9);
backdrop-filter: blur(10px);
padding: 1rem 5%;
box-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
.logo {
font-family: 'Playfair Display', serif;
font-size: 2rem;
font-weight: 900;
color: var(--light-text);
letter-spacing: 2px;
}
.logo span {
color: var(--primary-color);
}
.nav-links {
display: flex;
gap: 2rem;
}
.nav-links a {
color: var(--light-text);
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 1px;
transition: var(--transition);
position: relative;
}
.nav-links a:hover {
color: var(--primary-color);
}
.nav-links a::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: -5px;
left: 0;
background-color: var(--primary-color);
transition: var(--transition);
}
.nav-links a:hover::after {
width: 100%;
}
.cta-btn {
padding: 0.8rem 2rem;
background-color: var(--primary-color);
color: var(--dark-bg);
font-weight: 700;
text-transform: uppercase;
font-size: 0.8rem;
letter-spacing: 2px;
transition: var(--transition);
border: 1px solid var(--primary-color);
}
.cta-btn:hover {
background-color: transparent;
color: var(--primary-color);
}
.hamburger {
display: none;
cursor: pointer;
font-size: 1.5rem;
color: var(--light-text);
}
/* --- Hero Section --- */
.hero {
height: 100vh;
width: 100%;
position: relative;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
overflow: hidden;
}
.hero-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
filter: brightness(0.4);
}
.hero-content {
max-width: 800px;
padding: 0 20px;
animation: fadeInUp 1s ease;
}
.hero h1 {
font-size: 5rem;
line-height: 1.1;
margin-bottom: 1.5rem;
color: #fff;
text-shadow: 0 4px 10px rgba(0,0,0,0.5);
}
.hero p {
font-size: 1.5rem;
color: #ddd;
margin-bottom: 2.5rem;
font-weight: 300;
}
.hero-btns {
display: flex;
gap: 1rem;
justify-content: center;
}
.btn-secondary {
padding: 0.8rem 2.5rem;
border: 1px solid var(--light-text);
color: var(--light-text);
text-transform: uppercase;
font-size: 0.8rem;
letter-spacing: 2px;
transition: var(--transition);
background: transparent;
}
.btn-secondary:hover {
background: rgba(255,255,255,0.1);
border-color: var(--primary-color);
color: var(--primary-color);
}
/* --- About Section --- */
.section {
padding: 8rem 10%;
}
.section-title {
text-align: center;
margin-bottom: 4rem;
}
.section-title h2 {
font-size: 3.5rem;
margin-bottom: 1rem;
color: var(--light-text);
}
.section-title .line {
width: 80px;
height: 4px;
background-color: var(--primary-color);
margin: 0 auto;
}
.about-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
.about-text p {
color: var(--gray-text);
margin-bottom: 1.5rem;
}
.about-image {
width: 100%;
height: 500px;
object-fit: cover;
border-radius: 4px;
box-shadow: 20px 20px 0px var(--primary-color);
}
/* --- Movies / Features --- */
.movies-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 3rem;
}
.movie-card {
background-color: var(--card-bg);
border-radius: 8px;
overflow: hidden;
transition: var(--transition);
position: relative;
}
.movie-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0,0,0,0.6);
}
.movie-img {
width: 100%;
height: 450px;
object-fit: cover;
transition: var(--transition);
}
.movie-card:hover .movie-img {
transform: scale(1.05);
}
.movie-info {
padding: 2rem;
}
.movie-meta {
display: flex;
justify-content: space-between;
font-size: 0.85rem;
color: var(--primary-color);
margin-bottom: 1rem;
text-transform: uppercase;
letter-spacing: 1px;
}
.movie-info h3 {
font-size: 2rem;
margin-bottom: 0.5rem;
}
.movie-info p {
color: var(--gray-text);
font-size: 0.95rem;
margin-bottom: 1.5rem;
}
.ticket-btn {
display: inline-block;
padding: 0.7rem 1.5rem;
background-color: transparent;
border: 1px solid var(--light-text);
color: var(--light-text);
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 2px;
transition: var(--transition);
width: 100%;
text-align: center;
}
.movie-card:hover .ticket-btn {
background-color: var(--primary-color);
border-color: var(--primary-color);
color: var(--dark-bg);
}
/* --- Events / Features --- */
.features-section {
background-color: #111;
text-align: center;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 3rem;
}
.feature-item {
padding: 2rem;
}
.feature-icon {
font-size: 3rem;
color: var(--primary-color);
margin-bottom: 1.5rem;
}
.feature-item h3 {
font-size: 1.5rem;
margin-bottom: 1rem;
}
.feature-item p {
color: var(--gray-text);
}
/* --- Newsletter --- */
.newsletter {
background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('https://images.unsplash.com/photo-1536440136628-849c177e76a1?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80');
background-size: cover;
background-position: center;
text-align: center;
padding: 6rem 2rem;
}
.newsletter h2 {
font-size: 3rem;
margin-bottom: 1rem;
}
.newsletter p {
color: var(--gray-text);
margin-bottom: 2.5rem;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.newsletter-form {
display: flex;
justify-content: center;
gap: 10px;
max-width: 500px;
margin: 0 auto;
}
.newsletter-input {
flex: 1;
padding: 1rem;
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.2);
color: #fff;
border-radius: 4px;
}
.newsletter-input::placeholder {
color: #aaa;
}
/* --- Footer --- */
footer {
background-color: #050505;
padding: 5rem 10% 2rem;
border-top: 1px solid #222;
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 3rem;
margin-bottom: 4rem;
}
.footer-col h4 {
color: var(--light-text);
font-size: 1.2rem;
margin-bottom: 1.5rem;
font-family: 'Playfair Display', serif;
}
.footer-col ul li {
margin-bottom: 0.8rem;
}
.footer-col ul li a {
color: var(--gray-text);
font-size: 0.9rem;
transition: var(--transition);
}
.footer-col ul li a:hover {
color: var(--primary-color);
padding-left: 5px;
}
.social-links {
display: flex;
gap: 1.5rem;
margin-top: 2rem;
}
.social-links a {
color: var(--light-text);
font-size: 1.2rem;
transition: var(--transition);
}
.social-links a:hover {
color: var(--primary-color);
}
.footer-bottom {
text-align: center;
padding-top: 2rem;
border-top: 1px solid #1a1a1a;
color: var(--gray-text);
font-size: 0.85rem;
}
.anycoder-link {
display: inline-block;
margin-top: 10px;
color: #5e5e5e;
font-size: 0.75rem;
text-decoration: underline;
}
.anycoder-link:hover {
color: var(--primary-color);
}
/* --- Responsive Design --- */
@media (max-width: 992px) {
.hero h1 { font-size: 3.5rem; }
.about-content { grid-template-columns: 1fr; }
.about-image { width: 100%; height: 350px; }
}
@media (max-width: 768px) {
.nav-links {
position: fixed;
top: 70px;
left: 0;
width: 100%;
background-color: var(--dark-bg);
flex-direction: column;
align-items: center;
padding: 2rem 0;
transform: translateY(-150%);
transition: transform 0.4s ease-in-out;
box-shadow: 0 10px 20px rgba(0,0,0,0.5);
}
.nav-links.active {
transform: translateY(0);
}
.hamburger {
display: block;
z-index: 1001;
}
.hero h1 { font-size: 2.5rem; }
.hero p { font-size: 1.1rem; }
.hero-btns { flex-direction: column; }
.footer-grid {
grid-template-columns: 1fr;
text-align: center;
}
.social-links { justify-content: center; }
}
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
</style>
</head>
<body>
<!-- Navigation -->
<nav id="navbar">
<a href="#" class="logo">FILM<span>PREMIER</span></a>
<div class="hamburger" id="hamburger">
<i class="fas fa-bars"></i>
</div>
<div class="nav-links" id="nav-links">
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#movies">Now Screening</a>
<a href="#events">Experiences</a>
<a href="#newsletter" class="cta-btn">Join Club</a>
</div>
</nav>
<!-- Hero Section -->
<section class="hero" id="home">
<img src="https://images.unsplash.com/photo-1598880940044-5a32c707908d?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80" alt="Cinema Screen" class="hero-bg">
<div class="hero-content">
<h1>Cinema Reimagined</h1>
<p>Experience the magic of the movies like never before. Exclusive premieres, premium comfort, and unforgettable moments.</p>
<div class="hero-btns">
<a href="#movies" class="cta-btn">Get Tickets</a>
<a href="#about" class="btn-secondary">Our Story</a>
</div>
</div>
</section>
<!-- About Section -->
<section class="section" id="about">
<div class="about-content">
<div class="about-text">
<div class="section-title" style="text-align: left; margin-bottom: 2rem;">
<h2 style="text-align: left;">More Than Just a Movie</h2>
<div class="line" style="margin: 0;"></div>
</div>
<p>At Filmpremier, we believe that going to the cinema is an event, not just a pastime. Established in 2024, we have redefined the movie-going experience by blending cutting-edge technology with timeless comfort.</p>
<p>From our Dolby Atmos sound systems to our plush leather recliners, every detail is designed to immerse you fully into the story. Whether it's a blockbuster premiere or an indie masterpiece, we ensure the focus remains on the screen.</p>
<p>Join our exclusive membership club to access VIP screenings, director Q&As, and priority booking for the hottest releases.</p>
<br>
<a href="#" class="cta-btn" style="padding: 1rem 2.5rem;">Discover Luxury</a>
</div>
<div class="about-image-container">
<img src="https://images.unsplash.com/photo-1514432324607-a09d9b4aefdd?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Luxury Cinema Seat" class="about-image">
</div>
</div>
</section>
<!-- Movies Section -->
<section class="section" id="movies" style="background-color: #0f0f0f;">
<div class="section-title">
<h2>Currently Screening</h2>
<div class="line"></div>
</div>
<div class="movies-grid">
<!-- Movie 1 -->
<div class="movie-card">
<img src="https://images.unsplash.com/photo-1626814026160-2237a95fc5a4?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Movie Poster" class="movie-img">
<div class="movie-info">
<div class="movie-meta">
<span>Sci-Fi</span>
<span>2h 15m</span>
<span>4K Dolby Vision</span>
</div>
<h3>The Last Horizon</h3>
<p>When humanity's last hope finds itself lost in deep space, a lone pilot must face the unknown to save us all.</p>
<button class="ticket-btn">Book Now</button>
</div>
</div>
<!-- Movie 2 -->
<div class="movie-card">
<img src="https://images.unsplash.com/photo-1626814026123-6598ed7dc554?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Movie Poster" class="movie-img">
<div class="movie-info">
<div class="movie-meta">
<span>Thriller</span>
<span>1h 58m</span>
<span>IMAX</span>
</div>
<h3>Shadows of the Past</h3>
<p>A detective uncovering a conspiracy that reaches the highest echelons of power must stay one step ahead.</p>
<button class="ticket-btn">Book Now</button>
</div>
</div>
<!-- Movie 3 -->
<div class="movie-card">
<img src="https://images.unsplash.com/photo-1579345255543-c41700357064?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Movie Poster" class="movie-img">
<div class="movie-info">
<div class="movie-meta">
<span>Documentary</span>
<span>1h 30m</span>
<span>Dolby Atmos</span>
</div>
<h3>Oceans Unseen</h3>
<p>Explore the deepest, darkest corners of our planet's final frontier. A visual masterpiece.</p>
<button class="ticket-btn">Book Now</button>
</div>
</div>
<!-- Movie 4 -->
<div class="movie-card">
<img src="https://images.unsplash.com/photo-1626814026193-22f695988715?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Movie Poster" class="movie-img">
<div class="movie-info">
<div class="movie-meta">
<span>Horror</span>
<span>2h 05m</span>
<span>Standard</span>
</div>
<h3>The Whispering House</h3>
<p>After inheriting a remote manor, a family discovers the walls have ears—and they're hungry.</p>
<button class="ticket-btn">Book Now</button>
</div>
</div>
<!-- Movie 5 -->
<div class="movie-card">
<img src="https://images.unsplash.com/photo-1626814026183-35c783e21111?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Movie Poster" class="movie-img">
<div class="movie-info">
<div class="movie-meta">
<span>Action</span>
<span>2h 30m</span>
<span>IMAX 3D</span>
</div>
<h3>Cyber Dawn</h3>
<p>In a neon-soaked future, a rogue AI hunter must confront her creator to stop a digital apocalypse.</p>
<button class="ticket-btn">Book Now</button>
</div>
</div>
<!-- Movie 6 -->
<div class="movie-card">
<img src="https://images.unsplash.com/photo-1626814026248-2585c5416f1d?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Movie Poster" class="movie-img">
<div class="movie-info">
<div class="movie-meta">
<span>Romance</span>
<span>1h 45m</span>
<span>Standard</span>
</div>
<h3>Starlight Nights</h3>
<p>Two strangers meet under the aurora borealis and find that fate is written in the stars.</p>
<button class="ticket-btn">Book Now</button>
</div>
</div>
</div>
</section>
<!-- Features Section -->
<section class="section features-section" id="events">
<div class="section-title">
<h2>Our Experiences</h2>
<div class="line"></div>
</div>
<div class="features-grid">
<div class="feature-item">
<i class="fas fa-couch feature-icon"></i>
<h3>Private Lounges</h3>
<p>Upgrade to our VIP lounges for exclusive pre-screening cocktails and private access to the screening room.</p>
</div>
<div class="feature-item">
<i class="fas fa-utensils feature-icon"></i>
<h3>Gourmet Dining</h3>
<p>Our executive chefs prepare fresh, gourmet meals delivered straight to your seat before the show begins.</p>
</div>
<div class="feature-item">
<i class="fas fa-ticket-alt feature-icon"></i>
<h3>Priority Booking</h3>
<p>Members get access to book tickets 48 hours before the general public for all premier releases.</p>
</div>
</div>
</section>
<!-- Newsletter Section -->
<section class="newsletter" id="newsletter">
<h2>Join the Filmpremier Club</h2>
<p>Sign up to receive exclusive invites to premieres, special screenings, and member-only discounts. Your first month is on us.</p>
<form class="newsletter-form" onsubmit="event.preventDefault(); alert('Welcome to the Club! You have successfully subscribed.');">
<input type="email" class="newsletter-input" placeholder="Enter your email address" required>
<button type="submit" class="cta-btn">Subscribe</button>
</form>
</section>
<!-- Footer -->
<footer>
<div class="footer-grid">
<div class="footer-col">
<a href="#" class="logo" style="font-size: 1.5rem; margin-bottom: 1rem; display: inline-block;">FILM<span>PREMIER</span></a>
<p style="color: var(--gray-text); font-size: 0.9rem; line-height: 1.6;">
Redefining the cinematic experience with luxury, technology, and an unwavering passion for storytelling.
</p>
<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-linkedin-in"></i></a>
</div>
</div>
<div class="footer-col">
<h4>Cinemas</h4>
<ul>
<li><a href="#">Downtown Plaza</a></li>
<li><a href="#">Westside Luxury</a></li>
<li><a href="#">Eastgate IMAX</a></li>
<li><a href="#">Northside Drive-In</a></li>
</ul>
</div>
<div class="footer-col">
<h4>Events</h4>
<ul>
<li><a href="#">Premiere Nights</a></li>
<li><a href="#">Director Q&A</a></li>
<li><a href="#">Film Festivals</a></li>
<li><a href="#">Private Rentals</a></li>
</ul>
</div>
<div class="footer-col">
<h4>Support</h4>
<ul>
<li><a href="#">Help Center</a></li>
<li><a href="#">Terms of Service</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
&copy; 2024 Filmpremier Entertainment Group. All rights reserved.
<br>
<a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">Built with anycoder</a>
</div>
</footer>
<script>
// Navigation Scroll Effect
window.addEventListener('scroll', function() {
const nav = document.getElementById('navbar');
if (window.scrollY > 50) {
nav.classList.add('scrolled');
} else {
nav.classList.remove('scrolled');
}
});
// Mobile Menu Toggle
const hamburger = document.getElementById('hamburger');
const navLinks = document.getElementById('nav-links');
const links = document.querySelectorAll('.nav-links a');
hamburger.addEventListener('click', () => {
navLinks.classList.toggle('active');
// Toggle icon between bars and times (X)
const icon = hamburger.querySelector('i');
if (navLinks.classList.contains('active')) {
icon.classList.remove('fa-bars');
icon.classList.add('fa-times');
} else {
icon.classList.remove('fa-times');
icon.classList.add('fa-bars');
}
});
// Close mobile menu when a link is clicked
links.forEach(link => {
link.addEventListener('click', () => {
navLinks.classList.remove('active');
const icon = hamburger.querySelector('i');
icon.classList.remove('fa-times');
icon.classList.add('fa-bars');
});
});
// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
</script>
</body>
</html>