PDF-Tools/split-pdf/index.html at main · CodingMation/PDF-Tools · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="description" content="Split a PDF into separate pages or extract page ranges. 100% offline, private, no uploads." />
  <title>Split PDF – Free Offline PDF Splitter | CodingMation</title>
  <link rel="stylesheet" href="../css/styles.css" />
  <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect width='100' height='100' rx='20' fill='%232563eb'/><text x='50' y='68' font-size='55' text-anchor='middle' fill='white' font-family='sans-serif' font-weight='bold'>C</text></svg>" />
  <script src="../vendor/pdf-lib.min.js"></script>
</head>
<body>
  <header class="site-header">
    <div class="container header-inner">
      <a href="../" class="brand">
        <div class="brand-logo">C</div>
        <div class="brand-text">
          <span class="brand-name">CodingMation</span>
          <span class="brand-tool">Split PDF</span>
        </div>
      </a>
      <div style="display:flex;align-items:center;gap:0.75rem;">
        <span class="offline-badge">🔒 Offline</span>
        <a href="../" class="pdf-tools-link">PDF Tools</a>
      </div>
    </div>
  </header>

  <main>
    <section class="hero container">
      <h1>Split PDF</h1>
      <p class="hero-sub">Extract pages or ranges from a PDF in seconds.</p>
      <p class="hero-privacy"><span>🔒 100% Offline</span> · <span>Your files never leave your device.</span></p>
    </section>

    <div class="container">
      <div class="main-card">
        <div class="card-section" id="empty-state">
          <div class="upload-zone" id="upload-zone">
            <svg class="upload-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
            <h3>Select a PDF to split</h3>
            <p>Drag and drop a PDF here, or choose a file.</p>
            <button type="button" class="btn btn-primary" id="choose-btn">Choose PDF</button>
            <p class="upload-hint">🔒 Processed locally in your browser</p>
          </div>
          <input type="file" id="file-input" accept="application/pdf,.pdf" class="sr-only" />
        </div>

        <div id="workspace" class="hidden">
          <div class="card-section">
            <div class="section-title">Selected PDF</div>
            <div style="display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;">
              <div>
                <div id="file-name" style="font-weight:600;font-size:0.9375rem;"></div>
                <div id="file-meta" style="font-size:0.8125rem;color:#6b7280;"></div>
              </div>
              <button type="button" class="btn btn-danger btn-sm" id="remove-file-btn">Remove</button>
            </div>
          </div>

          <div class="card-section">
            <div class="section-title">How to split</div>
            <div style="display:flex;flex-wrap:wrap;gap:0.5rem;margin-bottom:1rem;">
              <button type="button" class="btn btn-primary mode-btn" data-mode="all">All pages</button>
              <button type="button" class="btn btn-secondary mode-btn" data-mode="range">Page range</button>
              <button type="button" class="btn btn-secondary mode-btn" data-mode="custom">Custom pages</button>
            </div>

            <div id="all-options">
              <div class="checkbox-row">
                <input type="checkbox" id="split-each" />
                <label for="split-each">
                  Create one PDF per page
                  <span class="hint">Otherwise extracts all pages into a single new PDF.</span>
                </label>
              </div>
            </div>

            <div id="range-options" class="hidden">
              <div class="settings-grid" style="grid-template-columns:1fr 1fr;">
                <div class="setting-group">
                  <label for="range-from">From page</label>
                  <input type="number" id="range-from" min="1" value="1" style="width:100%;padding:0.5rem 0.75rem;border:1px solid #d1d5db;border-radius:0.5rem;" />
                </div>
                <div class="setting-group">
                  <label for="range-to">To page</label>
                  <input type="number" id="range-to" min="1" value="1" style="width:100%;padding:0.5rem 0.75rem;border:1px solid #d1d5db;border-radius:0.5rem;" />
                </div>
              </div>
            </div>

            <div id="custom-options" class="hidden">
              <div class="setting-group">
                <label for="custom-pages">Pages (e.g. 1, 3, 5-8)</label>
                <input type="text" id="custom-pages" style="width:100%;padding:0.5rem 0.75rem;border:1px solid #d1d5db;border-radius:0.5rem;" placeholder="1, 3, 5-7" />
              </div>
            </div>
          </div>

          <div class="generate-area">
            <button type="button" class="btn btn-primary btn-lg" id="split-btn" disabled>
              Split PDF
            </button>
          </div>

          <div class="card-section success-state hidden" id="success-state">
            <div class="success-icon">✓</div>
            <h3>Split complete</h3>
            <p id="success-info" class="success-info"></p>
            <div id="result-list" style="text-align:left;max-width:20rem;margin:0 auto 1.25rem;"></div>
            <div class="success-actions">
              <button type="button" class="btn btn-primary" id="download-all-btn">Download All</button>
              <button type="button" class="btn btn-secondary" id="create-another-btn">Split Another</button>
            </div>
          </div>
        </div>
      </div>

      <section class="privacy-section">
        <h2>Your Files Stay Private</h2>
        <div class="privacy-grid">
          <div class="privacy-item"><div class="icon">💻</div><h3>Local Processing</h3><p>Everything runs in your browser.</p></div>
          <div class="privacy-item"><div class="icon">🚫</div><h3>No Uploads</h3><p>Files never leave your device.</p></div>
          <div class="privacy-item"><div class="icon">🔓</div><h3>No Account</h3><p>No login required.</p></div>
        </div>
      </section>

      <section class="other-tools">
        <h2>Need another PDF tool?</h2>
        <div class="tools-grid">
          <a href="../image-to-pdf/" class="tool-card"><div class="icon">🖼️</div><h3>Image to PDF</h3></a>
          <a href="../merge-pdf/" class="tool-card"><div class="icon">📑</div><h3>Merge PDF</h3></a>
          <a href="../pdf-to-image/" class="tool-card"><div class="icon">📄</div><h3>PDF to Image</h3></a>
          <a href="../compress-pdf/" class="tool-card"><div class="icon">🗜️</div><h3>Compress PDF</h3></a>
        </div>
      </section>
    </div>
  </main>

  <footer class="site-footer">
    <p>© <span id="year"></span> CodingMation · Split PDF · 100% Offline</p>
  </footer>

  <div class="progress-overlay" id="progress-overlay">
    <div class="progress-box">
      <h3>Splitting PDF</h3>
      <div class="progress-bar-track"><div class="progress-bar-fill" id="progress-fill"></div></div>
      <p class="progress-text" id="progress-text">Preparing…</p>
    </div>
  </div>

  <script>document.getElementById('year').textContent = new Date().getFullYear();</script>
  <script type="module" src="../js/split.js"></script>
</body>
</html>