Initial Commit

.gitignore

@@ -0,0 +1 @@
+__pycache__

Discovery.md

@@ -0,0 +1,13 @@
+---
+title: "Secrets: The secure notes"
+tagline: "Your average notes app with a twist, client-side encryption."
+theme_color: "#f26daa"
+git: "https://github.com/el-garro/secrets"
+---
+
+Secrets comes with:
+
+- Pure client-side encryption (Your password will NEVER abandon your computer)
+- Infinite boxes (You can log-in with any password, but it will only show notes that can be decrypted with it)
+- It's pink
+- Did I mentioned it's pink?

Spacefile

@@ -0,0 +1,8 @@
+# Spacefile Docs: https://go.deta.dev/docs/spacefile/v0
+v: 0
+icon: ./icon.png
+app_name: "Secrets"
+micros:
+  - name: main
+    src: ./main
+    engine: python3.9

main/main.py

@@ -0,0 +1,43 @@
+from fastapi import FastAPI, Request
+from fastapi.staticfiles import StaticFiles
+from fastapi.responses import StreamingResponse
+from deta import Deta
+
+
+app = FastAPI(docs_url=None, openapi_url=None, redoc_url=None)
+deta = Deta()
+drive = deta.Drive("notes")
+
+
+@app.get("/api/v1/list")
+async def list_files():
+    result = drive.list()
+    all_files = result.get("names")
+    paging = result.get("paging")
+    last = paging.get("last") if paging else None
+    while last:
+        result = drive.list(last=last)
+        all_files += result.get("names")
+        paging = result.get("paging")
+        last = paging.get("last") if paging else None
+
+    return all_files
+
+
+@app.get("/api/v1/get/{fname}", response_class=StreamingResponse)
+async def get_file(fname: str):
+    file = drive.get(fname)
+    return StreamingResponse(file.iter_chunks())
+
+
+@app.post("/api/v1/post/{fname}")
+async def write_file(fname: str, request: Request):
+    return drive.put(fname, await request.body())
+
+
+@app.delete("/api/v1/del/{fname}")
+async def delete_file(fname: str):
+    return drive.delete(fname)
+
+
+app.mount("/", StaticFiles(directory="static", html=True))

main/requirements.txt

@@ -0,0 +1,2 @@
+fastapi
+deta

main/static/css/style.css

@@ -0,0 +1,225 @@
+:root {
+    --color-back-primary: #1c1b1b;
+    --color-back-secondary: #32302f;
+    --color-text-primary: #cec7c1;
+    --color-deta-pink: #ef39a8;
+    --color-deta-pink-dark: #9b256d;
+}
+
+html {
+    color-scheme: dark;
+}
+
+body {
+    padding: 10px;
+    background-color: var(--color-back-primary);
+    color: var(--color-text-primary);
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+@media (min-width: 600px) {
+    body {
+        padding-left: 10vh;
+        padding-right: 10vh;
+    }
+}
+
+
+.header-title {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-end;
+    column-gap: 5px;
+}
+
+
+.logo-img {
+    width: 50px;
+    height: 50px;
+    flex-grow: 0;
+}
+
+.small-img {
+    width: 25px;
+    height: 25px;
+}
+
+.header-title p {
+    margin: 0;
+    padding: 0;
+    flex-grow: 1;
+    font-size: 40px;
+}
+
+main {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+.grid-container {
+    display: grid;
+    padding: 10px;
+    border: 5px dashed var(--color-deta-pink-dark);
+    border-radius: 10px;
+    gap: 10px;
+    grid-auto-rows: 160px;
+    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+    overflow: auto;
+    flex-grow: 1;
+}
+
+.card {
+    background-color: var(--color-back-secondary);
+    overflow: hidden;
+    align-content: center;
+    border-radius: 15px;
+    padding: 10px;
+}
+
+.card:hover {
+    border: 2px solid var(--color-deta-pink);
+    padding: 8px;
+}
+
+.note figure {
+    height: 90px;
+    width: min(90px, 100%);
+    margin: auto;
+    border-radius: 10px;
+    overflow: hidden;
+    display: flex;
+
+
+}
+
+.note figure img {
+    object-fit: cover;
+    object-position: center;
+    width: 100%;
+    height: 100%;
+}
+
+.note p {
+    margin: 2px;
+    font-size: smaller;
+    text-align: center;
+    overflow-wrap: break-word;
+}
+
+.newnote {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.newnote p {
+    font-size: 50px;
+    margin: 0;
+    opacity: 0.2;
+}
+
+footer p {
+    text-align: right;
+}
+
+
+.modal {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: var(--color-back-primary);
+    background-color: rgba(var(--color-back-primary), 0.5);
+    backdrop-filter: blur(10px);
+    border-radius: 10px;
+    z-index: 1;
+}
+
+.login {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.login form {
+    text-align: center;
+    padding: 10px;
+    border: 5px dashed var(--color-deta-pink-dark);
+    border-radius: 10px;
+}
+
+.btn-big-pink {
+    border: 0px;
+    border-radius: 5px;
+    height: 40px;
+    padding-left: 10px;
+    padding-right: 10px;
+    background-color: var(--color-deta-pink);
+    overflow: hidden;
+}
+
+.btn-big-pink img {
+    height: 100%;
+    width: 100%;
+}
+
+.login form input {
+    height: 40px;
+    border: 0px;
+    background-color: var(--color-back-secondary);
+}
+
+.editor {
+    display: flex;
+    flex-direction: column;
+    row-gap: 10px;
+    padding: 10px;
+    margin: 1vh;
+    border: 5px dashed var(--color-deta-pink-dark);
+    border-radius: 10px;
+    height: 98vh;
+    align-items: flex-end;
+}
+
+.editor-buttons {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    column-gap: 2px;
+    width: min(200px, 80vw);
+}
+
+.note-contents {
+    height: 100%;
+    width: 100%;
+    border: 0px;
+    resize: none;
+    padding: 10px;
+    background-color: var(--color-back-secondary);
+    border-radius: 10px;
+    outline: none;
+}
+
+
+.popup-message-box {
+    margin: auto;
+    width: min(300px, 90%);
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    border: 5px dashed var(--color-deta-pink-dark);
+    background-color: var(--color-back-secondary);
+    border-radius: 10px;
+}
+
+.popup-message-box button {
+    align-self: flex-end;
+}

main/static/index.html

@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Secrets</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/modern-normalize/modern-normalize.min.css">
+    <link rel="stylesheet" href="css/style.css">
+    <script src="js/uluru.js"></script>
+</head>
+
+<body>
+    <header>
+        <div class="header-title">
+            <img class="logo-img" src="img/logo-512x512.png" alt="">
+            <p>ecrets</p>
+            <nav>
+                <a href="https://github.com/el-garro/secrets" target="_blank" rel="noopener noreferrer"><img
+                        class="small-img" src="https://github.githubassets.com/favicons/favicon-dark.svg"
+                        alt="Source"></a>
+                <a href="https://el_garro.t.me" target="_blank" rel="noopener noreferrer"><img class="small-img"
+                        src="https://telegram.org/img/website_icon.svg" alt="Contact me..."></a>
+            </nav>
+        </div>
+        <h5>Your encrypted notes app and password manager (soon...maybe).</h5>
+    </header>
+    <main>
+        <div>
+            <h2>Your notes</h2>
+        </div>
+        <div class="grid-container" id="notes">
+        </div>
+    </main>
+    <div id="loginscreen" class="modal login">
+        <form id="frmLogin" onsubmit="frmLogin_OnSubmit(); return false">
+            <h2>Password</h2>
+            <input id="password" type="password" onkeyup="">
+            <button class="btn-big-pink" type="submit">Login</button>
+        </form>
+    </div>
+    <div id="editorscreen" class="modal" style="display: none;">
+        <div class="editor">
+            <textarea id="noteText" class="note-contents" autofocus></textarea>
+            <div class="editor-buttons">
+                <button id="btnSave" class="btn-big-pink"><img src="img/save_icon.png" alt=""></button>
+                <button id="btnDelete" class="btn-big-pink"><img src="img/delete_icon.png" alt=""></button>
+                <button id="btnClose" class="btn-big-pink" onclick="btnClose_OnClick()"><img src="img/cancel_icon.png"
+                        alt=""></button>
+            </div>
+        </div>
+    </div>
+    <div id="popupscreen" class="modal" style="display: none;">
+        <div class="popup-message-box">
+            <button id="btnClosePopup" class="btn-big-pink" onclick="closePopup()"><img src="img/cancel_icon.png"
+                    alt=""></button>
+            <p id="popupText">Lorem ipsum dolor sit amet consectetur.</p>
+        </div>
+    </div>
+    <footer>
+        <p>
+            Made with ❤️ and ☕️, on Deta, for Deta.
+        </p>
+    </footer>
+    <script src="js/app.js"></script>
+</body>
+
+</html>