temp-pdf/index.html at main · gin/temp-pdf · 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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TempPDF | Ephemeral File Sharing</title>
    <link rel="stylesheet" href="/styles.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
    <!-- Cloudflare Turnstile -->
    <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
</head>

<body class="light-mode">
    <div class="background">
        <div class="blob blob-1"></div>
        <div class="blob blob-2"></div>
    </div>

    <header>
        <h1>TempPDF</h1>
        <button id="themeToggle" aria-label="Toggle Dark Mode">
            <svg id="sunIcon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                class="hidden">
                <path
                    d="M12 2v2m0 16v2M4.93 4.93l1.41 1.41m11.32 11.32l1.41 1.41M2 12h2m16 0h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"
                    stroke="currentColor" stroke-width="2" stroke-linecap="round" />
                <circle cx="12" cy="12" r="4" stroke="currentColor" stroke-width="2" />
            </svg>
            <svg id="moonIcon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                fill="none">
                <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" stroke="currentColor" stroke-width="2"
                    stroke-linecap="round" stroke-linejoin="round" />
            </svg>
        </button>
    </header>

    <main class="glass-container">
        <!-- View Container dynamically switched via JS -->

        <!-- ======================= -->
        <!-- UPLOAD VIEW (Default)   -->
        <!-- ======================= -->
        <div id="uploadView" class="view active">
            <h2>Share a temporary file</h2>
            <p class="subtitle">Securely transfer a PDF or Text file up to 1MB.</p>

            <form id="uploadForm">
                <div class="dropzone" id="dropzone">
                    <input type="file" id="fileInput" accept="application/pdf, text/plain">
                    <div class="dropzone-content">
                        <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                            stroke-width="2">
                            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12" />
                        </svg>
                        <p id="fileNameDisplay">Click or drag a file to upload</p>
                        <span class="file-limits">PDF, TXT (Max 1MB)</span>
                    </div>
                </div>

                <div class="form-group row">
                    <div class="input-group full-width">
                        <label for="customUrl">Custom URL</label>
                        <div class="url-input-wrapper">
                            <span class="prefix">temp-pdf.pages.dev/</span>
                            <input type="text" id="customUrl" placeholder="secret-doc" required
                                pattern="[A-Za-z0-9\-_]+" title="Letters, numbers, dashes, and underscores only.">
                        </div>
                    </div>
                </div>

                <div class="form-group row">
                    <div class="input-group">
                        <label for="expiryGroup">Auto-delete after</label>
                        <div class="ttl-options" id="expiryGroup">
                            <input type="radio" name="ttl" id="ttl-10m" value="600">
                            <label for="ttl-10m" class="radio-btn">10m</label>

                            <input type="radio" name="ttl" id="ttl-30m" value="1800">
                            <label for="ttl-30m" class="radio-btn">30m</label>

                            <input type="radio" name="ttl" id="ttl-1h" value="3600" checked>
                            <label for="ttl-1h" class="radio-btn">1h</label>

                            <input type="radio" name="ttl" id="ttl-24h" value="86400">
                            <label for="ttl-24h" class="radio-btn">24h</label>
                        </div>
                    </div>
                </div>

                <!-- Turnstile Widget (dummy sitekey for layout purposes initially) -->
                <div class="cf-turnstile" data-sitekey="0x4AAAAAACng2udGfITqfxm-" data-callback="onTurnstileSuccess">
                </div>

                <div id="uploadError" class="error-message"></div>

                <button type="submit" id="uploadBtn" class="primary-btn" disabled>Upload File</button>
            </form>

            <div id="uploadSuccess" class="success-screen hidden">
                <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14M22 4L12 14.01l-3-3" />
                </svg>
                <h3>File Uploaded</h3>
                <p>Navigate to</p>
                <div class="copy-box" id="resultUrl">temp-pdf.pages.dev/secret</div>
                <p>Your Access PIN is:</p>
                <div class="pin-display" id="resultPin">42</div>
                <p class="warning-text">Save this PIN! You will need it to open the file.</p>
                <button id="resetBtn" class="secondary-btn">You can safely close this window if you remember
                    the PIN.</button>
            </div>
        </div>

        <!-- ======================= -->
        <!-- ACCESS VIEW (Hidden)    -->
        <!-- ======================= -->
        <div id="accessView" class="view hidden">
            <h2>Access File</h2>
            <p class="subtitle" id="accessSubtitle">Enter the 2-digit PIN for /<span id="accessUrlDisplay"></span></p>

            <form id="accessForm">
                <div class="form-group pin-group">
                    <input type="text" id="pinInput" placeholder="PIN" maxlength="2" pattern="[0-9]{2}"
                        inputmode="numeric" required autofocus autocomplete="off">
                </div>

                <div id="accessError" class="error-message"></div>

                <div class="button-group">
                    <button type="submit" id="downloadBtn" class="primary-btn">Download / View</button>
                    <button type="button" id="nukeBtn" class="danger-btn">Delete Now</button>
                </div>
            </form>
        </div>

    </main>
    <script src="/app.js"></script>
</body>

</html>