From f66ff83d0d037f032a97d51d07d4fdfa44e8bae4 Mon Sep 17 00:00:00 2001 From: Riya P Mathew <60656677+RiyaMathew-11@users.noreply.github.com> Date: Fri, 11 Oct 2024 15:54:23 +0530 Subject: [PATCH] feat: revamp logo generator (#3) * feat: logo generation * feat: logo generator styles and logic * chore: add styles * chore: add download and toggle logic --- index.html | 125 ++++++++++++++++++++++++++++++++++++++++++++++ scripts/main.js | 110 +++++++++++++++++++++++++++++++++++++++++ styles/main.css | 129 ++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 364 insertions(+) create mode 100644 index.html create mode 100644 scripts/main.js create mode 100644 styles/main.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..025e7c8 --- /dev/null +++ b/index.html @@ -0,0 +1,125 @@ + + + + + + + + + + FOSS Club | Campus Logo Generator + + + + + + +
+
+ +
+

FOSS + Club + Logo Generator

+

+ A logo generator for FOSS Clubs. +

+
+
+ +
+
+ +
+
+ + + +
+ SVG + PNG +
+
+
+ +
+
+
PREVIEW
+ +
+ +
+ + + +
+
+ +
+ + +
+ +
+
+
+
+
+ + + + + + + +
+
+ Created with by FOSS United. Inspired from TinkerHub Campus Logo Generator +
+
+
+
+ + + + + + \ No newline at end of file diff --git a/scripts/main.js b/scripts/main.js new file mode 100644 index 0000000..b928e98 --- /dev/null +++ b/scripts/main.js @@ -0,0 +1,110 @@ +var svg = document.querySelector('svg'); +var canvas = document.querySelector('canvas'); +var image = document.querySelector('img'); +var downloadBtn = document.getElementById('myBtn'); +var color = "black"; +var format = "SVG"; +// Add click event to theme toggle button +document.getElementById('toggleColor').addEventListener('click', function (evt) { + var cardTemplate = document.querySelector(".card") + var foss = document.getElementById('FossClub') + var logoName = document.getElementById('logoName') + var topLeft = document.getElementById('topLeft') + var bottomRight = document.getElementById('bottomRight') + // DARK MODE + if (evt.target.innerHTML === "Switch to Dark") { + svg.style.fill = "black"; + cardTemplate.style.backgroundColor = "#191919"; + cardTemplate.firstElementChild.style.color = "white"; + foss.style.fill='white' + logoName.style.fill = 'white' + topLeft.style.fill = 'white' + bottomRight.style.fill = 'white' + topRight.style.fill = '#C8C7C7' + bottomLeft.style.fill = '#C8C7C7' + evt.target.innerHTML = "Switch to Light"; + document.getElementById("toggleColor").classList.remove('btn-dark'); + document.getElementById("toggleColor").classList.add('btn-light'); + document.getElementById('previewText').style.color = "white"; + } + // LIGHT MODE + else { + svg.style.fill = "white"; + cardTemplate.style.backgroundColor = "white"; + cardTemplate.firstElementChild.style.color = "#6c757d"; + foss.style.fill = "black" + topLeft.style.fill = 'black' + logoName.style.fill = 'black' + bottomRight.style.fill = 'black' + topRight.style.fill = '#22B34F' + bottomLeft.style.fill = '#22B34F' + evt.target.innerHTML = "Switch to Dark"; + document.getElementById("toggleColor").classList.remove('btn-light'); + document.getElementById("toggleColor").classList.add('btn-dark'); + document.getElementById('previewText').style.color = "black"; + } + color = svg.style.fill; +}) +// Show or hide select format dropdown +function toggleSelect() +{ + var divs = document.querySelectorAll(".showable"); + for(var div of divs) + if(div.classList.contains("show")) + div.classList.remove("show"); + else div.classList.add("show"); +} +// Set the fromat of image to be downloaded +function setFormat(newFormat) +{ + format = newFormat; + downloadBtn.value = `Download ${format}`; +} +// Function to download image +function triggerDownload(imgURI) { + var evt = new MouseEvent('click', { + view: window, + bubbles: false, + cancelable: true + }); + var a = document.createElement('a'); + var str = document.getElementById('collegeName').value; + a.setAttribute('download', "FOSS Club".concat(str).concat(`.${format.toLowerCase()}`)); + a.setAttribute('href', imgURI); + a.setAttribute('target', '_blank'); + a.dispatchEvent(evt); +} +// Add submit event to download form +document.getElementById("downloadForm").addEventListener('submit', function(event) +{ + event.preventDefault(); + changeCollegeName(); + var openTag = `'; + var blob = new Blob([`${openTag}${svg.innerHTML}${closeTag}`], {type: "image/svg+xml"}); + var blobURL = window.URL.createObjectURL(blob); + if(format === "SVG") + return triggerDownload(blobURL); + + image.addEventListener("load", function gotImage() { + window.URL.revokeObjectURL(blobURL); + image.removeEventListener("load",gotImage); + var ctx = canvas.getContext("2d"); + ctx.drawImage(image,0,0); + var imageURL = canvas.toDataURL(`image/${format.toLowerCase()}`); + ctx.clearRect(0,0, canvas.width, canvas.height); + triggerDownload(imageURL); + }); + image.setAttribute("src", blobURL); +}); +// Dynamic update of college name on keychange +var keyChange = document.getElementById('collegeName'); +keyChange.onkeyup = keyChange.onkeypress = function () { + changeCollegeName(); +} +function changeCollegeName() { + var collegeName = document.getElementById('collegeName').value; + document.getElementById('logoName').textContent = collegeName; +} + + diff --git a/styles/main.css b/styles/main.css new file mode 100644 index 0000000..763bf3a --- /dev/null +++ b/styles/main.css @@ -0,0 +1,129 @@ +body { + font-family: 'Inter', sans-serif !important; +} + +.lg-header { + display: flex; + flex-direction: column; + width: 100%; + justify-content: center; + align-items: center; + gap: 2rem; + margin-bottom: 6rem; +} + +.lg-input { + font-size: 1.5rem; + border-radius: 0.45rem !important; + width: 30rem !important; +} + +.bg-light-white { + background-color: #f3f3f3; +} + +.social-icon { + color: #1a1a1a; + text-decoration: none !important; +} + +.text-blue { + color: #1a1a1a; +} + +.btn{ + width: fit-content !important; +} + +.btn-primary { + color: white !important; + background-color: #08B74F !important; + border-color: #08B74F !important; +} + +.btn-primary:hover { + background-color: #0cb44f !important; +} + +.dropdown-menu { + margin-top: 0; + transform: translateX(65%); + min-width: 100%; +} + +.dropdown-item { + cursor: pointer; + border-bottom: 1px solid #e9ecef !important; +} +.dropdown-item:focus { + background-color: #f8f9fae3 !important; +} +.dropdown-item:active { + background-color: #f8f9fa !important; +} + +.dropdown-item:hover { + background-color: #f8f9fa; +} + +#svgLogo { + width: 60%; + height: auto; +} + +#canvas, #image { + width: 0; + height: auto; +} + +.text-sm { + font-size: small; +} + +.preview-text { + color: #6c757d; + transition: 0.5s; +} + +svg { + transition: 0.5s; +} + +/* Add these styles to your existing CSS */ + +/* Dark theme styles */ +body.dark-theme { + background-color: #1a1a1a; + color: #f3f3f3; +} + +body.dark-theme .card { + background-color: #2c2c2c; + border-color: #444; +} + +body.dark-theme .text-blue { + color: #f3f3f3; +} + +body.dark-theme .btn-primary { + background-color: #0cb44f !important; + border-color: #0cb44f !important; +} + +body.dark-theme .dropdown-menu { + background-color: #2c2c2c; +} + +body.dark-theme .dropdown-item { + color: #f3f3f3; + border-bottom-color: #444 !important; +} + +body.dark-theme .dropdown-item:hover, +body.dark-theme .dropdown-item:focus, +body.dark-theme .dropdown-item:active { + background-color: #3a3a3a !important; +} + +