Hugging Face's logo

Spaces:
TioPeperino
/
anycoder-cbeecb0e
Running

App Files Community
anycoder-cbeecb0e / index.html
TioPeperino's picture
TioPeperino
Upload folder using huggingface_hub
9d51f9f verified
raw
history blame contribute delete
29 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QPrompt - The Teleprompter for Creators</title>
<meta name="description" content="Free and open source teleprompter software for video creators. Built for productivity, ease of use, and smooth performance.">
<!-- Fonts & Icons -->
<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=Inter:wght@300;400;600;700;800&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
/* --- CSS VARIABLES & RESET --- */
:root {
--bg-dark: #0a0a0c;
--bg-surface: #131316;
--bg-card: #1c1c21;
--primary: #fbbf24; /* Amber from original logo */
--primary-glow: rgba(251, 191, 36, 0.3);
--accent: #3b82f6; /* Modern Blue */
--text-main: #ffffff;
--text-muted: #9ca3af;
--text-dark: #111827;
--border-color: rgba(255, 255, 255, 0.08);
--glass: rgba(19, 19, 22, 0.7);
--transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
--container-width: 1200px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Inter', sans-serif;
background-color: var(--bg-dark);
color: var(--text-main);
line-height: 1.6;
overflow-x: hidden;
}
a { text-decoration: none; color: inherit; transition: var(--transition); }
ul { list-style: none; }
/* --- UTILITIES --- */
.container {
max-width: var(--container-width);
margin: 0 auto;
padding: 0 20px;
}
.text-gradient {
background: linear-gradient(135deg, var(--primary) 0%, #f59e0b 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 28px;
border-radius: 8px;
font-weight: 600;
font-size: 1rem;
cursor: pointer;
transition: var(--transition);
gap: 10px;
}
.btn-primary {
background: var(--primary);
color: var(--text-dark);
box-shadow: 0 4px 20px var(--primary-glow);
}
.btn-primary:hover {
transform: translateY(-2px);
background: #f59e0b;
box-shadow: 0 8px 25px var(--primary-glow);
}
.btn-outline {
background: transparent;
border: 1px solid var(--border-color);
color: var(--text-main);
}
.btn-outline:hover {
border-color: var(--text-main);
background: rgba(255,255,255,0.05);
}
.section-padding {
padding: 100px 0;
}
.badge {
display: inline-block;
padding: 4px 12px;
border-radius: 50px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
background: rgba(251, 191, 36, 0.1);
color: var(--primary);
border: 1px solid rgba(251, 191, 36, 0.2);
margin-bottom: 20px;
}
/* --- HEADER --- */
.anycoder-bar {
background: linear-gradient(90deg, #6366f1, #a855f7);
text-align: center;
padding: 8px;
font-size: 0.85rem;
font-weight: 600;
}
.anycoder-bar a { color: white; }
.navbar {
position: sticky;
top: 0;
z-index: 1000;
background: var(--glass);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border-color);
padding: 15px 0;
}
.nav-container {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
display: flex;
align-items: center;
gap: 10px;
font-weight: 800;
font-size: 1.5rem;
color: var(--text-main);
}
.logo img { height: 32px; width: auto; }
.nav-links {
display: flex;
gap: 30px;
}
.nav-links a {
font-size: 0.95rem;
color: var(--text-muted);
font-weight: 500;
}
.nav-links a:hover { color: var(--primary); }
.mobile-toggle { display: none; font-size: 1.5rem; cursor: pointer; }
/* --- HERO SECTION --- */
.hero {
padding: 120px 0 80px;
position: relative;
overflow: hidden;
}
/* Ambient Glow Background */
.hero::before {
content: '';
position: absolute;
top: -20%;
left: 50%;
transform: translateX(-50%);
width: 800px;
height: 800px;
background: radial-gradient(circle, rgba(59, 130, 246, 0.15) 0%, rgba(0,0,0,0) 70%);
z-index: -1;
pointer-events: none;
}
.hero-content {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: 60px;
}
.hero-text h1 {
font-size: 3.5rem;
line-height: 1.1;
margin-bottom: 20px;
font-weight: 800;
}
.hero-text p {
font-size: 1.2rem;
color: var(--text-muted);
margin-bottom: 40px;
max-width: 500px;
}
.hero-buttons {
display: flex;
gap: 15px;
flex-wrap: wrap;
}
.platform-icons {
margin-top: 30px;
display: flex;
gap: 20px;
color: var(--text-muted);
font-size: 1.5rem;
opacity: 0.7;
}
/* CSS ONLY APP MOCKUP */
.app-mockup {
background: #000;
border-radius: 16px;
border: 1px solid var(--border-color);
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
aspect-ratio: 16/10;
display: flex;
flex-direction: column;
overflow: hidden;
position: relative;
transform: perspective(1000px) rotateY(-5deg) rotateX(2deg);
transition: transform 0.5s ease;
}
.app-mockup:hover {
transform: perspective(1000px) rotateY(0deg) rotateX(0deg);
}
.mockup-header {
background: #1f1f1f;
padding: 10px 15px;
display: flex;
align-items: center;
gap: 8px;
border-bottom: 1px solid #333;
}
.dot { width: 10px; height: 10px; border-radius: 50%; }
.dot.red { background: #ef4444; }
.dot.yellow { background: #f59e0b; }
.dot.green { background: #10b981; }
.mockup-screen {
flex: 1;
background: #000;
color: #fff;
padding: 40px;
font-family: 'Inter', sans-serif; /* Teleprompter font */
font-size: 2rem;
font-weight: 700;
text-align: center;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
/* Teleprompter Animation */
.scrolling-text {
animation: scrollUp 10s linear infinite;
}
.marker {
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%);
color: var(--primary);
font-size: 1.5rem;
opacity: 0.8;
}
@keyframes scrollUp {
0% { transform: translateY(100%); opacity: 0; }
10% { opacity: 1; }
90% { opacity: 1; }
100% { transform: translateY(-150%); opacity: 0; }
}
/* --- FEATURES GRID --- */
.features-section {
background: var(--bg-surface);
}
.section-header {
text-align: center;
margin-bottom: 60px;
}
.section-header h2 {
font-size: 2.5rem;
margin-bottom: 15px;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
}
.feature-card {
background: var(--bg-card);
padding: 30px;
border-radius: 16px;
border: 1px solid var(--border-color);
transition: var(--transition);
}
.feature-card:hover {
border-color: var(--primary);
transform: translateY(-5px);
}
.feature-icon {
width: 50px;
height: 50px;
background: rgba(255, 255, 255, 0.05);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
color: var(--primary);
margin-bottom: 20px;
}
.feature-card h3 {
font-size: 1.25rem;
margin-bottom: 10px;
}
.feature-card p {
color: var(--text-muted);
font-size: 0.95rem;
}
/* --- OS SHOWCASE --- */
.os-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 20px;
text-align: center;
margin-top: 40px;
}
.os-item {
padding: 20px;
background: var(--bg-card);
border-radius: 12px;
border: 1px solid var(--border-color);
}
.os-item i { font-size: 2rem; margin-bottom: 10px; display: block; }
/* --- COMMUNITY SECTION --- */
.community-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
}
.community-card {
background: var(--bg-card);
border: 1px solid var(--border-color);
padding: 25px;
border-radius: 12px;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}
.community-card:hover {
background: rgba(255,255,255,0.03);
}
.c-icon {
font-size: 2rem;
margin-bottom: 15px;
color: var(--accent);
}
.c-title { font-weight: 700; font-size: 1.1rem; margin-bottom: 8px; }
.c-desc { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 20px; }
.c-link {
margin-top: auto;
font-size: 0.9rem;
font-weight: 600;
color: var(--primary);
display: flex;
align-items: center;
gap: 5px;
}
/* --- FOOTER --- */
footer {
background: #000;
padding: 60px 0 30px;
border-top: 1px solid var(--border-color);
font-size: 0.9rem;
color: var(--text-muted);
}
.footer-content {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 40px;
margin-bottom: 40px;
}
.footer-logo {
color: white;
font-weight: 700;
font-size: 1.2rem;
margin-bottom: 15px;
display: block;
}
.footer-links h4 { color: white; margin-bottom: 15px; }
.footer-links li { margin-bottom: 10px; }
.footer-links a:hover { color: var(--primary); }
.social-row {
display: flex;
gap: 15px;
margin-top: 20px;
}
.social-row a {
width: 36px; height: 36px;
border-radius: 50%;
background: rgba(255,255,255,0.1);
display: flex;
align-items: center;
justify-content: center;
}
.social-row a:hover { background: var(--primary); color: #000; }
.copyright {
text-align: center;
padding-top: 30px;
border-top: 1px solid rgba(255,255,255,0.1);
}
/* --- RESPONSIVE --- */
@media (max-width: 992px) {
.hero-content { grid-template-columns: 1fr; text-align: center; gap: 40px; }
.hero-text p { margin: 0 auto 30px; }
.hero-buttons { justify-content: center; }
.platform-icons { justify-content: center; }
.app-mockup { max-width: 600px; margin: 0 auto; }
}
@media (max-width: 768px) {
.nav-links { display: none; position: absolute; top: 100%; left: 0; width: 100%; background: var(--bg-card); flex-direction: column; padding: 20px; text-align: center; border-bottom: 1px solid var(--border-color); }
.nav-links.active { display: flex; }
.mobile-toggle { display: block; }
.hero-text h1 { font-size: 2.5rem; }
}
</style>
</head>
<body id="page-top">
<!-- Anycoder Header -->
<div class="anycoder-bar">
<a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">Built with anycoder</a>
</div>
<!-- Navbar -->
<nav class="navbar">
<div class="container nav-container">
<a href="#" class="logo">
<i class="fa-solid fa-video" style="color: var(--primary);"></i> QPrompt
</a>
<div class="mobile-toggle" id="mobileToggle">
<i class="fa-solid fa-bars"></i>
</div>
<ul class="nav-links" id="navLinks">
<li><a href="#features">Features</a></li>
<li><a href="#community">Community</a></li>
<li><a href="https://forum.qprompt.app/">Forum</a></li>
<li><a href="https://l10n.qprompt.app/">Translations</a></li>
<li><a href="https://github.com/Cuperino/QPrompt" target="_blank"><i class="fab fa-github"></i> Source</a></li>
<li><a href="https://sourceforge.net/projects/qprompt/files/latest/download" class="btn btn-primary" style="padding: 8px 16px; font-size: 0.9rem;">Download</a></li>
</ul>
</div>
</nav>
<!-- Hero Section -->
<section class="hero">
<div class="container hero-content">
<div class="hero-text">
<span class="badge">Open Source & Free</span>
<h1>Speak with <br><span class="text-gradient">Confidence.</span></h1>
<p>The teleprompter designed for creators who value productivity. Fluid motion, jitter-free performance, and cross-platform compatibility.</p>
<div class="hero-buttons">
<a href="https://github.com/Cuperino/QPrompt-Teleprompter/releases/latest" class="btn btn-primary">
<i class="fa-solid fa-download"></i> Download Now
</a>
<a href="#features" class="btn btn-outline">
Learn More
</a>
</div>
<div class="platform-icons">
<i class="fab fa-windows" title="Windows"></i>
<i class="fab fa-apple" title="macOS"></i>
<i class="fab fa-linux" title="Linux"></i>
<i class="fab fa-android" title="Android"></i>
</div>
</div>
<!-- CSS Animated Mockup -->
<div class="app-mockup">
<div class="mockup-header">
<div class="dot red"></div>
<div class="dot yellow"></div>
<div class="dot green"></div>
</div>
<div class="mockup-screen">
<div class="marker"><i class="fa-solid fa-caret-right"></i></div>
<div class="scrolling-text">
Welcome to QPrompt.<br><br>
Focus on your audience.<br>
Read naturally.<br>
No jitter.<br>
No hassle.<br><br>
Ready to record?
</div>
</div>
</div>
</div>
</section>
<!-- Value Prop / Reasons -->
<section class="section-padding" id="reasons">
<div class="container">
<div class="section-header">
<h2>Why Creators Choose QPrompt</h2>
<p style="color: var(--text-muted);">Built with productivity, ease of use, and smooth performance in mind.</p>
</div>
<div class="features-grid">
<div class="feature-card">
<div class="feature-icon"><i class="fa-solid fa-eye"></i></div>
<h3>Be Present</h3>
<p>Have your audience watch you speak directly to them. Plan your script to be respectful of their time, and QPrompt will be respectful of yours.</p>
</div>
<div class="feature-card">
<div class="feature-icon"><i class="fa-solid fa-bolt"></i></div>
<h3>Be Productive</h3>
<p>Search text, add markers, move quickly, and make changes on the fly. Spend less time fixing scripts and more time creating content.</p>
</div>
<div class="feature-card">
<div class="feature-icon"><i class="fa-solid fa-mobile-screen"></i></div>
<h3>Any Setup</h3>
<p>Works with professional studio teleprompters, tablets, webcams, and phones. Record faster regardless of your hardware.</p>
</div>
</div>
</div>
</section>
<!-- Features Deep Dive -->
<section class="section-padding features-section" id="features">
<div class="container">
<div class="section-header">
<h2>Everything you need</h2>
</div>
<div class="features-grid" style="grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));">
<!-- List of features -->
<div class="feature-card" style="border: none; background: transparent; padding: 0;">
<ul style="color: var(--text-muted); font-size: 1.1rem;">
<li style="margin-bottom: 15px;"><i class="fa-solid fa-check" style="color: var(--primary); margin-right: 10px;"></i> Fluid, jitter-free motion</li>
<li style="margin-bottom: 15px;"><i class="fa-solid fa-check" style="color: var(--primary); margin-right: 10px;"></i> Background transparency</li>
<li style="margin-bottom: 15px;"><i class="fa-solid fa-check" style="color: var(--primary); margin-right: 10px;"></i> Mirror screens (Flip X/Y)</li>
<li style="margin-bottom: 15px;"><i class="fa-solid fa-check" style="color: var(--primary); margin-right: 10px;"></i> Built-in chronometer</li>
<li style="margin-bottom: 15px;"><i class="fa-solid fa-check" style="color: var(--primary); margin-right: 10px;"></i> 180+ Languages supported</li>
</ul>
</div>
<div class="feature-card" style="border: none; background: transparent; padding: 0;">
<ul style="color: var(--text-muted); font-size: 1.1rem;">
<li style="margin-bottom: 15px;"><i class="fa-solid fa-check" style="color: var(--primary); margin-right: 10px;"></i> Rich text formatting</li>
<li style="margin-bottom: 15px;"><i class="fa-solid fa-check" style="color: var(--primary); margin-right: 10px;"></i> Native performance (C++/Qt)</li>
<li style="margin-bottom: 15px;"><i class="fa-solid fa-check" style="color: var(--primary); margin-right: 10px;"></i> Multi-screen support</li>
<li style="margin-bottom: 15px;"><i class="fa-solid fa-check" style="color: var(--primary); margin-right: 10px;"></i> Offline capable</li>
<li style="margin-bottom: 15px;"><i class="fa-solid fa-check" style="color: var(--primary); margin-right: 10px;"></i> Completely Free & Open Source</li>
</ul>
</div>
</div>
<!-- Download Options -->
<div class="os-grid">
<a href="https://snapcraft.io/qprompt" class="os-item text-main">
<i class="fab fa-linux"></i>
<span>Snap Store</span>
</a>
<a href="https://flathub.org/apps/details/com.cuperino.qprompt" class="os-item text-main">
<i class="fas fa-box-open"></i>
<span>FlatHub</span>
</a>
<a href="https://github.com/Cuperino/QPrompt/releases" class="os-item text-main">
<i class="fab fa-windows"></i>
<span>Windows Installer</span>
</a>
<a href="https://github.com/Cuperino/QPrompt/releases" class="os-item text-main">
<i class="fab fa-apple"></i>
<span>macOS DMG</span>
</a>
</div>
</div>
</section>
<!-- Community Section -->
<section class="section-padding" id="community">
<div class="container">
<div class="section-header">
<h2>Join the Community</h2>
<p class="text-muted">QPrompt is built by the community, for the community.</p>
</div>
<div class="community-grid">
<!-- Github -->
<div class="community-card">
<div>
<i class="fab fa-github c-icon"></i>
<h3 class="c-title">Open Source</h3>
<p class="c-desc">Check out the code, build it yourself, or contribute to the project.</p>
</div>
<a href="https://github.com/Cuperino/QPrompt" class="c-link">View on GitHub <i class="fa-solid fa-arrow-right"></i></a>
</div>
<!-- Feedback -->
<div class="community-card">
<div>
<i class="fa-solid fa-bug c-icon"></i>
<h3 class="c-title">Feedback</h3>
<p class="c-desc">Found a bug? Have a feature request? We listen to all our users.</p>
</div>
<a href="https://github.com/Cuperino/QPrompt/issues" class="c-link">File Report <i class="fa-solid fa-arrow-right"></i></a>
</div>
<!-- Translate -->
<div class="community-card">
<div>
<i class="fa-solid fa-language c-icon"></i>
<h3 class="c-title">Translate</h3>
<p class="c-desc">Help bring QPrompt to more creators by contributing translations.</p>
</div>
<a href="https://l10n.cuperino.com/projects/qprompt/" class="c-link">Contribute <i class="fa-solid fa-arrow-right"></i></a>
</div>
<!-- Patreon -->
<div class="community-card">
<div>
<i class="fab fa-patreon c-icon"></i>
<h3 class="c-title">Support Us</h3>
<p class="c-desc">Get early access to builds and vote on future development priorities.</p>
</div>
<a href="https://www.patreon.com/qpromptapp" class="c-link">Become a Patron <i class="fa-solid fa-arrow-right"></i></a>
</div>
<!-- Discord -->
<div class="community-card">
<div>
<i class="fab fa-discord c-icon"></i>
<h3 class="c-title">Chat</h3>
<p class="c-desc">Join the conversation with other creators and the developer.</p>
</div>
<a href="https://discord.gg/8TSCZH2WyK" class="c-link">Join Discord <i class="fa-solid fa-arrow-right"></i></a>
</div>
<!-- Forum -->
<div class="community-card">
<div>
<i class="fa-solid fa-comments c-icon"></i>
<h3 class="c-title">Forum</h3>
<p class="c-desc">Share tips, tricks, and your studio setup with the community.</p>
</div>
<a href="https://forum.cuperino.com/c/qprompt/5" class="c-link">Visit Forum <i class="fa-solid fa-arrow-right"></i></a>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer>
<div class="container">
<div class="footer-content">
<div style="flex: 2; min-width: 250px;">
<a href="#" class="footer-logo">QPrompt</a>
<p>The open-source teleprompter software for all video creators. Built for performance and ease of use.</p>
<div class="social-row">
<a href="https://x.com/qpromptapp"><i class="fab fa-twitter"></i></a>
<a href="https://github.com/Cuperino/QPrompt-Teleprompter/"><i class="fab fa-github"></i></a>
<a href="https://discord.gg/8TSCZH2WyK"><i class="fab fa-discord"></i></a>
<a href="https://t.me/imaginaryteleprompter"><i class="fab fa-telegram"></i></a>
</div>
</div>
<div class="footer-links" style="flex: 1; min-width: 150px;">
<h4>Project</h4>
<ul>
<li><a href="https://sourceforge.net/projects/qprompt/files/latest/download">Download</a></li>
<li><a href="#features">Features</a></li>
<li><a href="https://github.com/Cuperino/QPrompt">Source Code</a></li>
<li><a href="https://www.patreon.com/qpromptapp">Development Updates</a></li>
</ul>
</div>
<div class="footer-links" style="flex: 1; min-width: 150px;">
<h4>Legal & Docs</h4>
<ul>
<li><a href="https://docs.cuperino.com/">Documentation</a></li>
<li><a href="https://github.com/Cuperino/QPrompt-Teleprompter/blob/main/COPYING">License (GPLv3)</a></li>
<li><a href="https://github.com/Cuperino/QPrompt-Teleprompter/#code-of-conduct">Code of Conduct</a></li>
<li><a href="https://github.com/Cuperino/Signatures/blob/main/CLA.md">CLA</a></li>
</ul>
</div>
</div>
<div class="copyright">
<p>&copy; 2021-2024 Javier O. Cordero Pérez. All rights reserved.</p>
</div>
</div>
</footer>
<script>
// Mobile Navigation Toggle
const mobileToggle = document.getElementById('mobileToggle');
const navLinks = document.getElementById('navLinks');
mobileToggle.addEventListener('click', () => {
navLinks.classList.toggle('active');
const icon = mobileToggle.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 clicking a link
document.querySelectorAll('.nav-links a').forEach(link => {
link.addEventListener