📄 Make repository MPL-2.0

Reviewed-on: #45

.env

@@ -1,4 +1,4 @@
-PLAKKEN_LISTEN=:3000
+PLAKKEN_LISTEN=:5000
 PLAKKEN_REDIS_ADDRESS=localhost:6379
 PLAKKEN_REDIS_USER=
 PLAKKEN_REDIS_PASSWORD=

.golangci.yaml

@@ -12,6 +12,8 @@ linters:
     - structcheck
     - exhaustivestruct
     - nosnakecase
+    - gomnd
+    - execinquery
     # Too extremist/unusable
     - depguard
     - varnamelen

.woodpecker/build.yaml

@@ -3,7 +3,7 @@ steps:
     image: woodpeckerci/plugin-docker-buildx
     settings:
       repo: git.gnous.eu/${CI_REPO_OWNER}/plakken
-      dockerfile: docker/Dockerfile
+      dockerfile: deployement/docker/Dockerfile
       platforms: linux/amd64,linux/arm64/v8,linux/arm
       registry: https://git.gnous.eu
       tag: ${CI_COMMIT}
@@ -18,7 +18,7 @@ steps:
     image: woodpeckerci/plugin-docker-buildx
     settings:
       repo: git.gnous.eu/${CI_REPO_OWNER}/plakken
-      dockerfile: docker/Dockerfile
+      dockerfile: deployement/docker/Dockerfile
       platforms: linux/amd64,linux/arm64/v8,linux/arm
       registry: https://git.gnous.eu
       tags:

LICENSE

@@ -0,0 +1,374 @@
+Mozilla Public License Version 2.0
+==================================
+
+1. Definitions
+--------------
+
+1.1. "Contributor"
+    means each individual or legal entity that creates, contributes to
+    the creation of, or owns Covered Software.
+
+1.2. "Contributor Version"
+    means the combination of the Contributions of others (if any) used
+    by a Contributor and that particular Contributor's Contribution.
+
+1.3. "Contribution"
+    means Covered Software of a particular Contributor.
+
+1.4. "Covered Software"
+    means Source Code Form to which the initial Contributor has attached
+    the notice in Exhibit A, the Executable Form of such Source Code
+    Form, and Modifications of such Source Code Form, in each case
+    including portions thereof.
+
+1.5. "Incompatible With Secondary Licenses"
+    means
+
+    (a) that the initial Contributor has attached the notice described
+        in Exhibit B to the Covered Software; or
+
+    (b) that the Covered Software was made available under the terms of
+        version 1.1 or earlier of the License, but not also under the
+        terms of a Secondary License.
+
+1.6. "Executable Form"
+    means any form of the work other than Source Code Form.
+
+1.7. "Larger Work"
+    means a work that combines Covered Software with other material, in 
+    a separate file or files, that is not Covered Software.
+
+1.8. "License"
+    means this document.
+
+1.9. "Licensable"
+    means having the right to grant, to the maximum extent possible,
+    whether at the time of the initial grant or subsequently, any and
+    all of the rights conveyed by this License.
+
+1.10. "Modifications"
+    means any of the following:
+
+    (a) any file in Source Code Form that results from an addition to,
+        deletion from, or modification of the contents of Covered
+        Software; or
+
+    (b) any new file in Source Code Form that contains any Covered
+        Software.
+
+1.11. "Patent Claims" of a Contributor
+    means any patent claim(s), including without limitation, method,
+    process, and apparatus claims, in any patent Licensable by such
+    Contributor that would be infringed, but for the grant of the
+    License, by the making, using, selling, offering for sale, having
+    made, import, or transfer of either its Contributions or its
+    Contributor Version.
+
+1.12. "Secondary License"
+    means either the GNU General Public License, Version 2.0, the GNU
+    Lesser General Public License, Version 2.1, the GNU Affero General
+    Public License, Version 3.0, or any later versions of those
+    licenses.
+
+1.13. "Source Code Form"
+    means the form of the work preferred for making modifications.
+
+1.14. "You" (or "Your")
+    means an individual or a legal entity exercising rights under this
+    License. For legal entities, "You" includes any entity that
+    controls, is controlled by, or is under common control with You. For
+    purposes of this definition, "control" means (a) the power, direct
+    or indirect, to cause the direction or management of such entity,
+    whether by contract or otherwise, or (b) ownership of more than
+    fifty percent (50%) of the outstanding shares or beneficial
+    ownership of such entity.
+
+2. License Grants and Conditions
+--------------------------------
+
+2.1. Grants
+
+Each Contributor hereby grants You a world-wide, royalty-free,
+non-exclusive license:
+
+(a) under intellectual property rights (other than patent or trademark)
+    Licensable by such Contributor to use, reproduce, make available,
+    modify, display, perform, distribute, and otherwise exploit its
+    Contributions, either on an unmodified basis, with Modifications, or
+    as part of a Larger Work; and
+
+(b) under Patent Claims of such Contributor to make, use, sell, offer
+    for sale, have made, import, and otherwise transfer either its
+    Contributions or its Contributor Version.
+
+2.2. Effective Date
+
+The licenses granted in Section 2.1 with respect to any Contribution
+become effective for each Contribution on the date the Contributor first
+distributes such Contribution.
+
+2.3. Limitations on Grant Scope
+
+The licenses granted in this Section 2 are the only rights granted under
+this License. No additional rights or licenses will be implied from the
+distribution or licensing of Covered Software under this License.
+Notwithstanding Section 2.1(b) above, no patent license is granted by a
+Contributor:
+
+(a) for any code that a Contributor has removed from Covered Software;
+    or
+
+(b) for infringements caused by: (i) Your and any other third party's
+    modifications of Covered Software, or (ii) the combination of its
+    Contributions with other software (except as part of its Contributor
+    Version); or
+
+(c) under Patent Claims infringed by Covered Software in the absence of
+    its Contributions.
+
+This License does not grant any rights in the trademarks, service marks,
+or logos of any Contributor (except as may be necessary to comply with
+the notice requirements in Section 3.4).
+
+2.4. Subsequent Licenses
+
+No Contributor makes additional grants as a result of Your choice to
+distribute the Covered Software under a subsequent version of this
+License (see Section 10.2) or under the terms of a Secondary License (if
+permitted under the terms of Section 3.3).
+
+2.5. Representation
+
+Each Contributor represents that the Contributor believes its
+Contributions are its original creation(s) or it has sufficient rights
+to grant the rights to its Contributions conveyed by this License.
+
+2.6. Fair Use
+
+This License is not intended to limit any rights You have under
+applicable copyright doctrines of fair use, fair dealing, or other
+equivalents.
+
+2.7. Conditions
+
+Sections 3.1, 3.2, 3.3, and 3.4 are conditions of the licenses granted
+in Section 2.1.
+
+3. Responsibilities
+-------------------
+
+3.1. Distribution of Source Form
+
+All distribution of Covered Software in Source Code Form, including any
+Modifications that You create or to which You contribute, must be under
+the terms of this License. You must inform recipients that the Source
+Code Form of the Covered Software is governed by the terms of this
+License, and how they can obtain a copy of this License. You may not
+attempt to alter or restrict the recipients' rights in the Source Code
+Form.
+
+3.2. Distribution of Executable Form
+
+If You distribute Covered Software in Executable Form then:
+
+(a) such Covered Software must also be made available in Source Code
+    Form, as described in Section 3.1, and You must inform recipients of
+    the Executable Form how they can obtain a copy of such Source Code
+    Form by reasonable means in a timely manner, at a charge no more
+    than the cost of distribution to the recipient; and
+
+(b) You may distribute such Executable Form under the terms of this
+    License, or sublicense it under different terms, provided that the
+    license for the Executable Form does not attempt to limit or alter
+    the recipients' rights in the Source Code Form under this License.
+
+3.3. Distribution of a Larger Work
+
+You may create and distribute a Larger Work under terms of Your choice,
+provided that You also comply with the requirements of this License for
+the Covered Software. If the Larger Work is a combination of Covered
+Software with a work governed by one or more Secondary Licenses, and the
+Covered Software is not Incompatible With Secondary Licenses, this
+License permits You to additionally distribute such Covered Software
+under the terms of such Secondary License(s), so that the recipient of
+the Larger Work may, at their option, further distribute the Covered
+Software under the terms of either this License or such Secondary
+License(s).
+
+3.4. Notices
+
+You may not remove or alter the substance of any license notices
+(including copyright notices, patent notices, disclaimers of warranty,
+or limitations of liability) contained within the Source Code Form of
+the Covered Software, except that You may alter any license notices to
+the extent required to remedy known factual inaccuracies.
+
+3.5. Application of Additional Terms
+
+You may choose to offer, and to charge a fee for, warranty, support,
+indemnity or liability obligations to one or more recipients of Covered
+Software. However, You may do so only on Your own behalf, and not on
+behalf of any Contributor. You must make it absolutely clear that any
+such warranty, support, indemnity, or liability obligation is offered by
+You alone, and You hereby agree to indemnify every Contributor for any
+liability incurred by such Contributor as a result of warranty, support,
+indemnity or liability terms You offer. You may include additional
+disclaimers of warranty and limitations of liability specific to any
+jurisdiction.
+
+4. Inability to Comply Due to Statute or Regulation
+---------------------------------------------------
+
+If it is impossible for You to comply with any of the terms of this
+License with respect to some or all of the Covered Software due to
+statute, judicial order, or regulation then You must: (a) comply with
+the terms of this License to the maximum extent possible; and (b)
+describe the limitations and the code they affect. Such description must
+be placed in a text file included with all distributions of the Covered
+Software under this License. Except to the extent prohibited by statute
+or regulation, such description must be sufficiently detailed for a
+recipient of ordinary skill to be able to understand it.
+
+5. Termination
+--------------
+
+5.1. The rights granted under this License will terminate automatically
+if You fail to comply with any of its terms. However, if You become
+compliant, then the rights granted under this License from a particular
+Contributor are reinstated (a) provisionally, unless and until such
+Contributor explicitly and finally terminates Your grants, and (b) on an
+ongoing basis, if such Contributor fails to notify You of the
+non-compliance by some reasonable means prior to 60 days after You have
+come back into compliance. Moreover, Your grants from a particular
+Contributor are reinstated on an ongoing basis if such Contributor
+notifies You of the non-compliance by some reasonable means, this is the
+first time You have received notice of non-compliance with this License
+from such Contributor, and You become compliant prior to 30 days after
+Your receipt of the notice.
+
+5.2. If You initiate litigation against any entity by asserting a patent
+infringement claim (excluding declaratory judgment actions,
+counter-claims, and cross-claims) alleging that a Contributor Version
+directly or indirectly infringes any patent, then the rights granted to
+You by any and all Contributors for the Covered Software under Section
+2.1 of this License shall terminate.
+
+5.3. In the event of termination under Sections 5.1 or 5.2 above, all
+end user license agreements (excluding distributors and resellers) which
+have been validly granted by You or Your distributors under this License
+prior to termination shall survive termination.
+
+************************************************************************
+*                                                                      *
+*  6. Disclaimer of Warranty                                           *
+*  -------------------------                                           *
+*                                                                      *
+*  Covered Software is provided under this License on an "as is"       *
+*  basis, without warranty of any kind, either expressed, implied, or  *
+*  statutory, including, without limitation, warranties that the       *
+*  Covered Software is free of defects, merchantable, fit for a        *
+*  particular purpose or non-infringing. The entire risk as to the     *
+*  quality and performance of the Covered Software is with You.        *
+*  Should any Covered Software prove defective in any respect, You     *
+*  (not any Contributor) assume the cost of any necessary servicing,   *
+*  repair, or correction. This disclaimer of warranty constitutes an   *
+*  essential part of this License. No use of any Covered Software is   *
+*  authorized under this License except under this disclaimer.         *
+*                                                                      *
+************************************************************************
+
+************************************************************************
+*                                                                      *
+*  7. Limitation of Liability                                          *
+*  --------------------------                                          *
+*                                                                      *
+*  Under no circumstances and under no legal theory, whether tort      *
+*  (including negligence), contract, or otherwise, shall any           *
+*  Contributor, or anyone who distributes Covered Software as          *
+*  permitted above, be liable to You for any direct, indirect,         *
+*  special, incidental, or consequential damages of any character      *
+*  including, without limitation, damages for lost profits, loss of    *
+*  goodwill, work stoppage, computer failure or malfunction, or any    *
+*  and all other commercial damages or losses, even if such party      *
+*  shall have been informed of the possibility of such damages. This   *
+*  limitation of liability shall not apply to liability for death or   *
+*  personal injury resulting from such party's negligence to the       *
+*  extent applicable law prohibits such limitation. Some               *
+*  jurisdictions do not allow the exclusion or limitation of           *
+*  incidental or consequential damages, so this exclusion and          *
+*  limitation may not apply to You.                                    *
+*                                                                      *
+************************************************************************
+
+8. Litigation
+-------------
+
+Any litigation relating to this License may be brought only in the
+courts of a jurisdiction where the defendant maintains its principal
+place of business and such litigation shall be governed by laws of that
+jurisdiction, without reference to its conflict-of-law provisions.
+Nothing in this Section shall prevent a party's ability to bring
+cross-claims or counter-claims.
+
+9. Miscellaneous
+----------------
+
+This License represents the complete agreement concerning the subject
+matter hereof. If any provision of this License is held to be
+unenforceable, such provision shall be reformed only to the extent
+necessary to make it enforceable. Any law or regulation which provides
+that the language of a contract shall be construed against the drafter
+shall not be used to construe this License against a Contributor.
+
+10. Versions of the License
+---------------------------
+
+10.1. New Versions
+
+Mozilla Foundation is the license steward. Except as provided in Section
+10.3, no one other than the license steward has the right to modify or
+publish new versions of this License. Each version will be given a
+distinguishing version number.
+
+10.2. Effect of New Versions
+
+You may distribute the Covered Software under the terms of the version
+of the License under which You originally received the Covered Software,
+or under the terms of any subsequent version published by the license
+steward.
+
+10.3. Modified Versions
+
+If you create software not governed by this License, and you want to
+create a new license for such software, you may create and use a
+modified version of this License if you rename the license and remove
+any references to the name of the license steward (except to note that
+such modified license differs from this License).
+
+10.4. Distributing Source Code Form that is Incompatible With Secondary
+Licenses
+
+If You choose to distribute Source Code Form that is Incompatible With
+Secondary Licenses under the terms of this version of the License, the
+notice described in Exhibit B of this License must be attached.
+
+Exhibit A - Source Code Form License Notice
+-------------------------------------------
+
+  This Source Code Form is subject to the terms of the Mozilla Public
+  License, v. 2.0. If a copy of the MPL was not distributed with this
+  file, You can obtain one at https://mozilla.org/MPL/2.0/.
+
+If it is not possible or desirable to put the notice in a particular
+file, then You may include the notice in a location (such as a LICENSE
+file in a relevant directory) where a recipient would be likely to look
+for such a notice.
+
+You may add additional accurate notices of copyright ownership.
+
+Exhibit B - "Incompatible With Secondary Licenses" Notice
+---------------------------------------------------------
+
+  This Source Code Form is "Incompatible With Secondary Licenses", as
+  defined by the Mozilla Public License, v. 2.0.
+

deployment/docker/Dockerfile

@@ -1,18 +1,18 @@
 # Build
 FROM golang:1.22 AS build
-LABEL authors="gnousEU"
 
 WORKDIR /build
 
 COPY go.mod go.sum ./
 RUN go mod download
 
-COPY main.go ./
-COPY internal/ ./internal
 COPY static/ ./static
 COPY templates/ ./templates
+COPY main.go ./
+COPY internal/ ./internal
 
-RUN CGO_ENABLED=0 GOOS=linux go build -ldflags "-w -s" # Enable static binary, target Linux, remove debug information and strip binary
+# Enable static binary, target Linux, remove debug information and strip binary
+RUN CGO_ENABLED=0 GOOS=linux go build -ldflags "-w -s"
 
 # Copy to our image
 FROM gcr.io/distroless/static-debian12:nonroot

front/_colors.scss

@@ -0,0 +1,5 @@
+$accent: #d30f45;
+$background: #0f0f0f;
+$border: #363636;
+$text: #e5e5e7;
+$placeholder: #888;

front/_misc.scss

@@ -0,0 +1,23 @@
+@use 'colors' as *;
+
+::selection {
+	background-color: $accent;
+	color: $text;
+}
+
+::-webkit-scrollbar {
+	width: 9px;
+}
+
+::-webkit-scrollbar-track {
+	background-color: $background;
+}
+
+::-webkit-scrollbar-thumb {
+	background-color: #444;
+	border-radius: 9px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+	background-color: $text;
+}

front/_recents.scss

@@ -0,0 +1,65 @@
+@use 'colors' as *;
+
+section#recent-plaks {
+  bottom: 1rem;
+  display: flex;
+  flex-flow: column wrap;
+  gap: 9px;
+  position: absolute;
+  right: 1rem;
+  transition: .15s ease-in-out;
+  user-select: none;
+
+  .title {
+    align-items: center;
+    gap: 18px;
+    transition: .15s ease-in-out;
+
+    &:hover {
+      border-color: #555;
+    }
+  }
+
+  .recent-plak {
+    align-items: center;
+    border: 3px solid $border;
+    font-weight: 500;
+    justify-content: space-between;
+    outline: none;
+    padding: 8px 18px;
+    text-decoration: none;
+    transition: .15s ease-in-out;
+    width: 12rem;
+
+    &:focus-visible {
+      border: 2px solid #bbb;
+    }
+
+    svg {
+      border-radius: 15px;
+      cursor: pointer;
+      height: 22px;
+      padding: 5px;
+      stroke: $text;
+      stroke-width: 2.25;
+      width: 22px;
+      transition: .1s ease-in-out;
+
+      &:hover {
+        background-color: $border;
+      }
+    }
+  }
+
+  a {
+    color: inherit;
+    text-decoration: none;
+  }
+}
+
+h3 {
+  font-size: 1.5rem;
+  margin: 0;
+  transition: .15s ease-in-out;
+  width: fit-content;
+}

front/index.html

@@ -0,0 +1,60 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta content="Plakken, paste, pastebin" name="keywords">
+    <meta content="Plakken is a simple open-source paste service where you can store text for a set period of time."
+          name="description">
+    <meta content="Gnous EU" name="author">
+    <meta content="width=device-width, initial-scale=1.0" name="viewport">
+    <link href="/static/favicon.svg" rel="icon">
+    <title>New paste</title>
+    <link href="style.css" rel="stylesheet">
+    <script async src="../static/app.js"></script>
+</head>
+
+<body>
+<form action="/create/" class="fr" method="post">
+    <div id="line-numbers">1</div>
+    <label for="content"><textarea autofocus id="content" name="content"
+                                   placeholder="Type your paste here"></textarea></label>
+
+    <div class="menu fr">
+        <label for="filename"><input id="filename" name="filename" placeholder="Filename" type="text"></label>
+        <!--<label for="password"><input id="password" placeholder="Password" type="password"></label>-->
+        <label for="exp"><input id="exp" name="exp" placeholder="Expiration (1d1h1m1s)" type="text"></label>
+        <label for="type">
+            <select id="type" name="type">zz
+                <option value="c">C/C++</option>
+                <option value="csharp">C#</option>
+                <option value="css">CSS</option>
+                <option value="go">Go</option>
+                <option value="java">Java</option>
+                <option value="js">Javascript</option>
+                <option value="html">HTML</option>
+                <option selected value="pt">Plaintext</option>
+                <option value="py">Python</option>
+                <option value="rb">Ruby</option>
+                <option value="rs">Rust</option>
+                <option value="sh">Shell</option>
+                <option value="sql">SQL</option>
+                <option value="ts">Typescript</option>
+                <option value="xml">XML</option>
+                <option value="yml">YAML</option>
+            </select>
+        </label>
+        <button title="Save plak" type="submit">Save</button>
+    </div>
+</form>
+<section id="recent-plaks">
+    <div class="title fr">
+        <h3>Recent plaks</h3>
+        <svg height="32" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24" width="32">
+            <polyline points="6 9 12 15 18 9"></polyline>
+        </svg>
+    </div>
+</section>
+</body>
+
+</html>

front/style.css

@@ -0,0 +1,202 @@
+section#recent-plaks {
+  bottom: 1rem;
+  display: flex;
+  flex-flow: column wrap;
+  gap: 9px;
+  position: absolute;
+  right: 1rem;
+  transition: 0.15s ease-in-out;
+  user-select: none;
+}
+section#recent-plaks .title {
+  align-items: center;
+  gap: 18px;
+  transition: 0.15s ease-in-out;
+}
+section#recent-plaks .title:hover {
+  border-color: #555;
+}
+section#recent-plaks .recent-plak {
+  align-items: center;
+  border: 3px solid #363636;
+  font-weight: 500;
+  justify-content: space-between;
+  outline: none;
+  padding: 8px 18px;
+  text-decoration: none;
+  transition: 0.15s ease-in-out;
+  width: 12rem;
+}
+section#recent-plaks .recent-plak:focus-visible {
+  border: 2px solid #bbb;
+}
+section#recent-plaks .recent-plak svg {
+  border-radius: 15px;
+  cursor: pointer;
+  height: 22px;
+  padding: 5px;
+  stroke: #e5e5e7;
+  stroke-width: 2.25;
+  width: 22px;
+  transition: 0.1s ease-in-out;
+}
+section#recent-plaks .recent-plak svg:hover {
+  background-color: #363636;
+}
+section#recent-plaks a {
+  color: inherit;
+  text-decoration: none;
+}
+
+h3 {
+  font-size: 1.5rem;
+  margin: 0;
+  transition: 0.15s ease-in-out;
+  width: fit-content;
+}
+
+::selection {
+  background-color: #d30f45;
+  color: #e5e5e7;
+}
+
+::-webkit-scrollbar {
+  width: 9px;
+}
+
+::-webkit-scrollbar-track {
+  background-color: #0f0f0f;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #444;
+  border-radius: 9px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: #e5e5e7;
+}
+
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 400 700;
+  font-display: swap;
+  src: url(inter.woff2) format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "JetBrains Mono";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(jetbrainsmono.woff2) format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+body {
+  background-color: #0f0f0f;
+  color: #e5e5e7;
+  font: 400 16px/2 "Inter", "system-ui", sans-serif;
+  margin: 0;
+  overflow-x: hidden;
+}
+
+.fr {
+  display: flex;
+  flex-flow: row wrap;
+}
+
+#line-numbers,
+#content {
+  font: 400 14px/1.6 "JetBrains Mono", monospace;
+}
+
+#line-numbers {
+  color: #888;
+  padding: 16px 1px;
+  text-align: center;
+  white-space: pre;
+  width: 30px;
+}
+
+#content {
+  color: #e5e5e7;
+  height: 100%;
+  min-height: 90vh;
+  padding: 16px 16px 0 16px;
+  width: calc(100vw - 65px);
+}
+
+.menu {
+  gap: 18px;
+  position: fixed;
+  right: 16px;
+  top: 16px;
+}
+.menu svg {
+  cursor: pointer;
+  height: 24px;
+  fill: none;
+  margin-bottom: -6px;
+  stroke: #e5e5e7;
+  stroke-width: 2;
+  width: 24px;
+}
+
+button,
+input,
+select {
+  background-color: #0f0f0f;
+  border: 2px solid #363636;
+  color: #e5e5e7;
+  font: 500 14px/2 "Inter", "system-ui", sans-serif;
+  max-width: 145px;
+  outline: none;
+  padding: 3px 10px;
+  transition: border 0.15s ease;
+  width: min-content;
+}
+button::placeholder,
+input::placeholder,
+select::placeholder {
+  color: #888;
+}
+button:hover,
+input:hover,
+select:hover {
+  border-color: #777;
+}
+button:focus-visible,
+input:focus-visible,
+select:focus-visible {
+  border: 2px solid #bbb;
+}
+
+select {
+  padding: 8px 10px;
+  width: fit-content;
+}
+
+select:focus {
+  background-color: #0f0f0f;
+  transition: none;
+}
+
+option {
+  background-color: #0f0f0f;
+  color: #e5e5e7;
+}
+option:focus {
+  background-color: #d30f45;
+  color: #0f0f0f;
+}
+
+textarea {
+  background-color: inherit;
+  border: none;
+  margin: 0;
+  outline: none;
+  resize: none;
+}
+
+/*# sourceMappingURL=style.css.map */

front/style.scss

@@ -0,0 +1,130 @@
+@use 'colors' as *;
+
+@use 'inputs';
+@use 'recents';
+@use 'misc';
+
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 400 700;
+  font-display: swap;
+  src: url(inter.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(jetbrainsmono.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+
+body {
+  background-color: $background;
+  color: $text;
+  font: 400 16px/2 "Inter", "system-ui", sans-serif;
+  margin: 0;
+  overflow-x: hidden;
+}
+
+.fr {
+  display: flex;
+  flex-flow: row wrap;
+}
+
+#line-numbers,
+#content {
+  font: 400 14px/1.6 "JetBrains Mono", monospace;
+}
+
+#line-numbers {
+  color: $placeholder;
+  padding: 16px 1px;
+  text-align: center;
+  white-space: pre;
+  width: 30px;
+}
+
+#content {
+  color: $text;
+  height: 100%;
+  min-height: 90vh;
+  padding: 16px 16px 0 16px;
+  width: calc(100vw - 65px);
+}
+
+.menu {
+  gap: 18px;
+  position: fixed;
+  right: 16px;
+  top: 16px;
+
+  svg {
+    cursor: pointer;
+    height: 24px;
+    fill: none;
+    margin-bottom: -6px;
+    stroke: $text;
+    stroke-width: 2;
+    width: 24px;
+  }
+}
+
+button,
+input,
+select {
+  background-color: $background;
+  border: 2px solid $border;
+  color: $text;
+  font: 500 14px/2 "Inter", "system-ui", sans-serif;
+  max-width: 145px;
+  outline: none;
+  padding: 3px 10px;
+  transition: border .15s ease;
+  width: min-content;
+  
+
+  &::placeholder {
+    color: $placeholder;
+  }
+
+  &:hover {
+    border-color: #777;
+  }
+
+  &:focus-visible {
+    border: 2px solid #bbb;
+  }
+}
+
+select {
+  padding: 8px 10px;
+  width: fit-content;
+}
+
+select:focus {
+  background-color: $background;
+  transition: none;
+}
+
+option {
+  background-color: $background;
+  color: $text;
+
+  &:focus {
+    background-color: $accent;
+    color: $background;
+  }
+}
+
+textarea {
+  background-color: inherit;
+  border: none;
+  margin: 0;
+  outline: none;
+  resize: none;
+}

go.mod

@@ -3,12 +3,13 @@ module git.gnous.eu/gnouseu/plakken
 go 1.22
 
 require (
+	github.com/joho/godotenv v1.5.1
 	github.com/redis/go-redis/v9 v9.5.1
-	golang.org/x/crypto v0.22.0
+	golang.org/x/crypto v0.23.0
 )
 
 require (
 	github.com/cespare/xxhash/v2 v2.3.0 // indirect
 	github.com/dgryski/go-rendezvous v0.0.0-20200823014737-9f7001d12a5f // indirect
-	golang.org/x/sys v0.19.0 // indirect
+	golang.org/x/sys v0.20.0 // indirect
 )

go.sum

@@ -6,9 +6,11 @@ github.com/cespare/xxhash/v2 v2.3.0 h1:UL815xU9SqsFlibzuggzjXhog7bL6oX9BbNZnL2UF
 github.com/cespare/xxhash/v2 v2.3.0/go.mod h1:VGX0DQ3Q6kWi7AoAeZDth3/j3BFtOZR5XLFGgcrjCOs=
 github.com/dgryski/go-rendezvous v0.0.0-20200823014737-9f7001d12a5f h1:lO4WD4F/rVNCu3HqELle0jiPLLBs70cWOduZpkS1E78=
 github.com/dgryski/go-rendezvous v0.0.0-20200823014737-9f7001d12a5f/go.mod h1:cuUVRXasLTGF7a8hSLbxyZXjz+1KgoB3wDUb6vlszIc=
+github.com/joho/godotenv v1.5.1 h1:7eLL/+HRGLY0ldzfGMeQkb7vMd0as4CfYvUVzLqw0N0=
+github.com/joho/godotenv v1.5.1/go.mod h1:f4LDr5Voq0i2e/R5DDNOoa2zzDfwtkZa6DnEwAbqwq4=
 github.com/redis/go-redis/v9 v9.5.1 h1:H1X4D3yHPaYrkL5X06Wh6xNVM/pX0Ft4RV0vMGvLBh8=
 github.com/redis/go-redis/v9 v9.5.1/go.mod h1:hdY0cQFCN4fnSYT6TkisLufl/4W5UIXyv0b/CLO2V2M=
-golang.org/x/crypto v0.22.0 h1:g1v0xeRhjcugydODzvb3mEM9SQ0HGp9s/nh3COQ/C30=
+golang.org/x/crypto v0.23.0 h1:dIJU/v2J8Mdglj/8rJ6UUOM3Zc9zLZxVZwwxMooUSAI=
-golang.org/x/crypto v0.22.0/go.mod h1:vr6Su+7cTlO45qkww3VDJlzDn0ctJvRgYbC2NvXHt+M=
+golang.org/x/crypto v0.23.0/go.mod h1:CKFgDieR+mRhux2Lsu27y0fO304Db0wZe70UKqHu0v8=
-golang.org/x/sys v0.19.0 h1:q5f1RH2jigJ1MoAWp2KTp3gm5zAGFUTarQZ5U386+4o=
+golang.org/x/sys v0.20.0 h1:Od9JTbYCk261bKm4M/mw7AklTlFYIa0bIp9BgSm1S8Y=
-golang.org/x/sys v0.19.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
+golang.org/x/sys v0.20.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=

internal/config/config.go

@@ -6,6 +6,8 @@ import (
 	"strconv"
 
 	"git.gnous.eu/gnouseu/plakken/internal/constant"
+	"git.gnous.eu/gnouseu/plakken/internal/utils"
+	"github.com/joho/godotenv"
 )
 
 // InitConfig Structure for program initialisation.
@@ -20,6 +22,13 @@ type InitConfig struct {
 
 // GetConfig Initialise configuration form .env.
 func GetConfig() InitConfig {
+	if utils.FileExist(".env") {
+		err := godotenv.Load()
+		if err != nil {
+			log.Fatalf("Error loading .env file: %v", err)
+		}
+	}
+
 	listenAddress := os.Getenv("PLAKKEN_LISTEN")
 	redisAddress := os.Getenv("PLAKKEN_REDIS_ADDRESS")
 	db := os.Getenv("PLAKKEN_REDIS_DB")

internal/secret/crypto.go

@@ -99,7 +99,7 @@ func VerifyPassword(password string, hash string) (bool, error) {
 // parseHash parse existing encoded argon2id string.
 func parseHash(source string) (argon2idHash, config, error) {
 	separateItem := strings.Split(source, "$")
-	if len(separateItem) != 6 { //nolint:gomnd
+	if len(separateItem) != 6 { //nolint:mnd
 		return argon2idHash{}, config{}, &parseError{message: "Hash format is not valid"}
 	}
 
@@ -108,7 +108,7 @@ func parseHash(source string) (argon2idHash, config, error) {
 	}
 
 	separateParam := strings.Split(separateItem[3], ",")
-	if len(separateParam) != 3 { //nolint:gomnd
+	if len(separateParam) != 3 { //nolint:mnd
 		return argon2idHash{}, config{}, &parseError{message: "Hash config is not valid"}
 	}
 

internal/utils/utils.go

@@ -1,8 +1,10 @@
 package utils
 
 import (
+	"errors"
 	"log"
 	mathrand "math/rand/v2"
+	"os"
 	"regexp"
 	"strconv"
 	"strings"
@@ -43,7 +45,7 @@ func parseIntBeforeSeparator(source *string, sep string) (int, error) { // retur
 			return 0, &parseIntBeforeSeparatorError{message: *source + ": format only take positive value"}
 		}
 
-		if value > 99 { //nolint:gomnd
+		if value > 99 { //nolint:mnd
 			return 0, &parseIntBeforeSeparatorError{message: *source + ": Format only take two number"}
 		}
 
@@ -106,3 +108,10 @@ func ValidKey(key string) bool {
 
 	return result
 }
+
+// FileExist verify if a file exist.
+func FileExist(path string) bool {
+	_, err := os.Stat(path)
+
+	return !errors.Is(err, os.ErrNotExist)
+}

static/app.js

@@ -1,31 +1,71 @@
-const codeEditor = document.getElementById('content');
+const editor = document.getElementById('content');
-const lineCounter = document.getElementById('lines');
+const filenameSelector = document.getElementById('filename');
+const recentPlaksDiv = document.getElementById('recent-plaks');
+const lineNumbersDiv = document.getElementById('line-numbers');
 
-let lineCountCache = 0;
+function updateLn() {
+  const lines = editor.value.split('\n').length;
+  const lineNumbers = Array.from({ length: lines }, (_, i) => i + 1).join('\n');
 
-// Update line counter
+  lineNumbersDiv.textContent = lineNumbers;
-function updateLineCounter() {
-    const lineCount = codeEditor.value.split('\n').length;
-
-    if (lineCountCache !== lineCount) {
-        const outarr = Array.from({length: lineCount}, (_, index) => index + 1);
-        lineCounter.value = outarr.join('\n');
-    }
-
-    lineCountCache = lineCount;
 }
 
-codeEditor.addEventListener('input', updateLineCounter);
+function updateTitle() {
+  document.title = filenameSelector.value == '' ? 'New paste' : ` ${filenameSelector.value} (Unsaved) - Plakken`;
+}
 
-codeEditor.addEventListener('keydown', (e) => {
+function getRecentPlaksFromStorage() {
-    if (e.key === 'Tab') {
+  return new Set(JSON.parse(localStorage.getItem('recentPlaks')) || []);
-        e.preventDefault();
+}
 
-        const {value, selectionStart, selectionEnd} = codeEditor;
+function updateLocalStorage() {
-        codeEditor.value = `${value.slice(0, selectionStart)}\t${value.slice(selectionEnd)}`;
+  localStorage.setItem('recentPlaks', JSON.stringify(Array.from(recentPlaks)));
-        codeEditor.setSelectionRange(selectionStart + 1, selectionStart + 1);
+}
-        updateLineCounter();
-    }
-});
 
-updateLineCounter();
+function addRecentPlak(plakId) {
+  recentPlaks.add(plakId);
+  updateLocalStorage();
+}
+
+function deleteRecentPlak(plakId) {
+  const plak = document.querySelector(`[href="/${plakId}/"]`).parentElement;
+
+  plak.style.transform = 'translateX(150%)';
+  setTimeout(() => plak.remove(), 250);
+  
+  recentPlaks.delete(plakId);
+  updateLocalStorage();
+}
+
+function createRecentPlakComponent(plak) {
+  const div = document.createElement('div');
+  div.classList.add('recent-plak', 'fr');
+
+  const a = document.createElement('a');
+  a.href = `/${plak}/`;
+  a.textContent = plak;
+
+  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+  svg.innerHTML = `<line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line>`;
+  svg.id = 'cross';
+  svg.setAttribute('viewBox', '0 0 24 24');
+  svg.onclick = () => deleteRecentPlak(plak);
+
+  div.appendChild(a);
+  div.appendChild(svg);
+
+  return div;
+}
+
+filenameSelector.addEventListener('input', updateTitle);
+editor.addEventListener('input', updateLn);
+
+let recentPlaks = getRecentPlaksFromStorage();
+
+if (recentPlaks === null) {
+  recentPlaks = [];
+  localStorage.setItem('recentPlaks', JSON.stringify(recentPlaks));
+} else {
+  for (const plak of recentPlaks)
+    recentPlaksDiv.appendChild(createRecentPlakComponent(plak));
+}

static/favicon.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path class="b" d="m777.387 609.18c-5.427 2.039-9.716 6.229-11.803 11.531l-80.287 203.948c-6.755 17.159-31.604 17.16-38.359 0l-80.287-203.948c-2.087-5.302-6.376-9.492-11.803-11.531l-208.746-78.442c-17.564-6.599-17.564-30.877 0-37.476l208.746-78.442c5.427-2.039 9.716-6.229 11.803-11.531l80.287-203.948c6.755-17.159 31.604-17.159 38.359 0l80.287 203.948c2.087 5.302 6.376 9.492 11.803 11.531l208.747 78.442c17.566 6.599 17.566 30.877 0 37.477z"/><g class="s"><path d="m192.121 342.82c-6.756 17.16-31.604 17.16-38.359 0l-28.915-73.449c-2.087-5.302-6.376-9.492-11.803-11.532l-75.1777-28.25c-17.5631-6.599-17.5631-30.877 0-37.477l75.1777-28.249c5.427-2.04 9.716-6.23 11.803-11.532l28.915-73.4498c6.755-17.1594 31.603-17.1593 38.359.0001l28.914 73.4497c2.087 5.302 6.376 9.492 11.803 11.532l75.178 28.249c17.563 6.6 17.563 30.878 0 37.477l-75.178 28.25c-5.427 2.04-9.716 6.23-11.803 11.532z"/><path d="m356.132 860.138c-5.427 2.039-9.715 6.229-11.803 11.531l-28.914 73.45c-6.755 17.159-31.604 17.159-38.359 0l-28.915-73.45c-2.087-5.302-6.376-9.492-11.802-11.531l-75.179-28.25c-17.563-6.6-17.563-30.877 0-37.477l75.179-28.25c5.426-2.039 9.715-6.229 11.802-11.531l28.915-73.45c6.755-17.16 31.604-17.16 38.359 0l28.914 73.45c2.088 5.302 6.376 9.492 11.803 11.531l75.178 28.25c17.563 6.6 17.563 30.877 0 37.477z"/></g><style xmlns="http://www.w3.org/2000/svg">.b{fill:#ff9500}.s{fill:#ffBf00}@media(prefers-color-scheme:dark){.b{fill:#ffbf00}.s{fill:#ff9500}}</style></svg>

static/index.html

@@ -1,49 +1,40 @@
 <!doctype html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta content="Plakken, paste, pastebin" name="keywords">
-    <meta content="Plakken is a simple open-source paste service where you can store store text for a set period of time."
+    <meta content="Plakken is a simple open-source paste service where you can store text for a set period of time."
           name="description">
-    <meta content="Plakken" name="author">
+    <meta content="Gnous EU" name="author">
     <meta content="width=device-width, initial-scale=1.0" name="viewport">
-    <title>New plak • Plakken</title><script async src="/static/app.js"></script>
+    <link href="/static/favicon.svg" rel="icon">
+    <title>New paste</title>
     <link href="/static/style.css" rel="stylesheet">
+    <script async src="/static/app.js"></script>
 </head>
+
 <body>
-<form action="/create/" method="post">
+<form action="/create/" class="fr" method="post">
-    <div>
+    <div id="line-numbers">1</div>
-        <label for="lines"></label>
+    <label for="content"><textarea autofocus id="content" name="content"
-        <textarea id="lines" readonly wrap="hard">1</textarea>
+                                   placeholder="Type your paste here"></textarea></label>
-    </div>
+
-    <div>
+    <div class="menu fr">
-        <label for="content"></label>
+        <label for="filename"><input id="filename" name="filename" placeholder="Filename" type="text"></label>
-        <textarea autofocus id="content" name="content" placeholder="Type your paste here"></textarea>
+        <!--<label for="password"><input id="password" placeholder="Password" type="password"></label>-->
-        <nav>
+        <label for="exp"><input id="exp" name="exp" placeholder="Expiration (1d1h1m1s)" type="text"></label>
-            <ul>
-                <li>
-                    <label for="password">
-                        <input id="password" placeholder="Password" type="text">
-                    </label>
-                </li>
-                <li>
-                    <label for="exp">
-                        <input id="exp" name="exp" placeholder="Expiration (1d1h1m1s)" type="text">
-                    </label>
-                </li>
-                <li>
         <label for="type">
-                        <select id="type" name="type">
+            <select id="type" name="type">zz
-                            <option value="c">C</option>
+                <option value="c">C/C++</option>
-                            <option value="cpp">C++</option>
                 <option value="csharp">C#</option>
                 <option value="css">CSS</option>
                 <option value="go">Go</option>
                 <option value="java">Java</option>
                 <option value="js">Javascript</option>
                 <option value="html">HTML</option>
-                            <option selected value="plain">Plaintext</option>
+                <option selected value="pt">Plaintext</option>
-                            <option value="python">Python</option>
+                <option value="py">Python</option>
                 <option value="rb">Ruby</option>
                 <option value="rs">Rust</option>
                 <option value="sh">Shell</option>
@@ -53,15 +44,17 @@
                 <option value="yml">YAML</option>
             </select>
         </label>
-                </li>
+        <button title="Save plak" type="submit">Save</button>
-            </ul>
-            <button title="Save plak" type="submit">
-                <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-                    <path d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425z"></path>
-                </svg>
-            </button>
-        </nav>
     </div>
 </form>
+<section id="recent-plaks">
+    <div class="title fr">
+        <h3>Recent plaks</h3>
+        <svg height="32" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24" width="32">
+            <polyline points="6 9 12 15 18 9"></polyline>
+        </svg>
+    </div>
+</section>
 </body>
+
 </html>

static/style.css

@@ -1,98 +1,200 @@
-:root {
+section#recent-plaks {
-    --accent: #be0560;
+  bottom: 1rem;
-    --background: #121212;
-    --border: #333;
-    --text: #e6e6e6;
-    --placeholder: #666;
-}
-
-body {
-    background-color: var(--background);
-    color: var(--text);
-    font: 400 15px/2 "system-ui", monospace;
-    margin: 0;
-}
-
-form {
   display: flex;
-    flex-flow: row wrap;
+  flex-flow: column wrap;
-}
+  gap: 9px;
-
-#lines {
-    color: var(--placeholder);
-    font: 400 14px/1.6 "JetBrains Mono", monospace;
-    height: calc(100vh - 29px);
-    overflow-y: hidden;
-    padding: 8px 0;
-    text-align: center;
-    user-select: none;
-    width: 26px;
-}
-
-input, select {
-    background-color: var(--background);
-    border: 2px solid var(--border);
-    border-radius: 2px;
-    color: var(--text);
-    font-size: 13px;
-    outline: none;
-    padding: 6px 8px;
-    transition: border .15s ease;
-}
-
-input:hover, select:hover {
-    border-color: var(--text);
-}
-
-button, textarea {
-    background-color: inherit;
-    border: none;
-    outline: none;
-    resize: none;
-}
-
-#content {
-    color: var(--text);
-    font: 400 14px/1.6 "JetBrains Mono", monospace;
-    height: calc(100vh - 29px);
-    padding: 8px;
-    width: calc(100vw - 45px);
-}
-
-nav {
-    top: 1rem;
-    display: flex;
-    flex-flow: row wrap;
   position: absolute;
-    right: 12px;
+  right: 1rem;
+  transition: 0.15s ease-in-out;
+  user-select: none;
 }
-
+section#recent-plaks .title {
-ul {
+  align-items: center;
-    display: flex;
+  gap: 18px;
-    flex-flow: row wrap;
+  transition: 0.15s ease-in-out;
-    gap: 36px;
-    list-style: none;
-    margin: 0;
-    padding: 0 1.9rem;
 }
-
+section#recent-plaks .title:hover {
-svg {
+  border-color: #555;
+}
+section#recent-plaks .recent-plak {
+  align-items: center;
+  border: 3px solid #363636;
+  font-weight: 500;
+  justify-content: space-between;
+  outline: none;
+  padding: 8px 18px;
+  text-decoration: none;
+  transition: 0.15s ease-in-out;
+  width: 12rem;
+}
+section#recent-plaks .recent-plak:focus-visible {
+  border: 2px solid #bbb;
+}
+section#recent-plaks .recent-plak svg {
+  border-radius: 15px;
   cursor: pointer;
-    height: 24px;
+  height: 22px;
-    fill: var(--text);
+  padding: 5px;
-    transition: .15s ease;
+  stroke: #e5e5e7;
-    width: 24px;
+  stroke-width: 2.25;
+  width: 22px;
+  transition: 0.1s ease-in-out;
+}
+section#recent-plaks .recent-plak svg:hover {
+  background-color: #363636;
+}
+section#recent-plaks a {
+  color: inherit;
+  text-decoration: none;
 }
 
-svg:hover {
+h3 {
-    stroke: #fff;
+  font-size: 1.5rem;
-}
+  margin: 0;
-
+  transition: 0.15s ease-in-out;
-input:focus-visible, select:focus-visible {
+  width: fit-content;
-    border: 2px solid var(--text);
 }
 
 ::selection {
-    background-color: var(--accent);
+  background-color: #d30f45;
-    color: #fff;
+  color: #e5e5e7;
+}
+
+::-webkit-scrollbar {
+  width: 9px;
+}
+
+::-webkit-scrollbar-track {
+  background-color: #0f0f0f;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #444;
+  border-radius: 9px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: #e5e5e7;
+}
+
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 400 700;
+  font-display: swap;
+  src: url(inter.woff2) format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "JetBrains Mono";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(jetbrainsmono.woff2) format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+body {
+  background-color: #0f0f0f;
+  color: #e5e5e7;
+  font: 400 16px/2 "Inter", "system-ui", sans-serif;
+  margin: 0;
+  overflow-x: hidden;
+}
+
+.fr {
+  display: flex;
+  flex-flow: row wrap;
+}
+
+#line-numbers,
+#content {
+  font: 400 14px/1.6 "JetBrains Mono", monospace;
+}
+
+#line-numbers {
+  color: #888;
+  padding: 16px 1px;
+  text-align: center;
+  white-space: pre;
+  width: 30px;
+}
+
+#content {
+  color: #e5e5e7;
+  height: 100%;
+  min-height: 90vh;
+  padding: 16px 16px 0 16px;
+  width: calc(100vw - 65px);
+}
+
+.menu {
+  gap: 18px;
+  position: fixed;
+  right: 16px;
+  top: 16px;
+}
+.menu svg {
+  cursor: pointer;
+  height: 24px;
+  fill: none;
+  margin-bottom: -6px;
+  stroke: #e5e5e7;
+  stroke-width: 2;
+  width: 24px;
+}
+
+button,
+input,
+select {
+  background-color: #0f0f0f;
+  border: 2px solid #363636;
+  color: #e5e5e7;
+  font: 500 14px/2 "Inter", "system-ui", sans-serif;
+  max-width: 145px;
+  outline: none;
+  padding: 3px 10px;
+  transition: border 0.15s ease;
+  width: min-content;
+}
+button::placeholder,
+input::placeholder,
+select::placeholder {
+  color: #888;
+}
+button:hover,
+input:hover,
+select:hover {
+  border-color: #777;
+}
+button:focus-visible,
+input:focus-visible,
+select:focus-visible {
+  border: 2px solid #bbb;
+}
+
+select {
+  padding: 8px 10px;
+  width: fit-content;
+}
+
+select:focus {
+  background-color: #0f0f0f;
+  transition: none;
+}
+
+option {
+  background-color: #0f0f0f;
+  color: #e5e5e7;
+}
+option:focus {
+  background-color: #d30f45;
+  color: #0f0f0f;
+}
+
+textarea {
+  background-color: inherit;
+  border: none;
+  margin: 0;
+  outline: none;
+  resize: none;
 }