More styling changes, clarified new releases features, clarified new version number, better offline error handling

app/index.html

@@ -31,8 +31,10 @@
     </div>
 
     <div id="notesBar" class="notesBar">
-        <button id="newNote" class="newNote"><img id="newNoteImage" draggable="false" alt=""
+        <button id="newNote" class="newNote">
-                src="/static/svg/add.svg">New note</button>
+            <div class="vcenter"><img id="newNoteImage" draggable="false" alt="" src="/static/svg/add.svg"></div>
+            <div class="vcenter">New note</div>
+        </button>
         <div id="notesDiv" class="notesDiv">
             <button class="loadingStuff" id="loadingStuff"></button>
         </div>
@@ -42,17 +44,17 @@
         <div id="optionsDiv" class="optionsDiv hidden">
             <button class="exit" id="exitThing">X</button>
             <h3 class="w300">Your account</h3>
-            <p id="usernameThing"></p>
+            <p id="usernameThing">Cannot connect to the server</p>
             <div class="section"></div>
             <p>Storage</p>
             <progress id="storageProgressThing" value="0" max="100"></progress><br>
-            <p id="storageThing"></p>
+            <p id="storageThing">Cannot connect to the server</p>
             <div class="section"></div>
             <p>Account managment</p>
-            <button id="deleteMyAccountButton"><img src="/static/svg/delete_forever.svg" alt="">Delete my account</button>
+            <button id="deleteMyAccountButton"><img src="/static/svg/delete_forever.svg" alt="">Delete account</button>
             <button id="exportNotesButton"><img src="/static/svg/download.svg" alt="">Export notes</button>
             <button id="importNotesButton"><img src="/static/svg/upload.svg" alt="">Import notes</button>
-            <button id="sessionManagerButton"><img src="/static/svg/list.svg" alt="">Session manager</button>
+            <button id="sessionManagerButton"><img src="/static/svg/list.svg" alt="">View sessions</button>
             <button class="lastButton" id="logOutButton"><img src="/static/svg/logout.svg" alt="">Log out</button>
         </div>
         <div id="sessionManagerDiv" class="optionsDiv hidden">

static/css/style.css

@@ -339,19 +339,21 @@ body {
 .notesBar .newNote {
     height: 41px;
     line-height: 41px;
-    width: 100%;
     text-align: left;
-    background-color: rgba(0, 0, 0, 0);
-    border: none;
     font-size: 16px;
-    margin-bottom: 5px;
     cursor: pointer;
+    display: flex;
+    margin-top: 5px;
+    background: var(--note-button);
+    border-radius: 8px;
+    border: var(--border-color) solid 1px;
+    width: calc(100% - 7px - 7px - 3.5px);
+    margin-left: 5px;
 }
 
 .notesBar .newNote img {
     height: 32px;
     padding-right: 5px;
-    transform: translateY(30%);
 }
 
 .noteBox {
@@ -518,8 +520,7 @@ iframe#markdown {
 
 .optionsDiv .section {
     width: 100%;
-    height: 1px;
+    border-top: var(--border-color) solid 1px;
-    background-color: var(--border-color);
     margin-top: 2px;
     margin-bottom: 10px;
 }
@@ -530,21 +531,19 @@ iframe#markdown {
 }
 
 .sessionDiv div {
-    position: relative;
     background-color: var(--session-color);
     border-radius: 8px;
     margin-bottom: 5px;
     padding: 10px;
-    height: 35px;
+    padding-bottom: 0px;
     display: flex;
-    overflow-y: scroll;
 }
 
 .sessionDiv div p {
     display: inline;
-    transform: translateY(-20px);
     overflow-wrap: anywhere;
-    margin-left: 10px;
+    margin: 10px;
+    margin-top: 0px;
 }
 
 .sessionDiv div button {
@@ -561,8 +560,9 @@ iframe#markdown {
 .sessionDiv img {
     display: inline;
     filter: none;
-    height: 100%;
+    height: 35px;
     position: static;
+    margin-right: 5px;
 }
 
 /* Sign up/log in div */
@@ -630,6 +630,12 @@ iframe#markdown {
     display: none !important;
 }
 
+.vcenter {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
 .w100 {
     font-weight: 300;
 }

static/css/style.css.save

@@ -0,0 +1,765 @@
+@import url("../fonts/inter.css");
+
+:root {
+    --contrast: #eee;
+    --contrast2: #fff;
+    --invertdm: 0%;
+    --bar: #f4f4f4;
+    --editor: #ffffff;
+    --text-color: #000000;
+    --border-color: #dadada;
+    --theme-color: #157efb;
+    --theme-text-color: #ffffff;
+    --exit-color: #e9e9e9;
+    --session-color: #f4f4f4;
+    --note-button: #ffffff;
+    --note-button-text-color: #ffffff;
+    --unselected-note-button-text-color: #000000;
+    --option-background: #ffffff;
+    --invert: 100%;
+    --bottomBarHover: #e4e4e4;
+}
+
+/* dark mode */
+
+@media (prefers-color-scheme: dark) {
+    :root {
+	--invertdm: 100%;
+        --contrast: #2d2f21;
+        --contrast2: #2d2f21;
+        --bar: #2d2f31;
+        --editor: #202124;
+        --text-color: #ffffff;
+        --border-color: #393b3d;
+        --theme-color: #157efb;
+        --theme-text-color: #ffffff;
+        --exit-color: #454649;
+        --session-color: #2d2f31;
+        --note-button: #202124;
+        --note-button-text-color: #ffffff;
+        --unselected-note-button-text-color: #ffffff;
+        --option-background: #202124;
+        --invert: 100%;
+        --bottomBarHover: #e4e4e4;
+    }
+
+    .startDiv p {
+        color: white !important;
+    }
+
+    .topBar p {
+        color: white !important;
+    }
+
+    .newNote {
+        color: white !important;
+    }
+
+    .newNote img {
+        filter: invert(100%);
+    }
+
+    #errorDiv p {
+        color: white !important;
+    }
+
+    .optionsCoverDiv p {
+        color: white !important;
+    }
+
+    .burgerSession img {
+        filter: invert(100%) !important;
+    }
+
+    .links a {
+        color: white !important;
+    }
+
+    .inoutdiv p {
+        color: white !important;
+    }
+
+    .inoutdiv a {
+        color: #969696 !important;
+    }
+
+    .inoutdiv input {
+        color: white;
+        background-color: var(--editor);
+    }
+
+    .flathubLogo {
+        filter: invert(100%);
+    }
+
+    .feature {
+        background-color: rgba(0, 0, 0, 0) !important;
+        color: var(--text-color);
+    }
+    .mainDiv .yellow {
+        border-color: #e9e98d !important;
+    }
+    .mainDiv .green {
+        border-color: #a9f9a9 !important;
+    }
+}
+
+p,
+li,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    color: var(--text-color);
+    white-space: break-spaces;
+}
+
+h7 {
+    display: block;
+    font-size: 20px;
+    margin-top: 0.67em;
+    margin-bottom: 0.67em;
+    margin-left: 0;
+    margin-right: 0;
+}
+
+body {
+    margin: 0;
+    background-color: var(--editor);
+    font-family: "Inter", sans-serif;
+}
+
+.hiddenButton {
+    right: 0px;
+    position: fixed;
+    background-color: var(--editor);
+    color: var(--editor);
+    padding: 20px;
+}
+
+/* Web app */
+.topBar {
+    position: fixed;
+    width: 100%;
+    height: 50px;
+
+    background-color: var(--bar);
+
+    border: solid;
+    border-color: var(--border-color);
+    border-width: 0px;
+    border-bottom-width: 1px;
+    display: flex;
+}
+
+.bottomBar {
+    position: fixed;
+    width: 100%;
+    height: 29px;
+    bottom: 0;
+
+    background-color: var(--bar);
+
+    border: solid;
+    border-color: var(--border-color);
+    border-width: 0px;
+    border-top-width: 1px;
+    display: flex;
+    text-wrap: nowrap;
+    overflow-x: scroll;
+}
+
+.bottomBar button {
+    background-color: rgba(0, 0, 0, 0);
+    color: var(--text-color);
+    height: 100%;
+    border: none;
+    font-size: 14px;
+    padding-left: 7.5px;
+    padding-right: 7.5px;
+}
+
+.bottomBar .markdownButton {
+    filter: invert(var(--invertdm));
+    padding-left: 17.5px;
+    padding-right: 17.5px;
+    background-image: url("../../static/svg/markdown.svg");
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: 55%;
+}
+
+.bottomBar .removeButton {
+    filter: invert(var(--invertdm));
+    padding-left: 17.5px;
+    padding-right: 17.5px;
+    background-image: url("../../static/svg/delete.svg");
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: 55%;
+}
+
+.bottomBar .textManipulator {
+    margin-left: auto;
+}
+
+.bottomBar button:hover {
+    background-color: var(--bottomBarHover);
+}
+
+.bottomBar .right {
+    float: right;
+}
+
+.burgerDropdown {
+    position: fixed;
+    z-index: 2;
+    left: 7px;
+    top: 30px;
+    width: 160px;
+    height: 90px;
+
+    background-color: var(--bar);
+
+    border: solid;
+    border-color: var(--border-color);
+    border-width: 1px;
+    border-radius: 8px;
+}
+
+.burgerDropdown a {
+    position: absolute;
+    width: calc(100% - 14px - 4px - 7px);
+    color: var(--text-color);
+    background-color: #ffffff;
+    height: 35px;
+    line-height: 35px;
+    margin: 7px;
+    padding-left: 7px;
+    border: solid;
+    border-color: var(--border-color);
+    border-width: 1px;
+    border-radius: 8px;
+    font-size: 15px;
+    text-decoration: none;
+}
+
+.topBar p {
+    display: inline-block;
+}
+
+.topBar .logo {
+    margin-left: 12px;
+    background-color: transparent;
+    border: none;
+    color: var(--text-color);
+    white-space: break-spaces;
+    display: flex;
+}
+
+.topBar .usernameBox {
+    text-align: right;
+    margin-left: auto;
+    cursor: pointer;
+}
+
+.topBar img {
+    scale: 0.5;
+    filter: invert(var(--invertdm));
+}
+
+.notesBar {
+    position: fixed;
+    width: 180px;
+    top: 50px;
+    height: calc(100% - 50px - 30px - 1px);
+
+    background-color: var(--bar);
+    border: solid;
+    border-color: var(--border-color);
+    border-width: 0px;
+    border-right-width: 1px;
+    border-top-width: 1px;
+}
+
+.notesDiv {
+    height: calc(100% - 50px);
+    overflow-y: scroll;
+}
+
+.notesBar .noteButton, .notesBar .loadingStuff {
+    width: calc(100% - 7px - 7px - 3.5px);
+    height: 35px;
+    line-height: 0px;
+    padding: 10px;
+    margin: 5px;
+    margin-bottom: 0;
+    background-color: var(--note-button);
+    color: var(--unselected-note-button-text-color);
+    border-radius: 8px;
+
+    border: solid;
+    border-color: var(--border-color);
+    border-width: 1px;
+    font-size: 15px;
+
+    text-align: left;
+    cursor: pointer;
+    white-space: nowrap;
+    overflow-x: hidden;
+}
+
+.notesBar .loadingStuff {
+    border: none;
+    background:
+    linear-gradient(0.25turn, transparent, var(--contrast2), transparent),
+    linear-gradient(var(--contrast), var(--contrast)),
+    radial-gradient(38px circle at 19px 19px, #eee 50%, transparent 51%),
+    linear-gradient(var(--contrast), var(--contrast));
+    background-repeat: no-repeat;
+    background-size: 200% 200%, 100% 200%, 50% 50%, 140% 12%;
+    background-position: -200% 0, 0 0, 0 76%, 16% 78%;
+    animation: loading 1.5s infinite;
+}
+
+@keyframes loading {
+    to {
+        background-position: 200% 0, 0 0, 0 76%, 16% 78%;
+    }
+}
+
+.notesBar .selected {
+    background-color: var(--theme-color) !important;
+    border: none;
+    color: var(--note-button-text-color);
+}
+
+.notesBar .newNote {
+    height: 41px;
+    line-height: 41px;
+    width: 100%;
+    text-align: left;
+    background-color: rgba(0, 0, 0, 0);
+    border: none;
+    font-size: 16px;
+    margin-bottom: 5px;
+    cursor: pointer;
+}
+
+.notesBar .newNote img {
+    height: 32px;
+    padding-right: 5px;
+    transform: translateY(30%);
+}
+
+.noteBox {
+    position: fixed;
+    right: 0;
+    top: 50px;
+    border: none;
+    font-size: 16px;
+    color: var(--text-color);
+    background-color: var(--editor);
+    width: calc(100% - 180px);
+    height: calc(100% - 50px - 30px);
+    font-family: "Inter", sans-serif;
+    display: flex;
+    flex-direction: row;
+    z-index: -1;
+}
+
+.noteBox.mobile {
+    flex-direction: column-reverse;
+}
+
+.noteBoxText {
+    resize: none;
+    background-color: var(--editor);
+    color: var(--text-color);
+    border: none;
+    width: 100%;
+    height: 100%;
+    font-family: "Inter", sans-serif;
+}
+
+iframe#markdown {
+    width: 100%;
+    height: 100%;
+    border: none;
+    border-left: solid var(--bar) 1px;
+}
+
+.noteBox:focus {
+    outline: none;
+}
+
+.optionsCoverDiv {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    z-index: 2;
+    background-color: rgba(0, 0, 0, 0.7);
+    transition: opacity 1s;
+}
+
+.optionsDiv {
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    position: fixed;
+    background-color: var(--option-background);
+    padding: 10px;
+    color: var(--text-color);
+    border-radius: 8px;
+    width: 300px;
+    z-index: 3;
+    display: flex;
+    flex-direction: column;
+    max-width: 90%;
+    max-height: 90%;
+    overflow-y: scroll;
+}
+
+.optionsDiv button {
+    width: 100%;
+    padding: 10px;
+    margin-bottom: 7px;
+    color: var(--theme-text-color);
+    border: none;
+    text-decoration: none;
+    background-color: var(--theme-color);
+    border-radius: 8px;
+    cursor: pointer;
+    font-size: 15px;
+}
+
+.optionsDiv .normalButton {
+    width: auto;
+    margin-bottom: 0px;
+}
+
+.optionsDiv .lastButton {
+    margin-bottom: 0px;
+}
+
+.optionsDiv input {
+    width: calc(100% - 12px);
+    height: 25px;
+    background-color: #ffffff;
+    padding-left: 5px;
+    padding-right: 5px;
+    margin-bottom: 7px;
+    border: solid;
+    border-color: var(--border-color);
+    border-width: 1px;
+    border-radius: 8px;
+}
+
+.optionsDiv .mfacheckbox {
+    display: inline;
+    margin: 0;
+    margin-left: 5px;
+    margin-bottom: 12px;
+    padding: 0;
+    height: 17px;
+    width: 17px;
+}
+
+.optionsDiv input:focus {
+    outline: 0;
+    border-color: var(--theme-color);
+}
+
+.optionsDiv code {
+    padding: 7px;
+    font-size: 14px;
+    border-radius: 8px;
+    background-color: var(--session-color);
+}
+
+.optionsDiv progress {
+    width: 100%;
+    background-color: var(--session-color);
+    border: none;
+    border-radius: 99px;
+    height: 7px;
+}
+
+.optionsDiv progress::-moz-progress-bar {
+    background: var(--theme-color);
+}
+
+.optionsDiv progresss::-webkit-progress-value {
+    background: var(--theme-color);
+}
+
+.optionsDiv .exit {
+    position: absolute;
+    right: 5px;
+    width: 40px;
+    height: 40px;
+    font-size: 16px;
+    background-color: var(--exit-color);
+    color: var(--text-color);
+    border-radius: 100%;
+}
+
+.optionsDiv img {
+    height: 18px;
+    padding-right: 5px;
+    filter: invert(var(--invert));
+    position: absolute;
+    left: 20px;
+    scale: 1.3;
+    transform: translateY(1px);
+}
+
+.optionsDiv .section {
+    width: 100%;
+    height: 1px;
+    background-color: var(--border-color);
+    margin-top: 2px;
+    margin-bottom: 10px;
+}
+
+.sessionDiv {
+    max-height: 255px;
+    overflow-y: auto;
+}
+
+.sessionDiv div {
+    position: relative;
+    background-color: var(--session-color);
+    border-radius: 8px;
+    margin-bottom: 5px;
+    padding: 10px;
+    display: flex;
+    overflow-y: scroll;
+}
+
+.sessionDiv div p {
+    display: inline;
+    transform: translateY(-20px);
+    overflow-wrap: anywhere;
+    margin-left: 10px;
+    margin-right: 10o
+}
+
+.sessionDiv div button {
+    position: static;
+    border-radius: 99px;
+    max-width: 40px;
+    min-width: 40px;
+    margin-left: auto;
+    height: 40px;
+    font-size: 16px;
+    transform: translateY(-2px);
+}
+
+.sessionDiv img {
+    display: inline;
+    filter: none;
+    height: 100%;
+    position: static;
+}
+
+/* Sign up/log in div */
+
+.inoutdiv {
+    border-radius: 8px;
+    margin: 10%;
+    padding: 30px;
+    border: solid 1px var(--border-color);
+    background-color: var(--bar);
+}
+
+.inoutdiv input {
+    width: calc(100% - 120px);
+    height: 30px;
+    margin-bottom: 10px;
+    padding-left: 10px;
+    padding-right: 10px;
+
+    border: solid;
+    border-color: var(--border-color);
+    border-width: 1px;
+    border-radius: 8px;
+
+}
+
+.inoutdiv button {
+    background-color: var(--theme-color);
+    color: white;
+    padding: 10px;
+    margin-right: 5px;
+    padding-left: 20px;
+    padding-right: 20px;
+
+    border: none;
+    border-radius: 8px;
+
+    font-size: 14px;
+
+}
+
+.inoutdiv a {
+    color: grey;
+    text-align: center;
+}
+
+.background {
+    position: fixed;
+    z-index: -2;
+    top: 0;
+    width: 100%;
+    min-height: 100%;
+}
+
+.credit {
+    position: fixed;
+    left: 5px;
+    color: white;
+    z-index: -1;
+    margin: 0;
+    bottom: 5px;
+}
+
+.hidden {
+    display: none !important;
+}
+
+.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;
+}
+
+.alertDiv {
+    position: fixed;
+    margin: 0;
+    width: 100%;
+    background-color: #ffffeb;
+    height: 25px;
+    z-index: 9999;
+    top: 0;
+}
+
+/* main */
+
+.mainDiv {
+    text-align: center;
+}
+
+.startDiv {
+    text-align: left;
+    margin-top: 8vh;
+    margin-left: 7vh;
+    display: flex;
+    flex-direction: column;
+}
+
+.startDiv h1 {
+    margin: 0;
+}
+
+.mainDiv a {
+    padding: 15px;
+    padding-left: 20px;
+    padding-right: 20px;
+    margin-right: auto;
+    color: white;
+    text-decoration: none;
+    background-color: var(--theme-color);
+    border-radius: 8px;
+}
+
+.mainDiv .feature {
+    width: calc(100% - 7vh - 7vh - 3.5vh);
+    margin-bottom: 10px;
+    margin-left: 7vh;
+    margin-right: 7vh;
+    padding-left: 10px;
+    padding-right: 10px;
+
+    border: solid;
+    border-radius: 8px;
+    border-width: 1px;
+    border-color: var(--border-color);
+
+    padding-top: 15px;
+    padding-bottom: 15px;
+    font-size: 17px;
+    padding-bottom: 30px;
+}
+
+.mainDiv .green {
+    background-color: #ebffeb;
+}
+
+.mainDiv .yellow {
+    background-color: #ffffeb;
+}
+
+.links {
+    text-align: center;
+    padding: 10px;
+}
+
+.links a {
+    margin-left: 5px;
+    text-decoration: none;
+    background-color: var(--bar);
+    color: var(--text-color);
+    padding: 10px;
+    padding-top: 2.5px;
+    margin-bottom: 10px;
+    border-radius: 10px;
+    transition: background-color .2s;
+    display: inline-block;
+}
+
+.links a:hover {
+    background-color: var(--editor);
+}
+
+.links a img {
+    transform: translateY(5px);
+    padding-right: 10px;
+    filter: invert(var(--invertdm));
+}
+
+.links a:hover {
+    text-decoration: dashed;
+}

static/js/main.js

@@ -184,6 +184,42 @@ function updateFont() {
     }
 }
 
+async function checknetwork() {
+    fetch(remote + "/api/loggedin", {
+        method: "POST",
+        body: JSON.stringify({
+            secretKey: localStorage.getItem("DONOTSHARE-secretkey"),
+        }),
+        headers: {
+            "Content-Type": "application/json; charset=UTF-8"
+        }
+    })
+    .catch(() => {
+        noteBox.readOnly = true
+        noteBox.value = ""
+        noteBox.placeholder = "You are currently offline."
+        displayError("Failed to connect to the server.\nPlease check your internet connection.")
+    })
+    .then((response) => response)
+    .then((response) => {
+        if (response.status == 400) {
+            displayError("Something went wrong! Signing you out...")
+            closeErrorButton.classList.add("hidden")
+            usernameBox.innerText = ""
+            setTimeout(function () {
+                window.location.replace("/logout")
+            }, 2500);
+        } else if (response.status == 200) {
+            updateUserInfo()
+        } else {
+            noteBox.readOnly = true
+            noteBox.value = ""
+            noteBox.placeholder = "You are currently offline."
+            displayError("Failed to connect to the server.\nPlease check your internet connection.")
+        }
+    });
+}
+
 async function waitforedit() {
     while(true) {
         await fetch(remote + "/api/waitforedit", {
@@ -244,16 +280,11 @@ function updateUserInfo() {
         headers: {
             "Content-Type": "application/json; charset=UTF-8"
         }
-    })
-        .catch(() => {
-            noteBox.readOnly = true
-            noteBox.value = ""
-            noteBox.placeholder = "Failed to connect to the server.\nPlease check your internet connection."
     })
         .then((response) => {
             async function doStuff() {
                 if (response.status === 500) {
-                    displayError("Something went wrong! Signing you out..")
+                    displayError("Something went wrong! Signing you out...")
                     closeErrorButton.classList.add("hidden")
                     usernameBox.innerText = ""
                     setTimeout(function () {
@@ -392,8 +423,6 @@ exitSessionsThing.addEventListener("click", () => {
     sessionManagerDiv.classList.add("hidden")
 });
 
-updateUserInfo()
-
 function updateWordCount() {
     let wordCount = noteBox.value.split(" ").length
     if (wordCount === 1) {
@@ -730,7 +759,8 @@ document.addEventListener("DOMContentLoaded", function() {
 });
 
 if (firstNewVersion()) {
-    displayError("What's new in Burgernotes 1.2-1?\nNotes now support live editing\nFixed various bugs and issues in the client")
+    displayError("What's new in Burgernotes 2.0?\nRestyled client\nAdded changing passwords\nMigrated to OAuth2\nAdded importing notes")
 }
 
-//waitforedit()
+checknetwork()
+waitforedit()