feat: add 404 page

frontend/html/404.html

@@ -0,0 +1,13 @@
+{% extends "layout.html" %}
+
+{% block content %}
+    <div class="not-found container">
+        <div class="not-found__close"></div>
+        <h1 class="not-found__logo">vas404k</h1>
+        <p class="not-found__description">Запрошеная страница выгорела и уехала в отпуск</p>
+
+        <emoji-clicker></emoji-clicker>
+
+        <a href="{% url "index" %}" class="button not-found__button">На главную</a>
+    </div>
+{% endblock %}

frontend/static/css/components/emoji-clicker.css

@@ -0,0 +1,25 @@
+.emoji-clicker {
+    display: block;
+    margin: 0 auto;
+    font-size: 100px;
+    padding-bottom: 35px;
+    cursor: pointer;
+    user-select: none;
+}
+
+.bounce-enter-active {
+    cursor: pointer;
+    animation: bounce-in 0.5s;
+}
+
+@keyframes bounce-in {
+    0% {
+        transform: scale(0.25);
+    }
+    50% {
+        transform: scale(1.1);
+    }
+    100% {
+        transform: scale(1);
+    }
+}

frontend/static/css/index.css

@@ -8,6 +8,7 @@
 @import "./theme.css";
 @import "./base.css";
 @import "./layout.css";
+@import "./not-found.css";
 @import "./components.css";
 @import "./components/menu.css";
 @import "./components/auth.css";
@@ -29,3 +30,4 @@
 @import "./components/select.css";
 @import "./components/intro.css";
 @import "./components/apps.css";
+@import "./components/emoji-clicker.css";

frontend/static/css/not-found.css

@@ -0,0 +1,60 @@
+.not-found {
+    position: relative;
+    padding-top: 75px;
+    padding-bottom: 75px;
+    text-align: center;
+    font-size: 110%;
+    max-width: var(--max-content-width);
+    margin: 0 auto;
+}
+
+.not-found__logo {
+    color: white;
+    font-size: 4em;
+    font-weight: 100;
+    mix-blend-mode: difference;
+}
+
+.not-found__close {
+    top: 13%;
+    left: 47%;
+    right: 0;
+    position: absolute;
+    display: block;
+    width: 125px;
+    height: 125px;
+    overflow: hidden;
+
+    &::before, &::after {
+        content: '';
+        position: absolute;
+        height: 40px;
+        width: 100%;
+        top: 40%;
+        left: 0;
+        margin-top: -1px;
+        background: #000;
+    }
+
+    &::before {
+        transform: rotate(45deg);
+    }
+
+    &::after {
+        transform: rotate(-45deg);
+
+    }
+}
+
+.not-found__description {
+    padding-top: 50px;
+    padding-bottom: 50px;
+    max-width: 50%;
+    margin: 0 auto;
+    font-size: 2em;
+}
+
+.not-found__button {
+    width: 100%;
+    max-width: 200px;
+}

frontend/static/js/components/EmojiClicker.vue

@@ -0,0 +1,36 @@
+<template>
+    <div class="emoji-clicker" @click="handleClick">
+        {{ emojis[currentEmojiIndex] }}
+    </div>
+</template>
+
+<script>
+const EMOJIS = ["✈️", "🏖️", "🏔️", "🏝️"];
+
+export default {
+    name: "EmojiClicker",
+    data() {
+        return {
+            emojis: EMOJIS,
+            currentEmojiIndex: 0
+        };
+    },
+    methods: {
+        triggerAnimation(event) {
+            setTimeout(() => {
+                event.target.classList.remove("bounce-enter-active");
+            }, 500);
+            event.target.classList.add("bounce-enter-active");
+        },
+        handleClick(event) {
+            if (this.currentEmojiIndex < this.emojis.length - 1) {
+                this.triggerAnimation(event);
+                this.currentEmojiIndex++;
+            } else {
+                this.triggerAnimation(event);
+                this.currentEmojiIndex = 0; // Reset to initial state
+            }
+        }
+    }
+};
+</script>

frontend/static/js/main.js

@@ -28,6 +28,7 @@ Vue.component("v-select", vSelect);
 Vue.component("tag-select", () => import("./components/TagSelect.vue"));
 Vue.component("simple-select", () => import("./components/SimpleSelect.vue"));
 Vue.component("reply-form", () => import("./components/ReplyForm.vue"));
+Vue.component("emoji-clicker", () => import("./components/EmojiClicker.vue"));
 
 // Since our pages have user-generated content, any fool can insert "{{" on the page and break it.
 // We have no other choice but to completely turn off template matching and leave it on only for components.