From d8cb219975dd55385ef4e8fee3751112f7804843 Mon Sep 17 00:00:00 2001 From: T <154358121+TMHSDigital@users.noreply.github.com> Date: Mon, 8 Jul 2024 21:46:53 -0400 Subject: [PATCH] V2-TEST --- css/color-palette.css | 23 +++---- css/image.resizer.css | 22 +++++-- css/styles.css | 136 +++++++-------------------------------- index.html | 29 ++++----- js/color-palette.js | 72 ++++++++++----------- js/common.js | 35 ++++++---- js/image-resizer.js | 62 +++++++----------- pages/about.html | 30 ++++----- pages/color-palette.html | 31 +++------ pages/image-resizer.html | 59 +++++++++-------- 10 files changed, 195 insertions(+), 304 deletions(-) diff --git a/css/color-palette.css b/css/color-palette.css index 8ba5011..02d2878 100644 --- a/css/color-palette.css +++ b/css/color-palette.css @@ -1,17 +1,14 @@ -#palette-container { +#color-palette-container { display: flex; - justify-content: space-between; - margin-top: 1rem; + justify-content: center; + align-items: center; + flex-wrap: wrap; } -.color-swatch { - width: 50px; - height: 50px; - border-radius: 50%; -} - -.color-info { - text-align: center; - font-size: 0.8rem; - margin-top: 0.5rem; +.color-box { + width: 100px; + height: 100px; + margin: 10px; + border-radius: 5px; + box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); } diff --git a/css/image.resizer.css b/css/image.resizer.css index 4eb9685..c7397c3 100644 --- a/css/image.resizer.css +++ b/css/image.resizer.css @@ -1,11 +1,25 @@ -#image-container { +#image-preview-container { max-height: 300px; overflow: hidden; - margin-bottom: 1rem; - border-radius: 5px; + margin-bottom: 20px; } -#image-container img { +#image-preview { max-width: 100%; height: auto; } + +.cyber-button { + background: linear-gradient(90deg, #00f, #0ff); + border: none; + padding: 10px 20px; + color: #fff; + font-size: 1em; + cursor: pointer; + transition: background 0.3s ease, transform 0.3s ease; +} + +.cyber-button:hover { + background: linear-gradient(90deg, #0ff, #00f); + transform: scale(1.05); +} diff --git a/css/styles.css b/css/styles.css index d90dd25..b6d65c1 100644 --- a/css/styles.css +++ b/css/styles.css @@ -1,140 +1,52 @@ body { - font-family: 'Roboto', sans-serif; + font-family: 'Inter', sans-serif; background-color: #000; color: #fff; margin: 0; padding: 0; display: flex; - justify-content: center; + flex-direction: column; align-items: center; + justify-content: center; min-height: 100vh; -} - -.container { - background-color: rgba(16, 24, 39, 0.8); - padding: 2rem; - border-radius: 10px; - box-shadow: 0 0 20px #00fff2; - max-width: 600px; - width: 100%; -} - -.neon-text { - font-family: 'Orbitron', sans-serif; - color: #fff; - text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #00fff2, 0 0 35px #00fff2, 0 0 40px #00fff2; text-align: center; - margin-bottom: 2rem; } -nav { - display: flex; - justify-content: center; - margin-bottom: 2rem; +header { + margin-bottom: 20px; } -nav a { - color: #00fff2; - text-decoration: none; - margin: 0 1rem; - font-weight: bold; - transition: color 0.3s ease; +h1 { + font-size: 2.5em; + color: #00f; + text-shadow: 0 0 10px rgba(0, 0, 255, 0.5); } -nav a:hover { - color: #fff; - text-shadow: 0 0 5px #00fff2; +h2 { + font-size: 2em; + margin-bottom: 10px; } -.content { - display: flex; - flex-direction: column; - gap: 1rem; -} - -.input-group { - display: flex; - flex-direction: column; -} - -label { - margin-bottom: 0.5rem; - color: #00fff2; -} - -input[type="file"], input[type="number"] { - background-color: #1f2937; - border: 1px solid #374151; - color: #fff; - padding: 0.5rem; - border-radius: 5px; +p { + font-size: 1.2em; + margin-bottom: 20px; } -.tech-button { - background: linear-gradient(45deg, #00a3ff, #00fff2); - color: #000; - border: none; - padding: 10px 20px; - font-size: 16px; - font-weight: bold; - text-transform: uppercase; - border-radius: 5px; - cursor: pointer; - transition: all 0.3s ease; - text-align: center; - text-decoration: none; -} - -.tech-button:hover { - background: linear-gradient(45deg, #00fff2, #00a3ff); - box-shadow: 0 0 10px #00fff2; -} - -.instructions { - text-align: center; - color: #9ca3af; - font-size: 0.9rem; -} - -.welcome-text { - font-size: 1.2rem; - text-align: center; - margin-bottom: 1rem; -} - -.services-list { - list-style-type: none; +nav ul { + list-style: none; padding: 0; } -.services-list li { - margin-bottom: 1rem; +nav ul li { + display: inline; + margin-right: 15px; } -.services-list a { - color: #00fff2; +nav ul li a { + color: #00f; text-decoration: none; - font-weight: bold; - transition: color 0.3s ease; -} - -.services-list a:hover { - color: #fff; - text-shadow: 0 0 5px #00fff2; } -.cta-text { - text-align: center; - margin-top: 2rem; -} - -.cta-text a { - color: #00fff2; - text-decoration: none; - font-weight: bold; -} - -.cta-text a:hover { - color: #fff; - text-shadow: 0 0 5px #00fff2; +nav ul li a:hover { + text-decoration: underline; } diff --git a/index.html b/index.html index 87c0df2..630b09e 100644 --- a/index.html +++ b/index.html @@ -7,24 +7,21 @@ -
-

Digital Services Hub

- - - -
-

Welcome to our Digital Services Hub!

-

We offer a range of free tools to help with your digital media needs:

- -
-
- + + diff --git a/js/color-palette.js b/js/color-palette.js index 33dab09..4fd71bd 100644 --- a/js/color-palette.js +++ b/js/color-palette.js @@ -1,47 +1,47 @@ -const fileInput = document.getElementById('file-input'); -const imageContainer = document.getElementById('image-container'); -const paletteContainer = document.getElementById('palette-container'); -const generateButton = document.getElementById('generate-button'); - -fileInput.addEventListener('change', (e) => { - const file = e.target.files[0]; +document.getElementById('image-input').addEventListener('change', (event) => { + const file = event.target.files[0]; if (file) { const reader = new FileReader(); reader.onload = (e) => { - imageContainer.innerHTML = ``; + const img = new Image(); + img.src = e.target.result; + img.onload = () => { + const canvas = document.createElement('canvas'); + const ctx = canvas.getContext('2d'); + canvas.width = img.width; + canvas.height = img.height; + ctx.drawImage(img, 0, 0, canvas.width, canvas.height); + const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); + const colors = getDominantColors(imageData.data); + displayColors(colors); + }; }; reader.readAsDataURL(file); } }); -generateButton.addEventListener('click', () => { - const image = document.getElementById('image'); - if (image) { - const canvas = document.createElement('canvas'); - const ctx = canvas.getContext('2d'); - canvas.width = image.width; - canvas.height = image.height; - ctx.drawImage(image, 0, 0, image.width, image.height); - - const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height).data; - const colorMap = {}; - - for (let i = 0; i < imageData.length; i += 4) { - const r = imageData[i]; - const g = imageData[i + 1]; - const b = imageData[i + 2]; - const rgb = `rgb(${r},${g},${b})`; - colorMap[rgb] = (colorMap[rgb] || 0) + 1; +function getDominantColors(data) { + const colorCount = {}; + for (let i = 0; i < data.length; i += 4) { + const rgb = `${data[i]},${data[i + 1]},${data[i + 2]}`; + if (colorCount[rgb]) { + colorCount[rgb]++; + } else { + colorCount[rgb] = 1; } + } - const sortedColors = Object.entries(colorMap).sort((a, b) => b[1] - a[1]); - const topColors = sortedColors.slice(0, 5); + const sortedColors = Object.keys(colorCount).sort((a, b) => colorCount[b] - colorCount[a]); + return sortedColors.slice(0, 5); +} - paletteContainer.innerHTML = topColors.map(([color, count]) => ` -
-
-
${color}
-
- `).join(''); - } -}); +function displayColors(colors) { + const container = document.getElementById('color-palette-container'); + container.innerHTML = ''; + colors.forEach(color => { + const colorBox = document.createElement('div'); + colorBox.classList.add('color-box'); + colorBox.style.backgroundColor = `rgb(${color})`; + container.appendChild(colorBox); + }); +} diff --git a/js/common.js b/js/common.js index f1a4006..3a5deaf 100644 --- a/js/common.js +++ b/js/common.js @@ -1,17 +1,26 @@ -document.addEventListener('DOMContentLoaded', (event) => { +document.addEventListener('DOMContentLoaded', () => { + const navItems = [ + { name: 'Home', url: 'index.html' }, + { name: 'Image Resizer', url: 'pages/image-resizer.html' }, + { name: 'Color Palette', url: 'pages/color-palette.html' }, + { name: 'About', url: 'pages/about.html' } + ]; + const nav = document.getElementById('main-nav'); - nav.innerHTML = ` - Home - Image Resizer - Color Palette - About - `; + if (nav) { + const ul = document.createElement('ul'); + ul.classList.add('flex', 'justify-center', 'space-x-4'); + + navItems.forEach(item => { + const li = document.createElement('li'); + const a = document.createElement('a'); + a.href = item.url; + a.classList.add('text-blue-400', 'hover:text-blue-300'); + a.textContent = item.name; + li.appendChild(a); + ul.appendChild(li); + }); - // Adjust links if we're on the homepage - if (window.location.pathname.endsWith('index.html') || window.location.pathname.endsWith('/')) { - nav.innerHTML = nav.innerHTML.replace('../index.html', 'index.html'); - nav.innerHTML = nav.innerHTML.replace('image-resizer.html', 'pages/image-resizer.html'); - nav.innerHTML = nav.innerHTML.replace('color-palette.html', 'pages/color-palette.html'); - nav.innerHTML = nav.innerHTML.replace('about.html', 'pages/about.html'); + nav.appendChild(ul); } }); diff --git a/js/image-resizer.js b/js/image-resizer.js index c7cae41..3d64cc9 100644 --- a/js/image-resizer.js +++ b/js/image-resizer.js @@ -1,46 +1,28 @@ -let cropper; -const fileInput = document.getElementById('file-input'); -const imageContainer = document.getElementById('image-container'); -const resizeButton = document.getElementById('resize-button'); -const downloadLink = document.getElementById('download-link'); -const widthInput = document.getElementById('width'); -const heightInput = document.getElementById('height'); +document.getElementById('resize-button').addEventListener('click', () => { + const imageInput = document.getElementById('image-input'); + const widthInput = document.getElementById('width'); + const heightInput = document.getElementById('height'); + const imagePreview = document.getElementById('image-preview'); + const downloadLink = document.getElementById('download-link'); -fileInput.addEventListener('change', (e) => { - const file = e.target.files[0]; - if (file) { + if (imageInput.files && imageInput.files[0]) { const reader = new FileReader(); reader.onload = (e) => { - imageContainer.innerHTML = ``; - const image = document.getElementById('image'); - cropper = new Cropper(image, { - aspectRatio: NaN, - viewMode: 1, - }); + const img = new Image(); + img.src = e.target.result; + img.onload = () => { + const canvas = document.createElement('canvas'); + const ctx = canvas.getContext('2d'); + canvas.width = widthInput.value; + canvas.height = heightInput.value; + ctx.drawImage(img, 0, 0, canvas.width, canvas.height); + const resizedImageUrl = canvas.toDataURL('image/png'); + imagePreview.src = resizedImageUrl; + downloadLink.href = resizedImageUrl; + downloadLink.download = 'resized-image.png'; + downloadLink.classList.remove('hidden'); + }; }; - reader.readAsDataURL(file); - } -}); - -resizeButton.addEventListener('click', () => { - if (cropper) { - resizeButton.disabled = true; - resizeButton.textContent = 'Processing...'; - - const width = parseInt(widthInput.value); - const height = parseInt(heightInput.value); - const canvas = cropper.getCroppedCanvas({ - width: width, - height: height - }); - - canvas.toBlob((blob) => { - const url = URL.createObjectURL(blob); - downloadLink.href = url; - downloadLink.download = 'resized-image.png'; - downloadLink.style.display = 'inline-block'; - resizeButton.disabled = false; - resizeButton.textContent = 'Resize Image'; - }); + reader.readAsDataURL(imageInput.files[0]); } }); diff --git a/pages/about.html b/pages/about.html index 6cc573c..e77f2e9 100644 --- a/pages/about.html +++ b/pages/about.html @@ -3,28 +3,20 @@ - About - Digital Services Hub + About -
-

About Our Services

- - - -
-

Welcome to our Digital Services Hub! We offer a range of tools to help with your digital media needs.

- -

Our Tools:

- - -

All our tools are free to use and designed with a futuristic aesthetic. We're constantly working on adding new features and tools to enhance your digital workflow.

-
-
- + +
+

About Us

+
+
+
+

About Digital Services Hub

+

Welcome to the Digital Services Hub! We provide a range of free digital tools and services to make your online tasks easier. Our current offerings include an Image Resizer and a Color Palette Generator. We aim to expand our services to provide even more useful tools in the future.

+
+
diff --git a/pages/color-palette.html b/pages/color-palette.html index 0a4ade2..6d68a21 100644 --- a/pages/color-palette.html +++ b/pages/color-palette.html @@ -3,32 +3,21 @@ - Color Palette Generator - Digital Services Hub + Color Palette Generator -
-

Color Palette Generator

- - - -
-
- - -
- -
- -
- - - -

Upload an image and click 'Generate Palette' to extract colors.

+ +
+

Color Palette Generator

+
+
+ +
+
-
- + diff --git a/pages/image-resizer.html b/pages/image-resizer.html index 62edf76..939a8c1 100644 --- a/pages/image-resizer.html +++ b/pages/image-resizer.html @@ -3,43 +3,42 @@ - Futuristic Image Resizer - Digital Services Hub + Image Resizer - - -
-

Futuristic Image Resizer

- - - -
-
- - -
- -
- -
- - + +
+

Image Resizer

+
+
+ +
+ Preview +
+
+
+ +
- -
- - +
+ +
- - - - -

Click 'Resize Image' to process, then 'Download' to save your image.

-
- +
+ + +
+

Click 'Resize Image' to process, then 'Download' to save your image.

+