add copy to clipboard func

main.js

@@ -189,7 +189,10 @@ class ColorVisualizerApp {
               <input type="range" id="v-slider" min="0" max="100" step="1" value="0">
             </div>
           </div>
-          <div id="current-color"></div>
+          <div class="color-display-container">
+            <div id="current-color"></div>
+            <button id="copy-color-btn">Copy to Clipboard</button>
+          </div>
         </div>
       </div>
     `;
@@ -289,9 +292,22 @@ class ColorVisualizerApp {
 
   updateColorDisplay(r, g, b) {
     const colorDisplay = document.getElementById('current-color');
-    colorDisplay.style.backgroundColor = `rgb(${Math.round(r * 255)}, ${Math.round(g * 255)}, ${Math.round(b * 255)})`;
+    const rgbValue = `rgb(${Math.round(r * 255)}, ${Math.round(g * 255)}, ${Math.round(b * 255)})`;
+    colorDisplay.style.backgroundColor = rgbValue;
     colorDisplay.style.width = '100px';
     colorDisplay.style.height = '100px';
+
+    // コピーボタンのイベントリスナーを設定
+    document.getElementById('copy-color-btn').addEventListener('click', () => {
+      navigator.clipboard.writeText(rgbValue)
+        .then(() => {
+          alert('色コードをクリップボードにコピーしました！');
+        })
+        .catch(err => {
+          console.error('クリップボードへのコピーに失敗しました:', err);
+          alert('コピーに失敗しました。');
+        });
+    });
   }
 
   animate() {

style.css

@@ -40,7 +40,7 @@ h1 {
   margin: 0 auto;
   padding: 2rem;
   text-align: center;
-  padding-left: 300px;
+  padding-left: 250px;
 }
 
 .logo {
@@ -101,25 +101,25 @@ button:focus-visible {
   top: 20px;
   left: 20px;
   background: rgba(0, 0, 0, 0.7);
-  padding: 20px;
+  padding: 15px;
   border-radius: 10px;
   color: white;
-  min-width: 250px;
+  min-width: 200px;
 }
 
 .control-section {
   margin-bottom: 20px;
 }
 
 .control-section h3 {
-  margin: 0 0 10px 0;
-  font-size: 1.1em;
+  margin: 0 0 8px 0;
+    font-size: 1em;
   border-bottom: 1px solid rgba(255, 255, 255, 0.3);
-  padding-bottom: 5px;
+  padding-bottom: 4px;
 }
 
 .slider-group {
-  margin-bottom: 10px;
+  margin-bottom: 8px;
 }
 
 .slider-group label {
@@ -134,6 +134,8 @@ input[type="range"] {
 }
 
 #current-color {
+  width: 80px !important;
+    height: 80px !important;
   margin: 10px auto;
   border-radius: 5px;
 }
@@ -166,3 +168,23 @@ input[type="range"] {
   width: 400px;
   height: 400px;
 }
+
+.color-display-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+}
+
+#copy-color-btn {
+  padding: 8px 16px;
+  background-color: #4CAF50;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+#copy-color-btn:hover {
+  background-color: #45a049;
+}