added html page

abdulhakkeempa · Nov 12, 2024 · 0c56ad9 · 0c56ad9
commit 0c56ad9
Showing 1 changed file with 168 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,168 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Poster Generator</title>
+    <link href="https://fonts.cdnfonts.com/css/amazon-ember" rel="stylesheet">
+    <!-- Bootstrap CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <style>
+        body {
+            font-family: 'Amazon Ember', sans-serif;
+            font-weight: 700;
+            background-color: #f5f5f5;
+        }
+
+        .container {
+            max-width: 600px;
+            margin-top: 50px;
+            text-align: center;
+        }
+
+        h1 {
+            color: #ff9900; /* AWS orange color */
+        }
+
+        #posterCanvas {
+            border: 3px solid #232f3e; /* AWS dark color */
+            display: none; /* Hide canvas initially */
+            width: 100%;
+            max-width: 600px;
+            height: auto;
+            margin-top: 1rem;
+        }
+
+        #imageUpload {
+            display: block;
+            margin: 1rem auto;
+        }
+
+        .btn-custom {
+            background-color: #ff9900;
+            color: white;
+            border: none;
+        }
+
+        .btn-custom:hover {
+            background-color: #e68a00;
+        }
+
+        #downloadBtn {
+            display: none; /* Hide download button initially */
+            margin-top: 1rem;
+        }
+
+        /* Footer styling */
+        footer {
+            margin-top: 3rem;
+            padding: 1rem;
+            text-align: center;
+            font-size: 0.9rem;
+            color: #777;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>Poster Generator</h1>
+        <input type="file" id="imageUpload" accept="image/*" class="form-control" onchange="validateImage()">
+        <canvas id="posterCanvas" width="1080" height="1080"></canvas>
+        <button class="btn btn-custom mt-3" onclick="generatePoster()">Generate Poster</button>
+        <a id="downloadBtn" class="btn btn-custom mt-3" download="generated_poster.png">Download Poster</a>
+    </div>
+
+    <!-- Footer -->
+    <footer>
+        <p>We don't store your data. All processing is done on the client side.</p>
+    </footer>
+
+    <!-- JavaScript for poster generation, validation, and download -->
+    <script>
+        function validateImage() {
+            const imageInput = document.getElementById('imageUpload');
+            const file = imageInput.files[0];
+
+            if (file && file.size > 2 * 1024 * 1024) { // Check if the file is greater than 2MB
+                alert("Please upload an image smaller than 2MB.");
+                imageInput.value = ""; // Clear the input
+            }
+        }
+
+        function generatePoster() {
+            const canvas = document.getElementById('posterCanvas');
+            const ctx = canvas.getContext('2d');
+            const imageInput = document.getElementById('imageUpload');
+            const image = new Image();
+            const background = new Image();
+
+            // Path to your custom background image
+            background.src = 'assets/bg/aws-keynote-01.png'; 
+
+            background.onload = function() {
+                // Draw the background image
+                ctx.drawImage(background, 0, 0, canvas.width, canvas.height);
+
+                // Load the participant's image
+                image.onload = function() {
+                    const size = 230; // Desired size for the cropped image
+                    const x = 418;  // X coordinate for the image
+                    const y = 462;  // Y coordinate for the image
+
+                    let srcX = 0, srcY = 0, srcWidth = image.width, srcHeight = image.height;
+
+                    if (image.width > image.height) {
+                        srcX = (image.width - image.height) / 2;
+                        srcWidth = image.height;
+                    } else {
+                        srcY = (image.height - image.width) / 2;
+                        srcHeight = image.width;
+                    }
+
+                    // Draw a circular clipping path
+                    ctx.save();
+                    ctx.beginPath();
+                    ctx.arc(x + size / 2, y + size / 2, size / 2, 0, Math.PI * 2, true);
+                    ctx.closePath();
+                    ctx.clip();
+
+                    // Draw the resized and cropped image within the circular path
+                    ctx.drawImage(image, srcX, srcY, srcWidth, srcHeight, x, y, size, size);
+
+                    ctx.restore();
+
+                    // Draw the circular border with gradient
+                    const gradient = ctx.createLinearGradient(x, y, x + size, y + size);
+                    gradient.addColorStop(0, '#ff5757');
+                    gradient.addColorStop(1, '#8c52ff');
+                    ctx.beginPath();
+                    ctx.arc(x + size / 2, y + size / 2, size / 2 + 2, 0, Math.PI * 2, true); // +2 for border width
+                    ctx.closePath();
+                    ctx.lineWidth = 10;
+                    ctx.strokeStyle = gradient;
+                    ctx.stroke();
+
+                    // Display the canvas and download button after drawing
+                    canvas.style.display = "block";
+                    const downloadBtn = document.getElementById('downloadBtn');
+                    downloadBtn.style.display = "inline-block";
+
+                    // Convert canvas to image and set download link
+                    downloadBtn.href = canvas.toDataURL("image/png");
+                };
+
+                // Load the image from the file input
+                const file = imageInput.files[0];
+                const reader = new FileReader();
+                reader.onload = function(e) {
+                    image.src = e.target.result;
+                };
+                reader.readAsDataURL(file);
+            };
+        }
+    </script>
+
+    <!-- Bootstrap JS -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+</body>
+</html>