More styling changes, clarified new releases features, clarified new version number, better offline error handling
This commit is contained in:
parent
3afa46272d
commit
3e83b7fc5f
|
|
@ -31,8 +31,10 @@
|
|||
</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">
|
||||
<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">
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
background-color: var(--border-color);
|
||||
border-top: var(--border-color) solid 1px;
|
||||
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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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", {
|
||||
|
|
@ -245,15 +281,10 @@ function updateUserInfo() {
|
|||
"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()
|
||||
|
|
|
|||
Reference in New Issue