25개 이상의 토픽을 선택하실 수 없습니다. Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

473 lines
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
  8. name="viewport"
  9. content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
  10. />
  11. <link rel="stylesheet" href="dist/lesspass.min.css" />
  12. <link rel="manifest" href="dist/manifest.json" />
  13. <link rel="manifest" href="dist/manifest.json" />
  14. <meta name="mobile-web-app-capable" content="yes" />
  15. <meta name="theme-color" content="#555555" />
  16. <meta name="application-name" content="LessPass" />
  17. <link
  18. rel="apple-touch-icon"
  19. sizes="57x57"
  20. href="dist/apple-touch-icon-57x57.png"
  21. />
  22. <link
  23. rel="apple-touch-icon"
  24. sizes="60x60"
  25. href="dist/apple-touch-icon-60x60.png"
  26. />
  27. <link
  28. rel="apple-touch-icon"
  29. sizes="72x72"
  30. href="dist/apple-touch-icon-72x72.png"
  31. />
  32. <link
  33. rel="apple-touch-icon"
  34. sizes="76x76"
  35. href="dist/apple-touch-icon-76x76.png"
  36. />
  37. <link
  38. rel="apple-touch-icon"
  39. sizes="114x114"
  40. href="dist/apple-touch-icon-114x114.png"
  41. />
  42. <link
  43. rel="apple-touch-icon"
  44. sizes="120x120"
  45. href="dist/apple-touch-icon-120x120.png"
  46. />
  47. <link
  48. rel="apple-touch-icon"
  49. sizes="144x144"
  50. href="dist/apple-touch-icon-144x144.png"
  51. />
  52. <link
  53. rel="apple-touch-icon"
  54. sizes="152x152"
  55. href="dist/apple-touch-icon-152x152.png"
  56. />
  57. <link
  58. rel="apple-touch-icon"
  59. sizes="180x180"
  60. href="dist/apple-touch-icon-180x180.png"
  61. />
  62. <meta name="apple-mobile-web-app-capable" content="yes" />
  63. <meta
  64. name="apple-mobile-web-app-status-bar-style"
  65. content="black-translucent"
  66. />
  67. <meta name="apple-mobile-web-app-title" content="LessPass" />
  68. <link
  69. rel="icon"
  70. type="image/png"
  71. sizes="228x228"
  72. href="dist/coast-228x228.png"
  73. />
  74. <link
  75. rel="yandex-tableau-widget"
  76. href="dist/yandex-browser-manifest.json"
  77. />
  78. <meta name="msapplication-TileColor" content="#555555" />
  79. <meta name="msapplication-TileImage" content="dist/mstile-144x144.png" />
  80. <meta name="msapplication-config" content="dist/browserconfig.xml" />
  81. <link
  82. rel="icon"
  83. type="image/png"
  84. sizes="32x32"
  85. href="dist/favicon-32x32.png"
  86. />
  87. <link
  88. rel="icon"
  89. type="image/png"
  90. sizes="192x192"
  91. href="dist/android-chrome-192x192.png"
  92. />
  93. <link
  94. rel="icon"
  95. type="image/png"
  96. sizes="16x16"
  97. href="dist/favicon-16x16.png"
  98. />
  99. <link rel="shortcut icon" href="dist/favicon.ico" />
  100. <link
  101. rel="apple-touch-startup-image"
  102. media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)"
  103. href="dist/apple-touch-startup-image-320x460.png"
  104. />
  105. <link
  106. rel="apple-touch-startup-image"
  107. media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)"
  108. href="dist/apple-touch-startup-image-640x920.png"
  109. />
  110. <link
  111. rel="apple-touch-startup-image"
  112. media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)"
  113. href="dist/apple-touch-startup-image-640x1096.png"
  114. />
  115. <link
  116. rel="apple-touch-startup-image"
  117. media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)"
  118. href="dist/apple-touch-startup-image-750x1294.png"
  119. />
  120. <link
  121. rel="apple-touch-startup-image"
  122. media="(device-width: 414px) and (device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3)"
  123. href="dist/apple-touch-startup-image-1182x2208.png"
  124. />
  125. <link
  126. rel="apple-touch-startup-image"
  127. media="(device-width: 414px) and (device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3)"
  128. href="dist/apple-touch-startup-image-1242x2148.png"
  129. />
  130. <link
  131. rel="apple-touch-startup-image"
  132. media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)"
  133. href="dist/apple-touch-startup-image-748x1024.png"
  134. />
  135. <link
  136. rel="apple-touch-startup-image"
  137. media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)"
  138. href="dist/apple-touch-startup-image-768x1004.png"
  139. />
  140. <link
  141. rel="apple-touch-startup-image"
  142. media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)"
  143. href="dist/apple-touch-startup-image-1496x2048.png"
  144. />
  145. <link
  146. rel="apple-touch-startup-image"
  147. media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)"
  148. href="dist/apple-touch-startup-image-1536x2008.png"
  149. />
  150. <style>
  151. * {
  152. border-radius: 0 !important;
  153. }
  154. html,
  155. body {
  156. height: 100%;
  157. }
  158. body {
  159. background-color: #fafafa;
  160. }
  161. #fold {
  162. background-size: cover;
  163. background: #3398eb url(dist/double-blue-cover.png) no-repeat center
  164. center;
  165. min-height: 100%;
  166. }
  167. #fold a.navbar-brand {
  168. color: white;
  169. line-height: 60px;
  170. font-size: 2.5rem;
  171. }
  172. #fold a.icon-download {
  173. color: white;
  174. font-size: 2.5rem;
  175. text-decoration: none;
  176. margin-left: 1.5rem;
  177. }
  178. @media (min-width: 544px) {
  179. #fold .hero {
  180. padding-top: 7rem;
  181. }
  182. }
  183. #features {
  184. background-color: #024379;
  185. color: white;
  186. padding-top: 7rem;
  187. padding-bottom: 7rem;
  188. }
  189. @media (min-width: 544px) {
  190. .feature p {
  191. min-height: 120px;
  192. }
  193. }
  194. .air {
  195. padding-top: 7rem;
  196. padding-bottom: 7rem;
  197. }
  198. @media (min-width: 544px) {
  199. #features {
  200. padding-top: 14rem;
  201. padding-bottom: 7rem;
  202. }
  203. }
  204. #supported-platforms .card {
  205. border: none;
  206. background: none;
  207. }
  208. .text-black {
  209. color: #292b2c;
  210. }
  211. </style>
  212. </head>
  213. <body>
  214. <section id="fold">
  215. <div class="container d-none d-md-block py-sm-3 text-center">
  216. <a class="navbar-brand" href="https://lesspass.com">
  217. <img
  218. src="dist/LessPass-icon-white.svg"
  219. width="60"
  220. height="60"
  221. class="d-inline-block align-top"
  222. alt="LessPass"
  223. />
  224. LessPass
  225. </a>
  226. </div>
  227. <div class="container hero">
  228. <div class="row align-items-center">
  229. <div class="col-12 p-0 col-md-5">
  230. <div class="lesspass--unbordered lesspass--full-width">
  231. <div id="lesspass"></div>
  232. </div>
  233. <div class="text-white px-3 pb-3">
  234. <small>
  235. <i class="fa fa-shield" aria-hidden="true"></i> For more
  236. security use browser extensions
  237. </small>
  238. </div>
  239. </div>
  240. <div class="col-12 col-md-5 ml-auto text-white">
  241. <h2>Stateless Password Manager</h2>
  242. <p class="lead">
  243. Stop wasting your time synchronizing your encrypted vault.
  244. Remember one master password to access your passwords, anywhere,
  245. anytime. No sync needed.
  246. </p>
  247. <p>
  248. <a
  249. href="https://blog.lesspass.com/lesspass-how-it-works-dde742dd18a4#.vbgschksh"
  250. class="btn btn-secondary"
  251. >
  252. How does it work?
  253. </a>
  254. </p>
  255. </div>
  256. </div>
  257. </div>
  258. </section>
  259. <div id="features">
  260. <div class="container">
  261. <div class="row align-items-center justify-content-center">
  262. <div class="col-12 col-sm-6">
  263. <h2>Compute your password offline</h2>
  264. <p class="lead">
  265. LessPass computes a unique password using a site, login and a
  266. master password. You don't need to sync a password vault across
  267. every device because LessPass works offline!
  268. </p>
  269. </div>
  270. <div class="col-12 col-sm-6">
  271. <img
  272. src="dist/HowItWorks.png"
  273. class="img-fluid"
  274. alt="LessPass demo"
  275. />
  276. </div>
  277. </div>
  278. <div class="row air">
  279. <div class="col-12 col-sm-4 py-5 feature">
  280. <p class="lead">
  281. Manage complex passwords with LessPass options (only numbers,
  282. length, etc...)
  283. </p>
  284. <img
  285. src="dist/options.png"
  286. class="img-fluid my-1"
  287. alt="LessPass options"
  288. />
  289. </div>
  290. <div class="col-12 col-sm-4 py-5 feature">
  291. <p class="lead">
  292. Change generated password without changing your master password.
  293. Increment the counter field in your options.
  294. </p>
  295. <img
  296. src="dist/counter.png"
  297. class="img-fluid my-1"
  298. alt="LessPass counter"
  299. />
  300. </div>
  301. <div class="col-12 col-sm-4 py-5 feature">
  302. <p class="lead">
  303. Detect an error in your master password without revealing it.
  304. Memorize your fingerprint:
  305. <br />
  306. "<i>I like to eat in this luxury liner</i>".
  307. </p>
  308. <img
  309. src="dist/fingerprint.png"
  310. class="img-fluid my-1"
  311. alt="LessPass fingerprint"
  312. />
  313. </div>
  314. </div>
  315. <div class="row align-items-center justify-content-center">
  316. <div class="col-12 col-sm-5">
  317. <h2>Use LessPass Database for complex passwords</h2>
  318. <p class="lead">
  319. We all know sites with stupid password rules. For this kind of
  320. site, we created a "connected" version to memorize the options.
  321. Sign in, load or save complex password profiles on LessPass
  322. Database.
  323. </p>
  324. </div>
  325. <div class="col-12 col-sm-7">
  326. <img
  327. src="dist/LessPassDatabase.png"
  328. class="img-fluid"
  329. alt="LessPass Database"
  330. />
  331. </div>
  332. </div>
  333. </div>
  334. </div>
  335. <div style="background-color: #F9F9F9;">
  336. <div class="container">
  337. <div id="open-source" class="air">
  338. <div class="row mb-3">
  339. <div class="col-12 col-sm-12">
  340. <h2>
  341. Can you see the source code<br />of your current password
  342. manager?
  343. </h2>
  344. </div>
  345. </div>
  346. <div class="row">
  347. <div class="col-12 col-sm-12">
  348. <p class="lead">
  349. To us, a password manager is only as secure as it is
  350. transparent. That's why LessPass is fully open source. Don't
  351. just take our word for it, take a peek under the hood and see
  352. for yourself!
  353. </p>
  354. <p class="lead">
  355. <a href="https://github.com/lesspass/lesspass"
  356. >View on GitHub</a
  357. >
  358. </p>
  359. </div>
  360. </div>
  361. </div>
  362. <div id="supported-platforms">
  363. <div class="row mb-5">
  364. <div class="col-12 col-sm-12">
  365. <h2>Supported Platforms</h2>
  366. </div>
  367. </div>
  368. <div class="row">
  369. <div class="col-12 col-sm-12">
  370. <div class="card-deck text-center justify-content-center">
  371. <div class="card">
  372. <a
  373. class="card-block text-black"
  374. href="https://play.google.com/store/apps/details?id=com.lesspass.android&hl=en"
  375. >
  376. <div class="card-title">
  377. <i
  378. class="fa fa-fw fa-3x fa-android"
  379. aria-hidden="true"
  380. ></i>
  381. </div>
  382. <div class="card-text">
  383. Android
  384. </div>
  385. </a>
  386. </div>
  387. <div class="card">
  388. <a
  389. class="card-block text-black"
  390. href="https://chrome.google.com/webstore/detail/lesspass/lcmbpoclaodbgkbjafnkbbinogcbnjih"
  391. >
  392. <div class="card-title">
  393. <i
  394. class="fa fa-fw fa-3x fa-chrome"
  395. aria-hidden="true"
  396. ></i>
  397. </div>
  398. <div class="card-text">
  399. Chrome
  400. </div>
  401. </a>
  402. </div>
  403. <div class="card">
  404. <a
  405. class="card-block text-black"
  406. href="https://addons.mozilla.org/en-US/firefox/addon/lesspass/"
  407. >
  408. <div class="card-title">
  409. <i
  410. class="fa fa-fw fa-3x fa-firefox"
  411. aria-hidden="true"
  412. ></i>
  413. </div>
  414. <div class="card-text">
  415. Firefox
  416. </div>
  417. </a>
  418. </div>
  419. <div class="card">
  420. <a
  421. class="card-block text-black"
  422. href="https://github.com/lesspass/lesspass#cli"
  423. >
  424. <div class="card-title">
  425. <i
  426. class="fa fa-fw fa-3x fa-terminal"
  427. aria-hidden="true"
  428. ></i>
  429. </div>
  430. <div class="card-text">
  431. Command Line
  432. </div>
  433. </a>
  434. </div>
  435. </div>
  436. </div>
  437. </div>
  438. </div>
  439. </div>
  440. </div>
  441. <div style="background-color: #F9F9F9;">
  442. <div class="container air">
  443. <div class="row">
  444. <div class="col-12">
  445. <hr />
  446. <small>
  447. Copyright &copy; 2015
  448. <script>
  449. new Date().getFullYear() > 2010 &&
  450. document.write("- " + new Date().getFullYear());
  451. </script>
  452. LessPass
  453. </small>
  454. </div>
  455. </div>
  456. </div>
  457. </div>
  458. <script src="dist/lesspass.min.js"></script>
  459. </body>
  460. </html>