Max/SolidScribe
1
0
Fork 0
Code Issues 24 Pull Requests Releases Wiki Activity

Bunch of changes and unfinished features. Just trying to keep everything up to date. This project is a mess. Don't worry. You are employed.

Browse Source
This commit is contained in:
Max G
2021-12-18 22:18:22 +00:00
parent c99828dbad
commit d4be0d6471
18 changed files with 443 additions and 217 deletions
Download Patch File Download Diff File Expand all files Collapse all files

159
client/src/pages/HomePage.vue
View File

@@ -11,7 +11,24 @@
-moz-animation: fadeorama 16s ease infinite;
animation: fadeorama 16s ease infinite;
height: 350px;
text-shadow: 1px 1px 2px black;
}
.shine {
position: absolute;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: none;
}
.spotlight {
background: rgba(255,255,255,0);
background: radial-gradient(circle at bottom, var(--main-accent) 0%, rgba(255,255,255,0) 60%);
z-index: 200;
}
.logo-display {
width: 140px;
height: auto;
@@ -24,10 +41,14 @@
font-size: 4rem;
text-align: center;
}
div#app div.lightly-padded.home-main div.ui.centered.vertically.divided.stackable.grid div.row.hero.fadeBg div.sixteen.wide.middle.aligned.center.column h2.massive-text svg.logo-display path {
stroke: black !important;
stroke-width: 1px !important;
}
.blinking {
animation:blinkingText 1.5s linear infinite;
}
@keyframes blinkingText{
@keyframes blinkingText {
0%{ opacity: 0.9; }
50%{ opacity: 0; }
100%{ opacity: 0.9; }
@@ -101,10 +122,11 @@
<!-- <div class="one wide large screen only column"></div> -->
<!-- desktop column - large screen only -->
<div class="sixteen wide middle aligned center aligned column">
<div class="sixteen wide middle aligned center aligned column" style="z-index: 500;">
<h2 class="massive-text">
<img class="logo-display" loading="lazy" src="/api/static/assets/logo.svg" alt="Solid Scribe Logo">
<!-- <img class="logo-display" loading="lazy" src="/api/static/assets/logo.svg" alt="Solid Scribe Logo"> -->
<logo class="logo-display" color="var(--main-accent)" stroke="true" />
<br>
Solid Scribe
</h2>
@@ -118,6 +140,10 @@
<!-- <div class="eight wide middle aligned left aligned column">
<img loading="lazy" width="90%" src="/api/static/assets/marketing/notebook.svg" alt="The Venus fly laptop about to capture another victim">
</div> -->
<div v-for="i in jewelFacets" class="shine" :style="shineStyle(i)" v-bind:key="i"></div>
<div class="shine spotlight"></div>
</div>
@@ -145,6 +171,7 @@
<!-- Go to notes button -->
<div class="row" v-if="$parent.loggedIn">
<div class="sixteen wide middle algined center aligned column">
<h3>You are already logged in</h3>
<router-link class="ui huge green labeled icon button" to="/notes">
<i class="external alternate icon"></i>Go to Notes
</router-link>
@@ -164,10 +191,30 @@
</div>
</div>
<!-- theme selector -->
<div class="ui white row">
<div class="sixteen wide middle aligned column">
<div class="ui container">
<h2>
Pick your theme
</h2>
<h3 v-if="$parent.loggedIn">Go to settings to change theme</h3>
<div
v-for="color in themeColors"
v-bind:key="color"
class="ui small basic button"
:style="`background: linear-gradient(0deg, ${color} 4%, rgba(0,0,0,0) 5%);`"
v-on:click="setAccentColor(color)">
<logo style="width: 20px; height: auto;" :color="color" />
</div>
</div>
</div>
</div>
<!-- Overview -->
<div class="middle aligned centered row">
<div class="six wide column">
<h2>Powerful text editing and privacy</h2>
<h2 class="ui dividing header">Powerful text editing and privacy</h2>
<h3>Easily edit, share and organize thousands of notes.</h3>
<h3>Feel safe knowing no one can read your notes but you.</h3>
<!-- <h3>Tools to organize and collaborate on thousands of notes while maintaining security and respecting your privacy.</h3> -->
@@ -183,42 +230,42 @@
<!-- note features -->
<div class="six wide column">
<h1 class="ui center aligned header"><i class="sliders horizontal icon"></i>App Features</h1>
<h1 class="ui center aligned dividing header"><i class="small green sliders horizontal icon"></i>App Features</h1>
<h2 class="ui dividing header">
<h2 class="ui header">
<div class="content">
<i class="icons">
<i class="grey sticky note icon"></i>
<i class="bottom left corner teal plus icon"></i>
</i>
Create as many notes as you want
Create a million notes!
<div class="sub header">Create unlimited notes up to 5,000,000 characters long.</div>
</div>
</h2>
<h2 class="ui dividing header">
<h2 class="ui header">
<div class="content">
<i class="icons">
<i class="grey tags icon"></i>
<i class="bottom left corner purple plus icon"></i>
</i>
Tag Notes
<div class="sub header">Easily add and edit tags on notes then search or sort by tag.</div>
<div class="sub header">Add and edit tags on notes then search or sort by tag.</div>
</div>
</h2>
<h2 class="ui dividing header">
<h2 class="ui header">
<div class="content">
<i class="icons">
<i class="grey search icon"></i>
<i class="bottom left corner orange font icon"></i>
</i>
Search Note Text
<div class="sub header">Easily search all notes, files, links and tags.</div>
<div class="sub header">Search all notes, files, links and tags.</div>
</div>
</h2>
<h2 class="ui dividing header">
<h2 class="ui header">
<div class="content">
<i class="icons">
<i class="grey search icon"></i>
@@ -229,7 +276,7 @@
</div>
</h2>
<h2 class="ui dividing header">
<h2 class="ui header">
<div class="content">
<i class="icons">
<i class="grey cloud moon icon"></i>
@@ -243,8 +290,8 @@
<!-- editing features -->
<div class="six wide column">
<h1 class="ui center aligned header"><i class="sliders horizontal icon"></i>Editing Features</h1>
<h2 class="ui dividing header">
<h1 class="ui center aligned dividing header"><i class="small green sliders horizontal icon"></i>Editing Features</h1>
<h2 class="ui header">
<div class="content">
<i class="icons">
<i class="grey list icon"></i>
@@ -254,7 +301,7 @@
<div class="sub header">Create To Do lists that are always synced, work on mobile and can be sorted.</div>
</div>
</h2>
<h2 class="ui dividing header">
<h2 class="ui header">
<div class="content">
<i class="icons">
<i class="grey file icon"></i>
@@ -264,7 +311,7 @@
<div class="sub header">Bold, Underline, Title, Add Links, Add Tables, Color Text, Color Background and more.</div>
</div>
</h2>
<h2 class="ui dividing header">
<h2 class="ui header">
<div class="content">
<i class="icons">
<i class="grey file icon"></i>
@@ -274,7 +321,7 @@
<div class="sub header">Color the background of notes and add colored icons to make them stand out.</div>
</div>
</h2>
<h2 class="ui dividing header">
<h2 class="ui header">
<div class="content">
<i class="icons">
<i class="grey images icon"></i>
@@ -284,7 +331,7 @@
<div class="sub header">Upload images to notes, add search text to the images to find them later.</div>
</div>
</h2>
<h2 class="ui dividing header">
<h2 class="ui header">
<div class="content">
<i class="icons">
<i class="grey users icon"></i>
@@ -301,8 +348,8 @@
<div class="middle aligned centered row">
<!-- privacy features -->
<div class="six wide column">
<h1 class="ui center aligned header"><i class="sliders horizontal icon"></i>Privacy Features</h1>
<h2 class="ui dividing header">
<h1 class="ui center aligned dividing header"><i class="small green sliders horizontal icon"></i>Privacy Features</h1>
<h2 class="ui header">
<div class="content">
<i class="icons">
<i class="grey lock icon"></i>
@@ -312,17 +359,17 @@
<div class="sub header">All note text is encrypted. No one can read your notes. None of your data is shared.</div>
</div>
</h2>
<h2 class="ui dividing header">
<h2 class="ui header">
<div class="content">
<i class="icons">
<i class="grey search icon"></i>
<i class="bottom left corner orange font icon"></i>
</i>
Note Search is Encrypted
<div class="sub header">Easily search the contents of all your notes without compromising security.</div>
<div class="sub header">Search the contents of all your notes without compromising security.</div>
</div>
</h2>
<h2 class="ui dividing header">
<h2 class="ui header">
<div class="content">
<i class="icons">
<i class="grey share alternate icon"></i>
@@ -332,7 +379,7 @@
<div class="sub header">Shared notes are still encrypted, only readable by you and the shared users.</div>
</div>
</h2>
<h2 class="ui dividing header">
<h2 class="ui header">
<div class="content">
<i class="icons">
<i class="grey tv icon"></i>
@@ -442,7 +489,10 @@
<div v-if="true" class="middle aligned centered row">
<div class="six wide column">
<h2>Solid Scribe was created by one passionate developer</h2>
<h3>
<a target="_blank" href="https://www.maxg.cc">Solid Scribe was created by Max Gialanella</a>
</h3>
<p><a target="_blank" href="https://www.maxg.cc">Check out my Resume</a></p>
<p>
I was tired of all my data being owned by big companies, having it farmed out for marketing, and leaving the contents of my life exposed to corporations.
</p>
@@ -450,9 +500,10 @@
If you want to give it a shot, feel free to make an account. There are no ads. None of this data is shared or public. I don't make any money.
</p>
<p>
If you see anything broken or want to see a feature implemented, I'm open to suggestions. <i class="thumbs up icon"></i>
If you see anything broken or want to see a feature implemented; I'm open to suggestions. <i class="thumbs up icon"></i>
</p>
<p>If you want to help me out, I would love a small Bitcoin donation.</p>
<p>Email me at <a href="mailto:maxgialanella@pm.me">Max.Gialanella@pm.me</a></p>
<p>If you want to help me out with hosting this application, I would love a small Bitcoin donation.</p>
<p>
<a href="https://btc3.trezor.io/address/3QYnnNKnYTcU82F8NJ1BrmzGU2zRndTyEG" target="_blank">
<img loading="lazy" width="160px" src="/api/static/assets/marketing/wallet.png" alt="3QYnnNKnYTcU82F8NJ1BrmzGU2zRndTyEG">
@@ -466,7 +517,7 @@
</div>
<div class="center aligned sixteen wide column">
<router-link to="/terms"></i>Solid Scribe Terms of Use</router-link>
<router-link to="/terms">Solid Scribe Terms of Use</router-link>
</div>
@@ -479,11 +530,27 @@ export default {
name: 'WelcomePage',
components: {
'login-form':require('@/components/LoginFormComponent.vue').default,
'logo':require('@/components/LogoComponent.vue').default,
},
data(){
return {
height: null,
realInformation: false,
jewelFacets: 15,
themeColors: [
'#21BA45', //Green
'#b5cc18', //Lime
'#00b5ad', //Teal
'#2185d0', //Blue
'#7128b9', //Violet
'#a333c8', // "Purple"
'#e03997', //Pink
'#db2828', //Red
'#f2711c', //Orange
'#fbbd08', //Yellow
'#767676', //Grey
'#303030', //Black-almost
],
}
},
beforeCreate(){
@@ -497,6 +564,40 @@ export default {
},
methods: {
shineStyle(i){
const farMax = 95 //85
const farMin = 83
const farOut = (Math.floor(Math.random() * (farMax - farMin + 1)) + farMin)
// const rotation = 360/this.jewelFacets
const rotMax = 360/this.jewelFacets
const rotMin = 320/this.jewelFacets
const rotation = (Math.floor(Math.random() * (rotMax - rotMin + 1)) + rotMin)
let style = `
background: linear-gradient(
${(i+1)*(rotation)}deg,
rgba(255,255,255,0) ${farOut}%,
rgba(255,255,255,0.1) ${farOut+1}%,
rgba(255,255,255,0.0) ${farOut+10}%
)
;`
// Remove whitespace - Make it 1 line
return style.replace(/\s+/g, '')
},
setAccentColor(color){
let root = document.documentElement
root.style.setProperty('--main-accent', color)
localStorage.setItem('main-accent', color)
if(!color || color == '#21BA45'){
localStorage.removeItem('main-accent')
}
},
showRealInformation(){

5
client/src/pages/NotesPage.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="page-container">
<div class="page-container" v-on:scroll="onScroll">
<div class="ui grid" ref="content">
@@ -367,6 +367,9 @@
}
},
methods: {
onScroll(e){
console.log('Scroll')
},
toggleTitleView(){
this.titleView = !this.titleView
},

8
client/src/pages/SettingsPage.vue
View File

@@ -49,7 +49,7 @@
<div class="ui segment">
<div class="ui stackable grid">
<div class="six wide column">
<p>1. Enter Password and get QR</p>
<div class="ui tiny dividing header">1. Enter Password and get QR</div>
<div class="ui fluid action input">
<input type="password" placeholder="Current Password" v-model="password">
@@ -62,12 +62,12 @@
</div>
</div>
<div class="four wide column">
<p>2. Scan QR Code</p>
<div class="ui tiny dividing header">2. Scan QR Code</div>
<p v-if="qrCode == ''">(QR Code will appear here)</p>
<img v-if="qrCode != ''" :src="qrCode" alt="QR Code">
<img v-if="qrCode != ''" :src="qrCode" class="ui image" alt="QR Code">
</div>
<div class="six wide column">
<p>3. Verify with code</p>
<div class="ui tiny dividing header">3. Verify with code</div>
<div class="ui fluid action input" v-if="qrCode != ''">
<input type="text" placeholder="Verification Code" v-model="verificationToken" v-on:keyup.enter="verifyQrCode()">
<div class="ui green button">