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

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