Fix CSS, word separator

junderw · junderw · commit 13131690636e · 2025-05-18T14:45:36.000+09:00
diff --git a/jp_diceware.html b/jp_diceware.html
@@ -6,25 +6,64 @@
   <style>
     body {
       font-family: sans-serif;
-      padding: 2em;
+      margin: 0;
+      padding: 0;
+      height: 100vh;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      background: #f5f5f5;
     }
+
+    main {
+      width: 80%;
+      max-width: 600px;
+      text-align: center;
+    }
+
+    h1 {
+      font-size: 2.5rem;
+      margin-bottom: 1rem;
+    }
+
+    label, input, button {
+      font-size: 1.25rem;
+    }
+
     input[type="number"] {
-      width: 60px;
+      width: 80px;
+      padding: 0.5rem;
+      margin: 0 0.5rem;
+    }
+
+    button {
+      padding: 0.5rem 1rem;
+      cursor: pointer;
     }
+
     .word-list {
-      margin-top: 1em;
-      white-space: pre;
+      margin-top: 1.5rem;
+      padding: 1rem;
+      background: #fff;
+      border: 1px solid #ccc;
+      border-radius: 8px;
+      white-space: pre-wrap;
       font-family: monospace;
+      font-size: 1.25rem;
     }
   </style>
 </head>
 <body>
+<main>
   <h1>🎲 Word Roller</h1>
-  <label for="numWords">Number of words (1–10):</label>
-  <input type="number" id="numWords" min="1" max="10" value="3">
-  <button onclick="rollWords()">Roll!</button>
-
+  <div>
+    <label for="numWords">Number of words (1–10):</label>
+    <input type="number" id="numWords" min="1" max="10" value="3">
+    <button onclick="rollWords()">Roll!</button>
+  </div>
   <div class="word-list" id="result">Loading wordlist...</div>
+</main>
 
   <script>
     let csvData = [];
@@ -68,7 +107,7 @@ <h1>🎲 Word Roller</h1>
       // Extract columns 2 and 4
       const output = shuffled.map(row => {
         const cols = row.split(',');
-        return `${cols[1]}, ${cols[3]}`;
+        return `${cols[1]}  -  ${cols[2]}  -  ${cols[3]}`;
       }).join('\n');
 
       resultEl.textContent = output;
