Skip to content

Commit c72165c

Browse files
sPROFFEssPROFFEs
committed
upload
1 parent 2b4f97c commit c72165c

3 files changed

Lines changed: 263 additions & 0 deletions

File tree

‎index.html‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<!DOCTYPE html>
2+
<html lang="es">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>PyClicker</title>
7+
<link rel="stylesheet" href="styles.css">
8+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
9+
</head>
10+
<body>
11+
<nav class="navbar">
12+
<div class="logo">PyClicker</div>
13+
<ul class="nav-links">
14+
<li><a href="#features">Features</a></li>
15+
<li><a href="#contact">Contact</a></li>
16+
</ul>
17+
</nav>
18+
19+
<header class="hero">
20+
<div class="hero-content">
21+
<h1>Automatize. Save Time. Reduce Work.</h1>
22+
<p>Official Macros and Autoclicker Software for Productivity and Gaming.</p>
23+
24+
<!-- Botón con dropdown -->
25+
<div class="dropdown">
26+
<button class="btn btn-primary dropdown-btn">Download Now ▾</button>
27+
<div class="dropdown-content">
28+
<a href="#">Windows</a>
29+
<a href="#">macOS</a>
30+
<a href="#">Linux</a>
31+
</div>
32+
</div>
33+
</div>
34+
</header>
35+
36+
<section id="features" class="features">
37+
<h2>Feature Highlights</h2>
38+
<div class="feature-grid">
39+
<div class="card">
40+
<h3>Precision</h3>
41+
<p>Exact intervals and advanced configuration for each task.</p>
42+
</div>
43+
<div class="card">
44+
<h3>Simplicity</h3>
45+
<p>Intuitive interface that anyone can use without a learning curve.</p>
46+
</div>
47+
<div class="card">
48+
<h3>Lifetime license</h3>
49+
<p>Get a license now and enjoy for lifetime.</p>
50+
</div>
51+
</div>
52+
</section>
53+
54+
<section id="contact" class="cta">
55+
<h2>Ready to get started?</h2>
56+
<p>Contact support to get a license for your device.</p>
57+
<!-- Botón mailto -->
58+
<a href="mailto:test@test.com?subject=License%20Request%20PyClicker" class="btn btn-secondary">Get License</a>
59+
</section>
60+
61+
<footer class="footer">
62+
<p>© 2025 PyClicker | All rights reserved</p>
63+
<p><a href="#">Privacy Policy</a> · <a href="#">Terms of Use</a></p>
64+
</footer>
65+
66+
<script src="script.js"></script>
67+
</body>
68+
</html>

‎script.js‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
// Aparición de secciones al hacer scroll
2+
const sections = document.querySelectorAll('section');
3+
const showOnScroll = () => {
4+
const triggerBottom = window.innerHeight * 0.85;
5+
sections.forEach(sec => {
6+
const boxTop = sec.getBoundingClientRect().top;
7+
if (boxTop < triggerBottom) {
8+
sec.classList.add('visible');
9+
}
10+
});
11+
};
12+
window.addEventListener('scroll', showOnScroll);
13+
window.addEventListener('load', showOnScroll);
14+
15+
// Smooth scroll para navegación
16+
document.querySelectorAll('.nav-links a').forEach(anchor => {
17+
anchor.addEventListener('click', e => {
18+
e.preventDefault();
19+
const target = document.querySelector(anchor.getAttribute('href'));
20+
target.scrollIntoView({ behavior: 'smooth' });
21+
});
22+
});
23+
24+
// Dropdown toggle
25+
document.querySelectorAll('.dropdown-btn').forEach(btn => {
26+
btn.addEventListener('click', () => {
27+
btn.parentElement.classList.toggle('show');
28+
});
29+
});
30+
31+
// Cerrar dropdown si se hace click fuera
32+
window.addEventListener('click', (e) => {
33+
if (!e.target.matches('.dropdown-btn')) {
34+
document.querySelectorAll('.dropdown').forEach(drop => {
35+
drop.classList.remove('show');
36+
});
37+
}
38+
});

‎styles.css‎

Lines changed: 157 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,157 @@
1+
* { margin: 0; padding: 0; box-sizing: border-box; }
2+
body {
3+
font-family: 'Inter', sans-serif;
4+
color: #1e293b;
5+
background: #f8fafc;
6+
line-height: 1.6;
7+
}
8+
9+
/* Navbar */
10+
.navbar {
11+
position: fixed;
12+
top: 0; left: 0; right: 0;
13+
display: flex;
14+
justify-content: space-between;
15+
align-items: center;
16+
padding: 1rem 2rem;
17+
background: #ffffffcc;
18+
backdrop-filter: blur(6px);
19+
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
20+
z-index: 100;
21+
}
22+
.navbar .logo {
23+
font-weight: 700;
24+
font-size: 1.2rem;
25+
color: #2563eb;
26+
}
27+
.nav-links { list-style: none; display: flex; gap: 1.5rem; }
28+
.nav-links a { text-decoration: none; color: #1e293b; font-weight: 500; }
29+
.nav-links a:hover { color: #2563eb; }
30+
31+
/* Hero */
32+
.hero {
33+
height: 100vh;
34+
display: flex;
35+
align-items: center;
36+
justify-content: center;
37+
text-align: center;
38+
background: linear-gradient(135deg,#2563eb,#9333ea);
39+
color: #fff;
40+
padding: 0 1rem;
41+
}
42+
.hero h1 { font-size: 2.8rem; margin-bottom: 1rem; }
43+
.hero p { font-size: 1.2rem; margin-bottom: 2rem; max-width: 600px; margin-left:auto; margin-right:auto; }
44+
45+
/* Buttons */
46+
.btn {
47+
padding: 0.8rem 1.5rem;
48+
border-radius: 8px;
49+
font-weight: 600;
50+
text-decoration: none;
51+
transition: all 0.3s;
52+
}
53+
.btn-primary { background: #facc15; color: #0f172a; }
54+
.btn-primary:hover { background: #fde047; }
55+
.btn-secondary { background: #2563eb; color: #fff; }
56+
.btn-secondary:hover { background: #1e40af; }
57+
58+
/* Sections */
59+
section {
60+
padding: 5rem 2rem;
61+
max-width: 1100px;
62+
margin: auto;
63+
opacity: 0;
64+
transform: translateY(30px);
65+
transition: all 0.8s ease-out;
66+
}
67+
section.visible {
68+
opacity: 1;
69+
transform: translateY(0);
70+
}
71+
section h2 {
72+
text-align: center;
73+
margin-bottom: 2rem;
74+
font-size: 2rem;
75+
}
76+
77+
/* Features */
78+
.feature-grid {
79+
display: grid;
80+
grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
81+
gap: 2rem;
82+
}
83+
.card {
84+
background: #fff;
85+
padding: 2rem;
86+
border-radius: 12px;
87+
box-shadow: 0 4px 10px rgba(0,0,0,0.08);
88+
transition: transform 0.3s;
89+
}
90+
.card:hover { transform: translateY(-5px); }
91+
.card h3 { margin-bottom: 1rem; color: #2563eb; }
92+
93+
/* Dropdown */
94+
.dropdown {
95+
position: relative;
96+
display: inline-block;
97+
}
98+
.dropdown-btn {
99+
cursor: pointer;
100+
}
101+
.dropdown-content {
102+
display: none;
103+
position: absolute;
104+
background: #fff;
105+
color: #1e293b;
106+
min-width: 160px;
107+
box-shadow: 0 4px 10px rgba(0,0,0,0.15);
108+
border-radius: 6px;
109+
overflow: hidden;
110+
z-index: 10;
111+
}
112+
.dropdown-content a {
113+
display: block;
114+
padding: 0.8rem 1rem;
115+
text-decoration: none;
116+
color: #1e293b;
117+
font-weight: 500;
118+
}
119+
.dropdown-content a:hover {
120+
background: #f1f5f9;
121+
}
122+
.dropdown.show .dropdown-content {
123+
display: block;
124+
}
125+
126+
127+
/* Demo */
128+
.demo-box {
129+
margin: 2rem auto;
130+
width: 220px;
131+
height: 120px;
132+
background: #2563eb;
133+
border-radius: 8px;
134+
display: flex;
135+
align-items: center;
136+
justify-content: center;
137+
font-weight: bold;
138+
color: #fff;
139+
animation: clicker 1.5s infinite;
140+
}
141+
@keyframes clicker {
142+
0%, 100% { transform: scale(1); background:#2563eb; }
143+
50% { transform: scale(1.05); background:#22c55e; }
144+
}
145+
146+
/* CTA */
147+
.cta { text-align: center; }
148+
149+
/* Footer */
150+
.footer {
151+
text-align: center;
152+
padding: 2rem;
153+
background: #1e293b;
154+
color: #cbd5e1;
155+
}
156+
.footer a { color: #93c5fd; text-decoration: none; }
157+
.footer a:hover { text-decoration: underline; }

0 commit comments

Comments
 (0)