jclyo1 commited on
Commit
aa2d08f
1 Parent(s): 8614f23

design polish

Browse files
Files changed (2) hide show
  1. static/index.html +20 -8
  2. static/style.css +12 -3
static/index.html CHANGED
@@ -2,8 +2,11 @@
2
  <html lang="en">
3
  <head>
4
  <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1">
6
-
 
 
 
7
  <!-- Bootstrap CSS -->
8
  <link
9
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
@@ -29,7 +32,10 @@
29
  <script src="https://unpkg.com/@peculiar/x509"></script>
30
  <script type="text/javascript" src="json_viewer.js"></script>
31
 
32
- <script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.6/iframeResizer.contentWindow.min.js" async=""></script>
 
 
 
33
  </head>
34
  <body>
35
  <div class="container-fluid mt-2" id="head">
@@ -50,8 +56,8 @@
50
  <div class="alert alert-primary d-md-none" role="alert">
51
  <h4>Support our work!</h4>
52
  <p>
53
- <img src="images/heart_icon.svg" /> Like this Space in the nav
54
- above
55
  </p>
56
  <p>
57
  <img src="images/wave_icon.svg" /> Join the conversation in
@@ -113,12 +119,14 @@
113
  have or that's been shared with you.
114
  </p>
115
  </div>
 
 
116
  <div class="col flex-grow-0">
117
  <a id="download-button" class="btn btn-outline-primary"
118
  >Download image <img src="images/download_icon.svg"
119
  /></a>
120
  </div>
121
- <div class="col flex-grow-0">
122
  <button
123
  type="button"
124
  id="goto-verify-button"
@@ -296,7 +304,9 @@
296
  >Truepic</a
297
  >
298
  and
299
- <a href="https://steg.ai/tos.html" target="_blank">Steg.AI</a>
 
 
300
  </label>
301
  </div>
302
 
@@ -367,7 +377,9 @@
367
  >Truepic</a
368
  >
369
  and
370
- <a href="https://steg.ai/tos.html" target="_blank">Steg.AI</a>
 
 
371
  </label>
372
  </div>
373
 
 
2
  <html lang="en">
3
  <head>
4
  <meta charset="utf-8" />
5
+ <meta
6
+ name="viewport"
7
+ content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1"
8
+ />
9
+
10
  <!-- Bootstrap CSS -->
11
  <link
12
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
 
32
  <script src="https://unpkg.com/@peculiar/x509"></script>
33
  <script type="text/javascript" src="json_viewer.js"></script>
34
 
35
+ <script
36
+ src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.6/iframeResizer.contentWindow.min.js"
37
+ async=""
38
+ ></script>
39
  </head>
40
  <body>
41
  <div class="container-fluid mt-2" id="head">
 
56
  <div class="alert alert-primary d-md-none" role="alert">
57
  <h4>Support our work!</h4>
58
  <p>
59
+ <img src="images/heart_icon.svg" /> Like this Space in the
60
+ nav above
61
  </p>
62
  <p>
63
  <img src="images/wave_icon.svg" /> Join the conversation in
 
119
  have or that's been shared with you.
120
  </p>
121
  </div>
122
+ </div>
123
+ <div class="row mt-4">
124
  <div class="col flex-grow-0">
125
  <a id="download-button" class="btn btn-outline-primary"
126
  >Download image <img src="images/download_icon.svg"
127
  /></a>
128
  </div>
129
+ <div class="col">
130
  <button
131
  type="button"
132
  id="goto-verify-button"
 
304
  >Truepic</a
305
  >
306
  and
307
+ <a href="https://steg.ai/tos.html" target="_blank"
308
+ >Steg.AI</a
309
+ >
310
  </label>
311
  </div>
312
 
 
377
  >Truepic</a
378
  >
379
  and
380
+ <a href="https://steg.ai/tos.html" target="_blank"
381
+ >Steg.AI</a
382
+ >
383
  </label>
384
  </div>
385
 
static/style.css CHANGED
@@ -62,22 +62,24 @@ textarea {
62
  font-size: 12px;
63
  padding: 7px;
64
  position: relative;
65
- top: -0.5rem;
66
  left: 1rem;
67
  }
68
 
69
  .tabs div {
70
  margin-right: 1rem;
71
  cursor: pointer;
 
72
  }
73
 
74
  .tabs div.active {
75
  border-bottom: 3px solid var(--primary-color);
 
76
  }
77
 
78
  .right-column {
79
  flex: 0 0 465px;
80
- margin: 1rem;
81
  }
82
 
83
  .image-container {
@@ -215,8 +217,16 @@ img.thumbnail {
215
 
216
  .how-it-works {
217
  margin-top: 3rem;
 
 
 
218
  font-size: 12px;
219
  color: #56687a;
 
 
 
 
 
220
  }
221
 
222
  .how-it-works strong {
@@ -382,4 +392,3 @@ img.thumbnail {
382
  margin: 1rem 0;
383
  }
384
  }
385
-
 
62
  font-size: 12px;
63
  padding: 7px;
64
  position: relative;
65
+ top: -4px;
66
  left: 1rem;
67
  }
68
 
69
  .tabs div {
70
  margin-right: 1rem;
71
  cursor: pointer;
72
+ padding-bottom: 5px;
73
  }
74
 
75
  .tabs div.active {
76
  border-bottom: 3px solid var(--primary-color);
77
+ color: var(--primary-color);
78
  }
79
 
80
  .right-column {
81
  flex: 0 0 465px;
82
+ margin: 0 1rem;
83
  }
84
 
85
  .image-container {
 
217
 
218
  .how-it-works {
219
  margin-top: 3rem;
220
+ }
221
+
222
+ .how-it-works p {
223
  font-size: 12px;
224
  color: #56687a;
225
+ line-height: 16px;
226
+ }
227
+
228
+ .how-it-works p {
229
+ font-size: 12px;
230
  }
231
 
232
  .how-it-works strong {
 
392
  margin: 1rem 0;
393
  }
394
  }