Val Town Code SearchReturn to Val Town

4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Image to PDF Converter</title>
7    <script src="https://cdn.twind.style" crossorigin></script>
8    <script src="https://esm.town/v/std/catch"></script>
175            <div class="text-center mb-8">
176                <h1 class="text-4xl font-bold text-gradient mb-3 glow floating">
177                    📄 Image to PDF Converter
178                </h1>
179                <p class="text-gray-300 text-lg font-light">
180                    Transform your images into professional PDF documents
181                </p>
182            </div>
188                        <div class="text-6xl floating glow">🖼️</div>
189                        <div>
190                            <label for="imageInput" class="cursor-pointer">
191                                <span class="btn-3d bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white px-8 py-4 rounded-xl font-semibold text-lg inline-block">
192                                    ✨ Choose Images
193                                </span>
194                                <input type="file" id="imageInput" multiple accept="image/*" class="hidden">
195                            </label>
196                        </div>
197                        <p class="text-gray-300 font-medium">
198                            Select one or more images • JPEG, PNG, GIF, WebP
199                        </p>
200                        <p class="text-gray-400 text-sm">
207                <div id="fileList" class="hidden">
208                    <h3 class="text-xl font-semibold text-white mb-4 flex items-center">
209                        <span class="mr-2">📋</span> Selected Images:
210                    </h3>
211                    <div id="fileItems" class="space-y-3"></div>
231
232    <script>
233        const imageInput = document.getElementById('imageInput');
234        const fileList = document.getElementById('fileList');
235        const fileItems = document.getElementById('fileItems');
241        let selectedFiles = [];
242
243        imageInput.addEventListener('change', function(e) {
244            selectedFiles = Array.from(e.target.files);
245            
249            
250            for (const file of selectedFiles) {
251                if (!file.type.startsWith('image/')) {
252                    alert(`Invalid file type: ${file.name}`);
253                    continue;
302            try {
303                convertBtn.disabled = true;
304                status.textContent = 'Processing images...';
305                status.classList.remove('hidden');
306                progressBar.classList.remove('hidden');
310                const formData = new FormData();
311                selectedFiles.forEach(file => {
312                    formData.append('images', file);
313                });
314
327                }
328
329                if (!result.images || result.images.length === 0) {
330                    throw new Error('No images returned from server');
331                }
332
340                let isFirstPage = true;
341
342                for (let i = 0; i < result.images.length; i++) {
343                    const imageData = result.images[i];
344                    
345                    if (!isFirstPage) {
348                    isFirstPage = false;
349
350                    // Create image element to get dimensions
351                    const img = new Image();
352                    await new Promise((resolve, reject) => {
353                        img.onload = resolve;
354                        img.onerror = reject;
355                        img.src = `data:${imageData.type};base64,${imageData.data}`;
356                    });
357
374                    imgHeight *= ratio;
375
376                    // Center the image
377                    const x = (pageWidth - imgWidth) / 2;
378                    const y = (pageHeight - imgHeight) / 2;
379
380                    pdf.addImage(img.src, 'JPEG', x, y, imgWidth, imgHeight);
381                    
382                    progress.style.width = `${60 + (i + 1) / result.images.length * 30}%`;
383                }
384
389                // Download the PDF
390                const timestamp = new Date().toISOString().slice(0, 19).replace(/:/g, '-');
391                pdf.save(`images-to-pdf-${timestamp}.pdf`);
392
393                // Reset UI
442            const files = dt.files;
443            
444            // Filter and validate image files
445            const validFiles = [];
446            const maxFileSize = 10 * 1024 * 1024; // 10MB
447            
448            for (const file of Array.from(files)) {
449                if (!file.type.startsWith('image/')) {
450                    continue; // Skip non-image files silently
451                }
452                if (file.size > maxFileSize) {

15});
16
17// Handle image to PDF conversion
18app.post("/convert", async (c) => {
19  try {
20    const body = await c.req.formData();
21    const files = body.getAll("images") as File[];
22    
23    if (!files || files.length === 0) {
24      return c.json({ error: "No images provided" }, 400);
25    }
26
27    // Validate file types and sizes
28    const validTypes = ["image/jpeg", "image/jpg", "image/png", "image/gif", "image/webp"];
29    const maxFileSize = 10 * 1024 * 1024; // 10MB per file
30    
39
40    // Convert files to base64 for client-side processing
41    const imageData = [];
42    for (const file of files) {
43      try {
57        const base64 = btoa(binaryString);
58        
59        imageData.push({
60          data: base64,
61          type: file.type,
69    }
70
71    return c.json({ images: imageData });
72  } catch (error) {
73    console.error("Conversion error:", error);
74    return c.json({ 
75      error: "Failed to process images", 
76      details: error.message 
77    }, 500);

363                </clipPath>
364              </defs>
365              <image
366                href={imgUrl}
367                x={CENTER.x - innerRadius}

26  created_at: string;
27  profile_banner_url: string;
28  profile_image_url_https: string;
29  can_dm: boolean;
30}
137      name: `${user.name} (@${user.screen_name})`,
138      url: `https://x.com/${user.screen_name}`,
139      icon_url: user.profile_image_url_https,
140    },
141    fields: [
150  };
151
152  // Add image if present
153  const mediaEntities = tweet.entities.media;
154  if (mediaEntities && mediaEntities.length > 0) {
155    embed.image = {
156      url: mediaEntities[0].media_url_https,
157    };

8    <script src="https://esm.town/v/std/catch"></script>
9    <link rel="stylesheet" href="/frontend/style.css">
10    <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🍅</text></svg>">
11</head>
12<body class="bg-gray-50 min-h-screen">

12    <link
13      rel="icon"
14      type="image/x-icon"
15      sizes="any"
16      href="https://cdn.glitch.global/de7a389a-399d-4d75-a57e-15b49d8cbe43/favicon.ico?v=1744749668124"
30    <meta property="og:url" content="{{seo.url}}" />
31    <meta property="og:description" content="{{seo.description}}" />
32    <meta property="og:image" content="{{seo.image}}" />
33    <meta name="twitter:card" content="summary" />
34

11
12  <meta charset="utf-8" />
13  <link rel="icon" type="image/x-icon" sizes="any" href="https://cdn.glitch.global/de7a389a-399d-4d75-a57e-15b49d8cbe43/favicon.ico?v=1744749668124">
14  <meta name="viewport" content="width=device-width, initial-scale=1" />
15

4  "description": "An open letter",
5  "url": "glitch-default",
6  "image": "https://cdn.glitch.com/605e2a51-d45f-4d87-a285-9410ad350515%2Fhello-node-social.png?v=1618161394375",
7  "db": "SQLite"
8}

14  --color-accent: #8a3434;
15  --wrapper-height: 87vh;
16  --image-max-width: 300px;
17  --image-margin: 3rem;
18  --font-family: Tiempos, Iowan Old Style, Georgia, Times New Roman, serif;
19  --font-family-header:

60}
61
62function validateImage(url) {
63  return validateURL(url);
64}
183        
184        <h1>
185            <img width=50 src="${validateImage(pfp)}">
186            ${escapeHTML(title)}
187        </h1>