<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;
		height: 350px;
	}
	.logo-display {
		width: 140px;
		height: auto;
	}
	.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: 250px;
	}
	.white-link {
		text-decoration: underline;
		color: white;
	}

	@media only screen and (max-width: 740px) {
		.column > img {
			max-height: 125px;
		}
	}

</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') }">

				<!-- <div class="one wide large screen only column"></div> -->

				<!-- desktop column - large screen only -->
				<div class="sixteen wide middle aligned center 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, online note taking application<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>

			<!-- 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>

			<!-- 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>

			<!-- Overview -->
			<div class="middle aligned centered row">
				<div class="six wide column">
					<h2>Solid Scribe focuses on powerful text editing and user privacy</h2>
					<h3>Tools to organize and collaborate on thousands of notes while maintaining security and respecting your privacy.</h3>
				</div>
				<div class="four wide column">
					<img loading="lazy" width="100%" src="/api/static/assets/marketing/idea.svg" alt="Explosion of New Ideas">
				</div>
			</div>

			<!-- features list -->
			<div class="middle aligned centered row">
				<div class="sixteen wide column">
					<h1 class="ui center aligned header"><i class="sliders horizontal icon"></i>Features</h1>
				</div>
				<div class="six wide column">
					<h2 class="ui dividing header">
						<div class="content">
							<i class="icons">
								<i class="grey lock icon"></i> 
								<i class="bottom left corner yellow key icon"></i> 
							</i>
							Privacy Focused
							<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">
						<div class="content">
							<i class="icons">
								<i class="grey list icon"></i> 
								<i class="bottom left corner green check icon"></i> 
							</i>
							To Do Lists
							<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">
						<div class="content">
							<i class="icons">
								<i class="grey file icon"></i> 
								<i class="bottom left corner blue pen icon"></i> 
							</i>
							Document Editing Tools
							<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">
						<div class="content">
							<i class="icons">
								<i class="grey images icon"></i> 
								<i class="bottom left corner teal paperclip icon"></i> 
							</i>
							Add Images
							<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">
						<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 sort notes by tag.</div>
						</div>
					</h2>

					<h2 class="ui dividing header">
						<div class="content">
							<i class="icons">
								<i class="grey cloud moon icon"></i> 
								<i class="bottom left corner red eye icon"></i> 
							</i>
							Night Mode
							<div class="sub header">Pure black night theme with an even darker flux theme.</div>
						</div>
					</h2>

					<h2 class="ui dividing header">
						<div class="content">
							<i class="icons">
								<i class="grey share alternate icon"></i> 
								<i class="bottom left corner share icon"></i> 
							</i>
							Share Encrypted Notes
							<div class="sub header">Share encrypted notes with friends without compromising security.</div>
						</div>
					</h2>

					<h2 class="ui dividing header">
						<div class="content">
							<i class="icons">
								<i class="grey users icon"></i> 
								<i class="bottom left corner olive exchange icon"></i> 
							</i>
							Collaborative Note Editing
							<div class="sub header">Notes instantly update in real time everywhere the note is open.</div>
						</div>
					</h2>

					<h2 class="ui dividing header">
						<div class="content">
							<i class="icons">
								<i class="grey search icon"></i> 
								<i class="bottom left corner orange font icon"></i> 
							</i>
							Keyword Search
							<div class="sub header">Easily search all notes. Encrypted search index ensures privacy and convenience.</div>
						</div>
					</h2>

					<h2 class="ui dividing header">
						<div class="content">
							<i class="icons">
								<i class="grey search icon"></i> 
								<i class="bottom left corner pink paperclip icon"></i> 
							</i>
							Search Attachments
							<div class="sub header">Add text to Images and links than can be searched.</div>
						</div>
					</h2>

					<h2 class="ui dividing header">
						<div class="content">
							<i class="icons">
								<i class="grey tv icon"></i> 
								<i class="bottom left corner blue mobile icon"></i> 
							</i>
							Two Factor Authentication
							<div class="sub header">Enable two factor authentication for added peace of mind.</div>
						</div>
					</h2>
					
				</div>
				<div class="four wide column">
					<img loading="lazy" width="100%" src="/api/static/assets/marketing/onboarding.svg" alt="">
				</div>
			</div>

			
			<div class="middle aligned centered row">
				<div class="four 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>Only you can read your notes. </h2>
					<h3>Employees can not <a 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"> snoop your account</a>. No one can <a target="_blank" href="https://mashable.com/article/google-reading-your-emails-response/">read your data for advertising</a>. Notes are completely unreadable without your password.</h3>
				</div>
			</div>

			<div class="middle aligned centered green row">
				<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 class="four 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>

			<div class="middle aligned centered row">
				<div class="four wide right aligned column">
					<img loading="lazy" width="100%" src="/api/static/assets/marketing/robot.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 column">
					<h2>Leave your Ad Blockers turned on</h2>
					<h3>SolidScribe doesn't load any trackers or ads. It was designed to run on 
					<a href="https://www.mozilla.org/en-US/firefox/new/" target="_blank">Firefox</a>, with 
					<a href="https://addons.mozilla.org/en-US/firefox/addon/ublock-origin/" target="_blank">uBlock Origin</a> and a 
					<a href="https://pi-hole.net/" target="_blank">Pi-hole</a> on the network.</h3>
				</div>
				<div class="four 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>
				</div>
			</div>

			<div v-if="true" class="middle aligned centered row">
				<div class="six wide column">
					<h2>Solid Scribe was created by one passionate developer</h2>
					<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>
					<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>If you want to help me out, 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">
						</a>
					</p>
					<p>Awesomely 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(){
		
	},
	methods: {
		showRealInformation(){

			
			this.realInformation = !this.realInformation
			if(this.realInformation){

				this.$nextTick(() => {
					this.$refs.real.scrollIntoView({'behavior':'smooth'})
				})
			}
		}
	}
}
</script>