| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"> |
| <meta name="theme-color" content="#11152d"> |
| <title>Contact Us — PDFix</title> |
| <meta name="description" content="Contact the PDFix team with questions, feedback, or support requests."> |
| <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=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet"> |
| <style> |
| :root{--ink:#171c35;--muted:#7d859e;--line:#e5e9f2;--purple:#6558ed;--mint:#20b99a;--bg:#f5f7fc}*{box-sizing:border-box}body{margin:0;color:var(--ink);font-family:"DM Sans",sans-serif;background:radial-gradient(circle at 10% 0%,#eceaff 0,transparent 30%),radial-gradient(circle at 95% 8%,#e3faf4 0,transparent 25%),var(--bg);min-height:100vh}.shell{max-width:1160px;margin:auto;padding:23px 24px 45px}.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:60px}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}.logo{width:44px;height:44px;border-radius:15px;background:linear-gradient(135deg,#786bff,#5145d7);display:grid;place-items:center;color:white;font-size:22px;font-weight:800;box-shadow:0 8px 20px #6658ed44}.brandname{font:800 22px Manrope,sans-serif;letter-spacing:-.8px}.brandname span{color:var(--purple)}.back{font-size:12px;font-weight:700;text-decoration:none;color:#59627d;border:1px solid var(--line);background:white;padding:11px 15px;border-radius:12px}.hero{text-align:center;margin-bottom:35px}.eyebrow{display:inline-flex;align-items:center;gap:7px;color:var(--purple);font-size:10px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;background:#eeecff;border:1px solid #e0dcff;border-radius:99px;padding:8px 12px}.hero h1{font:800 clamp(34px,5vw,52px)/1.1 Manrope,sans-serif;letter-spacing:-2px;margin:17px 0 12px}.hero h1 span{background:linear-gradient(100deg,#6558ed,#20b99a);-webkit-background-clip:text;background-clip:text;color:transparent}.hero p{color:var(--muted);font-size:14px;line-height:1.8;max-width:570px;margin:auto}.grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:22px;align-items:stretch}.info,.formcard{border:1px solid #e6e9f2;border-radius:24px;background:rgba(255,255,255,.94);box-shadow:0 18px 55px #212b590d}.info{padding:30px;background:linear-gradient(150deg,#171c35,#252b50);color:#fff;position:relative;overflow:hidden}.info:after{content:"";position:absolute;width:220px;height:220px;border:1px solid #ffffff13;border-radius:50%;right:-90px;bottom:-90px;box-shadow:0 0 0 30px #ffffff06,0 0 0 60px #ffffff04}.info h2{font:800 24px Manrope,sans-serif;margin:0 0 12px}.info>p{color:#b9bfd7;font-size:12px;line-height:1.8;margin:0 0 30px}.detail{display:flex;gap:13px;align-items:flex-start;padding:17px 0;border-top:1px solid #ffffff18;position:relative;z-index:1}.detailicon{width:40px;height:40px;flex-shrink:0;border-radius:13px;background:#ffffff12;display:grid;place-items:center;color:#b7b0ff;font-size:18px}.detail strong{display:block;font-size:12px;margin:2px 0 5px}.detail small,.detail a{font-size:11px;color:#b9bfd7;text-decoration:none;overflow-wrap:anywhere}.detail a:hover{color:#fff}.privacy{margin-top:27px;padding:14px;border-radius:14px;background:#ffffff0c;border:1px solid #ffffff12;color:#c8cde0;font-size:10px;line-height:1.7;position:relative;z-index:1}.formcard{padding:30px}.formcard h2{font:800 21px Manrope,sans-serif;margin:0 0 7px}.formcard .sub{font-size:12px;color:var(--muted);margin:0 0 23px}.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}.field{margin-bottom:16px}.field label{display:block;font-size:11px;font-weight:800;color:#424b67;margin-bottom:8px}.field input,.field select,.field textarea{width:100%;border:1px solid var(--line);border-radius:11px;padding:12px 13px;font:12px "DM Sans",sans-serif;color:var(--ink);background:#fcfcff;outline:none;transition:.2s}.field input:focus,.field select:focus,.field textarea:focus{border-color:#aaa2ff;box-shadow:0 0 0 3px #6558ed12;background:#fff}.field textarea{resize:vertical;min-height:140px;line-height:1.6}.send{border:0;border-radius:12px;width:100%;padding:14px 18px;background:linear-gradient(135deg,#7165f5,#574be0);color:#fff;font-size:12px;font-weight:800;box-shadow:0 9px 20px #6558ed30;display:flex;align-items:center;justify-content:center;gap:9px}.send:hover{filter:brightness(1.04);transform:translateY(-1px)}.notice{display:none;margin-top:13px;padding:12px 14px;border-radius:11px;font-size:11px;line-height:1.6}.notice.show{display:block}.notice.info{background:#f0efff;color:#584cda}.notice.success{background:#e9faf5;color:#087e68}.notice.error{background:#fff0f2;color:#b7374e}.micro{font-size:10px;color:#9aa1b4;line-height:1.6;margin-top:13px}.footer{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:#9aa1b4;font-size:10px;margin-top:25px;padding:0 4px} |
| @media(max-width:760px){.shell{padding:16px 13px 30px}.topbar{margin-bottom:40px}.grid{grid-template-columns:1fr}.info,.formcard{padding:23px}.hero h1{letter-spacing:-1px}.row{grid-template-columns:1fr;gap:0}.hero p{font-size:13px}} |
| </style> |
| </head> |
| <body> |
| <div class="shell"> |
| <header class="topbar"><a class="brand" href="index.html"><div class="logo">P</div><div class="brandname">PDF<span>ix</span></div></a><a class="back" href="index.html">← Back to home</a></header> |
| <section class="hero"><div class="eyebrow">✦ WE'RE HERE TO HELP</div><h1>Let's talk about <span>your PDF needs.</span></h1><p>Have a question, found an issue, or have an idea to make PDFix better? Send us a message and we’ll be glad to hear from you.</p></section> |
| <main class="grid"> |
| <aside class="info"><h2>Get in touch</h2><p>We value your feedback. Tell us what you need help with and include enough detail so we can understand your request.</p> |
| <div class="detail"><div class="detailicon">✉</div><div><strong>Email support</strong><a id="emailLink" href="mailto:khan7.talha@gmail.com">khan7.talha@gmail.com</a><small style="display:block;margin-top:5px">For questions and support requests</small></div></div> |
| <div class="detail"><div class="detailicon">◷</div><div><strong>Response time</strong><small>We aim to reply as soon as possible.</small></div></div> |
| <div class="detail"><div class="detailicon">⌁</div><div><strong>PDFix support</strong><small>Feedback, bug reports, and feature ideas</small></div></div> |
| <div class="privacy">🔒 <strong>Your privacy matters.</strong><br>Do not include passwords, payment details, or other sensitive information in your message.</div> |
| </aside> |
| <section class="formcard"><h2>Send us a message</h2><p class="sub">Fill in the details below. Fields marked with * are required.</p> |
| <form id="contactForm"> |
| <div class="row"><div class="field"><label for="name">Your name *</label><input id="name" name="name" autocomplete="name" placeholder="e.g. Alex Morgan" required maxlength="100"></div><div class="field"><label for="email">Email address *</label><input id="email" name="email" type="email" autocomplete="email" placeholder="you@example.com" required maxlength="200"></div></div> |
| <div class="field"><label for="subject">What can we help with? *</label><select id="subject" name="subject" required><option value="" disabled selected>Select a topic</option><option>General question</option><option>Report a problem</option><option>Feature suggestion</option><option>PDF tool feedback</option><option>Other</option></select></div> |
| <div class="field"><label for="message">Your message *</label><textarea id="message" name="message" required minlength="10" maxlength="4000" placeholder="Tell us how we can help…"></textarea><div class="micro"><span id="charCount">0</span>/4000 characters</div></div> |
| <button class="send" type="submit">Prepare message <span>→</span></button> |
| <div class="notice info" id="setupNotice">Your message will open in your email app. Press Send there to deliver it.</div> |
| <div class="notice" id="result" role="status"></div> |
| <p class="micro">This static form opens your email app with the message prepared. Press Send in your email app to deliver it; automatic sending requires a connected form service.</p> |
| </form> |
| </section> |
| </main> |
| <footer class="footer"><span>© PDFix · Simple tools for your PDFs</span><span>Contact · Support · Feedback</span></footer> |
| </div> |
| <script> |
| |
| |
| |
| |
| const SUPPORT_EMAIL = 'khan7.talha@gmail.com'; |
| const form=document.getElementById('contactForm'), msg=document.getElementById('message'), count=document.getElementById('charCount'), result=document.getElementById('result'); |
| document.getElementById('emailLink').href='mailto:'+SUPPORT_EMAIL; |
| document.getElementById('emailLink').textContent=SUPPORT_EMAIL; |
| msg.addEventListener('input',()=>count.textContent=msg.value.length); |
| form.addEventListener('submit',e=>{ |
| e.preventDefault(); |
| result.className='notice'; |
| if(!SUPPORT_EMAIL || SUPPORT_EMAIL==='YOUR_EMAIL@example.com'){result.textContent='Please configure the support email in this file before publishing. Your message has not been sent.';result.classList.add('show','error');return} |
| const name=document.getElementById('name').value.trim(), email=document.getElementById('email').value.trim(), subject=document.getElementById('subject').value, message=msg.value.trim(); |
| const body=`Name: ${name}\nReply email: ${email}\nTopic: ${subject}\n\nMessage:\n${message}`; |
| result.textContent='Opening your email app with the message prepared. Press Send in your email app to deliver it.'; |
| result.classList.add('show','success'); |
| window.location.href='mailto:'+SUPPORT_EMAIL+'?subject='+encodeURIComponent('[PDFix] '+subject)+'&body='+encodeURIComponent(body); |
| }); |
| </script> |
| </body> |
| </html> |
