From 7ee7de8f9340aabcde19bcfde9595951f40fbaf8 Mon Sep 17 00:00:00 2001
From: Roto-3 <172266438+Roto-3@users.noreply.github.com>
Date: Sat, 31 Aug 2024 15:40:18 +0900
Subject: [PATCH] =?UTF-8?q?=E9=9B=A3=E6=98=93=E5=BA=A6option=E3=81=A8?=
 =?UTF-8?q?=E3=83=AC=E3=82=B7=E3=83=94=E3=81=AE=E3=83=87=E3=82=B6=E3=82=A4?=
 =?UTF-8?q?=E3=83=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/index.html | 27 ++++++++++++++++++++++-----
 public/script.js  | 11 +++++++++++
 public/style.css  | 44 +++++++++++++++++++++++++++++++++++++++++---
 3 files changed, 74 insertions(+), 8 deletions(-)

diff --git a/public/index.html b/public/index.html
index a5730fa..bee7ed3 100644
--- a/public/index.html
+++ b/public/index.html
@@ -19,15 +19,32 @@ <h1>AI チャット</h1>
             </li>
           </template>
     </ul>
-    <div id="cook-time">
+    <div id="cook-time-container">
       10分
-      <input type="range" min="0" max="100" value="0" step="10" id="cook-time-slider">
+      <input type="range" min="0" max="100" value="0" step="5" id="cook-time-slider">
       100分~
+      <div id="slider-value">50</div>
+    </div>
+    <div id="cook-difficulty">
+      <form>
+        <label>
+          <input type="radio" name="group" value="カンタン" checked>
+          Option 1
+        </label>
+        <label>
+          <input type="radio" name="group" value="難しくはない">
+          Option 2
+        </label>
+        <label>
+          <input type="radio" name="group" value="難易度は気にしない">
+          Option 3
+        </label>
+      </form>
     </div>
     </ul>
-    <button>牛肉</button>
-    <button>豚肉</button>
-     <form id="input-form">
+    <button class="button">牛肉</button>
+    <button class="button">豚肉</button>
+      <form id="input-form">
         <input id="prompt-text-input" />
         <button type="submit">送信</button>
       </form>
diff --git a/public/script.js b/public/script.js
index ac1eb3b..955a0f3 100644
--- a/public/script.js
+++ b/public/script.js
@@ -59,3 +59,14 @@ buttons.forEach(button => {button.addEventListener('click', function(){
   console.log(buttonText);
   });
 });
+
+
+//cook-timeのsliderのデザインと値
+const cookTimeSlider = document.getElementById('cook-time-slider');
+const sliderValue = document.getElementById('slider-value');
+
+sliderValue.textContent = cookTimeSlider.value;
+
+cookTimeSlider.addEventListener('input', () => {
+    sliderValue.textContent = cookTimeSlider.value + '分';
+});
\ No newline at end of file
diff --git a/public/style.css b/public/style.css
index 8b22e9c..77bd1bc 100644
--- a/public/style.css
+++ b/public/style.css
@@ -43,7 +43,9 @@
 .button {
   border:2px solid black;
   border-radius: 2px;
-  padding: 10px 10px
+  padding: 10px 10px;
+  width: 100px;
+  height:100px;
 }
 
 .button:hover{
@@ -62,8 +64,44 @@
   color: #ff0000;
 }
 
-#cook-time{
+#cook-time-container{
+  width:360px;
   color: #ff0000;
-  border:2px black;
+  border:2px solid black;
   padding:20px 10px
+}
+
+#slider-value {
+  font-size: 16px;
+  font-weight: bold;
+}
+
+
+.proposal-container {
+  width: 80%;
+  max-width: 600px;
+  display: flex;
+}
+
+.proposal {
+  background-color: #fff;
+  border: 1px solid #ddd;
+  margin-bottom: 10px;
+  padding: 10px;
+  cursor: pointer;
+  position: relative;
+}
+
+.proposal-details {
+  display: none;
+  padding: 10px;
+  background-color: #f9f9f9;
+  border-top: 1px solid #ddd;
+  position: absolute;
+  width: calc(100% - 20px);
+  bottom: 0;
+}
+
+.proposal.active .proposal-details {
+  display: block;
 }
\ No newline at end of file