Color Flipper & Gradient Generator

<div class="flipper-container">
  <div class="flipper-card">
    <div class="tabs">
      <button class="tab-btn active" id="tab-solid">Solid Color</button>
      <button class="tab-btn" id="tab-gradient">Gradient</button>
    </div>

    <div class="preview-box" id="color-preview">
      <span class="preview-badge" id="contrast-badge">Preview</span>
    </div>

    <div id="solid-controls" class="controls-panel">
      <div class="code-display" id="copy-hex-btn" title="Click to copy HEX code">
        <span id="hex-code">#3B82F6</span>
        <i class="far fa-copy"></i>
      </div>
      <button id="generate-btn" class="btn-generate">
        <i class="fas fa-random"></i> Generate New Color
      </button>
    </div>

    <div id="gradient-controls" class="controls-panel hidden">
      <div class="code-display" id="copy-gradient-btn" title="Click to copy CSS">
        <span id="gradient-code">linear-gradient(135deg, #3b82f6, #ec4899)</span>
        <i class="far fa-copy"></i>
      </div>
      <div class="slider-row">
        <label>Angle: <span id="angle-val">135°</span></label>
        <input type="range" id="angle-slider" min="0" max="360" value="135">
      </div>
      <button id="generate-grad-btn" class="btn-generate">
        <i class="fas fa-magic"></i> Generate Gradient
      </button>
    </div>

    <div class="history-section">
      <span class="history-title">Recently Generated</span>
      <div class="palette-history" id="palette-history"></div>
    </div>
  </div>
</div>

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: #0f172a;
  transition: background 0.4s ease;
}
.flipper-container {
  width: 100%;
  max-width: 440px;
}
.flipper-card {
  background: #1e293b;
  border-radius: 20px;
  padding: 24px;
  border: 1px solid #334155;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}
.tabs {
  display: flex;
  background: #0f172a;
  padding: 4px;
  border-radius: 12px;
  margin-bottom: 20px;
}
.tab-btn {
  flex: 1;
  background: transparent;
  border: none;
  color: #94a3b8;
  padding: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}
.tab-btn.active {
  background: #334155;
  color: #f8fafc;
}
.preview-box {
  height: 150px;
  border-radius: 14px;
  background: #3b82f6;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2);
  transition: background 0.3s ease;
}
.preview-badge {
  background: rgba(0, 0, 0, 0.5);
  color: #ffffff;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
}
.code-display {
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 12px;
  padding: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #38bdf8;
  font-family: monospace;
  font-size: 0.95rem;
  cursor: pointer;
  margin-bottom: 16px;
  transition: all 0.2s;
  overflow-x: auto;
}
.code-display:hover {
  border-color: #38bdf8;
  background: #13213c;
}
.btn-generate {
  width: 100%;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  color: #ffffff;
  border: none;
  padding: 14px;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform 0.15s, opacity 0.2s;
}
.btn-generate:hover {
  opacity: 0.95;
}
.btn-generate:active {
  transform: scale(0.98);
}
.slider-row {
  margin-bottom: 16px;
  color: #94a3b8;
  font-size: 0.9rem;
}
.slider-row label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
}
.slider-row input {
  width: 100%;
  accent-color: #8b5cf6;
}
.hidden {
  display: none;
}
.history-section {
  margin-top: 24px;
  border-top: 1px solid #334155;
  padding-top: 16px;
}
.history-title {
  color: #64748b;
  font-size: 0.8rem;
  text-transform: uppercase;
  font-weight: 600;
  display: block;
  margin-bottom: 10px;
}
.palette-history {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.history-chip {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 2px solid #334155;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.2s;
}
.history-chip:hover {
  transform: scale(1.15);
}

let mode = 'solid';
let currentColor = '#3b82f6';
let gradColor1 = '#3b82f6';
let gradColor2 = '#ec4899';
let angle = 135;
let history = ['#3b82f6', '#10b981', '#f59e0b', '#ec4899'];

const preview = document.getElementById('color-preview');
const hexCode = document.getElementById('hex-code');
const gradCode = document.getElementById('gradient-code');
const solidControls = document.getElementById('solid-controls');
const gradControls = document.getElementById('gradient-controls');
const tabSolid = document.getElementById('tab-solid');
const tabGradient = document.getElementById('tab-gradient');
const generateBtn = document.getElementById('generate-btn');
const generateGradBtn = document.getElementById('generate-grad-btn');
const angleSlider = document.getElementById('angle-slider');
const angleVal = document.getElementById('angle-val');
const historyContainer = document.getElementById('palette-history');

function getRandomHex() {
  const letters = '0123456789ABCDEF';
  let color = '#';
  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

function updateSolid() {
  currentColor = getRandomHex();
  preview.style.background = currentColor;
  hexCode.textContent = currentColor;
  addToHistory(currentColor);
}

function updateGradient() {
  gradColor1 = getRandomHex();
  gradColor2 = getRandomHex();
  applyGradient();
  addToHistory(gradColor1);
}

function applyGradient() {
  const css = `linear-gradient(${angle}deg, ${gradColor1}, ${gradColor2})`;
  preview.style.background = css;
  gradCode.textContent = css;
}

function addToHistory(color) {
  if (!history.includes(color)) {
    history.unshift(color);
    if (history.length > 8) history.pop();
    renderHistory();
  }
}

function renderHistory() {
  historyContainer.innerHTML = '';
  history.forEach(c => {
    const chip = document.createElement('div');
    chip.className = 'history-chip';
    chip.style.background = c;
    chip.title = c;
    chip.addEventListener('click', () => {
      currentColor = c;
      preview.style.background = c;
      hexCode.textContent = c;
    });
    historyContainer.appendChild(chip);
  });
}

function copyToClipboard(text, element) {
  navigator.clipboard.writeText(text).then(() => {
    const originalText = element.innerHTML;
    element.innerHTML = '<span style="color:#10b981"><i class="fas fa-check"></i> Copied to Clipboard!</span>';
    setTimeout(() => {
      element.innerHTML = originalText;
    }, 1500);
  });
}

tabSolid.addEventListener('click', () => {
  mode = 'solid';
  tabSolid.classList.add('active');
  tabGradient.classList.remove('active');
  solidControls.classList.remove('hidden');
  gradControls.classList.add('hidden');
  preview.style.background = currentColor;
});

tabGradient.addEventListener('click', () => {
  mode = 'gradient';
  tabGradient.classList.add('active');
  tabSolid.classList.remove('active');
  gradControls.classList.remove('hidden');
  solidControls.classList.add('hidden');
  applyGradient();
});

generateBtn.addEventListener('click', updateSolid);
generateGradBtn.addEventListener('click', updateGradient);

angleSlider.addEventListener('input', (e) => {
  angle = e.target.value;
  angleVal.textContent = `${angle}°`;
  applyGradient();
});

document.getElementById('copy-hex-btn').addEventListener('click', function() {
  copyToClipboard(hexCode.textContent, this);
});
document.getElementById('copy-gradient-btn').addEventListener('click', function() {
  copyToClipboard(gradCode.textContent, this);
});

renderHistory();