update style test

tksarah · Jan 4, 2025 · 224daf4 · 224daf4
1 parent 97198d6
commit 224daf4
Show file tree

Hide file tree

Showing 2 changed files with 97 additions and 17 deletions.
diff --git a/docs/test/index.html b/docs/test/index.html
@@ -3,25 +3,28 @@
 <head>
     <meta charset="UTF-8">
     <title>ID Search</title>
+    <link rel="stylesheet" href="styles.css">
 </head>
 <body>
-    <h1>ID Search</h1>
-    <form id="search-form">
-        <label for="csv-file">CSVファイルを選択:</label>
-        <input type="file" id="csv-file" name="csv-file" accept=".csv" required>
-        <button type="submit">検索</button>
-    </form>
-    <table id="results-table" border="1">
-        <thead>
-            <tr>
-                <th>StakerAddress</th>
-                <th>Raw Value</th>
-                <th>Amount</th>
-            </tr>
-        </thead>
-        <tbody>
-        </tbody>
-    </table>
+    <div class="container">
+        <h1>ID Search</h1>
+        <form id="search-form">
+            <label for="csv-file">CSVファイルを選択:</label>
+            <input type="file" id="csv-file" name="csv-file" accept=".csv" required>
+            <button type="submit">検索</button>
+        </form>
+        <table id="results-table">
+            <thead>
+                <tr>
+                    <th>StakerAddress</th>
+                    <th>Raw Value</th>
+                    <th>Amount</th>
+                </tr>
+            </thead>
+            <tbody>
+            </tbody>
+        </table>
+    </div>
     <script src="https://cdn.jsdelivr.net/npm/papaparse@5.3.0/papaparse.min.js"></script>
     <script src="script.js"></script>
 </body>

diff --git a/docs/test/styles.css b/docs/test/styles.css
@@ -0,0 +1,77 @@
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f4f4f9;
+    color: #333;
+    margin: 0;
+    padding: 0;
+}
+
+.container {
+    max-width: 800px;
+    margin: 50px auto;
+    padding: 20px;
+    background: #fff;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    border-radius: 8px;
+}
+
+h1 {
+    text-align: center;
+    color: #333;
+    margin-bottom: 20px;
+}
+
+form {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 30px;
+}
+
+label {
+    margin-right: 10px;
+    font-weight: bold;
+}
+
+input[type="file"] {
+    margin-right: 10px;
+}
+
+button {
+    background-color: #007bff;
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    cursor: pointer;
+    border-radius: 5px;
+    font-size: 16px;
+}
+
+button:hover {
+    background-color: #0056b3;
+}
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-top: 20px;
+}
+
+thead {
+    background-color: #007bff;
+    color: white;
+}
+
+th, td {
+    padding: 12px 15px;
+    text-align: left;
+    border-bottom: 1px solid #ddd;
+}
+
+tbody tr:nth-child(even) {
+    background-color: #f2f2f2;
+}
+
+tbody tr:hover {
+    background-color: #e9f5ff;
+}
+