[S] Style

web/src/App.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
   import { post } from "./sdk";
+  import { slide } from "svelte/transition";
 
   let inputCard = ""
   let inputName = ""
 
-  let [error, loading, done] = ["", false, false]
+  let [error, loading, done, edit] = ["", false, false, false]
 
   function scan(uid: string) {
     loading = true
@@ -40,16 +41,23 @@
 
 <main>
   <h1>AimeWeb</h1>
+  <p>点击一个卡就可以刷了，没有卡的话请先添加卡片。如果不知道卡号的话可以去 NFC Tools 扫</p>
   <div class="error">{error}</div>
 
-  {#each cards as card}
-    <div class="card">
-      <h2>{card.name}</h2>
-      <p>{card.id}</p>
-      <button on:click={() => scan(card.id)}>刷</button>
-      <button on:click={() => deleteCard(card)}>删</button>
-    </div>
-  {/each}
+  <div class="cards">
+    {#each cards as card}
+      <div class="flex gap-2">
+        <button class="card" on:click={() => scan(card.id)}>{card.name} <span>{card.id}</span></button>
+        {#if edit}
+          <button transition:slide={{axis: "x"}}>删</button>
+        {/if}
+      </div>
+    {/each}
+  </div>
+
+  <button on:click={() => edit = !edit}>编辑</button>
+
+  <h2>添加卡片</h2>
 
   <div class="controls">
     <div class="input">
@@ -63,3 +71,75 @@
     <button on:click={addCard}>添加</button>
   </div>
 </main>
+
+<style lang="sass">
+main
+  display: flex
+  flex-direction: column
+  gap: 10px
+  max-width: 500px
+  margin: 0 auto
+
+  > h1
+    font-size: 2rem
+    margin: 0
+
+  > h2
+    font-size: 1.5rem
+    margin: 50px 0 0
+
+  .error
+    color: #ff6e6e
+
+  .flex-h
+    display: flex
+    align-items: center
+    justify-content: center
+    width: 100%
+    gap: 10px
+
+  .card
+    text-align: left
+    display: flex
+    justify-content: space-between
+    padding: 1rem
+    width: 100%
+
+    span
+      opacity: 0.8
+
+  .controls
+    display: flex
+    flex-direction: column
+    gap: 10px
+
+  .input
+    display: flex
+    flex-direction: column
+    align-items: flex-start
+    width: 100%
+    gap: 5px
+
+  input, textarea
+    border-radius: 8px
+    border: 1px solid transparent
+    padding: 0.6em 1.2em
+    font-size: 1em
+    font-weight: 500
+    font-family: inherit
+    background-color: rgba(0, 0, 0, 0.2)
+    transition: all 0.5s ease
+    box-sizing: border-box
+    resize: none
+    width: 100%
+
+  input:focus, input:focus-visible
+    border: 1px solid #646cff
+    outline: none
+
+  //input.warning
+  //  border: 1px solid vars.$c-warning
+  //
+  //input.error
+  //  border: 1px solid vars.$c-error
+</style>

web/src/app.css

@@ -1,9 +1,11 @@
+@import "tailwindcss";
+
 :root {
   font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;
   font-weight: 400;
 
-  color-scheme: light dark;
+  color-scheme: dark;
   color: rgba(255, 255, 255, 0.87);
   background-color: #242424;
 
@@ -13,6 +15,12 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+html, body {
+  height: 100%;
+  width: 100%;
+  margin: 0;
+}
+
 a {
   font-weight: 500;
   color: #646cff;
@@ -22,19 +30,6 @@ a:hover {
   color: #535bf2;
 }
 
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
 .card {
   padding: 2em;
 }
@@ -64,16 +59,3 @@ button:focus,
 button:focus-visible {
   outline: 4px auto -webkit-focus-ring-color;
 }
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}