Logo Review Tool

\n \n \n

Upload Your Logo

\n \n

Drag and drop your logo here

\n \n

Supports: PNG, JPG, JPEG, SVG, ICO

\n \n \n

\n \n

Size Variations

Large (200px)

\n \n

Medium (100px)

\n \n

Small (50px)

\n \n

Tiny (24px)

\n \n

\n \n \n

T-Shirt Mockups

\n \n

White T-Shirt

\n \n

Center - Large

\n \n

Left Chest - Icon

\n \n

\n \n \n

Black T-Shirt

\n \n

Center - Large

\n \n

Left Chest - Icon

\n \n

\n \n \n

Black & White Variations

Large B&W

\n \n

Medium B&W

\n \n

Small B&W

\n \n

Tiny B&W

\n \n

\n \n \n

Favicon Preview

\n \n yourwebsite.com\n

Your website content would appear here

Notice your logo as the favicon in the address bar above

\n \n \n\n",[],[176],{"_105":184,"_96":185,"_157":186,"_159":-5,"_160":142,"_161":102,"_163":22,"_107":187,"_101":188,"_165":189,"_167":190,"_169":22,"_170":-5,"_171":191,"_99":192},"4e62938c-4ade-11f0-b3da-76b3cceeab13","script.js","417e227c-4add-11f0-819c-76b3cceeab13",["D",1750097910664],3,"script","class LogoReviewTool {\n constructor() {\n this.dropZone = document.getElementById('dropZone');\n this.fileInput = document.getElementById('fileInput');\n this.uploadBtn = document.getElementById('uploadBtn');\n this.previewSection = document.getElementById('previewSection');\n \n this.initializeEventListeners();\n }\n \n initializeEventListeners() {\n // Upload button click\n this.uploadBtn.addEventListener('click', (e) => {\n e.stopPropagation(); // Prevent event bubbling\n this.fileInput.click();\n });\n \n // File input change\n this.fileInput.addEventListener('change', (e) => {\n console.log('File input changed:', e.target.files);\n if (e.target.files.length > 0) {\n this.handleFile(e.target.files[0]);\n }\n });\n \n // Drag and drop events\n this.dropZone.addEventListener('dragover', (e) => {\n e.preventDefault();\n this.dropZone.classList.add('drag-over');\n });\n \n this.dropZone.addEventListener('dragleave', (e) => {\n e.preventDefault();\n this.dropZone.classList.remove('drag-over');\n });\n \n this.dropZone.addEventListener('drop', (e) => {\n e.preventDefault();\n this.dropZone.classList.remove('drag-over');\n \n const files = e.dataTransfer.files;\n if (files.length > 0) {\n this.handleFile(files[0]);\n }\n });\n \n // Click to upload - but only if not clicking on the button\n this.dropZone.addEventListener('click', (e) => {\n // Don't trigger if clicking on the upload button\n if (e.target === this.uploadBtn || this.uploadBtn.contains(e.target)) {\n return;\n }\n this.fileInput.click();\n });\n }\n \n handleFile(file) {\n console.log('Handling file:', file);\n console.log('File type:', file.type);\n console.log('File size:', file.size);\n \n // Validate file type\n const validTypes = ['image/png', 'image/jpeg', 'image/jpg', 'image/svg+xml', 'image/x-icon', 'image/vnd.microsoft.icon'];\n \n if (!validTypes.includes(file.type)) {\n console.log('Invalid file type:', file.type);\n alert('Please upload a valid image file (PNG, JPG, JPEG, SVG, ICO)');\n return;\n }\n \n // Check file size (limit to 10MB)\n if (file.size > 10 * 1024 * 1024) {\n console.log('File too large:', file.size);\n alert('File size must be less than 10MB');\n return;\n }\n \n console.log('File validation passed, reading file...');\n \n // Read and display the file\n const reader = new FileReader();\n reader.onload = (e) => {\n console.log('File loaded successfully');\n this.displayLogo(e.target.result);\n };\n reader.onerror = (e) => {\n console.error('Error reading file:', e);\n alert('Error reading file. Please try again.');\n };\n reader.readAsDataURL(file);\n }\n \n displayLogo(imageSrc) {\n console.log('Displaying logo with src length:', imageSrc.length);\n \n // Show the preview section\n this.previewSection.classList.remove('hidden');\n \n // Scroll to preview section\n this.previewSection.scrollIntoView({ behavior: 'smooth' });\n \n // Update all logo previews\n this.updateLogoPreviews(imageSrc);\n }\n \n updateLogoPreviews(imageSrc) {\n // Size variations\n const logoElements = [\n 'logoLarge',\n 'logoMedium', \n 'logoSmall',\n 'logoTiny'\n ];\n \n logoElements.forEach(id => {\n const element = document.getElementById(id);\n if (element) {\n element.src = imageSrc;\n element.alt = 'Logo preview';\n }\n });\n \n // T-shirt mockups\n const tshirtElements = [\n 'tshirtWhiteCenter',\n 'tshirtWhiteIcon',\n 'tshirtBlackCenter',\n 'tshirtBlackIcon'\n ];\n \n tshirtElements.forEach(id => {\n const element = document.getElementById(id);\n if (element) {\n element.src = imageSrc;\n element.alt = 'Logo on t-shirt';\n }\n });\n \n // Black & white variations\n const bwElements = [\n 'logoBWLarge',\n 'logoBWMedium',\n 'logoBWSmall',\n 'logoBWTiny'\n ];\n \n bwElements.forEach(id => {\n const element = document.getElementById(id);\n if (element) {\n element.src = imageSrc;\n element.alt = 'Logo black and white';\n }\n });\n \n // Favicon preview\n const faviconElement = document.getElementById('faviconPreview');\n if (faviconElement) {\n faviconElement.src = imageSrc;\n faviconElement.alt = 'Favicon';\n }\n }\n}\n\n// Initialize the tool when the DOM is loaded\ndocument.addEventListener('DOMContentLoaded', () => {\n new LogoReviewTool();\n});\n\n// Prevent default drag behaviors on the document\ndocument.addEventListener('dragover', (e) => {\n e.preventDefault();\n});\n\ndocument.addEventListener('drop', (e) => {\n e.preventDefault();\n});",[],[185],{"_105":194,"_96":100,"_157":117,"_159":-5,"_160":142,"_161":195,"_163":22,"_107":196,"_101":188,"_165":197,"_167":198,"_169":22,"_170":199,"_171":200,"_99":201},"5a2f6678-4add-11f0-b0df-76b3cceeab13",6,["D",1750097500968],"http","import { Hono } from \"https://esm.sh/hono@3.11.7\";\nimport { readFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n throw err;\n});\n\n// Serve the main HTML file\napp.get(\"/\", async (c) => {\n const html = await readFile(\"/index.html\", import.meta.url);\n return c.html(html);\n});\n\n// Serve the JavaScript file\napp.get(\"/script.js\", async (c) => {\n const js = await readFile(\"/script.js\", import.meta.url);\n return new Response(js, {\n headers: {\n \"Content-Type\": \"application/javascript\",\n },\n });\n});\n\n// Health check endpoint\napp.get(\"/health\", (c) => {\n return c.json({ status: \"ok\", message: \"Logo Review Tool is running\" });\n});\n\n// This is the entry point for HTTP vals\nexport default app.fetch;","logoreview",[],[100],"files",[154,174,183,193],"counts",{"_206":32,"_207":178,"_208":32,"_209":210},"pulls","branches","forks","envVars",{"_211":32,"_212":32},"count","emptyCount","contents",[],{"_105":194,"_96":100,"_157":117,"_159":-5,"_160":142,"_161":195,"_163":22,"_107":216,"_101":188,"_165":197,"_167":198,"_169":22,"_170":199,"_99":217},["D",1750097500968],[100],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_94":95,"_96":97,"_98":44,"_101":102,"_99":100,"_103":226,"_152":231,"_202":244,"_166":245,"_213":247,"_248":-5,"_249":-5,"_250":-5,"_251":-5,"_252":253},{"_105":106,"_96":97,"_107":227,"_109":-5,"_110":22,"_111":112,"_113":-5,"_114":-5,"_14":115,"_116":117,"_118":119,"_120":119,"_121":-5,"_122":32,"_16":123,"_124":125,"_126":125,"_127":128,"_129":128,"_130":128,"_131":125,"_132":125,"_23":228,"_136":229,"_139":230,"_151":22},["D",1750096989502],{"_94":95,"_134":135},{"_94":95,"_138":135,"_14":115},{"_101":141,"_96":44,"_105":142,"_143":106,"_144":-5,"_145":-5,"_146":-5,"_147":-5,"_148":-5,"_149":97,"_150":95},[232,235,238,241],{"_105":155,"_96":156,"_157":158,"_159":-5,"_160":142,"_161":162,"_163":119,"_107":164,"_101":32,"_165":166,"_167":168,"_169":22,"_170":-5,"_171":233,"_99":234},[],[156],{"_105":175,"_96":176,"_157":177,"_159":-5,"_160":142,"_161":178,"_163":22,"_107":179,"_101":32,"_165":166,"_167":180,"_169":22,"_170":-5,"_171":236,"_99":237},[],[176],{"_105":184,"_96":185,"_157":186,"_159":-5,"_160":142,"_161":102,"_163":22,"_107":187,"_101":188,"_165":189,"_167":190,"_169":22,"_170":-5,"_171":239,"_99":240},[],[185],{"_105":194,"_96":100,"_157":117,"_159":-5,"_160":142,"_161":195,"_163":22,"_107":196,"_101":188,"_165":197,"_167":198,"_169":22,"_170":199,"_171":242,"_99":243},[],[100],[232,235,238,241],{"_105":194,"_96":100,"_157":117,"_159":-5,"_160":142,"_161":195,"_163":22,"_107":216,"_101":188,"_165":197,"_167":198,"_169":22,"_170":199,"_99":246},[100],[],"upstream","pull","ahead","behind","templates",[],"actionData","errors"]

anand_g

LogoReview