add 404 page for incorrect download codes

static/css/transbeam.css

@@ -0,0 +1,172 @@
+body {
+    text-align: center;
+    font-family: sans-serif;
+    max-width: 512px;
+    margin: 0.5em auto;
+    padding: 0 1em;
+}
+
+#header h1 {
+    margin-top: 5px;
+    color: black;
+}
+
+#header a {
+    text-decoration: none;
+}
+
+#message {
+    border: 1px solid;
+    border-radius: 4px;
+    padding: 10px;
+    width: fit-content;
+    margin: 10px auto;
+}
+
+#progress_container {
+    margin: 10px auto;
+}
+
+#progress_bar {
+    height: 20px;
+    border-radius: 10px;
+    border: 1px solid #48f;
+    background-image: linear-gradient(0deg, #27f, #27f);
+    background-repeat: no-repeat;
+    background-size: 0;
+}
+
+#download_code_container {
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    padding: 10px;
+    cursor: pointer;
+    width: fit-content;
+    margin: 10px auto;
+    position: relative;
+}
+
+#download_code_container:hover {
+    border-color: #777;
+}
+
+#download_code_main {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.copy_button {
+    width: 18px;
+    height: 18px;
+    background-color: #333;
+    mask-image: url("images/feather-icons/copy.svg");
+    mask-size: contain;
+    mask-repeat: no-repeat;
+}
+
+#download_code_container:hover .copy_button {
+    background-color: #000;
+}
+
+#copied_message {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    margin: auto;
+    height: fit-content;
+    display: none;
+}
+#download_code_container.copied #copied_message {
+    display: revert;
+}
+#download_code_container.copied #download_code_main {
+    visibility: hidden;
+}
+
+
+table {
+    border-collapse: collapse;
+    margin: 20px auto;
+}
+
+tr {
+    background-image: linear-gradient(0deg, #7af, #7af);
+    background-repeat: no-repeat;
+    background-size: 0;
+}
+
+tr + tr td {
+    border-top: 1px solid #ddd;
+}
+
+td {
+    padding: 10px;
+}
+
+.delete_button {
+    background-color: #888;
+    mask-image: url("images/feather-icons/x.svg");
+    mask-size: contain;
+    mask-repeat: no-repeat;
+    mask-position: center;
+    padding-left: 15px;
+    padding-right: 15px;
+    cursor: pointer;
+}
+
+.delete_button:hover {
+    background-color: #f00;
+}
+
+td.file_size {
+    text-align: right;
+}
+
+td.file_name {
+    text-align: left;
+}
+
+input[type="file"] {
+    display: none;
+}
+
+button, .fake_button, input[type="submit"] {
+    font-size: 18px;
+    color: #000;
+    background-color: #ccc;
+    border: 1px solid #bbb;
+    border-radius: 4px;
+    padding: 6px 12px;
+    cursor: pointer;
+}
+
+button:hover, .fake_button:hover, input[type="submit"]:hover {
+    background-color: #aaa;
+}
+
+button:disabled, input:disabled + .fake_button, input[type="submit"]:disabled {
+    color: #666;
+    background-color: #eee;
+    border-color: #ddd;
+    cursor: not-allowed;
+}
+
+#lifetime_container {
+    margin-top: 10px;
+}
+
+input[type="text"], input[type="password"] {
+    font-size: 18px;
+    margin-bottom: 10px;
+}
+
+.section {
+    margin: 30px auto;
+}
+
+#footer h5 {
+    margin: 5px auto;
+}