copy card URL to clipboard, arrow for threat/interface/etc

lukifer · Oct 5, 2024 · e5039c6 · e5039c6
1 parent 6dad9c1
commit e5039c6
Show file tree

Hide file tree

Showing 11 changed files with 270 additions and 67 deletions.
diff --git a/README.md b/README.md
@@ -9,7 +9,6 @@ Fully Operational&trade;, but WIP/YMMV.
 - Fix subroutine indendation
 - Fix ID images
 - Markdown-style bold formatting
-- Threat/Interface arrow icon
 - Persistence
 - Improve template and font integration
 - Improve image resizing perf

diff --git a/index.html b/index.html
@@ -6,7 +6,7 @@
     <meta name="theme-color" content="#000000" />
     <link href='//fonts.googleapis.com/css?family=Lato|Noto+Serif:400,400italic,700|Cinzel:700|Orbitron:500,900' rel='stylesheet' type='text/css'>
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
-    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
+    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
     <title>Self-Modifying Card</title>
   </head>
   <body>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -20,7 +20,9 @@
   },
   "dependencies": {
     "@thisbeyond/solid-select": "^0.14.0",
+    "base62str": "^1.0.10",
     "html2canvas": "^1.4.1",
+    "search-params": "^4.0.1",
     "solid-bootstrap": "^1.0.20",
     "solid-js": "^1.8.17",
     "textfit": "^2.4.0",

diff --git a/public/img/jhow1.png b/public/img/jhow1.png
diff --git a/public/img/jhow2.jpg b/public/img/jhow2.jpg
diff --git a/src/App.scss b/src/App.scss
@@ -4,6 +4,7 @@
 label {
   user-select: none;
   cursor: pointer;
+  white-space: nowrap;
 }
 
 .form-group.checkbox {
@@ -12,6 +13,7 @@ label {
   margin-bottom: 15px;
 }
 .card-controls {
+  margin: 1.5rem 0;
   white-space: nowrap;
 }
 .card-controls label,
@@ -31,12 +33,26 @@ label {
   margin-left: 0.75rem;
   margin-bottom: 0;
 }
-.card-controls select {
+.select-wrapper {
+  position: relative;
+  &:before {
+    font-family: "Glyphicons Halflings";
+    position: absolute;
+    font-size: 1rem;
+    top: 1rem;
+    right: 0.5rem;
+    content: "\e252";
+  }
+}
+.card-controls .select-wrapper {
   width: auto;
-  padding: 6px;
   display: inline-block;
   vertical-align: middle;
 }
+.card-controls select {
+  width: auto;
+  padding: 6px;
+}
 
 @font-face {
   font-family: 'Netrunner';
@@ -210,13 +226,39 @@ footer {
   position: relative;
 }
 
+.copy-clipboard {
+  width: 355px;
+  margin-top: 1rem;
+  font-size: 1rem;
+  i {
+    margin-right: 0.25rem;
+  }
+  .complete {
+    color: green;
+    margin-top: 1rem;
+    .warning {
+      color: gray;
+    }
+  }
+  pre {
+    margin-top: 0.5rem;
+    font-size: 1rem;
+    padding: 0.5rem;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+}
+
 .card {
   width: 375px;
   height: 525px;
   background-position: top left;
   background-size: contain;
   position: relative;
   margin-bottom: 10px;
+  border: 0;
+  border-radius: 2rem;
 
   &.has-image img {
     cursor: move;