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>