Webleb - Snippet di Codice - Cerchio selettore colore

HTML

CSS

body {
  background-color: #121212;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  height: 100vh;
  font-family: 'Arial', sans-serif;
  color: white;
  overflow: hidden;
}

.color-circle {
  position: relative;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: conic-gradient(
    #e74c3c, #f39c12, #f1c40f, #2ecc71, #1abc9c, #3498db, #9b59b6, #8e44ad, #34495e
  );
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.8);
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  margin-top: 50px;
}

.color-circle:hover {
  transform: scale(1.05);
  box-shadow: 0 0 40px rgba(255, 255, 255, 0.3);
}

.info-box {
  position: absolute;
  top: 500px;
  width: 100%;
  font-size: 20px;
  text-align: center;
  background: rgba(0, 0, 0, 0.7);
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.4);
  display: none;
}

.color-name {
  font-size: 24px;
  font-weight: bold;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

.color-code {
  font-size: 18px;
  font-family: monospace;
  color: #f39c12;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.percentage {
  font-size: 20px;
  font-weight: bold;
  color: #00ff00;
  margin-top: 10px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
  display: none;
}

JS

const colorCircle = document.getElementById('colorCircle');
const colorInfo = document.getElementById('colorInfo');
const colorName = document.getElementById('colorName');
const colorCode = document.getElementById('colorCode');
const percentage = document.getElementById('percentage');

const colors = [
  { name: 'Red', code: '#FF0000' },
  { name: 'Orange', code: '#FFA500' },
  { name: 'Yellow', code: '#FFFF00' },
  { name: 'Green', code: '#008000' },
  { name: 'Cyan', code: '#00FFFF' },
  { name: 'Blue', code: '#0000FF' },
  { name: 'Indigo', code: '#4B0082' },
  { name: 'Violet', code: '#8A2BE2' },
  { name: 'Pink', code: '#FFC0CB' },
  { name: 'Magenta', code: '#FF00FF' },
  { name: 'Golden Yellow', code: '#F1C40F' },
  { name: 'Turquoise', code: '#1ABC9C' },
  { name: 'Emerald Green', code: '#2ECC71' },
  { name: 'Caribbean Blue', code: '#1F77B4' },
  { name: 'Gray', code: '#BDC3C7' },
  { name: 'Dark Slate Blue', code: '#2C3E50' },
];

const savedColor = localStorage.getItem('selectedColor');
if (savedColor) {
  const savedColorObj = JSON.parse(savedColor);
  colorCircle.style.backgroundColor = savedColorObj.code;
  colorName.textContent = savedColorObj.name;
  colorCode.textContent = savedColorObj.code;
  colorInfo.style.display = 'block';
}

colorCircle.addEventListener('click', (e) => {
  const rect = colorCircle.getBoundingClientRect();
  const x = e.clientX - rect.left - rect.width / 2;
  const y = e.clientY - rect.top - rect.height / 2;
  const angle = Math.atan2(y, x) * (180 / Math.PI) + 90;

let selectedColor = colors[Math.floor((angle + 360) / 360 * colors.length) % colors.length];
  colorName.textContent = selectedColor.name;
  colorCode.textContent = selectedColor.code;

const percentageValue = Math.floor((angle + 360) / 360 * 100);
  percentage.style.display = 'block';
  percentage.textContent = `Degree: ${percentageValue}%`;

colorInfo.style.display = 'block';
  colorCircle.style.backgroundColor = selectedColor.code;

localStorage.setItem('selectedColor', JSON.stringify(selectedColor));
});

document.addEventListener('click', (e) => {
  if (!colorCircle.contains(e.target)) {
    colorInfo.style.display = 'none';
  }
});

Cerchio selettore colore

Selettore tema modalità scura con LocalStorage

Una home page con il colore Leon

HTML

CSS

JS

Selettore tema modalità scura con LocalStorage

Una home page con il colore Leon

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS