File size: 27,189 Bytes
edc9a89 57b31b1 edc9a89 31da8fd edc9a89 901cb2f edc9a89 d49189f edc9a89 3e89abb edc9a89 3e89abb edc9a89 909789e edc9a89 95ba299 edc9a89 e7fc8c5 edc9a89 144828f edc9a89 0f47339 edc9a89 159d8b2 edc9a89 d142e2e edc9a89 57b31b1 edc9a89 57b31b1 edc9a89 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="theme-color" content="#f7f8ff" />
<meta name="description" content="PDFix β your simple, secure workspace for PDF tools. Merge, split, compress, convert, and organize documents." />
<title>PDFix β Your All-in-One PDF Toolkit</title>
<style>
:root {
--bg: #f7f8ff;
--surface: #ffffff;
--ink: #15172b;
--muted: #6f7289;
--line: #e8e9f3;
--primary: #635bff;
--primary-dark: #4c43e8;
--purple-soft: #eeedff;
--teal: #14b8a6;
--shadow: 0 18px 55px rgba(47, 43, 112, .09);
--radius: 22px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: var(--ink);
background:
radial-gradient(circle at 85% 4%, rgba(177, 171, 255, .19), transparent 25rem),
radial-gradient(circle at 4% 25%, rgba(115, 221, 211, .13), transparent 23rem),
var(--bg);
line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { cursor: pointer; }
.container { width: min(1160px, calc(100% - 40px)); margin: 0 auto; }
.topbar { padding: 20px 0; }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 850; font-size: 1.45rem; letter-spacing: -1px; }
.brand-mark {
width: 39px; height: 39px; display: grid; place-items: center; border-radius: 13px;
color: #fff; background: linear-gradient(145deg, #766dff, #4c43e8);
box-shadow: 0 8px 20px rgba(99, 91, 255, .27);
}
.brand-mark svg { width: 23px; height: 23px; }
.brand span:last-child { color: var(--primary); }
.nav-links { display: flex; align-items: center; gap: 29px; color: #5f6278; font-size: .94rem; }
.nav-links a:hover { color: var(--primary); }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.btn { border: 0; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 12px 18px; border-radius: 13px; font-weight: 700; transition: .2s ease; }
.btn-primary { color: white; background: var(--primary); box-shadow: 0 8px 18px rgba(99,91,255,.22); }
.btn-primary:hover { background: var(--primary-dark); transform: translateY(-1px); }
.btn-light { color: #484b65; background: white; border: 1px solid var(--line); }
.btn-light:hover { border-color: #c9c5ff; color: var(--primary); }
.menu-toggle { display: none; border: 1px solid var(--line); background: white; border-radius: 12px; padding: 10px; }
.hero { padding: 66px 0 48px; text-align: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid #e4e1ff; background: rgba(255,255,255,.78); color: #5a52e9; border-radius: 99px; font-size: .82rem; font-weight: 750; }
.eyebrow .spark { color: #f59e0b; }
h1 { margin: 22px auto 16px; max-width: 850px; font-size: clamp(2.7rem, 6vw, 5.1rem); line-height: 1.03; letter-spacing: -3.6px; font-weight: 850; }
h1 .gradient { background: linear-gradient(100deg, #5e55f5 12%, #8b5cf6 54%, #14b8a6 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-copy { max-width: 650px; margin: 0 auto; color: var(--muted); font-size: 1.12rem; }
.upload-card { max-width: 780px; margin: 34px auto 0; padding: 10px; border: 1px solid rgba(99,91,255,.15); border-radius: 25px; background: rgba(255,255,255,.84); box-shadow: var(--shadow); text-align: left; }
.dropzone { min-height: 190px; border: 2px dashed #cbc8ff; border-radius: 18px; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 26px 18px; text-align: center; background: linear-gradient(135deg, rgba(238,237,255,.7), rgba(239,253,251,.52)); transition: .2s ease; }
.dropzone.dragover { border-color: var(--primary); background: #eeedff; transform: scale(.995); }
.upload-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 17px; color: var(--primary); background: white; box-shadow: 0 7px 18px rgba(71,64,160,.1); margin-bottom: 13px; }
.upload-icon svg { width: 27px; height: 27px; }
.dropzone strong { font-size: 1.08rem; }
.dropzone p { margin: 5px 0 16px; color: var(--muted); font-size: .9rem; }
.dropzone .btn { min-width: 155px; }
.file-note { margin: 10px 8px 2px; color: #888ba0; font-size: .78rem; text-align: center; }
#fileInput { display: none; }
.trust-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 24px; margin-top: 25px; color: #777a90; font-size: .84rem; }
.trust-row span { display: inline-flex; align-items: center; gap: 7px; }
.trust-row svg { width: 16px; height: 16px; color: #16a085; }
section { padding: 45px 0; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 25px; }
.section-head h2 { margin: 0 0 7px; font-size: clamp(1.7rem, 3vw, 2.3rem); letter-spacing: -1.1px; }
.section-head p { margin: 0; color: var(--muted); }
.searchbox { width: min(280px, 100%); position: relative; flex-shrink: 0; }
.searchbox svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 18px; color: #9294a8; }
.searchbox input { width: 100%; border: 1px solid var(--line); background: rgba(255,255,255,.9); border-radius: 13px; padding: 12px 14px 12px 40px; outline: none; }
.searchbox input:focus { border-color: #aaa5ff; box-shadow: 0 0 0 3px rgba(99,91,255,.1); }
.tools-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.tool-card { position: relative; display: block; min-height: 190px; padding: 22px; border: 1px solid var(--line); border-radius: 19px; background: rgba(255,255,255,.91); box-shadow: 0 5px 18px rgba(35,31,91,.025); transition: .22s ease; overflow: hidden; }
.tool-card:hover { transform: translateY(-4px); border-color: #d2ceff; box-shadow: 0 16px 32px rgba(47,43,112,.09); }
.tool-icon { display: grid; place-items: center; width: 47px; height: 47px; border-radius: 15px; margin-bottom: 17px; }
.tool-icon svg { width: 24px; height: 24px; }
.lavender { color: #665cff; background: #efedff; }
.mint { color: #0f9e8d; background: #e2fbf5; }
.peach { color: #ed7b42; background: #fff0e7; }
.blue { color: #3485e8; background: #e8f3ff; }
.pink { color: #d84d94; background: #ffedf6; }
.yellow { color: #b98511; background: #fff7d9; }
.tool-card h3 { margin: 0 0 6px; font-size: 1.02rem; letter-spacing: -.25px; }
.tool-card p { margin: 0; color: var(--muted); font-size: .86rem; }
.arrow { position: absolute; right: 18px; top: 22px; color: #b2b4c7; font-size: 1.1rem; }
.empty-state { display: none; text-align: center; color: var(--muted); padding: 30px; }
.feature-band { margin: 35px 0 15px; padding: 34px; border-radius: 25px; background: linear-gradient(115deg, #24234a, #39327d 63%, #3e7d85); color: white; display: flex; justify-content: space-between; align-items: center; gap: 25px; overflow: hidden; position: relative; }
.feature-band:after { content: ""; position: absolute; width: 260px; height: 260px; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; right: 8%; top: -145px; box-shadow: 0 0 0 28px rgba(255,255,255,.035), 0 0 0 58px rgba(255,255,255,.025); }
.feature-band h2 { margin: 0 0 8px; font-size: clamp(1.45rem, 3vw, 2rem); letter-spacing: -.8px; }
.feature-band p { margin: 0; max-width: 610px; color: #d8d7f0; }
.feature-band .btn { flex-shrink: 0; position: relative; z-index: 1; color: #37316f; background: white; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.step { padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.7); }
.step-number { width: 35px; height: 35px; display: grid; place-items: center; color: white; border-radius: 12px; background: var(--primary); font-weight: 800; margin-bottom: 15px; }
.step h3 { margin: 0 0 7px; font-size: 1rem; }
.step p { margin: 0; color: var(--muted); font-size: .9rem; }
footer { margin-top: 35px; border-top: 1px solid var(--line); padding: 27px 0; color: var(--muted); font-size: .86rem; }
.footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; }
.footer-links { display: flex; gap: 20px; }
.footer-links a:hover { color: var(--primary); }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; padding: 13px 18px; border-radius: 14px; background: #20213a; color: white; box-shadow: var(--shadow); font-size: .9rem; z-index: 20; transition: .25s ease; max-width: calc(100% - 30px); text-align: center; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 950px) {
.tools-grid { grid-template-columns: repeat(3, 1fr); }
.nav-links { gap: 18px; }
}
@media (max-width: 720px) {
.container { width: min(100% - 28px, 1160px); }
.topbar { padding: 14px 0; }
.nav-links { display: none; position: absolute; top: 72px; left: 14px; right: 14px; padding: 18px; background: white; border: 1px solid var(--line); border-radius: 17px; box-shadow: var(--shadow); flex-direction: column; align-items: stretch; z-index: 10; }
.nav-links.open { display: flex; }
.nav-actions .btn { display: none; }
.menu-toggle { display: inline-flex; }
.hero { padding: 47px 0 30px; }
h1 { letter-spacing: -2.2px; }
.hero-copy { font-size: 1rem; }
.upload-card { margin-top: 25px; }
.dropzone { min-height: 180px; }
.section-head { align-items: stretch; flex-direction: column; }
.searchbox { width: 100%; }
.tools-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.tool-card { padding: 17px; min-height: 178px; }
.feature-band { align-items: flex-start; flex-direction: column; padding: 26px; }
.steps { grid-template-columns: 1fr; }
.trust-row { gap: 12px 18px; }
}
@media (max-width: 390px) {
.tools-grid { grid-template-columns: 1fr; }
.tool-card { min-height: auto; }
.brand { font-size: 1.28rem; }
}
</style>
</head>
<body>
<header class="topbar">
<div class="container nav">
<a class="brand" href="#" aria-label="PDFix home">
<span class="brand-mark">
<svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M7 3.5h7l4 4V20a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 6 20V5A1.5 1.5 0 0 1 7.5 3.5Z" stroke="currentColor" stroke-width="1.8"/><path d="M14 3.8V8h4M8.5 12h7M8.5 15.5h7" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
</span>
<span>PDF<span>ix</span></span>
</a>
<nav class="nav-links" id="navLinks">
<a href="#tools">PDF Tools</a>
<a href="#how-it-works">How it works</a>
<a href="#about">About PDFix</a>
<a href="contact.html">Contact</a>
</nav>
<div class="nav-actions">
<a class="btn btn-light" href="#tools">Explore tools</a>
<button class="btn btn-primary" id="navUpload">Upload a PDF <span aria-hidden="true">β</span></button>
<button class="menu-toggle" id="menuToggle" aria-label="Toggle navigation" aria-expanded="false">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M4 7h16M4 12h16M4 17h16" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
</button>
</div>
</div>
</header>
<main>
<section class="hero">
<div class="container">
<div class="eyebrow"><span class="spark">β¦</span> Your documents, made simple</div>
<h1>Every PDF task.<br /><span class="gradient">One simple workspace.</span></h1>
<p class="hero-copy">Meet PDFix β a fresh, easy way to organize your documents. Merge, split, convert, and manage PDFs with less hassle.</p>
<div class="upload-card">
<div class="dropzone" id="dropzone" role="button" tabindex="0" aria-label="Choose or drop PDF files">
<div class="upload-icon">
<svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M12 16V4m0 0L7.5 8.5M12 4l4.5 4.5M5 14.5v4A1.5 1.5 0 0 0 6.5 20h11a1.5 1.5 0 0 0 1.5-1.5v-4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
</div>
<strong id="uploadTitle">Drop your PDF files here</strong>
<p id="uploadText">or choose files from your device to get started</p>
<button type="button" class="btn btn-primary" id="chooseFiles">Choose PDF files <span aria-hidden="true">β</span></button>
<input id="fileInput" type="file" accept="application/pdf,.pdf" multiple />
</div>
<div class="file-note">PDF files only Β· Your files are not uploaded by this demo homepage</div>
</div>
<div class="trust-row">
<span><svg viewBox="0 0 24 24" fill="none"><path d="m5 12 4 4L19 6" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>Simple to use</span>
<span><svg viewBox="0 0 24 24" fill="none"><path d="m5 12 4 4L19 6" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>Works on mobile</span>
<span><svg viewBox="0 0 24 24" fill="none"><path d="m5 12 4 4L19 6" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>No account needed</span>
</div>
</div>
</section>
<section id="tools">
<div class="container">
<div class="section-head">
<div>
<h2>Everything you need for PDFs</h2>
<p>Choose a tool and get your documents in shape.</p>
</div>
<label class="searchbox">
<svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><circle cx="10.8" cy="10.8" r="6.8" stroke="currentColor" stroke-width="1.8"/><path d="m16 16 4.5 4.5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
<input type="search" id="toolSearch" placeholder="Search PDF tools..." aria-label="Search PDF tools" />
</label>
</div>
<div class="tools-grid" id="toolsGrid">
<a class="tool-card" href="merge.html" data-tool="merge pdf combine files">
<span class="arrow">β</span><div class="tool-icon lavender"><svg viewBox="0 0 24 24" fill="none"><path d="M8 3.5H5.5A1.5 1.5 0 0 0 4 5v14a1.5 1.5 0 0 0 1.5 1.5h6A1.5 1.5 0 0 0 13 19v-2M16 3.5h2.5A1.5 1.5 0 0 1 20 5v8M8 7h3M8 10h3M15 16h6M18 13v6" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
<h3>Merge PDF</h3><p>Combine multiple PDFs into one organized file.</p>
</a>
<a class="tool-card" href="split.html" data-tool="split pdf divide pages">
<span class="arrow">β</span><div class="tool-icon mint"><svg viewBox="0 0 24 24" fill="none"><path d="M6 3.5h8l4 4V12M14 3.5V8h4M6 13v6.5A1.5 1.5 0 0 0 7.5 21h3M8 8h3M8 11h2M14 16h6M17 13v6" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
<h3>Split PDF</h3><p>Separate pages or extract the pages you need.</p>
</a>
<a class="tool-card" href="compress.html" data-tool="compress pdf reduce size">
<span class="arrow">β</span><div class="tool-icon peach"><svg viewBox="0 0 24 24" fill="none"><path d="M8 3.5H5.5A1.5 1.5 0 0 0 4 5v14a1.5 1.5 0 0 0 1.5 1.5h11A1.5 1.5 0 0 0 18 19v-5M8 8h6M8 11h4M20 4v6m0-6-2.5 2.5M20 4l-2.5-2.5" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
<h3>Compress PDF</h3><p>Reduce file size for easier sharing and storage.</p>
</a>
<a class="tool-card" href="pdftoword.html" data-tool="pdf to word convert docx">
<span class="arrow">β</span><div class="tool-icon blue"><svg viewBox="0 0 24 24" fill="none"><path d="M6.5 3.5h8l4 4V20a1.5 1.5 0 0 1-1.5 1.5h-10A1.5 1.5 0 0 1 5.5 20V5A1.5 1.5 0 0 1 7 3.5Z" stroke="currentColor" stroke-width="1.7"/><path d="M14.5 3.8V8h4M8 12h8M8 15h8M8 18h5" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></svg></div>
<h3>PDF to Word</h3><p>Turn PDF content into an editable document.</p>
</a>
<a class="tool-card" href="wordtopdf.html" data-tool="word to pdf docx convert">
<span class="arrow">β</span><div class="tool-icon blue"><svg viewBox="0 0 24 24" fill="none"><path d="M6.5 3.5h8l4 4V20a1.5 1.5 0 0 1-1.5 1.5h-10A1.5 1.5 0 0 1 5.5 20V5A1.5 1.5 0 0 1 7 3.5Z" stroke="currentColor" stroke-width="1.7"/><path d="M14.5 3.8V8h4M8 12l2 6 2-4 2 4 2-6" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
<h3>Word to PDF</h3><p>Convert documents into a share-ready PDF.</p>
</a>
<a class="tool-card" href="imagestopdf.html" data-tool="images jpg png to pdf">
<span class="arrow">β</span><div class="tool-icon pink"><svg viewBox="0 0 24 24" fill="none"><rect x="3.5" y="4.5" width="17" height="15" rx="2" stroke="currentColor" stroke-width="1.7"/><circle cx="9" cy="9.5" r="1.5" stroke="currentColor" stroke-width="1.7"/><path d="m5 17 5-4 3 2 3-4 3 6" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
<h3>Images to PDF</h3><p>Turn JPG and PNG images into a single PDF.</p>
</a>
<a class="tool-card" href="pdftoimages.html" data-tool="pdf to jpg png images">
<span class="arrow">β</span><div class="tool-icon yellow"><svg viewBox="0 0 24 24" fill="none"><path d="M6.5 3.5h8l4 4V20a1.5 1.5 0 0 1-1.5 1.5h-10A1.5 1.5 0 0 1 5.5 20V5A1.5 1.5 0 0 1 7 3.5Z" stroke="currentColor" stroke-width="1.7"/><path d="M14.5 3.8V8h4M8 12h8M8 15h8M8 18h5" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></svg></div>
<h3>PDF to Images</h3><p>Export PDF pages as image files.</p>
</a>
<a class="tool-card" href="rotatepdf.html" data-tool="rotate pdf pages">
<span class="arrow">β</span><div class="tool-icon mint"><svg viewBox="0 0 24 24" fill="none"><path d="M20 11a8 8 0 0 0-14.5-4.7L3 9M3 4v5h5M4 13a8 8 0 0 0 14.5 4.7L21 15m0 5v-5h-5" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
<h3>Rotate PDF</h3><p>Correct page orientation in a few clicks.</p>
</a>
<a class="tool-card" href="addwatermark.html" data-tool="watermark pdf stamp">
<span class="arrow">β</span><div class="tool-icon lavender"><svg viewBox="0 0 24 24" fill="none"><path d="m12 3 2.2 5.2L20 10l-5.8 2.1L12 18l-2.2-5.9L4 10l5.8-1.8L12 3Z" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/><path d="M5 20h14" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></svg></div>
<h3>Add Watermark</h3><p>Place a text mark on your document pages.</p>
</a>
<a class="tool-card" href="protectpdf.html" data-tool="protect password secure pdf">
<span class="arrow">β</span><div class="tool-icon peach"><svg viewBox="0 0 24 24" fill="none"><rect x="4.5" y="10" width="15" height="11" rx="2" stroke="currentColor" stroke-width="1.7"/><path d="M8 10V7a4 4 0 0 1 8 0v3M12 14v3" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></svg></div>
<h3>Protect PDF</h3><p>Add password protection to sensitive files.</p>
</a>
<a class="tool-card" href="organize.html" data-tool="reorder organize rearrange pdf pages">
<span class="arrow">β</span><div class="tool-icon blue"><svg viewBox="0 0 24 24" fill="none"><path d="M8 5h12M8 12h12M8 19h12M3.5 5h.01M3.5 12h.01M3.5 19h.01" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"/></svg></div>
<h3>Organize Pages</h3><p>Reorder, remove, or arrange PDF pages.</p>
</a>
<a class="tool-card" href="edit.html" data-tool="edit pdf text annotations">
<span class="arrow">β</span><div class="tool-icon pink"><svg viewBox="0 0 24 24" fill="none"><path d="m14 5 5 5M4 20l4.5-1 10-10a2.1 2.1 0 0 0-3-3l-10 10L4 20Z" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 20h8" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></svg></div>
<h3>Edit PDF</h3><p>Add notes, shapes, and simple annotations.</p>
</a>
</div>
<div class="empty-state" id="emptyState">No tools match your search. Try another keyword.</div>
<div class="feature-band" id="about">
<div><h2>Less document stress. More getting things done.</h2><p>PDFix is being built to make everyday PDF tasks feel straightforward, with a clean workspace that helps you find the right tool quickly.</p></div>
<a class="btn" href="#tools">Explore PDF tools <span aria-hidden="true">β</span></a>
</div>
</div>
</section>
<section id="how-it-works">
<div class="container">
<div class="section-head"><div><h2>Simple by design</h2><p>Get started in three easy steps.</p></div></div>
<div class="steps">
<article class="step"><div class="step-number">1</div><h3>Choose a tool</h3><p>Pick the PDF task you want to complete from the tools above.</p></article>
<article class="step"><div class="step-number">2</div><h3>Add your files</h3><p>Select the document or documents you want to work with.</p></article>
<article class="step"><div class="step-number">3</div><h3>Process and save</h3><p>Use the tool controls to prepare your document and save the result.</p></article>
</div>
</div>
</section>
</main>
<section id="contact" style="padding:28px 0 45px">
<div class="container">
<div class="feature-band" style="margin:0">
<div><h2>Need a hand with a PDF?</h2><p>Have a question, suggestion, or feedback for PDFix? Get in touch through our contact page.</p></div>
<a class="btn" href="contact.html">Contact Us <span aria-hidden="true">β</span></a>
</div>
</div>
</section>
<footer>
<div class="container footer-inner">
<a class="brand" href="#"><span class="brand-mark"><svg viewBox="0 0 24 24" fill="none"><path d="M7 3.5h7l4 4V20a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 6 20V5A1.5 1.5 0 0 1 7.5 3.5Z" stroke="currentColor" stroke-width="1.8"/><path d="M14 3.8V8h4M8.5 12h7M8.5 15.5h7" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg></span><span>PDF<span>ix</span></span></a>
<span>Β© <span id="year"></span> PDFix. Your documents, made simple.</span>
<div class="footer-links"><a href="#tools">Tools</a><a href="#how-it-works">How it works</a><a href="#about">About</a><a href="contact.html">Contact Us</a></div>
</div>
</footer>
<div class="toast" id="toast" role="status" aria-live="polite"></div>
<script>
const fileInput = document.getElementById('fileInput');
const dropzone = document.getElementById('dropzone');
const chooseFiles = document.getElementById('chooseFiles');
const uploadTitle = document.getElementById('uploadTitle');
const uploadText = document.getElementById('uploadText');
const toast = document.getElementById('toast');
let toastTimer;
function showToast(message) {
toast.textContent = message;
toast.classList.add('show');
clearTimeout(toastTimer);
toastTimer = setTimeout(() => toast.classList.remove('show'), 3200);
}
function openPicker() { fileInput.click(); }
chooseFiles.addEventListener('click', (event) => { event.stopPropagation(); openPicker(); });
document.getElementById('navUpload').addEventListener('click', openPicker);
dropzone.addEventListener('click', (event) => {
if (event.target.closest('button')) return;
openPicker();
});
dropzone.addEventListener('keydown', (event) => {
if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); openPicker(); }
});
['dragenter', 'dragover'].forEach(type => dropzone.addEventListener(type, event => {
event.preventDefault(); dropzone.classList.add('dragover');
}));
['dragleave', 'drop'].forEach(type => dropzone.addEventListener(type, event => {
event.preventDefault(); dropzone.classList.remove('dragover');
}));
dropzone.addEventListener('drop', event => handleFiles(event.dataTransfer.files));
fileInput.addEventListener('change', () => handleFiles(fileInput.files));
function handleFiles(fileList) {
const files = Array.from(fileList || []);
if (!files.length) return;
const invalid = files.filter(file => !file.name.toLowerCase().endsWith('.pdf') && file.type !== 'application/pdf');
if (invalid.length) {
showToast('Please choose PDF files only.');
return;
}
uploadTitle.textContent = files.length === 1 ? files[0].name : `${files.length} PDF files selected`;
uploadText.textContent = files.length === 1
? `${(files[0].size / (1024 * 1024)).toFixed(2)} MB Β· Ready for a PDF tool`
: 'Files selected locally in your browser.';
showToast('Files selected. PDF processing tools will be connected here next.');
}
const searchInput = document.getElementById('toolSearch');
const cards = Array.from(document.querySelectorAll('.tool-card'));
const emptyState = document.getElementById('emptyState');
searchInput.addEventListener('input', () => {
const query = searchInput.value.trim().toLowerCase();
let visible = 0;
cards.forEach(card => {
const match = (card.dataset.tool + ' ' + card.innerText).toLowerCase().includes(query);
card.style.display = match ? '' : 'none';
if (match) visible++;
});
emptyState.style.display = visible ? 'none' : 'block';
});
const menuToggle = document.getElementById('menuToggle');
const navLinks = document.getElementById('navLinks');
menuToggle.addEventListener('click', () => {
const open = navLinks.classList.toggle('open');
menuToggle.setAttribute('aria-expanded', String(open));
});
navLinks.querySelectorAll('a').forEach(link => link.addEventListener('click', () => {
navLinks.classList.remove('open');
menuToggle.setAttribute('aria-expanded', 'false');
}));
document.getElementById('year').textContent = new Date().getFullYear();
</script>
</body>
</html> |