Вы не можете выбрать более 25 тем Темы должны начинаться с буквы или цифры, могут содержать дефисы(-) и должны содержать не более 35 символов.
 
 
 
 
 
 

349 строки
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>
  156. <div id="hero-text" class="col-lg-6 pull-lg-6">
  157. <h1 class="display-5">Next-Gen Open Source Password Manager</h1>
  158. <p class="lead">
  159. Stop wasting time synchronize your encrypted vault.
  160. Remember one master password to access your passwords, anywhere, anytime.
  161. No sync needed.
  162. </p>
  163. <p class="lead">
  164. <a href="https://blog.lesspass.com/lesspass-how-it-works-dde742dd18a4#.vbgschksh"
  165. class="btn btn-secondary">
  166. How does it work?
  167. </a>
  168. </p>
  169. </div>
  170. </div>
  171. </div>
  172. </div>
  173. <div class="container white">
  174. <div class="row">
  175. <div class="col-md-6 col-lg-3 mb-3">
  176. <div class="media">
  177. <div class="media-left">
  178. <img class="media-object feature-image" src="dist/responsive.png"
  179. alt="Available far and wide">
  180. </div>
  181. <div class="media-body">
  182. <h4 class="media-heading">Available everywhere</h4>
  183. <p>
  184. LessPass is a web application and works on all devices
  185. (computer, smartphone, tablet and your smartTV)
  186. </p>
  187. </div>
  188. </div>
  189. </div>
  190. <div class="col-md-6 col-lg-3 mb-3">
  191. <div class="media">
  192. <div class="media-left">
  193. <img class="media-object feature-image" src="dist/no-cloud.png"
  194. alt="No Cloud">
  195. </div>
  196. <div class="media-body">
  197. <h4 class="media-heading">No storage</h4>
  198. <p>
  199. LessPass regenerates your passwords when you need them. No cloud storage is required
  200. </p>
  201. </div>
  202. </div>
  203. </div>
  204. <div class="clearfix hidden-lg-up"></div>
  205. <div class="col-md-6 col-lg-3 mb-3">
  206. <div class="media">
  207. <a class="media-left white-link" href="https://github.com/lesspass/lesspass/">
  208. <img class="media-object feature-image" src="dist/open-source.png"
  209. alt="Open Source">
  210. </a>
  211. <div class="media-body">
  212. <h4 class="media-heading">Open Source</h4>
  213. <p>
  214. LessPass is <strong>open-source</strong>. So its security can be audited.
  215. Source code is available on
  216. <a class="white-link" href="https://github.com/lesspass/lesspass/">Github</a>
  217. </p>
  218. </div>
  219. </div>
  220. </div>
  221. <div class="col-md-6 col-lg-3 mb-3">
  222. <div class="media">
  223. <div class="media-left">
  224. <img class="media-object feature-image" src="dist/free.png"
  225. alt="Free">
  226. </div>
  227. <div class="media-body">
  228. <h4 class="media-heading">Free</h4>
  229. <p>
  230. LessPass is free<br>and always will be
  231. </p>
  232. </div>
  233. </div>
  234. </div>
  235. </div>
  236. </div>
  237. </div>
  238. <div style="background-color: #226FAB;" class="py-3">
  239. <div class="container white">
  240. <div class="row pb-3">
  241. <div class="col-xs-12">
  242. <h1 class="display-5">Features</h1>
  243. </div>
  244. </div>
  245. <div class="row vcenter pb-3 mb-3">
  246. <div class="col-md-6 ">
  247. <h1 class="display-6">Manage your passwords directly from your browser</h1>
  248. <p class="lead">
  249. <br>
  250. LessPass derives a site, a login and a master password to generate a unique password.
  251. You don't need to sync your password vault across every browser and device.
  252. </p>
  253. </div>
  254. <div class="col-md-6">
  255. <img src="dist/demo.gif" class="img-fluid" alt="password generation">
  256. </div>
  257. </div>
  258. <div class="row vcenter py-3 my-3">
  259. <div class="col-md-6 pb-2">
  260. <img src="dist/masterPasswordPattern.png" class="img-fluid" alt="password pattern">
  261. </div>
  262. <div class="col-md-6">
  263. <p class="lead">
  264. Memorize master password easily. Build a story in your head&nbsp;: "I like to eat in this luxury
  265. liner."
  266. </p>
  267. </div>
  268. </div>
  269. <div class="row vcenter py-3 my-3">
  270. <div class="col-md-6">
  271. <h1 class="display-6">Use LessPass Database for complex passwords</h1>
  272. <p class="lead">
  273. We all know those sites that have special password rules.
  274. So you can't use the default options and have to remember the password is 6 characters long, only
  275. numbers.
  276. For this scenario we create what we call the "connected" version.
  277. Sign in, load or save complex password on LessPass Database.
  278. </p>
  279. <p class="lead">
  280. To register an account on LessPass click on the
  281. <i class="fa fa-user-secret white" aria-hidden="true"></i> icon in the LessPass component header.
  282. </p>
  283. </div>
  284. <div class="col-md-6">
  285. <img src="dist/demo2.gif" class="img-fluid" alt="password load">
  286. </div>
  287. </div>
  288. <div class="row vcenter py-3 my-3">
  289. <div class="col-xs-12 text-xs-center">
  290. <h1 class="display-6">Self Hosted</h1>
  291. <p class="lead">
  292. You can host your own LessPass Database. It's super easy. Just run a single
  293. <a class="white-link" href="https://github.com/lesspass/lesspass#self-host-your-lesspass-database">command</a>
  294. on your server.
  295. </p>
  296. </div>
  297. </div>
  298. <div class="row vcenter py-3 my-3">
  299. <div class="col-md-6 pb-2">
  300. <img src="dist/webextension.png" class="img-fluid" alt="web extension">
  301. </div>
  302. <div class="col-md-6">
  303. <h1 class="display-6">Chrome and Firefox <br> extensions</h1>
  304. <p class="lead">
  305. Download the <a class="white-link" href="https://addons.mozilla.org/en-US/firefox/addon/lesspass/">Firefox</a>
  306. or the <a class="white-link"
  307. href="https://chrome.google.com/webstore/detail/lesspass/lcmbpoclaodbgkbjafnkbbinogcbnjih">Chrome</a>
  308. extension
  309. to use the same component everywhere. Use the
  310. <kbd><kbd>ctrl</kbd>+<kbd>shift</kbd>+<kbd>L</kbd></kbd>
  311. shortcut to open the extension.
  312. </p>
  313. </div>
  314. </div>
  315. </div>
  316. </div>
  317. <div style="background-color: #F8F9F9;" class="py-3">
  318. <div class="container text-xs-center text-sm-left py-3">
  319. <div class="row">
  320. <div class="col-xs-12">
  321. <small>
  322. Copyright LessPass <br>
  323. Created by <a href="https://twitter.com/guillaume20100">Guillaume Vincent</a>
  324. </small>
  325. </div>
  326. </div>
  327. </div>
  328. </div>
  329. <script src="dist/lesspass.min.js"></script>
  330. </body>
  331. </html>