Merge the inputs

Author: LoicMagnette

assets/raffle.html

@@ -23,68 +23,77 @@
       width: 100%;
       max-width: 500px;
       margin-bottom: 2rem;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-    }
-    input[type="text"] {
-      width: 100%;
-      padding: 0.5rem;
-      margin-bottom: 1rem;
-      background-color: #1e1e1e;
-      color: #ffffff;
-      border: 1px solid #333;
-      border-radius: 5px;
     }
-    .file-upload {
-      display: flex;
-      flex-direction: column;
-      gap: 1rem;
-      margin-bottom: 1rem;
-      padding: 1rem;
-      border: 2px dashed #333;
+    .unified-input {
+      padding: 1.5rem;
+      border: 2px solid #333;
       border-radius: 10px;
       background-color: #1a1a1a;
       transition: all 0.3s ease;
     }
-    .file-upload.compact {
-      padding: 0.5rem;
-      gap: 0.5rem;
+    .unified-input.compact {
+      padding: 1rem;
     }
-    .upload-label {
+    .input-header {
       font-size: 1.1rem;
       font-weight: bold;
       color: #ff4081;
-      transition: font-size 0.3s ease;
+      margin-bottom: 1rem;
+      transition: all 0.3s ease;
     }
-    .upload-label.compact {
+    .input-header.compact {
       font-size: 0.9rem;
+      margin-bottom: 0.5rem;
     }
-    input[type="file"] {
-      padding: 0.5rem;
-      background-color: #2a2a2a;
+    .input-controls {
+      display: flex;
+      gap: 1rem;
+      margin-bottom: 1rem;
+      align-items: stretch;
+    }
+    input[type="text"] {
+      flex: 1;
+      padding: 0.75rem;
+      background-color: #1e1e1e;
       color: #ffffff;
-      border: 1px solid #555;
+      border: 1px solid #333;
       border-radius: 5px;
+    }
+    .file-input-wrapper {
+      position: relative;
+      display: flex;
+      align-items: center;
+    }
+    input[type="file"] {
+      position: absolute;
+      opacity: 0;
+      width: 100%;
+      height: 100%;
       cursor: pointer;
     }
-    input[type="file"]::-webkit-file-upload-button {
+    .file-input-label {
       background-color: #ff4081;
       color: white;
-      border: none;
-      padding: 0.5rem 1rem;
-      border-radius: 3px;
+      padding: 0.75rem 1.5rem;
+      border-radius: 5px;
       cursor: pointer;
-      margin-right: 1rem;
+      font-size: 0.9rem;
+      white-space: nowrap;
+      transition: background-color 0.2s;
+      border: none;
     }
-    input[type="file"]::-webkit-file-upload-button:hover {
+    .file-input-label:hover {
       background-color: #e91e63;
     }
+    .file-input-label.file-selected {
+      background-color: #4caf50;
+    }
+    .file-input-label.file-selected:hover {
+      background-color: #45a049;
+    }
     .file-info {
-      font-size: 0.9rem;
+      font-size: 0.85rem;
       color: #ccc;
-      margin-top: 0.5rem;
       transition: all 0.3s ease;
     }
     .file-info.hidden {
@@ -179,12 +188,16 @@
 <h1>BeJUG Raffle</h1>
 
 <div class="input-section">
-  <input type="text" id="nameInput" placeholder="Type a name and press Enter" aria-label="Add participant name" />
-
-  <div class="file-upload" id="fileUploadSection">
-    <div class="upload-label" id="uploadLabel">Or upload CSV file with participants:</div>
-    <input type="file" id="csvFile" accept=".csv" aria-label="Upload CSV file" />
-    <div class="file-info" id="fileInfo">Expected CSV format with "Name" column (and other optional columns like Title, Email, etc.)</div>
+  <div class="unified-input" id="unifiedInputSection">
+    <div class="input-header" id="inputHeader">Add participants manually or upload CSV file:</div>
+    <div class="input-controls">
+      <input type="text" id="nameInput" placeholder="Type a name and press Enter" aria-label="Add participant name" />
+      <div class="file-input-wrapper">
+        <input type="file" id="csvFile" accept=".csv" aria-label="Upload CSV file" />
+        <span class="file-input-label">Choose CSV</span>
+      </div>
+    </div>
+    <div class="file-info" id="fileInfo">CSV format: requires "Name" column (other columns like Title, Email, etc. are ignored)</div>
     <div id="fileMessage"></div>
   </div>
 </div>
@@ -209,9 +222,10 @@ <h1>BeJUG Raffle</h1>
 
   const nameInput = document.getElementById("nameInput");
   const csvFile = document.getElementById("csvFile");
-  const fileUploadSection = document.getElementById("fileUploadSection");
-  const uploadLabel = document.getElementById("uploadLabel");
+  const unifiedInputSection = document.getElementById("unifiedInputSection");
+  const inputHeader = document.getElementById("inputHeader");
   const fileInfo = document.getElementById("fileInfo");
+  const fileInputLabel = document.querySelector(".file-input-label");
   const participantsList = document.getElementById("participantsList");
   const participantsCount = document.getElementById("participantsCount");
   const drawButton = document.getElementById("drawButton");
@@ -233,8 +247,10 @@ <h1>BeJUG Raffle</h1>
   csvFile.addEventListener("change", function (e) {
     const file = e.target.files[0];
     if (file && file.type === "text/csv") {
-      // Make upload section compact
-      makeUploadSectionCompact();
+      // Make input section compact and update button
+      makeInputSectionCompact();
+      fileInputLabel.textContent = "✓ CSV Loaded";
+      fileInputLabel.classList.add('file-selected');
 
       const reader = new FileReader();
       reader.onload = function (event) {
@@ -325,18 +341,20 @@ <h1>BeJUG Raffle</h1>
     return result;
   }
 
-  function makeUploadSectionCompact() {
-    fileUploadSection.classList.add('compact');
-    uploadLabel.classList.add('compact');
+  function makeInputSectionCompact() {
+    unifiedInputSection.classList.add('compact');
+    inputHeader.classList.add('compact');
     fileInfo.classList.add('hidden');
-    uploadLabel.textContent = "CSV file selected";
+    inputHeader.textContent = "Add more participants or clear all:";
   }
 
-  function makeUploadSectionExpanded() {
-    fileUploadSection.classList.remove('compact');
-    uploadLabel.classList.remove('compact');
+  function makeInputSectionExpanded() {
+    unifiedInputSection.classList.remove('compact');
+    inputHeader.classList.remove('compact');
     fileInfo.classList.remove('hidden');
-    uploadLabel.textContent = "Or upload CSV file with participants:";
+    inputHeader.textContent = "Add participants manually or upload CSV file:";
+    fileInputLabel.textContent = "Choose CSV";
+    fileInputLabel.classList.remove('file-selected');
   }
 
   function showFileMessage(message, type) {
@@ -384,7 +402,7 @@ <h1>BeJUG Raffle</h1>
     animationDiv.textContent = "";
     winnerImage.style.display = "none";
     csvFile.value = "";
-    makeUploadSectionExpanded();
+    makeInputSectionExpanded();
     showFileMessage("All participants cleared.", "success");
   }