Webleb - Snippets de Código - Círculo do seletor de cores

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';
  }
});

Círculo do seletor de cores

Recomendado

Loop aninhado

Um código de fluxyftnpro

FORMULÁRIO DE ALUGUEL DE CARRO

HTML

CSS

JS

Recomendado

Loop aninhado

Um código de fluxyftnpro

FORMULÁRIO DE ALUGUEL DE CARRO

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS