<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>WraplyPRO - Create Windows Installers | Free Desktop Tool</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> <style> :root { --primary: #6c5ce7; --primary-dark: #5649c0; --primary-light: #8a7aec; --dark: #1a1a2e; --darker: #0f0f1a; --light: #f8f9fa; --gray: #a0a8c0; --gray-dark: #6c757d; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: var(--dark); color: var(--light); margin: 0; padding: 0; line-height: 1.6; } .container { width: 90%; max-width: 1200px; margin: 0 auto; padding: 0 15px; } /* Header */ header { background-color: var(--darker); padding: 20px 0; box-shadow: 0 2px 15px rgba(0, 0, 0, 0.4); position: sticky; top: 0; z-index: 100; } nav { display: flex; justify-content: space-between; align-items: center; } .logo { font-size: 24px; font-weight: bold; color: var(--light); text-decoration: none; display: flex; align-items: center; gap: 8px; } .logo span { color: var(--primary); } .logo i { font-size: 22px; } .nav-links { display: flex; gap: 25px; } .nav-links a { color: var(--gray); text-decoration: none; font-weight: 500; transition: all 0.3s; font-size: 16px; } .nav-links a:hover { color: var(--primary-light); transform: translateY(-2px); } /* Hero section */ .hero { padding: 100px 0; text-align: center; background: linear-gradient(135deg, var(--darker) 0%, var(--dark) 100%); } .hero h1 { font-size: 42px; margin-bottom: 20px; font-weight: 700; background: linear-gradient(to right, var(--light) 0%, var(--primary-light) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .hero p { font-size: 18px; color: var(--gray); max-width: 700px; margin: 0 auto 30px; line-height: 1.7; } .btn { display: inline-flex; align-items: center; gap: 8px; background-color: var(--primary); color: white; padding: 12px 28px; border-radius: 8px; text-decoration: none; font-weight: 600; transition: all 0.3s; border: none; cursor: pointer; font-size: 16px; box-shadow: 0 4px 15px rgba(108, 92, 231, 0.3); } .btn:hover { background-color: var(--primary-dark); transform: translateY(-3px); box-shadow: 0 6px 20px rgba(108, 92, 231, 0.4); } .btn-large { padding: 15px 36px; font-size: 18px; } /* Tutorial Video */ .tutorial { padding: 80px 0; background-color: var(--darker); } .section-title { text-align: center; margin-bottom: 50px; } .section-title h2 { font-size: 32px; margin-bottom: 15px; color: var(--light); position: relative; display: inline-block; } .section-title h2::after { content: ''; position: absolute; width: 60px; height: 3px; background: var(--primary); bottom: -10px; left: 50%; transform: translateX(-50%); border-radius: 3px; } .section-title p { color: var(--gray); max-width: 600px; margin: 0 auto; font-size: 16px; } .video-container { position: relative; padding-bottom: 42%; /* 16:9 */ height: 0; overflow: hidden; max-width: 900px; margin: 0 auto; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); } .video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; } /* Steps */ .steps { padding: 80px 0; background-color: var(--dark); } .steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; max-width: 900px; margin: 0 auto; } .step-card { text-align: center; padding: 30px; } .step-number { width: 50px; height: 50px; background-color: var(--primary); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: bold; margin: 0 auto 20px; } .step-card h3 { font-size: 20px; margin-bottom: 15px; color: var(--light); } .step-card p { color: var(--gray); font-size: 15px; line-height: 1.7; } /* FAQ Section */ .faq { padding: 80px 0; background-color: var(--darker); } .faq-item { margin-bottom: 15px; background-color: rgba(255, 255, 255, 0.03); border-radius: 8px; overflow: hidden; max-width: 800px; margin-left: auto; margin-right: auto; border: 1px solid rgba(255, 255, 255, 0.05); } .faq-question { padding: 18px 25px; background-color: rgba(108, 92, 231, 0.08); cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-weight: 500; color: var(--light); transition: all 0.3s; } .faq-question:hover { background-color: rgba(108, 92, 231, 0.15); } .faq-question::after { content: '+'; font-size: 22px; color: var(--primary); transition: all 0.3s; } .faq-question.active::after { content: '-'; } .faq-answer { padding: 0 25px; max-height: 0; overflow: hidden; transition: all 0.3s ease-out; color: var(--gray); line-height: 1.7; } .faq-answer.show { padding: 20px 25px; max-height: 500px; } /* Download Section */ .download { padding: 100px 0; text-align: center; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); } .download h2 { font-size: 36px; margin-bottom: 20px; color: white; } .download p { font-size: 18px; max-width: 700px; margin: 0 auto 30px; color: rgba(255, 255, 255, 0.9); } .btn-light { background-color: white; color: var(--primary); } .btn-light:hover { background-color: rgba(255, 255, 255, 0.95); color: var(--primary-dark); } .download-info { margin-top: 20px; font-size: 14px; color: rgba(255, 255, 255, 0.8); display: flex; justify-content: center; gap: 15px; flex-wrap: wrap; } .download-info span { display: inline-flex; align-items: center; gap: 5px; } /* Footer */ footer { background-color: var(--darker); padding: 60px 0 20px; } .footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; margin-bottom: 40px; } .footer-column h3 { font-size: 18px; margin-bottom: 20px; color: var(--primary-light); position: relative; padding-bottom: 10px; } .footer-column h3::after { content: ''; position: absolute; width: 30px; height: 2px; background: var(--primary); bottom: 0; left: 0; } .footer-column ul { list-style: none; padding: 0; margin: 0; } .footer-column ul li { margin-bottom: 12px; } .footer-column ul li a { color: var(--gray); text-decoration: none; transition: all 0.3s; font-size: 15px; display: inline-block; } .footer-column ul li a:hover { color: var(--primary-light); transform: translateX(5px); } .footer-column ul li i { width: 20px; color: var(--primary); } .copyright { text-align: center; padding-top: 30px; border-top: 1px solid rgba(255, 255, 255, 0.08); color: var(--gray-dark); font-size: 14px; } @media (max-width: 768px) { .nav-links { gap: 15px; } .hero { padding: 80px 0; } .hero h1 { font-size: 36px; } .download h2 { font-size: 30px; } .section-title h2 { font-size: 28px; } } @media (max-width: 576px) { .nav-links { display: none; } .hero h1 { font-size: 32px; } .hero p { font-size: 16px; } .steps-grid { grid-template-columns: 1fr; } .download-info { flex-direction: column; gap: 8px; } } </style> </head> <body> <header> <div class="container"> <nav> <a href="#" class="logo"><i class="fas fa-box-open"></i>Wraply<span>PRO</span></a> <div class="nav-links"> <a href="#tutorial">Tutorial</a> <a href="#steps">How It Works</a> <a href="#faq">FAQ</a> <a href="#download">Download</a> </div> </nav> </div> </header> <section class="hero"> <div class="container"> <h1>Windows Installer Creator</h1> <p>Free desktop application for creating simple installers on Windows 10/11.<br>Select your files, set a name, and generate with one click.</p> <a href="#download" class="btn btn-large"><i class="fas fa-download"></i> Download Now</a> </div> </section> <section class="tutorial" id="tutorial"> <div class="container"> <div class="section-title"> <h2>Quick Tutorial</h2> <p>See how easy it is to create an installer with Wraply</p> </div> <video controls style="width: 100%; border-radius: 10px;"> <source src="tutorial.mp4" type="video/mp4"> Your browser does not support the video tag. </video> </div> </section> <section class="steps" id="steps"> <div class="container"> <div class="section-title"> <h2>How It Works</h2> <p>Three simple steps to create your installer</p> </div> <div class="steps-grid"> <div class="step-card"> <div class="step-number">1</div> <h3>Select Your Files</h3> <p>Use the file browser buttons to choose your application folder and main executable.</p> </div> <div class="step-card"> <div class="step-number">2</div> <h3>Name Your Installer</h3> <p>Enter a name that will be displayed during installation.</p> </div> <div class="step-card"> <div class="step-number">3</div> <h3>Generate</h3> <p>Click "Create Installer" and your package will be ready in few minutes.</p> </div> </div> </div> </section> <section class="faq" id="faq"> <div class="container"> <div class="section-title"> <h2>Frequently Asked Questions</h2> <p>Common questions about Wraply</p> </div> <div class="faq-item"> <div class="faq-question"> What Windows versions are supported? </div> <div class="faq-answer"> <p>Wraply requires Windows 10 or 11 (64-bit). The installers you create will work on Windows 7 and newer.</p> </div> </div> <div class="faq-item"> <div class="faq-question"> Is there any cost to use Wraply? </div> <div class="faq-answer"> <p>No, Wraply is completely free with no hidden costs or limitations.</p> </div> </div> <div class="faq-item"> <div class="faq-question"> Why does the antivirus block the Wraply app? </div> <div class="faq-answer"> <p>This happens because the program is written in Python and we currently don't have a digital certificate yet.</p> </div> </div> <div class="faq-item"> <div class="faq-question"> Is the jar file corrupted? </div> <div class="faq-answer"> <p>If you are encountering issues with the jar file, make sure that you are using at least Java 11. The application may not work properly with older Java versions. Please also ensure that your users are informed to use Java 11 or newer.</p> <p>Here you can <a href="https://www.openlogic.com/openjdk-downloads">download</a> any JAVA version</p> </div> </div> <div class="faq-item"> <div class="faq-question"> Why is the output file a .jar instead of a .exe? </div> <div class="faq-answer"> <p>Using a <code>.jar</code> file allows us to avoid the need for a digital certificate, which is often required for <code>.exe</code> files on Windows systems. Without a certificate, <code>.exe</code> files are commonly flagged or blocked by antivirus programs.</p> <p><code>.jar</code> files, on the other hand, are Java-based and more flexible for distribution, especially for smaller developers who don't want to deal with Windows signing requirements.</p> </div> </div> <div class="faq-item"> <div class="faq-question"> Can I add a custom description or logo to my installer? </div> <div class="faq-answer"> <p>Not yet — but it's on the roadmap! We're actively working on adding support for custom descriptions and logo images to make your installer feel more personal and professional.</p> <p>Stay tuned for future updates — and feel free to suggest features you'd like to see!</p> </div> </div> </div> </section> <section class="download" id="download"> <div class="container"> <h2>Ready to Create Installers?</h2> <p>Download the free Wraply desktop application for Windows</p> <a href="?download=true" class="btn btn-light"><i class="fas fa-download"></i> Download Now</a> <div class="download-info"> <span><i class="fas fa-windows"></i> Windows 10/11 (64-bit)</span> <span><i class="fas fa-database"></i> 8.86 KB</span> <span><i class="fas fa-download"></i> 90 downloads</span> <span><i class="fas fa-clock"></i> Last updated: May 9, 2025 </span> </div> </div> </section> <footer id="contact"> <div class="container"> <div class="footer-content"> <div class="footer-column"> <h3>Wraply</h3> <p>Simple Windows installer creator. Free and unlimited.</p> <p><script type="text/javascript" src="https://www.free-counters.org/count/ht2m"></script><br> <a href='https://www.free-counters.org/'>Free-Counters</a> <script type='text/javascript' src='https://www.whomania.com/ctr?id=9072546145f753ea5a7b1da68f98c9ee08afff36'></script></p> </div> <div class="footer-column"> <h3>Links</h3> <ul> <li><a href="#tutorial"><i class="fas fa-chevron-right"></i> Tutorial</a></li> <li><a href="#steps"><i class="fas fa-chevron-right"></i> How It Works</a></li> <li><a href="#faq"><i class="fas fa-chevron-right"></i> FAQ</a></li> </ul> </div> <div class="footer-column"> <h3>Contact</h3> <ul> <li><a href="#"><i class="fas fa-envelope"></i> admin@wraply.pro</a></li> </ul> <h3>Donation</h3> <ul> <li> <a href="https://www.paypal.com/donate/?business=wojtach1999%40gmail.com&no_recurring=0¤cy_code=USD" target="_blank"> <i class="fab fa-paypal"></i> Donate via PayPal </a> </li> </ul> </div> </div> <div class="copyright"> <p>© 2025-<span id="current-year"></span> Wraply. All rights reserved.</p> </div> </div> </footer> <script> // Current year in footer document.getElementById('current-year').textContent = new Date().getFullYear(); // FAQ functionality const faqQuestions = document.querySelectorAll('.faq-question'); faqQuestions.forEach(question => { question.addEventListener('click', () => { question.classList.toggle('active'); const answer = question.nextElementSibling; answer.classList.toggle('show'); // Close other open answers faqQuestions.forEach(q => { if (q !== question && q.classList.contains('active')) { q.classList.remove('active'); q.nextElementSibling.classList.remove('show'); } }); }); }); </script> </body> </html>