Implement Index page

ui/package-lock.json

@@ -3389,6 +3389,11 @@
         }
       }
     },
+    "font-awesome": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz",
+      "integrity": "sha1-j6jPBBGhoxr9B7BtKQK7n8gVoTM="
+    },
     "for-in": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",

ui/package.json

@@ -19,6 +19,7 @@
     "@angular/platform-browser": "~8.0.0",
     "@angular/platform-browser-dynamic": "~8.0.0",
     "@angular/router": "~8.0.0",
+    "font-awesome": "^4.7.0",
     "rxjs": "~6.4.0",
     "tslib": "^1.9.0",
     "zone.js": "~0.9.1"

ui/src/app/index/index.component.html

@@ -1,3 +1,50 @@
-<p>
-  index works!
-</p>
+<div class="background-image">
+
+  <div class="title">
+    <h1>Podsync</h1>
+
+    <h2>
+      Simple and free service that lets you listen to any YouTube or
+      Vimeo channels, playlists or user videos in podcast format.
+    </h2>
+
+    <div class="login-block">
+      <div class="login-border">
+
+        <ng-container *ngIf="!loggedIn">
+          <a href="/user/login">
+            <i class="fa fa-unlock" aria-hidden="true"></i>
+            Login with Patreon to unlock features
+          </a>
+          <a href="https://www.patreon.com/bePatron?c=278915">
+            <i class="fa fa-question-circle-o" aria-hidden="true"></i>
+          </a>
+        </ng-container>
+        <ng-container *ngIf="loggedIn">
+          <a>Hey, <i class="fa fa-user-o" aria-hidden="true"></i> {{ fullName }}</a>
+          <a href="/user/logout"><i class="fa fa-power-off" aria-hidden="true"></i></a>
+        </ng-container>
+
+      </div>
+    </div>
+  </div>
+
+<!--  <app-input></app-input>-->
+
+  <div class="man"></div>
+
+  <div>
+    <a href="https://www.patreon.com/podsync" target="_blank">
+      <img class="patreon shadow" width="400" src="assets/img/become_patreon.png"
+           alt="Become my patron on Patreon"/>
+    </a>
+  </div>
+
+  <div class="footer">
+    <div class="footer-links">
+      <a href="./faq.html"><i class="fa fa-question-circle" aria-hidden="true"></i></a>
+      <a href="https://twitter.com/pod_sync"><i class="fa fa-twitter" aria-hidden="true"></i></a>
+    </div>
+  </div>
+
+</div>

ui/src/app/index/index.component.scss

@@ -0,0 +1,148 @@
+.background-image {
+  background-image: url('/assets/img/pc_bg.png');
+  -ms-background-repeat: repeat-x;
+  background-repeat: repeat-x;
+  -ms-background-position: center bottom;
+  background-position: center bottom;
+  position: absolute;
+  width: 100%;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  margin: 0;
+  padding: 0;
+  -webkit-user-select: text;
+  z-index: 0;
+
+  @media screen and (max-width: 640px) {
+    background-image: url('/assets/img/mobile_bg.png')
+  }
+}
+
+/* Header */
+
+.title {
+  padding: 50px;
+
+  @media screen and (max-width: 640px) {
+    padding: 20px;
+  }
+
+  @media screen and (max-height: 900px) {
+    padding-top: 1em;
+    padding-bottom: 1em;
+  }
+
+  h1 {
+    margin: 0;
+  }
+
+  h2 {
+    max-width: 500px;
+    font-weight: normal;
+    font-size: 1em;
+  }
+}
+
+.login-block {
+  color: #e18712;
+  font-size: 1em;
+  overflow: hidden;
+}
+
+.login-border, .login-border a {
+  float: left;
+  background: orange;
+  color: whitesmoke;
+  border: 1px orange;
+  padding: 3px;
+  border-radius: 2px;
+  font-size: 15px;
+}
+
+/* Man image */
+.man {
+  width: 210px;
+  height: 333px;
+  background-image: url('/assets/img/man.png');
+  -ms-background-repeat: no-repeat;
+  background-repeat: no-repeat;
+  -ms-background-position: center bottom;
+  background-position: center bottom;
+  background-color: transparent;
+  position: absolute;
+  bottom: 100px;
+  left: 30%;
+  margin: 0;
+  padding: 0;
+  z-index: -1;
+
+  @media screen and (max-width: 640px) {
+    background-image: none;
+  }
+
+  @media screen and (max-height: 640px) {
+    display: none;
+  }
+}
+
+/* Patreon block */
+
+.patreon {
+  background: rgb(171, 163, 149);
+  border: 1px rgb(240, 232, 214) solid;
+  bottom: 6em;
+  float: right;
+  position: absolute;
+  right: 2em;
+  z-index: -1;
+
+  @media screen and (max-height: 640px), screen and (max-width: 500px) {
+    width: 300px;
+    bottom: 4em;
+    right: 2em;
+  }
+
+  @media screen and (max-height: 400px) {
+    display: none;
+  }
+}
+
+/* Footer */
+
+.footer {
+  background-image: url('/assets/img/pc_footer.png');
+  -ms-background-position: center bottom;
+  background-position: center bottom;
+  background-color: #aca496;
+  position: absolute;
+  width: 100%;
+  height: 69px;
+  left: 0;
+  bottom: 0;
+  margin: 0;
+  padding: 0;
+  -webkit-user-select: text;
+  z-index: -1;
+
+  @media screen and (max-width: 640px) {
+    background-image: url('/assets/img/mobile_footer.png');
+    height: 50px;
+  }
+}
+
+.footer-links {
+  position: absolute;
+  right: 2em;
+  bottom: 0;
+  font-size: 3em;
+
+  a {
+    color: rgb(62, 62, 41);
+  }
+
+  a:hover {
+    color: rgb(33, 33, 26);
+    background: none;
+  }
+}

ui/src/app/index/index.component.ts

@@ -6,10 +6,13 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./index.component.scss']
 })
 export class IndexComponent implements OnInit {
+  loggedIn: boolean;
+  fullName: string;
 
   constructor() { }
 
   ngOnInit() {
+    this.loggedIn = true;
+    this.fullName = 'Full name here';
   }
-
 }

ui/src/styles.scss

@@ -1 +1,29 @@
-/* You can add global styles to this file, and also import other style files */
+@import url('https://fonts.googleapis.com/css?family=Ubuntu');
+
+body {
+  margin: 0;
+  padding: 0;
+  font-family: 'Ubuntu', sans-serif;
+  background-color: #f4eddb;
+}
+
+a {
+  color: #EB8C11;
+  text-decoration: none;
+}
+
+.pad10 {
+  padding: 10px;
+}
+
+.black {
+  color: #000000;
+}
+
+.shadow {
+  box-shadow: 0 12px 8px -6px #a79d87;
+  box-shadow: 0 12px 8px -6px rgba(167, 157, 135, 0.4);
+}
+
+$fa-font-path: "~font-awesome/fonts";
+@import "~font-awesome/scss/font-awesome";