Etusivu Tutki Apua
Rekisteröidy Kirjaudu sisään
claude
/
simplauncher
1
0
Haarauta 0
Tiedostot Esitykset 0 Vetopyynnöt 0 Wiki
Selaa lähdekoodia

wip: designing the landing page

Beautus 6 vuotta sitten
vanhempi
47547c0b29
sitoutus
adf994e0a5
5 muutettua tiedostoa jossa 170 lisäystä ja 61 poistoa
Yhdistetty näkymä Näytä diff tilastot
  1. BIN
      docs/assets/badge_get-it-on-en-us.png
  2. BIN
      docs/assets/google-play-badge.png
  3. BIN
      docs/assets/home-screen.png
  4. 26 55
      docs/index.html
  5. 144 6
      docs/main.css

BIN
docs/assets/badge_get-it-on-en-us.png
Näytä tiedosto


BIN
docs/assets/google-play-badge.png
Näytä tiedosto


BIN
docs/assets/home-screen.png
Näytä tiedosto


+ 26 - 55
docs/index.html
Näytä tiedosto 

@@ -2,66 +2,37 @@
 
 <html lang="en">
 
 <html lang="en">
 
 
 
 <head>
 
 <head>
 
-    <meta charset="UTF-8"/>
 
-    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
 
-    <meta content="ie=edge" http-equiv="X-UA-Compatible"/>
 
-    <link href="./main.css" rel="stylesheet">
 
-    <title>Slim Launcher - Fewer distraction, more life</title>
 
+  <meta charset="UTF-8"/>
 
+  <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
 
+  <meta content="ie=edge" http-equiv="X-UA-Compatible"/>
 
+  <link href="https://fonts.googleapis.com/css?family=Ubuntu&display=swap" rel="stylesheet">
 
+  <link href="./main.css" rel="stylesheet">
 
+  <title>Slim Launcher - Fewer distraction, more life</title>
 
 </head>
 
 </head>
 
 
 
 <body>
 
 <body>
 
 <header>
 
 <header>
 
-    <h1>Slim Launcher</h1>
 
-    <h3>v2.3</h3>
 
+  <nav>
 
+    <a href="#">Donate</a>
 
+  </nav>
 
 </header>
 
 </header>
 
-<main>
 
-    <article>
 
-        <h2>Frequently Asked Questions (FAQs)</h2>
 
-        <ol>
 
-            <li><h3>Where is the app drawer?</h3></li>
 
-            <span>There is no app drawer! You don't need an app drawer when all the apps you need fit in one screen.</span>
 
-            <li><h3>Why can't I access all the other apps on my phone?</h3></li>
 
-            <span>Clearly you didn't understand the whole idea of this app.
 
-                The whole point of this app is to stop you from doing exactly that. Google 'minimalism'</span>
 
-            <li><h3>How do I get to my other apps?</h3></li>
 
-            <span>Well simple! Swipe up from your home screen &gt; Go to Options &gt; Tap Customise apps. have fun!</span>
 
-            <li><h3>You should add a google search bar and a way to access all the other apps.</h3></li>
 
-            <span>First of all this is not a question! Secondly, I do appreciate the feedback but
 
-                let it not be against the reason why the app exists in the first place</span>
 
-            <li><h3>Why can't I set a wallpaper?</h3></li>
 
-            <span>Well why do you want a wallpaper? You want to look at your phone? for how long? for what? For who?
 
-            Read a book instead.</span>
 
-            <li><h3>Hey, your app sucks!</h3></li>
 
-            <span>Where's yours that doesn't suck?!?</span>
 
-            <li><h3>Is it possible to change the apps on the home screen?</h3></li>
 
-            <span>Yes, you can. If you have the latest version installed, you'll find that adding, renaming
 
-            and exchanging apps has been made easier.</span>
 
-            <li><h3>WHAT ABOUT OTHER APPS?</h3></li>
 
-            <span><i>Where's Thanos when you need him the most?...</i> Did you even read the description of the app?</span>
 
-            <li><h3>Does it support other languages?</h3></li>
 
-            <span>No, unfortunately. I would love for the app to be accessible no matter the language.
 
-                But the app is free, I can't afford to pay for translation services as of yet. If you know
 
-            a language that you would like this app to support and you are fluent in it, please shoot me an email and we'll make magic happen</span>
 
-            <li><h3>I have a youtube channel, can I review your app for a small fee? I have many subscribers and
 
-            my videos have millions of views</h3></li>
 
-            <span>Like I said! I'm broke</span>
 
-            <li><h3>Is the app free forever?</h3></li>
 
-            <span>Yes. I made the app because I needed it myself. Then I decided to share it with the world.
 
-                I see no reason why I should make other people pay for it.
 
-                Fun fact! I actually made this because I didn't want to pay for something I can create myself</span>
 
-            <li><h3>How do I support the project</h3></li>
 
-            <span>You can become a tester. Shoot me an email if you need more info regarding this.
 
-                This way, you can give feedback that will shape the direction of the app and make a better experience for everyone.
 
-            You can contribute on the project on GitHub.
 
-                The most of the work has been put in to make the code more modular and readable
 
-                so that it's easy for other people to add in their input as PRs. You can also
 
-                <a href="https://buymeacoff.ee/sduduzog">buy me a coffee</a>.
 
-                I will probably buy a big mac with the cash or go watch a movie to reward myself.
 
-                I will however spend it on the project if stated otherwise. I wouldn't be able to live with myself if I don't</span>
 
-            <li><h3>Why does this website look like crap?</h3></li>
 
-            <span>I hit a designers block.</span>
 
-        </ol>
 
-    </article>
 
+<main role="main">
 
+  <section role="banner" class="banner">
 
+    <div class="wrapper">
 
+      <h1>A minimalist launcher that only allows you to use fewer apps on your phone</h1>
 
+      <img src="./assets/home-screen.png" class="screenshot" alt="Home screen screenshot">
 
+      <a href="https://play.google.com/store/apps/details?id=com.sduduzog.slimlauncher">
 
+        <img class="badge g-play"
 
+             src="./assets/google-play-badge.png"
 
+             alt="Google Play badge">
 
+      </a>
 
+      <a href="https://f-droid.org/en/packages/com.sduduzog.slimlauncher">
 
+        <img class="badge f-droid"
 
+             src="./assets/badge_get-it-on-en-us.png"
 
+             alt="F-droid badge">
 
+      </a>
 
+    </div>
 
+  </section>
 
 </main>
 
 </main>
 
 </body>
 
 </body>

+ 144 - 6
docs/main.css
Näytä tiedosto 

@@ -1,16 +1,154 @@
 
-*{
 
+* {
 
   box-sizing: border-box;
 
   box-sizing: border-box;
 
 }
 
 }
 
-body{
 
+
 
+body {
 
   margin: 0;
 
   margin: 0;
 
-  font-family: monospace;
 
+  font-family: 'Ubuntu', sans-serif;
 
 }
 
 }
 
 
 
-header{
 
-  padding: 20px;
 
+header {
 
+  background-color: red;
 
+}
 
+
 
+header nav {
 
+  height: 60px;
 
+  display: none;
 
 }
 
 }
 
 
 
-main{
 
+main {
 
   margin: auto;
 
   margin: auto;
 
+}
 
+
 
+main section > * {
 
+  max-width: 1280px;
 
+}
 
+
 
+.wrapper {
 
+  padding: 80px 100px;
 
+  margin: auto;
 
+  max-width: 1200px;
 
+}
 
+
 
+.banner .wrapper {
 
+  display: grid;
 
+  gap: 20px;
 
+  grid-template-columns: 1fr 1fr 300px;
 
+  grid-template-rows: max-content;
 
+}
 
+
 
+.banner h1 {
 
+  grid-column: 1 / 3;
 
+  margin: 100px 0 0;
 
+  font-weight: lighter;
 
+  font-size: xx-large;
 
+  text-align: center;
 
+  padding: 20px;
 
+}
 
+
 
+.banner img {
 
+  width: 100%;
 
+  height: auto;
 
+  display: block;
 
+}
 
+
 
+.banner .screenshot {
 
+  box-shadow: 0 12px 30px 8px #363636;
 
+  grid-column: 3 / 4;
 
+  grid-row: 1 / 3;
 
+}
 
+
 
+.banner .badge {
 
   padding: 20px;
 
   padding: 20px;
 
+  max-width: 260px;
 
+  margin: 20px auto auto;
 
+}
 
+
 
+.banner .g-play {
 
+  margin-left: auto;
 
+  margin-right: 0;
 
+}
 
+
 
+.banner .f-droid {
 
+  margin-left: 0;
 
+}
 
+
 
+@media screen and (max-width: 768px) {
 
+  .banner .wrapper {
 
+    grid-template-columns: 1fr 250px;
 
+  }
 
+
 
+  .banner h1 {
 
+    margin: 0;
 
+    grid-column: 1 /2;
 
+  }
 
+
 
+  .banner a {
 
+    grid-column: 1 / 3;
 
+    grid-row: 2 /3;
 
+  }
 
+
 
+  .banner .screenshot {
 
+    grid-column: 2 / 3;
 
+    grid-row: 1 / 4;
 
+  }
 
+
 
+  .banner a:nth-child(3), .banner a:nth-child(4){
 
+    grid-column: 1 / 2;
 
+  }
 
+
 
+  .banner a:nth-child(4){
 
+    grid-row: 3 / 4;
 
+  }
 
+
 
+  .banner .g-play, .banner .f-droid {
 
+    margin: 0 auto;
 
+    padding: 0;
 
+    width: 180px;
 
+  }
 
+}
 
+
 
+@media screen and (max-width: 450px) {
 
+  .wrapper {
 
+    padding: 0;
 
+  }
 
+
 
+  .banner .wrapper {
 
+    grid-template-columns: 1fr;
 
+    padding: 20px;
 
+    gap: 0;
 
+  }
 
+
 
+  .banner h1 {
 
+    text-align: center;
 
+    grid-column: 1 / 2;
 
+    grid-row: 2 / 3;
 
+    font-size: x-large;
 
+  }
 
+
 
+  .banner .screenshot {
 
+    width: 230px;
 
+    margin: auto;
 
+    display: block;
 
+    grid-column: 1 / 2;
 
+  }
 
+
 
+  .banner .screenshot {
 
+    margin: 50px auto;
 
+    grid-row: 1 / 2;
 
+  }
 
+
 
+  .banner a:nth-child(3){
 
+    grid-row: 3 / 4;
 
+  }
 
+
 
+  .banner a:nth-child(4){
 
+    grid-row: 4 / 5;
 
+  }
 
+}
 
+
 
+@media screen and (max-width: 375px) {
 
+  .banner h1 {
 
+    font-size: larger;
 
+  }
 
 }
 
 }