Skip to content

Commit 979ae5a

Browse files
sPROFFEssPROFFEs
committed
update
1 parent eeb932b commit 979ae5a

3 files changed

Lines changed: 213 additions & 56 deletions

File tree

‎index.html‎

Lines changed: 86 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@
55
<meta charset="UTF-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<title>PyClicker - Effortless Automation</title>
8-
<link rel="icon" type="image/png" href="https://cdn.iconscout.com/icon/free/png-256/free-gear-icon-svg-png-download-459391.png?f=webp&w=128">
8+
<link rel="icon" type="image/png"
9+
href="https://cdn.iconscout.com/icon/free/png-256/free-gear-icon-svg-png-download-459391.png?f=webp&w=128">
910
<link rel="stylesheet" href="styles.css">
1011
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
1112
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
@@ -28,16 +29,26 @@ <h1>Automate Your Repetitive Tasks</h1>
2829
<p>The ultimate macro and auto-clicker software for enhancing productivity and gaming performance. Save time,
2930
reduce effort.</p>
3031

31-
<div class="dropdown">
32-
<button class="btn btn-primary dropdown-btn">Download Now ▾</button>
33-
<div class="dropdown-content">
34-
<a href="https://github.com/sPROFFEs/autoclicker/releases/download/1.0/PyclickRecorder_Windows_installer.exe"><i class="fab fa-windows"></i> Windows Installer (Free)</a>
35-
<a href="#"><i class="fab fa-windows"></i> Windows Pro (License)</a>
36-
<a href="https://github.com/sPROFFEs/autoclicker/releases/download/1.0/PyclickRecorder_Linux_installer.sh"><i class="fab fa-linux"></i> Linux Installer (Free)</a>
37-
<a href="#"><i class="fab fa-linux"></i> Linux Pro (Coming Soon)</a>
38-
<a href="https://github.com/sPROFFEs/autoclicker"><i class="fab fa-github"></i> Source Code (Free)</a>
32+
<div class="hero-buttons" style="margin-top: 1.5rem; display: flex; gap: 1rem;">
33+
<!-- Botón de download dropdown existente -->
34+
<div class="dropdown">
35+
<button class="btn btn-primary dropdown-btn">Download Now ▾</button>
36+
<div class="dropdown-content">
37+
<a
38+
href="https://github.com/sPROFFEs/autoclicker/releases/download/1.0/PyclickRecorder_Windows_installer.exe"><i
39+
class="fab fa-windows"></i> Windows Installer (Free)</a>
40+
<a href="#"><i class="fab fa-windows"></i> Windows Pro (License)</a>
41+
<a href="https://github.com/sPROFFEs/autoclicker/releases/download/1.0/PyclickRecorder_Linux_installer.sh"><i
42+
class="fab fa-linux"></i> Linux Installer (Free)</a>
43+
<a href="#"><i class="fab fa-linux"></i> Linux Pro (Coming Soon)</a>
44+
<a href="https://github.com/sPROFFEs/autoclicker"><i class="fab fa-github"></i> Source Code (Free)</a>
45+
</div>
3946
</div>
47+
48+
<!-- Botón hacia pricing -->
49+
<a href="#pricing" class="btn btn-secondary">Pricing</a>
4050
</div>
51+
4152
</div>
4253
<div class="hero-image">
4354
<div class="animation-container">
@@ -114,22 +125,28 @@ <h2>How to Activate Your License</h2>
114125
<div class="steps-container">
115126
<div class="step">
116127
<div class="step-number">1</div>
117-
<h3>Purchase a Pro License</h3>
118-
<p>Choose the Pro plan and complete the payment. You will receive a license key in your email.</p>
128+
<h3>Download and open the Software</h3>
129+
<p>Launch PyClicker Pro, copy the ID key that would be genereated by the software.</p>
119130
</div>
120131
<div class="step-arrow">→</div>
121132
<div class="step">
122133
<div class="step-number">2</div>
123-
<h3>Open the Software</h3>
124-
<p>Launch PyClicker Pro and navigate to the 'Activation' or 'License' menu.</p>
134+
<h3>Purchase a Pro License</h3>
135+
<p>Choose the Pro plan, write your email and the generated key by the software.</p>
125136
</div>
126137
<div class="step-arrow">→</div>
127138
<div class="step">
128139
<div class="step-number">3</div>
129140
<h3>Enter Your Key</h3>
130-
<p>Copy and paste the license key from your email into the activation field and click 'Activate'.</p>
141+
<p>Once the payment is completed an activation key would be sent to your email attached to the payment.
142+
Copy and paste the license key into the activation field and click 'Activate'.</p>
131143
</div>
132144
</div>
145+
<p class="license-note">
146+
<b>Important:</b> The license is valid for a single device. While the key remains valid if you format your
147+
computer, it will be invalidated if you change your hardware. Please contact support to transfer your license to a
148+
new device.
149+
</p>
133150
</section>
134151

135152
<section id="pricing" class="pricing">
@@ -167,37 +184,57 @@ <h3>Pro Lifetime</h3>
167184
<li>✓ Windows startup viabile</li>
168185
</ul>
169186

170-
<!-- PayPal button with unique custom ID -->
171-
<form id="paypalForm" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
172-
<input type="hidden" name="cmd" value="_s-xclick" />
173-
<input type="hidden" name="hosted_button_id" value="ZTVQM2TDD9V7U" />
187+
<!-- Botón Buy -->
188+
<button class="btn btn-secondary" id="buyBtn">Buy PyClicker - $1,99</button>
174189

175-
<!-- Email input -->
176-
<label for="buyerEmail">Write your email to receive your license key:</label><br>
177-
<input type="email" id="buyerEmail" name="os0" placeholder="your@email.com" required />
190+
<!-- Overlay -->
191+
<div id="buyOverlay" class="overlay">
192+
<div class="overlay-content">
193+
<a href="#" class="close-btn">&times;</a>
194+
<h2>Complete Your Purchase</h2>
195+
<form id="paypalOverlayForm" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
196+
<input type="hidden" name="cmd" value="_s-xclick" />
197+
<input type="hidden" name="hosted_button_id" value="ZTVQM2TDD9V7U" />
198+
<input type="hidden" id="customFieldOverlay" name="custom" value="" />
199+
200+
<label class="pricing-field" for="overlayEmail">Your Email:</label>
201+
<input class="pricing-field" type="email" id="overlayEmail" name="os0" placeholder="your@email.com"
202+
required />
203+
204+
<label class="pricing-field" for="overlayKey">Software-Generated Key:</label>
205+
<input class="pricing-field" type="text" id="overlayKey" placeholder="ABC123-XYZ456" required />
206+
207+
<input type="hidden" name="currency_code" value="EUR" />
208+
<input type="submit" class="btn btn-secondary" value="Pay with PayPal" />
209+
</form>
210+
</div>
211+
</div>
178212

179-
<!-- Custom field filled automatically -->
180-
<input type="hidden" id="customField" name="custom" value="" />
181213

182-
<input type="hidden" name="currency_code" value="EUR" />
183-
<input type="submit" value="Buy PyClicker - $1,99" class="btn btn-secondary" />
184-
</form>
185214
</div>
186215
</div>
187216
</section>
188217

189218
<section id="contact" class="contact">
190219
<h2>Contact Us</h2>
191220
<p>Have questions or feedback? Reach out to us. We'd love to hear from you!</p>
192-
<a href="mailto:support@pyclicker.com" class="btn btn-primary">Email Us</a>
221+
<a href="https://mail.google.com/mail/?view=cm&to=pyclickermanager.material438@slmails.com" target="_blank"
222+
class="btn btn-primary">Email Us</a>
193223
</section>
194224

195225
<script>
196-
// Add unique ID + email to PayPal "custom" field before submit
197-
document.getElementById("paypalForm").addEventListener("submit", function () {
226+
// Antes de enviar el formulario, generamos un ID único y combinamos todo en el campo custom
227+
document.getElementById("paypalForm").addEventListener("submit", function (e) {
198228
const email = document.getElementById("buyerEmail").value.trim();
199-
const uniqueId = "pyc-" + Date.now(); // Simple unique ID based on timestamp
200-
document.getElementById("customField").value = uniqueId + "|" + email;
229+
const userKey = document.getElementById("userKey").value.trim();
230+
if (!email || !userKey) {
231+
e.preventDefault(); // Evitar envío si faltan datos
232+
alert("Please enter both your email and software key.");
233+
return;
234+
}
235+
const uniqueId = "pyc-" + Date.now(); // ID de compra único basado en timestamp
236+
// Combinamos: CompraID | Email | SoftwareKey
237+
document.getElementById("customField").value = `${uniqueId}|${email}|${userKey}`;
201238
});
202239
</script>
203240

@@ -224,20 +261,31 @@ <h2>Contact Us</h2>
224261
<div class="overlay-content">
225262
<a href="#" class="close-btn">&times;</a>
226263
<h2>Privacy Policy</h2>
227-
<p>Your privacy is important to us. It is PyClicker's policy to respect your privacy regarding any information we may collect from you across our website.</p>
228-
<p>We only ask for personal information when we truly need it to provide a service to you. We collect it by fair and lawful means, with your knowledge and consent. We also let you know why we’re collecting it and how it will be used.</p>
229-
<p>We only retain collected information for as long as necessary to provide you with your requested service. What data we store, we’ll protect within commercially acceptable means to prevent loss and theft, as well as unauthorized access, disclosure, copying, use or modification.</p>
230-
<p>We don’t share any personally identifying information publicly or with third-parties, except when required to by law.</p>
264+
<p>Your privacy is important to us. It is PyClicker's policy to respect your privacy regarding any information we
265+
may collect from you across our website.</p>
266+
<p>We only ask for personal information when we truly need it to provide a service to you. We collect it by fair
267+
and lawful means, with your knowledge and consent. We also let you know why we’re collecting it and how it will
268+
be used.</p>
269+
<p>We only retain collected information for as long as necessary to provide you with your requested service. What
270+
data we store, we’ll protect within commercially acceptable means to prevent loss and theft, as well as
271+
unauthorized access, disclosure, copying, use or modification.</p>
272+
<p>We don’t share any personally identifying information publicly or with third-parties, except when required to
273+
by law.</p>
231274
</div>
232275
</div>
233276

234277
<div id="terms-overlay" class="overlay">
235278
<div class="overlay-content">
236279
<a href="#" class="close-btn">&times;</a>
237280
<h2>Terms of Use</h2>
238-
<p>By accessing the website at pyclicker.com, you are agreeing to be bound by these terms of service, all applicable laws and regulations, and agree that you are responsible for compliance with any applicable local laws.</p>
239-
<p>Permission is granted to temporarily download one copy of the materials (information or software) on PyClicker's website for personal, non-commercial transitory viewing only. This is the grant of a license, not a transfer of title.</p>
240-
<p>This license shall automatically terminate if you violate any of these restrictions and may be terminated by PyClicker at any time.</p>
281+
<p>By accessing the website at pyclicker.com, you are agreeing to be bound by these terms of service, all
282+
applicable laws and regulations, and agree that you are responsible for compliance with any applicable local
283+
laws.</p>
284+
<p>Permission is granted to temporarily download one copy of the materials (information or software) on
285+
PyClicker's website for personal, non-commercial transitory viewing only. This is the grant of a license, not a
286+
transfer of title.</p>
287+
<p>This license shall automatically terminate if you violate any of these restrictions and may be terminated by
288+
PyClicker at any time.</p>
241289
</div>
242290
</div>
243291
</body>

‎script.js‎

Lines changed: 40 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -46,27 +46,49 @@ window.addEventListener('click', (e) => {
4646
}
4747
});
4848

49-
// Overlay logic
50-
document.querySelectorAll('[data-overlay]').forEach(link => {
51-
link.addEventListener('click', (e) => {
52-
e.preventDefault();
53-
const overlayId = link.getAttribute('data-overlay');
54-
document.getElementById(overlayId).classList.add('show');
49+
document.addEventListener("DOMContentLoaded", () => {
50+
// Abrir overlays genéricos por data-overlay
51+
document.querySelectorAll('[data-overlay]').forEach(link => {
52+
link.addEventListener('click', (e) => {
53+
e.preventDefault();
54+
const overlayId = link.getAttribute('data-overlay');
55+
const overlay = document.getElementById(overlayId);
56+
if (overlay) overlay.classList.add('show');
57+
});
5558
});
56-
});
5759

58-
document.querySelectorAll('.overlay .close-btn').forEach(btn => {
59-
btn.addEventListener('click', (e) => {
60-
e.preventDefault();
61-
btn.closest('.overlay').classList.remove('show');
62-
});
63-
});
60+
// Abrir overlay de compra con botón específico
61+
const buyBtn = document.getElementById("buyBtn");
62+
const buyOverlay = document.getElementById("buyOverlay");
63+
if (buyBtn && buyOverlay) {
64+
buyBtn.addEventListener("click", () => buyOverlay.classList.add("show"));
65+
}
6466

65-
// Close overlay on clicking the background
66-
document.querySelectorAll('.overlay').forEach(overlay => {
67-
overlay.addEventListener('click', (e) => {
68-
if (e.target === overlay) {
69-
overlay.classList.remove('show');
67+
// Cerrar overlays al hacer clic en botón de cerrar o en el fondo
68+
document.querySelectorAll('.overlay').forEach(overlay => {
69+
// Clic en fondo
70+
overlay.addEventListener('click', (e) => {
71+
if (e.target === overlay) overlay.classList.remove('show');
72+
});
73+
74+
// Clic en botón de cerrar
75+
const closeBtn = overlay.querySelector('.close-btn');
76+
if (closeBtn) {
77+
closeBtn.addEventListener('click', (e) => {
78+
e.preventDefault();
79+
overlay.classList.remove('show');
80+
});
7081
}
7182
});
83+
84+
// Agregar ID único al campo custom de PayPal en overlay de compra
85+
const paypalForm = document.getElementById("paypalOverlayForm");
86+
if (paypalForm) {
87+
paypalForm.addEventListener("submit", () => {
88+
const email = document.getElementById("overlayEmail").value.trim();
89+
const key = document.getElementById("overlayKey").value.trim();
90+
const uniqueId = "pyc-" + Date.now();
91+
document.getElementById("customFieldOverlay").value = `${uniqueId}|${email}|${key}`;
92+
});
93+
}
7294
});

‎styles.css‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,10 @@ body {
66
line-height: 1.6;
77
}
88

9+
html {
10+
scroll-behavior: smooth;
11+
}
12+
913
/* Navbar */
1014
.navbar {
1115
position: fixed;
@@ -220,6 +224,17 @@ section h2 {
220224
margin-top: 3rem;
221225
}
222226

227+
.license-note {
228+
max-width: 600px;
229+
margin: 2rem auto 0;
230+
padding: 1rem;
231+
background: #fff9e6;
232+
border-left: 4px solid #ffc107;
233+
font-size: 0.95rem;
234+
text-align: left;
235+
color: #664d00;
236+
}
237+
223238
/* Testimonials */
224239
.testimonials {
225240
background: #f1f5f9;
@@ -267,6 +282,45 @@ section h2 {
267282
.pricing-card li { margin-bottom: 0.75rem; color: #475569; }
268283
.pricing-card li.disabled { color: #94a3b8; text-decoration: line-through; }
269284

285+
/* Form fields inside pricing card */
286+
.pricing-card form {
287+
display: flex;
288+
flex-direction: column;
289+
align-items: center; /* centra todos los campos */
290+
gap: 1rem; /* espacio uniforme entre elementos */
291+
margin-top: 1rem;
292+
}
293+
294+
.pricing-field {
295+
display: block;
296+
width: 100%;
297+
max-width: 280px;
298+
padding: 0.75rem 1rem;
299+
border-radius: 12px; /* bordes más redondeados */
300+
border: 1px solid #cbd5e1;
301+
text-align: center; /* texto centrado */
302+
font-size: 1rem;
303+
outline: none;
304+
transition: all 0.2s ease-in-out;
305+
}
306+
307+
.pricing-field:focus {
308+
border-color: #2563eb;
309+
box-shadow: 0 0 0 3px rgba(37,99,235,0.2);
310+
}
311+
312+
/* Submit button centrado y acorde */
313+
.pricing-card form input[type="submit"] {
314+
margin-top: 0.8rem;
315+
width: 100%;
316+
max-width: 280px;
317+
border-radius: 12px; /* mismo estilo que inputs */
318+
text-align: center;
319+
}
320+
321+
322+
323+
270324
/* Contact Section */
271325
.contact {
272326
text-align: center;
@@ -420,3 +474,36 @@ section h2 {
420474
.hero p { font-size: 1.1rem; }
421475
.nav-links { display: none; } /* Basic mobile nav hiding, would need JS for a hamburger menu */
422476
}
477+
478+
/* Overlay */
479+
.overlay {
480+
position: fixed;
481+
top: 0; left: 0;
482+
width: 100%; height: 100%;
483+
background: rgba(0,0,0,0.6);
484+
display: flex;
485+
justify-content: center;
486+
align-items: center;
487+
opacity: 0; visibility: hidden;
488+
transition: opacity 0.3s, visibility 0.3s;
489+
z-index: 1000;
490+
}
491+
.overlay.show {
492+
opacity: 1; visibility: visible;
493+
}
494+
.overlay-content {
495+
background: #fff;
496+
padding: 2.5rem;
497+
border-radius: 12px;
498+
max-width: 400px;
499+
width: 90%;
500+
position: relative;
501+
text-align: center;
502+
}
503+
.close-btn {
504+
position: absolute;
505+
top: 1rem; right: 1rem;
506+
font-size: 2rem;
507+
text-decoration: none;
508+
color: #334155;
509+
}

0 commit comments

Comments
 (0)