heuzef
/
lesspass
mirror of https://github.com/lesspass/lesspass.git
1
0
Fork 0
Code Issues 0 Releases 67 Wiki Activity
Browse Source

update frontend

pull/342/head
Guillaume Vincent 7 years ago
parent
b14ee9099a
commit
152e4aa061
5 changed files with 133 additions and 320 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      dist/cover.jpeg
  2. BIN
      images/cover.jpeg
  3. +1
    -0
      images/cover.original.txt
  4. +132
    -188
      index.html
  5. +0
    -132
      index2.html

BIN
dist/cover.jpeg View File

Before After
Width: 3872  |  Height: 1600  |  Size: 315 KiB

BIN
images/cover.jpeg View File

Before After
Width: 3872  |  Height: 1600  |  Size: 315 KiB

+ 1
- 0
images/cover.original.txt View File

@@ -0,0 +1 @@
https://www.pexels.com/photo/grey-and-white-snow-covered-mountains-and-white-cloud-bank-65125/

+ 132
- 188
index.html View File

@@ -7,80 +7,6 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="dist/lesspass.min.css"> <link rel="stylesheet" href="dist/lesspass.min.css">
<link rel="manifest" href="dist/manifest.json"> <link rel="manifest" href="dist/manifest.json">
<style>
html, body {
height: 100%;
width: 100%;
}

body {
background: #008ed6 fixed top;
background-size: cover;
margin: 0;
}

#navbar__logo {
height: 2em;
}

.white-link {
color: white;
text-decoration: underline;
}

#hero__password-generator-block .white-link, #navbar .white-link {
text-decoration: none;
}

.white-link:hover, .white-link:focus, .white-link:active {
text-decoration: none;
color: white;
}

.jumbotron {
background-color: transparent;
padding-left: 0;
padding-right: 0;
}

#hero-text {
color: #ffffff;
padding-top: 6em;
}

@media (max-width: 544px) {
#hero__password-generator-block {
padding: 0;
}

.jumbotron {
padding: 0;
}
}

.feature-image {
width: 64px;
}

* {
border-radius: 0 !important;
}

.white {
color: white;
}

#fold {
min-height: 100vh;
}

@media (min-width: 544px) {
.vcenter {
display: flex;
align-items: center;
}
}
</style>
<link rel="manifest" href="dist/manifest.json"> <link rel="manifest" href="dist/manifest.json">
<meta name="mobile-web-app-capable" content="yes"> <meta name="mobile-web-app-capable" content="yes">
<meta name="theme-color" content="#555555"> <meta name="theme-color" content="#555555">
@@ -136,130 +62,148 @@
<link rel="apple-touch-startup-image" <link rel="apple-touch-startup-image"
media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)"
href="dist/apple-touch-startup-image-1536x2008.png"> href="dist/apple-touch-startup-image-1536x2008.png">
<style>
* {
border-radius: 0 !important;
}

html, body {
height: 100%;
}

body {
background-color: #fafafa;
}

#lesspass {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

nav {
background-color: transparent;
}

#fold::before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.9;
background-color: white;
}

#fold {
background: url(./dist/cover.jpeg) no-repeat center center;
background-size: cover;
animation-name: fadeIn;
animation-duration: 3.4s;
animation-delay: 0s;
animation-timing-function: ease;
animation-fill-mode: both;
backface-visibility: hidden;
position: relative;
height: 100%;
}
</style>
</head> </head>
<body> <body>
<div id="fold"> <div id="fold">
<div id="navbar" class="container pl-0 pr-0 py-3 hidden-sm-down">
<div class="col-xs-4">
<a class="nav-link white-link" href="/">
<img src="dist/logo-white.png" alt="LessPass" id="navbar__logo">
</a>
</div>
<div class="col-xs-8 text-xs-right">
<nav class="nav nav-inline pull-sm-right" style="line-height: 2em">
<a class="nav-link white-link"
href="https://addons.mozilla.org/en-US/firefox/addon/lesspass/">
<i class="fa fa-firefox" aria-hidden="true"></i> Firefox Extension
</a>
<a class="nav-link white-link"
href="https://chrome.google.com/webstore/detail/lesspass/lcmbpoclaodbgkbjafnkbbinogcbnjih">
<i class="fa fa-chrome" aria-hidden="true"></i> Chrome Extension
</a>
<a class="nav-link white-link" target="_blank" href="https://blog.lesspass.com/">
<i class="fa fa-pencil" aria-hidden="true"></i> Blog
</a>
</nav>
</div>
</div>
<div class="container"> <div class="container">
<div class="jumbotron">
<div class="row">
<div id="hero__password-generator-block" class="col-lg-5 pt-2">
<div id="lesspass"></div>
<div class="text-xs-center text-sm-right">
<small><span class="text-white"><i class="fa fa-shield" aria-hidden="true"></i> For more security use browser extensions</span></small>
</div>
</div>
<div id="hero-text" class="col-lg-6 offset-lg-1">
<h1 class="display-5">Next-Gen Open Source Password Manager</h1>
<p class="lead">
Stop wasting your time synchronizing your encrypted vault.
Remember one master password to access your passwords, anywhere, anytime.
No sync needed.
</p>
<p class="lead">
<a href="https://blog.lesspass.com/lesspass-how-it-works-dde742dd18a4#.vbgschksh"
class="btn btn-secondary">
How does it work?
<nav class="navbar navbar-light rounded navbar-toggleable-md py-lg-3 hidden-sm-down px-0">
<a class="navbar-brand" href="#">
<img src="svg/logo-favicon.svg" width="30" height="30" class="d-inline-block align-top" alt="LessPass">
LessPass
</a>

<div class="collapse navbar-collapse" id="containerNavbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link"
href="https://addons.mozilla.org/en-US/firefox/addon/lesspass/">
<i class="fa fa-firefox" aria-hidden="true"></i> Firefox Extension
</a> </a>
</p>
</li>
<li class="nav-item">
<a class="nav-link"
href="https://chrome.google.com/webstore/detail/lesspass/lcmbpoclaodbgkbjafnkbbinogcbnjih">
<i class="fa fa-chrome" aria-hidden="true"></i> Chrome Extension
</a>
</li>
<li class="nav-item">
<a class="nav-link" target="_blank" href="https://blog.lesspass.com/">
Blog
</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="container py-5">
<div class="row align-items-center">
<div class="col-lg-4 hidden-sm-down">
<p>No Sync &nbsp; - &nbsp; Open Source &nbsp; - &nbsp; Free</p>
<h2>Next Gen Password Manager</h2>
<p>Stop wasting your time synchronizing your encrypted vault. Remember one master password to
access your passwords, anywhere, anytime. No sync needed.</p>
<p>
<a href="https://blog.lesspass.com/lesspass-how-it-works-dde742dd18a4#.vbgschksh"
class="btn btn-secondary">
How does it works?
</a>
</p>
</div>
<div class="col-lg-5 offset-lg-2 p-0">
<div id="lesspass" class="float-right"></div>
<div class="text-center text-sm-left">
<small>
<i class="fa fa-shield" aria-hidden="true"></i> For more security use browser extensions
</small>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="container white">
<div class="row">
<div class="col-md-6 col-lg-3 mb-3">
<div class="media">
<div class="media-left">
<img class="media-object feature-image" src="dist/responsive.png"
alt="Available far and wide">
</div>
<div class="media-body">
<h4 class="media-heading">Available everywhere</h4>
<p>
LessPass is a web application and works on all devices
(computer, smartphone, tablet and your smartTV)
</p>
</div>
</div>
<div class="container">
<div class="row my-5 py-5">
<div class="col-md-3">
<h2>Available everywhere</h2>
<p>
LessPass is a web application and works on all devices (computer, smartphone, tablet, ...)
</p>
</div> </div>
<div class="col-md-6 col-lg-3 mb-3">
<div class="media">
<div class="media-left">
<img class="media-object feature-image" src="dist/no-cloud.png" alt="No Cloud">
</div>
<div class="media-body">
<h4 class="media-heading">No storage</h4>
<p>
LessPass regenerates your passwords when you need them. No cloud storage is required
</p>
</div>
</div>
<div class="col-md-3">
<h2>No storage</h2>
<p>
LessPass regenerates your passwords when you need them. No cloud storage is required
</p>
</div> </div>
<div class="clearfix hidden-lg-up"></div>
<div class="col-md-6 col-lg-3 mb-3">
<div class="media">
<a class="media-left white-link" href="https://github.com/lesspass/lesspass/">
<img class="media-object feature-image" src="dist/open-source.png"
alt="Open Source">
</a>
<div class="media-body">
<h4 class="media-heading">Open Source</h4>
<p>
LessPass is <strong>open-source</strong>. So its security can be audited.
Source code is available on
<a class="white-link" href="https://github.com/lesspass/lesspass/">Github</a>
</p>
</div>
</div>
<div class="col-md-3">
<h2>Open Source</h2>
<p>
LessPass is <strong>open-source</strong>. So its security can be audited. Source code is available
on
<a href="https://github.com/lesspass/lesspass/">Github</a>
</p>
</div> </div>
<div class="col-md-6 col-lg-3 mb-3">
<div class="media">
<div class="media-left">
<img class="media-object feature-image" src="dist/free.png"
alt="Free">
</div>
<div class="media-body">
<h4 class="media-heading">Free</h4>
<p>
LessPass is free<br>and always will be
</p>
</div>
</div>
<div class="col-md-3">
<h2>Free</h2>
<p>
LessPass is free<br>and always will be
</p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div style="background-color: #226FAB;" class="py-3">
<div style="background-color: #226FAB; color:white;">
<div class="container white"> <div class="container white">
<div class="row pb-3">
<div class="col-xs-12">
<div class="row py-5">
<div class="col-12">
<h1 class="display-5">Features</h1> <h1 class="display-5">Features</h1>
</div> </div>
</div> </div>
<div class="row vcenter pb-3 mb-3">
<div class="col-md-6 ">
<div class="row py-5 align-items-center">
<div class="col-md-6">
<h1 class="display-6">Manage your passwords directly from your browser</h1> <h1 class="display-6">Manage your passwords directly from your browser</h1>
<p class="lead"> <p class="lead">
<br> <br>
@@ -271,8 +215,8 @@
<img src="dist/demo.gif" class="img-fluid" alt="password generation"> <img src="dist/demo.gif" class="img-fluid" alt="password generation">
</div> </div>
</div> </div>
<div class="row vcenter py-3 my-3">
<div class="col-md-6 pb-2">
<div class="row py-5 align-items-center ">
<div class="col-md-6">
<img src="dist/masterPasswordPattern.png" class="img-fluid" alt="password pattern"> <img src="dist/masterPasswordPattern.png" class="img-fluid" alt="password pattern">


</div> </div>
@@ -283,7 +227,7 @@
</p> </p>
</div> </div>
</div> </div>
<div class="row vcenter py-3 my-3">
<div class="row py-5 align-items-center">
<div class="col-md-6"> <div class="col-md-6">
<h1 class="display-6">Use LessPass Database for complex passwords</h1> <h1 class="display-6">Use LessPass Database for complex passwords</h1>
<p class="lead"> <p class="lead">
@@ -303,8 +247,8 @@
<img src="dist/demo2.gif" class="img-fluid" alt="password load"> <img src="dist/demo2.gif" class="img-fluid" alt="password load">
</div> </div>
</div> </div>
<div class="row vcenter py-3 my-3">
<div class="col-xs-12 text-xs-center">
<div class="row py-5 align-items-center">
<div class="col-12 text-center">
<h1 class="display-6">Self Hosted</h1> <h1 class="display-6">Self Hosted</h1>


<p class="lead"> <p class="lead">
@@ -314,8 +258,8 @@
</p> </p>
</div> </div>
</div> </div>
<div class="row vcenter py-3 my-3">
<div class="col-md-6 pb-2">
<div class="row py-5 align-items-center">
<div class="col-md-6">
<img src="dist/webextension.png" class="img-fluid" alt="web extension"> <img src="dist/webextension.png" class="img-fluid" alt="web extension">
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
@@ -333,10 +277,10 @@
</div> </div>
</div> </div>
</div> </div>
<div style="background-color: #F8F9F9;" class="py-3">
<div class="container text-xs-center text-sm-left py-3">
<div style="background-color: #F8F9F9;" class="py-5">
<div class="container text-center text-sm-left py-5">
<div class="row"> <div class="row">
<div class="col-xs-12">
<div class="col-12">
<small> <small>
Copyright LessPass <br> Copyright LessPass <br>
Created by <a href="https://twitter.com/guillaume20100">Guillaume Vincent</a> Created by <a href="https://twitter.com/guillaume20100">Guillaume Vincent</a>


+ 0
- 132
index2.html View File

@@ -1,132 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>LessPass</title>
<meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="dist/lesspass.min.css">
<style>
html,body{
height: 100%;
}
.header {
color: #233141;
border-bottom: 1px solid #eaeaea;
}

.header a {
color: #233141 !important;
}

.hero {
background: #288feb;
color: #fff;
}

.heroContent {
min-height: 500px;
padding: 100px 0;

}

.componentContent {
min-height: 500px;
display: flex;
flex-direction: column;
justify-content: center;
}

.btn-dark {
color: #ffffff;
background-color: #233141;
border-color: #233141;
}

.btn-dark:hover {
color: #fff;
background-color: #111820;
border-color: #111820;
}

.btn-white {
color: #ffffff;
}

.btn-white:hover {
color: #ffffff;
}
</style>
</head>
<body>
<section class="header">
<nav class="navbar navbar-light">
<div class="container">
<a class="navbar-brand" href="#">
<img src="dist/favicon.png" width="30" height="30" class="d-inline-block align-top" alt="">
LessPass
</a>
<ul class="nav navbar-nav float-xs-right">
<li class="nav-item active">
<a class="nav-link"
href="https://addons.mozilla.org/en-US/firefox/addon/lesspass/">
<i class="fa fa-firefox" aria-hidden="true"></i> Firefox Extension
</a>
</li>
<li class="nav-item active">
<a class="nav-link"
href="https://chrome.google.com/webstore/detail/lesspass/lcmbpoclaodbgkbjafnkbbinogcbnjih">
<i class="fa fa-chrome" aria-hidden="true"></i> Chrome Extension
</a>
</li>
<li class="nav-item active">
<a class="nav-link" target="_blank" href="https://blog.lesspass.com/">
Blog
</a>
</li>
</ul>
</div>
</nav>
</section>
<section class="hero">
<div class="container">
<div class="row">
<div class="col-md-5">
<div class="heroContent">
<p>No Sync &nbsp; - &nbsp; Open Source &nbsp; - &nbsp; Free</p>
<h2>Next Gen<br>Password Manager</h2>
<p>Stop wasting your time synchronizing your encrypted vault. Remember one master password to
access your passwords, anywhere, anytime. No sync needed.</p>
<p>
<a href="https://blog.lesspass.com/lesspass-how-it-works-dde742dd18a4#.vbgschksh"
class="btn btn-dark">
How does it works?
</a>
<a href="https://github.com/lesspass/lesspass/" class="btn btn-link btn-white">See source
code</a>
</p>
</div>
</div>
<div class="col-md-5 offset-md-2">
<div class="componentContent">
<div id="lesspass"></div>
</div>
</div>
</div>
</div>
</section>
<section class="py-3">
<div class="container text-xs-center text-sm-left py-3">
<div class="row">
<div class="col-xs-12">
<small>
Copyright LessPass <br>
Created by <a href="https://twitter.com/guillaume20100">Guillaume Vincent</a>
</small>
</div>
</div>
</div>
</section>
<script src="dist/lesspass.min.js"></script>
</body>
</html>

Write Preview
Loading…
Cancel
Save