feat: Rudimentary implementation of a landing page

References: #267
7 years ago · 5c4b4c223b
parent 178061475e
commit 5c4b4c223b
1 changed files with 131 additions and 0 deletions
--- a/landing-page.html
+++ b/landing-page.html
@ -0,0 +1,131 @@
+<!doctype html>
+
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+
+    <title>Loop</title>
+    <meta name="description" content="A habit tracker that works...">
+
+    <style>
+        html, body {
+            margin: 0;
+            padding: 0;
+            width: 100%;
+            height: 100%;
+            font-family: roboto, arial, sans-serif;
+        }
+
+        .header-container {
+            background: #156DC4;
+            text-align: center;
+            padding: 60px;
+        }
+
+        .header {
+            display: inline-block;
+        }
+
+        .header img {
+            width: 350px;
+        }
+
+        .header .headline {
+            color: white;
+            width: 550px;
+            text-align: left;
+            display: inline-block;
+            padding: 60px;
+        }
+
+        .header .headline h1 {
+            font-size: 4rem;
+        }
+
+        .header .headline p {
+            font-size: 1.2rem;
+        }
+
+
+        .content {
+            display: grid;
+        }
+
+        .content .row div {
+            display: inline-block;
+        }
+
+        .content .row .entry {
+            width: 30%;
+            padding: 25px;
+            vertical-align: top;
+        }
+
+
+    </style>
+
+</head>
+
+<body>
+
+<div class="header-container">
+    <div class="header">
+
+        <img src="https://raw.githubusercontent.com/iSoron/uhabits/dev/screenshots/original/uhabits1.png"/>
+
+        <div class="headline">
+            <h1>Make those<br/>habits stick.</h1>
+            <p>
+                Loop helps you create and maintain good habits, allowing you to achieve your
+                long-term goals. Detailed graphs and statistics show you how your habits improved
+                over time.
+            </p>
+        </div>
+
+    </div>
+</div>
+
+<div class="content">
+
+    <div class="row">
+        <div class="entry">
+            <h3>Beautiful and modern interface</h3>
+            <p>Loop has a minimalistic inerface that is easy to use and follows the material design
+                guidelines.</p>
+        </div>
+        <div class="entry">
+            <h3>Habit score</h3>
+            <p>Every repetition makes your habit stronger, and every missed day makes it weaker. A
+                few missed days after a long streak, however, will not completely destroy your
+                entire progress.</p>
+        </div>
+        <div class="entry">
+            <h3>Detailed graphs and statistics</h3>
+            <p>Clearly see how your habits improved over time with beautiful and detailed graphs.
+                Scroll back to see the complete history of your habits.</p>
+        </div>
+    </div>
+
+    <div class="row">
+        <div class="entry">
+            <h3>Flexible schedules</h3>
+            <p>Supports both daily habits and habits with more complex schedules, such as 3 times
+                every week; one time every other week; or every other day.</p>
+        </div>
+        <div class="entry">
+            <h3>Reminders</h3>
+            <p>Create an individual reminder for each habit, at a chosen hour of the day. Easily
+                check, dismiss or snooze your habit directly from the notification, without opening
+                the app.</p>
+        </div>
+        <div class="entry">
+            <h3>Optimized for smartwatches</h3>
+            <p>Reminders can be checked, snoozed or dismissed directly from your Android Wear
+                watch.</p>
+        </div>
+    </div>
+
+</div>
+
+</body>
+</html>