claude: add dropdown with pre-determined URLs

Add a dropdown that can be used to select from 10 pre-determined Parquet URLs, which will populate the Parquet File URL input box. Use example.com as the pre-determined URL for
all of them, for now -- I will separately research which URLs to use.

(I also manually edited two of the pre-determined URLs.)

index.html

@@ -15,6 +15,23 @@
 			<p class="subtitle">Query parquet files using SQL with DuckDB WASM</p>
 
 			<form id="queryForm">
+				<div class="form-group">
+					<label for="urlSelect">Select Example Dataset</label>
+					<select id="urlSelect">
+						<option value="">-- Choose a dataset or enter custom URL below --</option>
+						<option value="https://huggingface.co/datasets/PleIAs/SYNTH/resolve/refs%2Fconvert%2Fparquet/default/partial-train/0000.parquet">PleIAs/SYNTH</option>
+						<option value="https://huggingface.co/datasets/facebook/omnilingual-asr-corpus/resolve/refs%2Fconvert%2Fparquet/gby_Latn/train/0000.parquet">facebook/omnilingual-asr-corpus</option>
+						<option value="https://example.com/dataset3.parquet">Dataset 3</option>
+						<option value="https://example.com/dataset4.parquet">Dataset 4</option>
+						<option value="https://example.com/dataset5.parquet">Dataset 5</option>
+						<option value="https://example.com/dataset6.parquet">Dataset 6</option>
+						<option value="https://example.com/dataset7.parquet">Dataset 7</option>
+						<option value="https://example.com/dataset8.parquet">Dataset 8</option>
+						<option value="https://example.com/dataset9.parquet">Dataset 9</option>
+						<option value="https://example.com/dataset10.parquet">Dataset 10</option>
+					</select>
+				</div>
+
 				<div class="form-group">
 					<label for="parquetUrl">Parquet File URL</label>
 					<input
@@ -30,7 +47,7 @@
 					<textarea
 						id="sqlQuery"
 						rows="4"
-						placeholder="SELECT * FROM data LIMIT 10"
+						placeholder="SELECT * FROM train LIMIT 10"
 						required
 					></textarea>
 				</div>
@@ -176,6 +193,14 @@
 				}
 			}
 
+			// Handle dropdown selection
+			document.getElementById('urlSelect').addEventListener('change', function(e) {
+				const selectedUrl = e.target.value;
+				if (selectedUrl) {
+					document.getElementById('parquetUrl').value = selectedUrl;
+				}
+			});
+
 			// Set up event listeners
 			document.getElementById('queryForm').addEventListener('submit', handleSubmit);
 

style.css

@@ -50,6 +50,7 @@ label {
 	font-size: 0.95rem;
 }
 
+select,
 input[type="text"],
 textarea {
 	width: 100%;
@@ -57,10 +58,21 @@ textarea {
 	border: 2px solid #e2e8f0;
 	border-radius: 8px;
 	font-size: 0.95rem;
-	font-family: 'Monaco', 'Courier New', monospace;
 	transition: border-color 0.2s, box-shadow 0.2s;
 }
 
+select {
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif;
+	background: white;
+	cursor: pointer;
+}
+
+input[type="text"],
+textarea {
+	font-family: 'Monaco', 'Courier New', monospace;
+}
+
+select:focus,
 input[type="text"]:focus,
 textarea:focus {
 	outline: none;