Du kan inte välja fler än 25 ämnen Ämnen måste starta med en bokstav eller siffra, kan innehålla bindestreck ('-') och vara max 35 tecken långa.
 
 
 
 
 
 

351 rader
15 KiB

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>LessPass</title>
  6. <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
  7. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  8. <link rel="stylesheet" href="dist/lesspass.min.css">
  9. <link rel="manifest" href="dist/manifest.json">
  10. <style>
  11. html, body {
  12. height: 100%;
  13. width: 100%;
  14. }
  15. body {
  16. background: #008ed6 fixed top;
  17. background-size: cover;
  18. margin: 0;
  19. }
  20. #navbar__logo {
  21. height: 2em;
  22. }
  23. .white-link {
  24. color: white;
  25. text-decoration: underline;
  26. }
  27. #hero__password-generator-block .white-link, #navbar .white-link {
  28. text-decoration: none;
  29. }
  30. .white-link:hover, .white-link:focus, .white-link:active {
  31. text-decoration: none;
  32. color: white;
  33. }
  34. .jumbotron {
  35. background-color: transparent;
  36. padding-left: 0;
  37. padding-right: 0;
  38. }
  39. #hero-text {
  40. color: #ffffff;
  41. padding-top: 6em;
  42. }
  43. @media (max-width: 544px) {
  44. #hero__password-generator-block {
  45. padding: 0;
  46. }
  47. .jumbotron {
  48. padding: 0;
  49. }
  50. }
  51. .feature-image {
  52. width: 64px;
  53. }
  54. * {
  55. border-radius: 0 !important;
  56. }
  57. .white {
  58. color: white;
  59. }
  60. #fold {
  61. min-height: 100vh;
  62. }
  63. @media (min-width: 544px) {
  64. .vcenter {
  65. display: flex;
  66. align-items: center;
  67. }
  68. }
  69. </style>
  70. <link rel="manifest" href="dist/manifest.json">
  71. <meta name="mobile-web-app-capable" content="yes">
  72. <meta name="theme-color" content="#555555">
  73. <meta name="application-name" content="LessPass">
  74. <link rel="apple-touch-icon" sizes="57x57" href="dist/apple-touch-icon-57x57.png">
  75. <link rel="apple-touch-icon" sizes="60x60" href="dist/apple-touch-icon-60x60.png">
  76. <link rel="apple-touch-icon" sizes="72x72" href="dist/apple-touch-icon-72x72.png">
  77. <link rel="apple-touch-icon" sizes="76x76" href="dist/apple-touch-icon-76x76.png">
  78. <link rel="apple-touch-icon" sizes="114x114" href="dist/apple-touch-icon-114x114.png">
  79. <link rel="apple-touch-icon" sizes="120x120" href="dist/apple-touch-icon-120x120.png">
  80. <link rel="apple-touch-icon" sizes="144x144" href="dist/apple-touch-icon-144x144.png">
  81. <link rel="apple-touch-icon" sizes="152x152" href="dist/apple-touch-icon-152x152.png">
  82. <link rel="apple-touch-icon" sizes="180x180" href="dist/apple-touch-icon-180x180.png">
  83. <meta name="apple-mobile-web-app-capable" content="yes">
  84. <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  85. <meta name="apple-mobile-web-app-title" content="LessPass">
  86. <link rel="icon" type="image/png" sizes="228x228" href="dist/coast-228x228.png">
  87. <link rel="yandex-tableau-widget" href="dist/yandex-browser-manifest.json">
  88. <meta name="msapplication-TileColor" content="#555555">
  89. <meta name="msapplication-TileImage" content="dist/mstile-144x144.png">
  90. <meta name="msapplication-config" content="dist/browserconfig.xml">
  91. <link rel="icon" type="image/png" sizes="32x32" href="dist/favicon-32x32.png">
  92. <link rel="icon" type="image/png" sizes="192x192" href="dist/android-chrome-192x192.png">
  93. <link rel="icon" type="image/png" sizes="16x16" href="dist/favicon-16x16.png">
  94. <link rel="shortcut icon" href="dist/favicon.ico">
  95. <link rel="apple-touch-startup-image"
  96. media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)"
  97. href="dist/apple-touch-startup-image-320x460.png">
  98. <link rel="apple-touch-startup-image"
  99. media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)"
  100. href="dist/apple-touch-startup-image-640x920.png">
  101. <link rel="apple-touch-startup-image"
  102. media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)"
  103. href="dist/apple-touch-startup-image-640x1096.png">
  104. <link rel="apple-touch-startup-image"
  105. media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)"
  106. href="dist/apple-touch-startup-image-750x1294.png">
  107. <link rel="apple-touch-startup-image"
  108. media="(device-width: 414px) and (device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3)"
  109. href="dist/apple-touch-startup-image-1182x2208.png">
  110. <link rel="apple-touch-startup-image"
  111. media="(device-width: 414px) and (device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3)"
  112. href="dist/apple-touch-startup-image-1242x2148.png">
  113. <link rel="apple-touch-startup-image"
  114. media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)"
  115. href="dist/apple-touch-startup-image-748x1024.png">
  116. <link rel="apple-touch-startup-image"
  117. media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)"
  118. href="dist/apple-touch-startup-image-768x1004.png">
  119. <link rel="apple-touch-startup-image"
  120. media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)"
  121. href="dist/apple-touch-startup-image-1496x2048.png">
  122. <link rel="apple-touch-startup-image"
  123. media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)"
  124. href="dist/apple-touch-startup-image-1536x2008.png">
  125. </head>
  126. <body>
  127. <div id="fold">
  128. <div id="navbar" class="container pl-0 pr-0 py-3 hidden-sm-down">
  129. <div class="col-xs-4">
  130. <a class="nav-link white-link" href="/">
  131. <img src="dist/logo-white.png" alt="LessPass" id="navbar__logo">
  132. </a>
  133. </div>
  134. <div class="col-xs-8 text-xs-right">
  135. <nav class="nav nav-inline pull-sm-right" style="line-height: 2em">
  136. <a class="nav-link white-link"
  137. href="https://addons.mozilla.org/en-US/firefox/addon/lesspass/">
  138. <i class="fa fa-firefox" aria-hidden="true"></i> Firefox Extension
  139. </a>
  140. <a class="nav-link white-link"
  141. href="https://chrome.google.com/webstore/detail/lesspass/lcmbpoclaodbgkbjafnkbbinogcbnjih">
  142. <i class="fa fa-chrome" aria-hidden="true"></i> Chrome Extension
  143. </a>
  144. <a class="nav-link white-link" target="_blank" href="https://blog.lesspass.com/">
  145. <i class="fa fa-pencil" aria-hidden="true"></i> Blog
  146. </a>
  147. </nav>
  148. </div>
  149. </div>
  150. <div class="container">
  151. <div class="jumbotron">
  152. <div class="row">
  153. <div id="hero__password-generator-block" class="col-lg-6 push-lg-6">
  154. <div id="lesspass"></div>
  155. <div class="text-xs-center text-sm-right">
  156. <small><span class="text-white"><i class="fa fa-shield" aria-hidden="true"></i> For more security use browser extensions</span></small>
  157. </div>
  158. </div>
  159. <div id="hero-text" class="col-lg-6 pull-lg-6">
  160. <h1 class="display-5">Next-Gen Open Source Password Manager</h1>
  161. <p class="lead">
  162. Stop wasting time synchronizing your encrypted vault.
  163. Remember one master password to access your passwords, anywhere, anytime.
  164. No sync needed.
  165. </p>
  166. <p class="lead">
  167. <a href="https://blog.lesspass.com/lesspass-how-it-works-dde742dd18a4#.vbgschksh"
  168. class="btn btn-secondary">
  169. How does it work?
  170. </a>
  171. </p>
  172. </div>
  173. </div>
  174. </div>
  175. </div>
  176. <div class="container white">
  177. <div class="row">
  178. <div class="col-md-6 col-lg-3 mb-3">
  179. <div class="media">
  180. <div class="media-left">
  181. <img class="media-object feature-image" src="dist/responsive.png"
  182. alt="Available far and wide">
  183. </div>
  184. <div class="media-body">
  185. <h4 class="media-heading">Available everywhere</h4>
  186. <p>
  187. LessPass is a web application and works on all devices
  188. (computer, smartphone, tablet and your smartTV)
  189. </p>
  190. </div>
  191. </div>
  192. </div>
  193. <div class="col-md-6 col-lg-3 mb-3">
  194. <div class="media">
  195. <div class="media-left">
  196. <img class="media-object feature-image" src="dist/no-cloud.png" alt="No Cloud">
  197. </div>
  198. <div class="media-body">
  199. <h4 class="media-heading">No storage</h4>
  200. <p>
  201. LessPass regenerates your passwords when you need them. No cloud storage is required
  202. </p>
  203. </div>
  204. </div>
  205. </div>
  206. <div class="clearfix hidden-lg-up"></div>
  207. <div class="col-md-6 col-lg-3 mb-3">
  208. <div class="media">
  209. <a class="media-left white-link" href="https://github.com/lesspass/lesspass/">
  210. <img class="media-object feature-image" src="dist/open-source.png"
  211. alt="Open Source">
  212. </a>
  213. <div class="media-body">
  214. <h4 class="media-heading">Open Source</h4>
  215. <p>
  216. LessPass is <strong>open-source</strong>. So its security can be audited.
  217. Source code is available on
  218. <a class="white-link" href="https://github.com/lesspass/lesspass/">Github</a>
  219. </p>
  220. </div>
  221. </div>
  222. </div>
  223. <div class="col-md-6 col-lg-3 mb-3">
  224. <div class="media">
  225. <div class="media-left">
  226. <img class="media-object feature-image" src="dist/free.png"
  227. alt="Free">
  228. </div>
  229. <div class="media-body">
  230. <h4 class="media-heading">Free</h4>
  231. <p>
  232. LessPass is free<br>and always will be
  233. </p>
  234. </div>
  235. </div>
  236. </div>
  237. </div>
  238. </div>
  239. </div>
  240. <div style="background-color: #226FAB;" class="py-3">
  241. <div class="container white">
  242. <div class="row pb-3">
  243. <div class="col-xs-12">
  244. <h1 class="display-5">Features</h1>
  245. </div>
  246. </div>
  247. <div class="row vcenter pb-3 mb-3">
  248. <div class="col-md-6 ">
  249. <h1 class="display-6">Manage your passwords directly from your browser</h1>
  250. <p class="lead">
  251. <br>
  252. LessPass derives a site, a login and a master password to generate a unique password.
  253. You don't need to sync your password vault across every browser and device.
  254. </p>
  255. </div>
  256. <div class="col-md-6">
  257. <img src="dist/demo.gif" class="img-fluid" alt="password generation">
  258. </div>
  259. </div>
  260. <div class="row vcenter py-3 my-3">
  261. <div class="col-md-6 pb-2">
  262. <img src="dist/masterPasswordPattern.png" class="img-fluid" alt="password pattern">
  263. </div>
  264. <div class="col-md-6">
  265. <p class="lead">
  266. Memorize master password easily. Build a story in your head&nbsp;: "I like to eat in this luxury
  267. liner."
  268. </p>
  269. </div>
  270. </div>
  271. <div class="row vcenter py-3 my-3">
  272. <div class="col-md-6">
  273. <h1 class="display-6">Use LessPass Database for complex passwords</h1>
  274. <p class="lead">
  275. We all know those sites that have special password rules.
  276. So you can't use the default options and have to remember the password is 6 characters long, only
  277. numbers.
  278. For this scenario we create what we call the "connected" version.
  279. Sign in, load or save complex password on LessPass Database.
  280. </p>
  281. <p class="lead">
  282. To register an account on LessPass click on the
  283. <i class="fa fa-user-secret white" aria-hidden="true"></i> icon in the LessPass component header.
  284. </p>
  285. </div>
  286. <div class="col-md-6">
  287. <img src="dist/demo2.gif" class="img-fluid" alt="password load">
  288. </div>
  289. </div>
  290. <div class="row vcenter py-3 my-3">
  291. <div class="col-xs-12 text-xs-center">
  292. <h1 class="display-6">Self Hosted</h1>
  293. <p class="lead">
  294. You can host your own LessPass Database. It's super easy. Just run a single
  295. <a class="white-link" href="https://github.com/lesspass/lesspass#self-host-your-lesspass-database">command</a>
  296. on your server.
  297. </p>
  298. </div>
  299. </div>
  300. <div class="row vcenter py-3 my-3">
  301. <div class="col-md-6 pb-2">
  302. <img src="dist/webextension.png" class="img-fluid" alt="web extension">
  303. </div>
  304. <div class="col-md-6">
  305. <h1 class="display-6">Chrome and Firefox <br> extensions</h1>
  306. <p class="lead">
  307. Download the <a class="white-link" href="https://addons.mozilla.org/en-US/firefox/addon/lesspass/">Firefox</a>
  308. or the <a class="white-link"
  309. href="https://chrome.google.com/webstore/detail/lesspass/lcmbpoclaodbgkbjafnkbbinogcbnjih">Chrome</a>
  310. extension
  311. to use the same component everywhere. Use the
  312. <kbd><kbd>ctrl</kbd>+<kbd>shift</kbd>+<kbd>L</kbd></kbd>
  313. shortcut to open the extension.
  314. </p>
  315. </div>
  316. </div>
  317. </div>
  318. </div>
  319. <div style="background-color: #F8F9F9;" class="py-3">
  320. <div class="container text-xs-center text-sm-left py-3">
  321. <div class="row">
  322. <div class="col-xs-12">
  323. <small>
  324. Copyright LessPass <br>
  325. Created by <a href="https://twitter.com/guillaume20100">Guillaume Vincent</a>
  326. </small>
  327. </div>
  328. </div>
  329. </div>
  330. </div>
  331. <script src="dist/lesspass.min.js"></script>
  332. </body>
  333. </html>