Add -> add project

public/assets/css/style.css

@@ -0,0 +1,83 @@
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    font-family: monospace;
+}
+
+body {
+    background: #0f172a;
+    color: #e2e8f0;
+    padding: 40px;
+}
+
+/* container */
+.container {
+    max-width: 900px;
+    margin: auto;
+}
+
+/* title */
+h1 {
+    margin-bottom: 20px;
+    font-size: 28px;
+}
+
+/* textarea */
+textarea {
+    width: 100%;
+    min-height: 300px;
+    background: #020617;
+    border: 1px solid #334155;
+    color: #e2e8f0;
+    padding: 12px;
+    resize: vertical;
+    font-size: 14px;
+    border-radius: 6px;
+}
+
+.usepassword,
+select {
+    background: #020617;
+    border: 1px solid #334155;
+    color: #e2e8f0;
+    padding: 8px;
+    border-radius: 6px;
+    margin-top: 10px;
+}
+
+/* button */
+button {
+    background: #38bdf8;
+    border: none;
+    color: #020617;
+    padding: 10px 16px;
+    margin-top: 15px;
+    border-radius: 6px;
+    cursor: pointer;
+    font-weight: bold;
+}
+
+button:hover {
+    background: #0ea5e9;
+}
+
+/* paste display */
+.paste-box {
+    background: #020617;
+    border: 1px solid #334155;
+    padding: 15px;
+    margin-top: 20px;
+    border-radius: 6px;
+    overflow-x: auto;
+}
+
+/* link */
+a {
+    color: #38bdf8;
+    text-decoration: none;
+}
+
+a:hover {
+    text-decoration: underline;
+}

public/assets/js/app.js

@@ -0,0 +1,38 @@
+document.addEventListener("DOMContentLoaded", () => {
+
+    const form = document.getElementById("pasteForm");
+    const resultBox = document.getElementById("result");
+
+    form.addEventListener("submit", async (e) => {
+        e.preventDefault();
+
+        const formData = new FormData(form);
+
+        const response = await fetch("/index.php?action=save", {
+            method: "POST",
+            body: formData
+        });
+
+        const data = await response.json();
+
+        if (!data.success) {
+            resultBox.innerHTML = "<div class='error'>" + data.message + "</div>";
+            return;
+        }
+
+        resultBox.innerHTML = `
+            <h3>Paste Created</h3>
+
+            <input type="text" id="pasteLink" value="${data.url}" readonly style="width:100%; padding:8px;">
+
+            <button id="copyBtn">Copy Link</button>
+        `;
+
+        document.getElementById("copyBtn").addEventListener("click", () => {
+            const input = document.getElementById("pasteLink");
+            navigator.clipboard.writeText(input.value);
+            alert("Link copied!");
+        });
+    });
+
+});

public/assets/js/main.js

@@ -0,0 +1,40 @@
+document.addEventListener("DOMContentLoaded", () => {
+
+    const textarea = document.querySelector("textarea");
+    const form = document.querySelector("form");
+    const copyBtn = document.getElementById("copyBtn");
+
+
+    if (textarea) {
+        textarea.addEventListener("input", () => {
+            textarea.style.height = "auto";
+            textarea.style.height = textarea.scrollHeight + "px";
+        });
+    }
+
+    if (form && textarea) {
+        form.addEventListener("submit", (e) => {
+            if (textarea.value.trim() === "") {
+                e.preventDefault();
+                alert("Paste cannot be empty");
+            }
+        });
+    }
+
+    if (copyBtn) {
+        copyBtn.addEventListener("click", () => {
+            const paste = document.getElementById("pasteContent");
+
+            if (!paste) return;
+
+            navigator.clipboard.writeText(paste.innerText)
+                .then(() => {
+                    copyBtn.textContent = "Copied!";
+                    setTimeout(() => {
+                        copyBtn.textContent = "Copy";
+                    }, 2000);
+                });
+        });
+    }
+
+});