【技術筆記】Gemini生成網頁版色碼轉換器

透過 Google Gemini 生成 HTML，一個深色模式、響應網頁尺寸，能嵌入到自訂網站的色碼轉換器，點選顏色後，出現對應的 RGB、HEX 數值，在顏色選擇器上奕能切換更多代碼。

色碼轉換

點擊選色

HEX: #6366F1 點擊複製

RGB: rgb(99, 102, 241) 點擊複製

HTML碼

點擊展開 / 摺疊內容

<div class="color-tool-card-responsive">
  <h2 class="tool-title">色碼轉換</h2>
  
  <div class="content-layout">
    <div class="main-picker-area">
      <div class="input-wrapper">
        <input type="color" id="colorInput" value="#6366f1">
        <p>點擊選色</p>
      </div>
      
      <div id="displayBox" class="display-box"></div>
    </div>

    <div class="result-section">
      <div class="code-field" onclick="copyText('hexLabel')">
        <span class="label">HEX:</span>
        <code id="hexLabel">#6366F1</code>
        <span class="copy-hint">點擊複製</span>
      </div>
      
      <div class="code-field" onclick="copyText('rgbLabel')">
        <span class="label">RGB:</span>
        <code id="rgbLabel">rgb(99, 102, 241)</code>
        <span class="copy-hint">點擊複製</span>
      </div>
    </div>
  </div>
</div>

<style>
  /* 移除固定寬度，設為 100% */
  .color-tool-card-responsive {
    width: 100%;
    margin: 0;
    padding: 25px;
    background: #1e1e1e;
    border: 1px solid #333;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #e0e0e0;
    box-sizing: border-box; /* 確保 padding 不會撐破容器 */
  }

  .tool-title {
    margin-top: 0;
    font-size: 1.25rem;
    color: #bbb;
    text-align: center;
    margin-bottom: 25px;
    letter-spacing: 1px;
  }

  /* 使用 Flex 佈局處理響應式結構 */
  .content-layout {
    display: flex;
    flex-direction: column; /* 手機預設垂直排列 */
    gap: 20px;
  }

  /* 當螢幕寬度大於 600px 時改為水平排列 */
  @media (min-width: 600px) {
    .content-layout {
      flex-direction: row;
      align-items: stretch;
    }
    .main-picker-area {
      flex: 1; /* 平分空間 */
      margin-bottom: 0 !important;
    }
    .result-section {
      flex: 1;
      justify-content: center;
    }
  }

  .main-picker-area {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: #2a2a2a;
    padding: 30px 20px;
    border-radius: 15px;
    border: 1px solid #383838;
  }

  #colorInput {
    -webkit-appearance: none;
    border: none;
    width: 80px;
    height: 80px;
    cursor: pointer;
    background: transparent;
  }
  #colorInput::-webkit-color-swatch {
    border-radius: 50%;
    border: 3px solid #1e1e1e;
    box-shadow: 0 0 15px rgba(0,0,0,0.4);
  }

  .input-wrapper {
    text-align: center;
    font-size: 13px;
    color: #888;
  }

  .display-box {
    width: 100px;
    height: 100px;
    border-radius: 16px;
    background-color: #6366f1;
    box-shadow: 0 0 25px rgba(99, 102, 241, 0.4);
    transition: all 0.2s ease;
  }

  .result-section {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }

  .code-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    background: #2a2a2a;
    border: 1px solid #383838;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
  }

  .code-field:hover {
    background: #333;
    border-color: #555;
    transform: translateY(-2px);
  }

  .label {
    font-weight: 700;
    color: #777;
    font-size: 13px;
  }

  code {
    font-family: "SFMono-Regular", Consolas, monospace;
    color: #6366f1;
    font-weight: bold;
    font-size: 1rem;
  }

  .copy-hint {
    font-size: 10px;
    color: #666;
    background: #1e1e1e;
    padding: 3px 8px;
    border-radius: 5px;
    border: 1px solid #333;
  }

  /* 針對極小螢幕優化 */
  @media (max-width: 350px) {
    .display-box { width: 70px; height: 70px; }
    #colorInput { width: 60px; height: 60px; }
    code { font-size: 0.85rem; }
  }
</style>

<script>
  const colorInput = document.getElementById('colorInput');
  const displayBox = document.getElementById('displayBox');
  const hexLabel = document.getElementById('hexLabel');
  const rgbLabel = document.getElementById('rgbLabel');

  function hexToRgb(hex) {
    const r = parseInt(hex.slice(1, 3), 16);
    const g = parseInt(hex.slice(3, 5), 16);
    const b = parseInt(hex.slice(5, 7), 16);
    return `rgb(${r}, ${g}, ${b})`;
  }

  colorInput.addEventListener('input', (e) => {
    const color = e.target.value.toUpperCase();
    const rgb = hexToRgb(color);

    displayBox.style.backgroundColor = color;
    displayBox.style.boxShadow = `0 0 30px ${color}66`;
    
    hexLabel.textContent = color;
    hexLabel.style.color = color;
    
    rgbLabel.textContent = rgb;
    rgbLabel.style.color = color;
  });

  function copyText(elementId) {
    const el = document.getElementById(elementId);
    const originalText = el.textContent;
    const originalColor = el.style.color;

    navigator.clipboard.writeText(originalText).then(() => {
      el.textContent = "COPIED!";
      el.style.color = "#10b981";
      
      setTimeout(() => {
        el.textContent = originalText;
        el.style.color = originalColor;
      }, 800);
    });
  }
</script>

Pages

【技術筆記】Gemini生成網頁版色碼轉換器

色碼轉換

禺霖 Legen Vita

沒有留言:

張貼留言

搜尋此網誌

Translate

書櫃

瀏覽次數

Instagram