6bb856689d
* Links now get an underline on hover * Cleaned up CSS variable names, added another theme color for more control * Cleaned up unused CSS, removed scrollbars popping up, tons of other little UI tweaks * Renamed shared notes to inbox * Tweaked form display, seperated login and create accouts * Put login/sign up form on home page * Created more legitimate marketing for home page * Tons up updates to note page and note input panel * Better support for two users editing a note * MUCH better diff handling, web sockets restore notes with unsaved diffs * Moved all squire text modifier functions into a mixin class * It now says saving when closing a note * Lots of cleanup and better handiling of events on mount and destroy * Scroll behavior modified to load notes when closer to bottom of page * Pretty decent shared notes and sharable link support * Updated help text * Search now includes tag suggestions and attachment suggestions * Cleaned up scratch pad a ton, allow for users to create new scratch pads * Created a 404 Page and a Shared note page * So many other small improvements. Oh my god, what is wrong with me, not doing commits!?
365 lines
12 KiB
Vue
365 lines
12 KiB
Vue
<style type="text/css" scoped>
|
|
|
|
.hero {
|
|
background-size: 50%;
|
|
background-color: #0a2f13;
|
|
background: linear-gradient(270deg, #21ba45, #3710a4);
|
|
background-size: 400% 400%;
|
|
overflow: hidden;
|
|
|
|
-webkit-animation: fadeorama 16s ease infinite;
|
|
-moz-animation: fadeorama 16s ease infinite;
|
|
animation: fadeorama 16s ease infinite;
|
|
}
|
|
.logo-display {
|
|
width: 50%;
|
|
max-width: 450px;
|
|
}
|
|
.lightly-padded {
|
|
margin-top: 10px;
|
|
}
|
|
.massive-text {
|
|
color: white;
|
|
font-size: 4rem;
|
|
text-align: center;
|
|
}
|
|
.blinking {
|
|
animation:blinkingText 1.5s linear infinite;
|
|
}
|
|
@keyframes blinkingText{
|
|
0%{ opacity: 0.9; }
|
|
50%{ opacity: 0; }
|
|
100%{ opacity: 0.9; }
|
|
}
|
|
.subtext {
|
|
text-align: center;
|
|
color: white;
|
|
font-size: 1.5rem;
|
|
padding: 0 0 0 10px;
|
|
}
|
|
.stand-out {
|
|
color: white;
|
|
text-shadow:
|
|
2px 2px 1px black,
|
|
-2px -2px 1px black,
|
|
-2px 2px 1px black,
|
|
2px -2px 1px black;
|
|
}
|
|
h2, h3 {
|
|
font-weight: normal;
|
|
}
|
|
|
|
|
|
@-webkit-keyframes fadeorama {
|
|
0%{background-position:0% 50%}
|
|
50%{background-position:100% 50%}
|
|
100%{background-position:0% 50%}
|
|
}
|
|
@-moz-keyframes fadeorama {
|
|
0%{background-position:0% 50%}
|
|
50%{background-position:100% 50%}
|
|
100%{background-position:0% 50%}
|
|
}
|
|
@keyframes fadeorama {
|
|
0%{background-position:0% 50%}
|
|
50%{background-position:100% 50%}
|
|
100%{background-position:0% 50%}
|
|
}
|
|
|
|
/*safari fix - prevents page from being below the menu */
|
|
.green-text {
|
|
color: #3710a4;
|
|
}
|
|
.dont-pad-me {
|
|
margin-right: 0 !important;
|
|
margin-left: 0 !important;
|
|
}
|
|
|
|
.home-main img {
|
|
max-height: 400px !important;
|
|
}
|
|
.white-link {
|
|
text-decoration: underline;
|
|
color: white;
|
|
}
|
|
|
|
</style>
|
|
|
|
<template>
|
|
<div class="lightly-padded home-main">
|
|
<div class="ui centered vertically divided stackable grid">
|
|
|
|
<div class="row hero fadeBg" :style="{ 'height':(height+'px') }">
|
|
|
|
<!-- All marketing images if you need to review -->
|
|
<div v-if="false" class="sixteen wide column">
|
|
<img loading="lazy" width="10%" src="/api/static/assets/marketing/add.svg" alt="">
|
|
<img loading="lazy" width="10%" src="/api/static/assets/marketing/gardening.svg" alt="">
|
|
<img loading="lazy" width="10%" src="/api/static/assets/marketing/growth.svg" alt="">
|
|
<img loading="lazy" width="10%" src="/api/static/assets/marketing/icecream.svg" alt="">
|
|
<img loading="lazy" width="10%" src="/api/static/assets/marketing/investing.svg" alt="">
|
|
<img loading="lazy" width="10%" src="/api/static/assets/marketing/onboarding.svg" alt="">
|
|
<img loading="lazy" width="10%" src="/api/static/assets/marketing/robot.svg" alt="">
|
|
<img loading="lazy" width="10%" src="/api/static/assets/marketing/solution.svg" alt="">
|
|
<img loading="lazy" width="10%" src="/api/static/assets/marketing/watching.svg" alt="">
|
|
<img loading="lazy" width="10%" src="/api/static/assets/marketing/cloud.svg" alt="">
|
|
<img loading="lazy" width="10%" src="/api/static/assets/marketing/grandma.svg" alt="">
|
|
<img loading="lazy" width="10%" src="/api/static/assets/marketing/hamburger.svg" alt="">
|
|
<img loading="lazy" width="10%" src="/api/static/assets/marketing/idea.svg" alt="">
|
|
<img loading="lazy" width="10%" src="/api/static/assets/marketing/notebook.svg" alt="">
|
|
<img loading="lazy" width="10%" src="/api/static/assets/marketing/plan.svg" alt="">
|
|
<img loading="lazy" width="10%" src="/api/static/assets/marketing/secure.svg" alt="">
|
|
<img loading="lazy" width="10%" src="/api/static/assets/marketing/void.svg" alt="">
|
|
</div>
|
|
|
|
<div class="one wide large screen only column"></div>
|
|
|
|
<!-- desktop column - large screen only -->
|
|
<div class="seven wide middle aligned left aligned column">
|
|
|
|
<h2 class="massive-text">
|
|
<img class="logo-display" loading="lazy" src="/api/static/assets/logo.svg" alt="Solid Scribe Logo">
|
|
<br>
|
|
Solid Scribe
|
|
</h2>
|
|
|
|
<h3 class="subtext">
|
|
A free, secure Note App<i class="i cursor icon blinking"></i>
|
|
</h3>
|
|
|
|
</div>
|
|
|
|
<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>
|
|
|
|
<!-- Go to notes button -->
|
|
<div class="row" v-if="$parent.loggedIn">
|
|
<div class="sixteen wide middle algined center aligned column">
|
|
<router-link class="ui huge green labeled icon button" to="/notes">
|
|
<i class="external alternate icon"></i>Go to Notes
|
|
</router-link>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Small login form -->
|
|
<div class="row" v-if="!$parent.loggedIn">
|
|
<div class="sixteen wide middle algined column">
|
|
<div class="ui text container">
|
|
<h2>
|
|
<i class="plug icon"></i>
|
|
Sign Up Now - Only a Username and Password required</h2>
|
|
<login-form :thin="true" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- set -->
|
|
<div class="middle aligned centered row">
|
|
<div class="six wide right aligned column">
|
|
<h2>Solid Scribe is a browser based note application that focuses on ease of use while keeping your data private</h2>
|
|
<h3>Tools to organize and collaborate on notes while maintaining security and respecting your privacy.</h3>
|
|
</div>
|
|
<div class="six wide column">
|
|
<img loading="lazy" width="100%" src="/api/static/assets/marketing/idea.svg" alt="Explosion of New Ideas">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="middle aligned centered green row">
|
|
<div class="six wide right aligned column">
|
|
<img loading="lazy" width="100%" src="/api/static/assets/marketing/secure.svg" alt="marketing mumbo jumbo">
|
|
|
|
</div>
|
|
<div class="six wide column">
|
|
<h2>All Note text is encrypted</h2>
|
|
<h3>Only you can read your notes. <a class="white-link" target="_blank" href="https://www.forbes.com/sites/zakdoffman/2019/01/30/facebook-has-just-been-caught-spying-on-users-private-messages-and-data-again/#1e27e00a31ce"> Employees can not snoop your account</a>. <a class="white-link" target="_blank" href="https://mashable.com/article/google-reading-your-emails-response/">No one can read your data for advertising</a>. Note text is completely unreadable without your password.</h3>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- set -->
|
|
<div class="middle aligned centered row">
|
|
<div class="six wide column">
|
|
<h2>Organize your notes</h2>
|
|
<h3>Tag, Pin, Color, Archive, Attach Images, Share Encrypted Notes and Search</h3>
|
|
</div>
|
|
<div class="six wide column">
|
|
<img loading="lazy" width="100%" src="/api/static/assets/marketing/gardening.svg" alt="Pruning the mind garden">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="middle aligned centered row">
|
|
<div class="six wide right aligned column">
|
|
<img loading="lazy" width="100%" src="/api/static/assets/marketing/cloud.svg" alt="Girl falling into the spiral of digital chaos">
|
|
</div>
|
|
<div class="six wide column">
|
|
<h2>Extremely accessible - Nothing to install</h2>
|
|
<h3>Works on mobile or desktop browsers. <br>Behaves like an installed app on mobile phones.</h3>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- set -->
|
|
<div class="middle aligned centered row">
|
|
<div class="six wide right aligned column">
|
|
<h2>Secure Search</h2>
|
|
<h3>Keyword search using an encrypted search index helps you find what you need without compromising security.</h3>
|
|
</div>
|
|
<div class="six wide column">
|
|
<img loading="lazy" width="100%" src="/api/static/assets/marketing/solution.svg" alt="Hypercube of Solutions">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="middle aligned centered row">
|
|
<div class="six wide right aligned column">
|
|
<img loading="lazy" width="100%" src="/api/static/assets/marketing/plan.svg" alt="Scheme for planetary destruction">
|
|
</div>
|
|
<div class="six wide column">
|
|
<h2>Create Lists with Check Boxes</h2>
|
|
<h3>Todo lists are supported. With options to removed checked items, sort by completed and un-check all.</h3>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- set -->
|
|
<div class="middle aligned centered row">
|
|
<div class="six wide right aligned column">
|
|
<h2>Powerful Text Editing</h2>
|
|
<h3>A plethora of editing tools are provided for coloring, underlining, bolding, attaching images and more.</h3>
|
|
</div>
|
|
<div class="six wide column">
|
|
<img loading="lazy" width="100%" src="/api/static/assets/marketing/growth.svg" alt="Endless progress at the cost of sanity and health">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="middle aligned centered row">
|
|
<div class="six wide right aligned column">
|
|
<img loading="lazy" width="100%" src="/api/static/assets/marketing/onboarding.svg" alt="Shrunken man near giant tablet">
|
|
</div>
|
|
<div class="six wide column">
|
|
<h2>Secure Data Sharing</h2>
|
|
<h3>Share notes with friends without compromising privacy. The data remains encrypted with a shared password for you and people you invite to view it.</h3>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- set -->
|
|
<!-- <div class="middle aligned centered row">
|
|
<div class="six wide right aligned column">
|
|
<h2>Ice Cream</h2>
|
|
<h3>Get excited without all the screaming</h3>
|
|
</div>
|
|
<div class="six wide column">
|
|
<img loading="lazy" width="100%" src="/api/static/assets/marketing/icecream.svg" alt="Emergence of a 4th dimensional being perceived as a large ice cream ">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="middle aligned centered row">
|
|
<div class="six wide right aligned column">
|
|
<img loading="lazy" width="100%" src="/api/static/assets/marketing/add.svg" alt="A shpere of newness">
|
|
</div>
|
|
<div class="six wide column">
|
|
<h2>Data Backups</h2>
|
|
<h3>Nothing you do will be forgotten.<br>You can never take back what you have done</h3>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="middle aligned centered row">
|
|
<div class="six wide right aligned column">
|
|
<h2>Freedom to unleash yourself</h2>
|
|
<h3>Imagine an awakening of what could be</h3>
|
|
</div>
|
|
<div class="six wide column">
|
|
<img loading="lazy" width="100%" src="/api/static/assets/marketing/grandma.svg" alt="Drinking the blood of the elderly">
|
|
</div>
|
|
</div> -->
|
|
|
|
<!-- final slide -->
|
|
<div class="middle aligned centered green row">
|
|
<div class="twelve wide center aligned column">
|
|
<br>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
<h2>What are you waiting for?<br>Sign up now.</h2>
|
|
<br>
|
|
<router-link class="ui huge white labeled icon button" to="/login">
|
|
<i class="plug icon"></i>Sign Me Up!
|
|
</router-link>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
<span class="ui button" v-on:click="showRealInformation">About</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="realInformation" class="middle aligned centered row" ref="real">
|
|
<div class="six wide column">
|
|
<h2 class="ui center aligned">
|
|
Why Does this App exist?
|
|
</h2>
|
|
<p>
|
|
This App exists because 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>
|
|
<p>
|
|
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>
|
|
</p>
|
|
<p>Generic Marketing Images - <a target="_blank" href="https://undraw.co/">https://unDraw.co/</a></p>
|
|
</div>
|
|
<div class="four wide column">
|
|
<img loading="lazy" width="100%" src="/api/static/assets/marketing/watching.svg" alt="Drinking the blood of the elderly">
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'WelcomePage',
|
|
components: {
|
|
'login-form':require('@/components/LoginFormComponent.vue').default,
|
|
},
|
|
data(){
|
|
return {
|
|
height: null,
|
|
realInformation: false,
|
|
}
|
|
},
|
|
beforeCreate(){
|
|
//Force HTTPS on prod, always. Dev doesn't have certs
|
|
const isDev = process.env['NODE_ENV'] == 'development'
|
|
if (!isDev && location.protocol != 'https:'){
|
|
window.location.replace('https://www.solidscribe.com')
|
|
}
|
|
},
|
|
beforeMount(){
|
|
|
|
//Don't change hero banner on mobile
|
|
if(!this.$store.getters.getIsUserOnMobile){
|
|
let windowHeight = window.innerHeight
|
|
this.height = windowHeight - (windowHeight * 0.18)
|
|
}
|
|
|
|
},
|
|
methods: {
|
|
showRealInformation(){
|
|
|
|
|
|
this.realInformation = !this.realInformation
|
|
if(this.realInformation){
|
|
|
|
this.$nextTick(() => {
|
|
this.$refs.real.scrollIntoView({'behavior':'smooth'})
|
|
})
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script> |