diff --git a/README.md b/README.md index bccc8a7..51bc8c9 100644 --- a/README.md +++ b/README.md @@ -7,7 +7,8 @@ Christmas Greetings: Linux Terminal Style Greeting Wishes with Name. ![Christmas Greetings](https://raw.githubusercontent.com/mskian/christmas-wishes/main/images/christmas-greeting-1733505285020.png) - **Create Christmas Greeting Wish image with image : ** -- **Christmas Wishing Songs: ** +- **Christmas Wishing Songs: ** +- **Christmas Greeting image with Name: ** ## Credits diff --git a/css/greeting.css b/css/greeting.css new file mode 100644 index 0000000..b690cae --- /dev/null +++ b/css/greeting.css @@ -0,0 +1,40 @@ +html, body { + min-height: 100vh; + font-family: "Catamaran", sans-serif; +} +body { + background: #A02334; + color: #f0dd71; + font-family: "Catamaran", sans-serif; + font-weight: 600; + padding-bottom: 20px; + } + + .terminal { + background-color: #1e272e; + padding: 20px; + font-family: "Catamaran", sans-serif; + border-radius: 8px; + box-shadow: 0 0 10px #bdf399; + } + + input:focus, button:focus { + outline: none; + border-color: #ff3860; + box-shadow: 0 0 0 0.125em rgba(255, 56, 96, 0.25); + } + .input { + font-family: "Catamaran", sans-serif; + } + .button { + font-family: "Catamaran", sans-serif; + font-weight: bold; + } + #generatedImage { + font-family: "Catamaran", sans-serif;; + border: 2px solid #ff3860; + border-radius: 8px; + } + p { + font-family: "Catamaran", sans-serif; + } \ No newline at end of file diff --git a/greeting.html b/greeting.html new file mode 100644 index 0000000..bb1cccf --- /dev/null +++ b/greeting.html @@ -0,0 +1,85 @@ + + + + + + + + + + + Christmas Greeting image with Name + + + + + + + + + + + + + +
+
+
+
+
+
+

🎄 Christmas Greeting Image 🎅

+
+
+

đŸŸĸ Please Rnter your name to generate a Christmas greeting ...

+
+
+
+
+ +
+ +
+
+
+ +
+
+
+ + +
+
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/images/christmas-wishes.png b/images/christmas-wishes.png new file mode 100644 index 0000000..51c881a Binary files /dev/null and b/images/christmas-wishes.png differ diff --git a/js/greeting.js b/js/greeting.js new file mode 100644 index 0000000..692dd64 --- /dev/null +++ b/js/greeting.js @@ -0,0 +1,103 @@ +document.addEventListener('DOMContentLoaded', () => { + const nameForm = document.getElementById('nameForm'); + const nameInput = document.getElementById('name'); + const progressContainer = document.getElementById('progressContainer'); + const progressBar = progressContainer.querySelector('progress'); + const output = document.getElementById('output'); + const greetingImage = document.getElementById('greetingImage'); + const generatedImage = document.getElementById('generatedImage'); + const downloadImage = document.getElementById('downloadImage'); + const backgroundImagePath = './images/christmas-wishes.png'; + + const sanitizeInput = (input) => { + const tempDiv = document.createElement('div'); + tempDiv.textContent = input.trim(); + return tempDiv.innerHTML; + }; + + const validateInput = (name) => { + if (!name || name.length < 2 || name.length > 36) { + throw new Error('Name must be between 2 and 36 characters.'); + } + }; + + const generateGreetingImage = (name) => { + return new Promise((resolve, reject) => { + const img = new Image(); + img.src = backgroundImagePath; + img.onload = () => { + const canvas = document.createElement('canvas'); + canvas.width = img.width; + canvas.height = img.height; + + const ctx = canvas.getContext('2d'); + ctx.drawImage(img, 0, 0, canvas.width, canvas.height); + + // ctx.fillStyle = '#d35585'; // Dark pink + ctx.font = 'bold 36px "Catamaran", sans-serif'; + ctx.textAlign = 'center'; + // ctx.fillText('🎄 Merry Christmas 🎄', canvas.width / 2, 90); + + ctx.fillStyle = '#130f40'; // Brown + ctx.font = 'bold 30px "Catamaran", sans-serif'; + ctx.fillText(`${name}`, canvas.width / 2, canvas.height - 60); + + resolve(canvas.toDataURL('image/png')); + }; + img.onerror = () => reject(new Error('Failed to load the background image.')); + }); + }; + + const terminalProcess = async (steps) => { + for (const step of steps) { + output.innerHTML += `

${step}

`; + await new Promise((resolve) => setTimeout(resolve, 1000)); + } + }; + + const showProgress = async () => { + progressContainer.classList.remove('is-hidden'); + for (let i = 0; i <= 100; i++) { + await new Promise((resolve) => setTimeout(resolve, 30)); + progressBar.value = i; + } + progressContainer.classList.add('is-hidden'); + }; + + nameForm.addEventListener('submit', async (e) => { + e.preventDefault(); + + const name = sanitizeInput(nameInput.value); + + try { + output.innerHTML = ''; + greetingImage.classList.add('is-hidden'); + + validateInput(name); + + await terminalProcess([ + 'ℹī¸ Validating input ...', + '✅ Input validation successful', + 'đŸĨ¤ Loading resources ...', + 'ℹī¸ Preparing your greeting ...', + ]); + + nameInput.value = ''; + + await showProgress(); + + const imageSrc = await generateGreetingImage(name); + + generatedImage.src = imageSrc; + downloadImage.href = imageSrc; + const timestamp = new Date().getTime(); + downloadImage.download = `christmas-greeting-${timestamp}.png`; + greetingImage.classList.remove('is-hidden'); + + output.innerHTML += `

🎉 Greeting generated successfully

`; + } catch (err) { + output.innerHTML += `

🔴 ${err.message}

`; + } + }); + }); + \ No newline at end of file