diff --git a/freelens-logo/index.html b/freelens-logo/index.html new file mode 100644 index 0000000..30dc187 --- /dev/null +++ b/freelens-logo/index.html @@ -0,0 +1,54 @@ + + + + + + + Freelens Logo + Tools + + + + +
+
+

Freelens Logo Creator

+

Create logos for K8S clusters in Freelens

+
+
+
+
+
+ + + +
+
+
+ + +
+
+ + + diff --git a/script.js b/freelens-logo/script.js similarity index 62% rename from script.js rename to freelens-logo/script.js index c68bf98..0404e63 100644 --- a/script.js +++ b/freelens-logo/script.js @@ -26,14 +26,19 @@ ctx.fillStyle = colorSelect.value; ctx.fillRect(0, 0, width, height); + + const upper = upperInput.value; + const lower = lowerInput.value; - ctx.strokeStyle = 'white'; - ctx.lineWidth = LINE_WIDTH; - const yLine = height / 2; - ctx.beginPath(); - ctx.moveTo(PADDING, yLine); - ctx.lineTo(width - PADDING, yLine); - ctx.stroke(); + if (lower != "") { + ctx.strokeStyle = 'white'; + ctx.lineWidth = LINE_WIDTH; + const yLine = height / 2; + ctx.beginPath(); + ctx.moveTo(PADDING, yLine); + ctx.lineTo(width - PADDING, yLine); + ctx.stroke(); + } const availableWidth = width - PADDING * 2; const availableHeight = height - PADDING * 2; @@ -43,15 +48,19 @@ ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; - const upper = upperInput.value.toUpperCase(); - let fontSize = fitText(upper, availableWidth, halfHeight); - ctx.font = `bold ${fontSize}px sans-serif`; - ctx.fillText(upper, width / 2, PADDING + halfHeight / 2); - - const lower = lowerInput.value.toUpperCase(); - fontSize = fitText(lower, availableWidth, halfHeight); - ctx.font = `bold ${fontSize}px sans-serif`; - ctx.fillText(lower, width / 2, height - PADDING - halfHeight / 2); + if (lower != "") { + let fontSize = fitText(upper, availableWidth, halfHeight); + ctx.font = `bold ${fontSize}px sans-serif`; + ctx.fillText(upper, width / 2, PADDING + halfHeight / 2); + + fontSize = fitText(lower, availableWidth, halfHeight); + ctx.font = `bold ${fontSize}px sans-serif`; + ctx.fillText(lower, width / 2, height - PADDING - halfHeight / 2 + 4); + } else { + let fontSize = fitText(upper, availableWidth, halfHeight); + ctx.font = `bold ${fontSize}px sans-serif`; + ctx.fillText(upper, width / 2, height / 2); + } } upperInput.addEventListener('input', draw); diff --git a/index.html b/index.html index 595b7e9..5c19a1e 100644 --- a/index.html +++ b/index.html @@ -1,45 +1,26 @@ - - Canvas Logo Generator - + + + + Tools + - -
- - - -
- - - - - + +
+
+

Tools

+

Collection of online tools

+
+
+
+ +
- + \ No newline at end of file