diff options
| author | adryd <me@adryd.com> | 2022-06-29 21:07:07 -0400 |
|---|---|---|
| committer | adryd <me@adryd.com> | 2022-06-29 21:07:07 -0400 |
| commit | cb0859e4fa4df59feb939b5d1d4388a2702949b4 (patch) | |
| tree | d8d025b47f715723fb79a663b00bede80828efc7 | |
| parent | 91f255d94ccae3ca120b1b6f3286eb83d8d7d4f2 (diff) | |
added edit modal mockup
| -rw-r--r-- | src/editModal.html | 121 | ||||
| -rw-r--r-- | src/index.css | 2 |
2 files changed, 121 insertions, 2 deletions
diff --git a/src/editModal.html b/src/editModal.html new file mode 100644 index 0000000..93672a9 --- /dev/null +++ b/src/editModal.html @@ -0,0 +1,121 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="UTF-8" /> + <meta http-equiv="X-UA-Compatible" content="IE=edge" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> + <title>Document</title> + <style> + body { + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", + "Helvetica Neue", sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + color: #18181b; + background-color: #ffffff; + display: flex; + align-items: center; + align-content: center; + height: 100vh; + margin: 0; + } + + main { + border-radius: 16px; + margin: auto; + border: 1px solid rgb(212, 212, 216); + background-color: rgb(244, 244, 245); + padding: 32px; + } + + code { + font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", + monospace; + } + + select { + display: block; + padding: 0.5rem; + border-radius: 0.5rem; + border: solid 1px rgb(212, 212, 216); + } + + input { + display: block; + /* min-width: 320px; */ + padding: 0.5rem; + border-radius: 0.5rem; + border: 1px solid rgb(212, 212, 216); + } + .flex-row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + margin: 0 -0.25rem; + } + + .flex-row div { + padding: 0.25rem; + } + + label { + display: block; + padding: 0.4em 0; + } + h1 { + margin-top: 0.2rem; + } + button { + display: block; + padding: 0.5rem; + margin: 0.25rem 0.25rem; + font-size: 1rem; + border: medium none; + border-radius: 0.5rem; + color: rgb(250, 250, 250); + transition: background-color 0.2s ease-in-out 0s; + background-color: rgb(59, 130, 246); + } + </style> + </head> + <body> + <main> + <h1>Add record</h1> + <div class="flex-row"> + <div> + <label for="cuts">Type</label> + <select id="cuts" class="svelte-components-form-Select--1t68vuw"> + <option value="4sm">A</option> + <option value="5sm">AAAA</option> + <option value="5">CNAME</option> + <option value="6">MX</option> + <option value="6">NS</option> + </select> + </div> + <div> + <label for="name">Name</label> + <input id="name" /> + </div> + <div> + <label for="value">IPv4 Address</label> + <input id="value" /> + </div> + <div> + <label for="cuts">TTL</label> + <select id="cuts" class="svelte-components-form-Select--1t68vuw"> + <option value="4sm">1 Day</option> + <option value="5sm">AAAA</option> + <option value="5">CNAME</option> + <option value="6">MX</option> + <option value="6">NS</option> + </select> + </div> + </div> + <div class="flex-row"> + <button>Cancel</button> + <button>Update</button> + </div> + </main> + </body> +</html> diff --git a/src/index.css b/src/index.css index 48d907f..4016170 100644 --- a/src/index.css +++ b/src/index.css @@ -1,5 +1,3 @@ -@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&display=swap'); - body { margin: 0; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', |