Skip to content

Commit

Permalink
V2-TEST
Browse files Browse the repository at this point in the history
  • Loading branch information
@TMHSDigital
TMHSDigital authored Jul 9, 2024
1 parent a3e3d2a commit d8cb219
Show file tree
Hide file tree
Showing 10 changed files with 195 additions and 304 deletions.
23 changes: 10 additions & 13 deletions css/color-palette.css
View file
Original file line number Diff line number Diff line change
@@ -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);
}
22 changes: 18 additions & 4 deletions css/image.resizer.css
View file
Original file line number Diff line number Diff line change
@@ -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);
}
136 changes: 24 additions & 112 deletions css/styles.css
View file
Original file line number Diff line number Diff line change
@@ -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;
}
29 changes: 13 additions & 16 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,24 +7,21 @@
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="container">
<h1 class="neon-text">Digital Services Hub</h1>

<nav id="main-nav"></nav>

<div class="content">
<p class="welcome-text">Welcome to our Digital Services Hub!</p>
<p>We offer a range of free tools to help with your digital media needs:</p>

<ul class="services-list">
<li><a href="pages/image-resizer.html">Futuristic Image Resizer</a></li>
<nav id="main-nav"></nav>
<header>
<h1>Welcome to the Digital Services Hub</h1>
<p>Your go-to site for free digital tools and services.</p>
</header>
<main>
<section>
<h2>Available Services</h2>
<ul>
<li><a href="pages/image-resizer.html">Image Resizer</a></li>
<li><a href="pages/color-palette.html">Color Palette Generator</a></li>
<li><a href="pages/about.html">About</a></li>
</ul>

<p class="cta-text">Choose a service above to get started, or visit our <a href="pages/about.html">About page</a> to learn more.</p>
</div>
</div>

</section>
</main>
<script src="js/common.js"></script>
</body>
</html>
72 changes: 36 additions & 36 deletions js/color-palette.js
View file
Original file line number Diff line number Diff line change
@@ -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 = `<img src="${e.target.result}" id="image" class="max-w-full">`;
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]) => `
<div class="color-item">
<div class="color-swatch" style="background-color: ${color};"></div>
<div class="color-info">${color}</div>
</div>
`).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);
});
}
35 changes: 22 additions & 13 deletions js/common.js
View file
Original file line number Diff line number Diff line change
@@ -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 = `
<a href="../index.html">Home</a>
<a href="image-resizer.html">Image Resizer</a>
<a href="color-palette.html">Color Palette</a>
<a href="about.html">About</a>
`;
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);
}
});
Loading

0 comments on commit d8cb219

Please sign in to comment.