burger

main

@@ -104,6 +104,10 @@ def signup():
 def login():
     return render_template("login.html")
 
+@app.route("/privacy")
+def privacy():
+    return render_template("privacy.html")
+
 # API
 @app.route("/api/signup", methods=("GET", "POST"))
 def apisignup():

static/css/style.css

@@ -1,4 +1,4 @@
-@import url("https://fonts.googleapis.com/css2?family=Inter&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
 
 body {
     margin: 0;
@@ -315,29 +315,73 @@ body {
     display: none;
 }
 
+.w100 {
+    font-weight: 300;
+}
+
+.w200 {
+    font-weight: 300;
+}
+
+.w300 {
+    font-weight: 300;
+}
+
+.w400 {
+    font-weight: 400;
+}
+
+.w500 {
+    font-weight: 500;
+}
+
+.w600 {
+    font-weight: 600;
+}
+
+.w700 {
+    font-weight: 700;
+}
+
+.w800 {
+    font-weight: 800;
+}
+
+.w900 {
+    font-weight: 900;
+}
+
 /* main */
 
 .mainDiv {
     text-align: center;
 }
 
+.startDiv {
+    text-align: left;
+    margin-top: 8vh;
+    margin-left: 7vh;
+}
+
 .mainDiv a {
-    padding: 10px;
+    padding: 15px;
-    padding-left: 15px;
+    padding-left: 20px;
-    padding-right: 15px;
+    padding-right: 20px;
+    margin-right: 5px;
     color: white;
     text-decoration: none;
     background-color: #157efb;
     border-radius: 8px;
-    margin-left: 5px;
 }
 
 .mainDiv .feature {
-    width: 80%;
+    width: calc(100% - 20px);
-    margin-left: 10%;
     margin-bottom: 10px;
-    padding: 10px;
+    padding-left: 10px;
-    border-radius: 8px;
+    padding-right: 10px;
+
+    padding-top: 15px;
+    padding-bottom: 15px;
     font-size: 17px;
 }
 
@@ -350,11 +394,25 @@ body {
 }
 
 .mainDiv img {
-    margin: 10px;
+    position: fixed;
-    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+    right: 7vh;
+    top: 8vh;
+    border-radius: 8px;
 }
 
-/* dark theme, slightly modified */
+.links {
+    text-align: center;
+    padding: 10px;
+}
+.links a {
+    margin-left: 5px;
+    text-decoration: none;
+}
+.links a:hover {
+    text-decoration: dashed;
+}
+
+/* dark theme, modified */
 
 @media (prefers-color-scheme: dark) {
     :root {
@@ -373,24 +431,24 @@ body {
 
     body {
         color: white;
-        background-color: #030303;
+        background-color: #202020;
     }
 
     .topBar {
-        background-color: rgba(18, 18, 18, 0.5);
+        background-color: #252525;
-        border-color: #303030;
+        border-color: #414141;
     }
 
     .notesBar {
-        background-color: #030303;
+        background-color: #252525;
         border: solid;
         border-width: 0px;
         border-right-width: 1px;
-        border-color: #303030;
+        border-color: #414141;
     }
 
     .noteBox {
-        background-color: #030303;
+        background-color: #202020;
         color: white;
     }
 
@@ -403,7 +461,7 @@ body {
     }
 
     .notesBar button {
-        background-color: #141414;
+        background-color: #202020;
         border: none;
     }
 
@@ -412,13 +470,13 @@ body {
     }
 
     .optionsDiv {
-        background-color: var(--gray-800);
+        background-color: #252525;
         color: white;
-        border: 1px solid var(--gray-700);
+        border-color: #414141;
     }
 
     .optionsDiv .exit {
-        background-color: var(--gray-700);
+        background-color: #424242;
         color: white;
     }
 
@@ -447,4 +505,12 @@ body {
         color: white;
         border: 1px solid var(--gray-600);
     }
+
+    .notesBar .loadingStuff {
+        background:
+            linear-gradient(0.25turn, transparent, #3b3b3b, transparent),
+            linear-gradient(#2e2e2e, #2e2e2e),
+            radial-gradient(38px circle at 19px 19px, #202020 50%, transparent 51%),
+            linear-gradient(#2e2e2e, #2e2e2e);
+    }
 }

static/js/main.js

@@ -1,10 +1,10 @@
 if (localStorage.getItem("DONOTSHARE-secretkey") === null) {
-    window.location.replace("/")
+    window.location.replace("/login")
     document.body.innerHTML = "Redirecting.."
     throw new Error();
 }
 if (localStorage.getItem("DONOTSHARE-password") === null) {
-    window.location.replace("/")
+    window.location.replace("/login")
     document.body.innerHTML = "Redirecting.."
     throw new Error();
 }
@@ -33,15 +33,9 @@ let notesDiv = document.getElementById("notesDiv")
 let newNote = document.getElementById("newNote")
 let noteBox = document.getElementById("noteBox")
 let loadingStuff = document.getElementById("loadingStuff")
-let burgerDropdown = document.getElementById("burgerDropdown")
 let burgerButton = document.getElementById("burgerButton")
 let exportNotesButton = document.getElementById("exportNotesButton")
 
-for (let i = 0; i < 40; i++) {
-    notesDiv.appendChild(loadingStuff.cloneNode())
-}
-loadingStuff.remove()
-
 let selectedNote = 0
 let timer
 let waitTime = 400
@@ -377,20 +371,6 @@ newNote.addEventListener("click", (event) => {
         }
     }
 });
-document.body.addEventListener("click", (event) => {
-    if (event.clientX > 100) {
-        burgerDropdown.classList.add("hidden")
-    }
-    if (event.clientY > 50) {
-        burgerDropdown.classList.add("hidden")
-    }
-});
-burgerButton.addEventListener("click", (event) => {
-    burgerDropdown.classList.remove("hidden")
-
-    burgerDropdown.style.left = String(event.clientX) + "px"
-    burgerDropdown.style.top = String(event.clientY) + "px"
-});
 function downloadObjectAsJson(exportObj, exportName) {
     var dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(exportObj));
     var downloadAnchorNode = document.createElement("a");

templates/app.html

@@ -19,21 +19,17 @@
     </div>
 
     <div id="notesBar" class="notesBar">
-        <button id="newNote" class="newNote"><img id="newNoteImage" draggable="false" alt="" src="/static/svg/add.svg">new note</button>
+        <button id="newNote" class="newNote"><img id="newNoteImage" draggable="false" alt=""
+                src="/static/svg/add.svg">new note</button>
         <div id="notesDiv" class="notesDiv">
             <button class="loadingStuff" id="loadingStuff"></button>
         </div>
     </div>
 
-    <div class="burgerDropdown hidden" id="burgerDropdown">
-        <a href="/">burgernotes</a><br><br>
-        <a href="/" class="hidden">:3</a>
-    </div>
-
     <div id="optionsCoverDiv" class="optionsCoverDiv hidden">
         <div id="optionsDiv" class="optionsDiv hidden">
             <button class="exit" id="exitThing">X</button>
-            <h3>your account</h3>
+            <h3 class="w300">your account</h3>
             <p id="usernameThing"></p>
             <div class="section"></div>
             <p>storage</p>
@@ -56,6 +52,12 @@
     <textarea id="noteBox" class="noteBox"></textarea>
 
     <script type="text/javascript" src="/static/js/main.js"></script>
+    <script>
+        for (let i = 0; i < 40; i++) {
+            notesDiv.appendChild(loadingStuff.cloneNode())
+        }
+        loadingStuff.remove()
+    </script>
 </body>
 
 </html>

templates/login.html

@@ -13,7 +13,7 @@
 
 <body>
     <div class="inoutdiv">
-        <h2>log in</h2>
+        <h2 class="w300">log in</h2>
         <p>log in to your burgernotes account!</p>
         <p id="statusBox"></p>
         <input id="usernameBox" type="text" placeholder="Username">

templates/main.html

@@ -13,26 +13,27 @@
 
 <body>
     <div class="mainDiv">
+    <div class="startDiv">
+    <h1 class="w300">burgernotes</h1>
+    <p>simple note taking, everywhere you go.</p>
     <br>
-    <h1>burgernotes</h1>
+    <a href="/app">open in your browser</a>
-    <p>simple note taking app</p>
+    <!--<a href="/download">download app</a>-->
-    <br>
+    </div>
-    <a href="/signup">sign up</a>
-    <a href="/login">log in</a>
     <br><br><br>
-
-    <img height="280px" src="/static/mainimg.png">
-
-    <br><br>
     <div class="feature green">
-        <h4>secure</h4>
+        <h4 class="w500">secure</h4>
-        <p>all your notes are fully end-to-end encrypted. only you can read your notes, not anyone else.</p>
+        <p>all your notes are fully <b>end-to-end encrypted</b>. only <b>you</b> can read your notes, not anyone else.</p>
     </div>
     <div class="feature yellow">
-        <h4>always up-to-date</h4>
+        <h4 class="w500">always up-to-date</h4>
         <p>your notes seamlessly sync across your devices.</p>
     </div>
     </div>
+    <div class="links">
+        <a href="https://codeberg.org/burger-software/burgernotes">source code</a>
+        <a href="/privacy">privacy policy</a>
+    </div>
 </body>
 
 </html>

templates/privacy.html

@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>burgernotes</title>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+    <link rel="stylesheet" type="text/css" href="/static/css/style.css" />
+</head>
+
+<body>
+    <h1 class="w300">burgernotes privacy policy</h1>
+    <h2 class="w300">Preamble</h2>
+    <p><i>please note that i am not a lawyer, please don't expect too much of this policy :3</i></p>
+    <p>Welcome to the Burgernotes privacy policy! burgernotes is <a
+            href="https://codeberg.org/burger-software/burgernotes">free & open source</a> software licensed under <a
+            href="https://www.gnu.org/licenses/agpl-3.0.en.html">GNU AGPL-3.0</a>.</p>
+    <h2 class="w300">Information collected when signing up</h2>
+    <p>When signing up for an account, we collect and store the following information:</p>
+    <ul>
+        <li>Username, and your password hashed</li>
+        <li>Date of creating account</li>
+    </ul>
+    <h2 class="w300">Information we collect while using our services</h2>
+    <p>When you create an note, we collect and use this information:</p>
+    <ul>
+        <li>Encrypted note content and title</li>
+        <li>Note creator</li>
+        <li>Note creation date</li>
+        <li>Note last edited date</li>
+    </ul>
+    <p>When you edit an note, we collect and use this information:</p>
+    <ul>
+        <li>Encrypted note content and title</li>
+        <li>Note last edited date</li>
+    </ul>
+    <h2 class="w300">How we use your data</h2>
+    <p>We use your data to make our services work. We don't share your information with third-parties.</p>
+    <h2 class="w300">We can't see notes you create's content and title</h2>
+    <p>Your notes are <a href="https://en.wikipedia.org/wiki/End-to-end_encryption">encrypted end-to-end</a> using AES
+        (Advanced Encryption Standard) 256-bit encryption.</p>
+    <p>We can only see:</p>
+    <ul>
+        <li>Note creation date</li>
+        <li>Note last edited date</li>
+        <li>Note creator</li>
+    </ul>
+    not note content or title.
+    <h2 class="w300">We don't sell your data</h2>
+    <p>We don't sell or share your data to advertisers or third-parties.</p>
+    <h2 class="w300">Liability</h2>
+    <p>We take no responsibility for the use of burgernotes, or any external instances provided by third-parties. We
+        refuse liability for any inappropriate or illegal use of burgernotes.</p>
+    <p>You may view the AGPL-3.0 license which this software is provided to you with. A copy of the section is below.</p>
+    IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
+    WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
+    THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
+    GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
+    USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
+    DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
+    PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
+    EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
+    SUCH DAMAGES.
+    <br><br>
+</body>
+
+<style>
+    body {
+        margin-left: 15px;
+    }
+</style>
+
+</html>

templates/signup.html

@@ -13,7 +13,7 @@
 
 <body>
     <div class="inoutdiv">
-        <h2>sign up</h2>
+        <h2 class="w300">sign up</h2>
         <p>sign up for a burgernotes account</p>
         <p id="statusBox"></p>
         <input id="usernameBox" type="text" placeholder="Username">