From d67bc99bd2bb9dee5af9d9041c752fc051be207e Mon Sep 17 00:00:00 2001 From: Maksym Pavlenko Date: Sun, 2 Jun 2019 13:51:22 -0700 Subject: [PATCH] Implement Index page --- ui/package-lock.json | 5 + ui/package.json | 1 + ui/src/app/index/index.component.html | 53 ++++++++- ui/src/app/index/index.component.scss | 148 ++++++++++++++++++++++++++ ui/src/app/index/index.component.ts | 5 +- ui/src/styles.scss | 30 +++++- 6 files changed, 237 insertions(+), 5 deletions(-) diff --git a/ui/package-lock.json b/ui/package-lock.json index 776975f..032edc2 100644 --- a/ui/package-lock.json +++ b/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", diff --git a/ui/package.json b/ui/package.json index bb8e163..b33a8c1 100644 --- a/ui/package.json +++ b/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" diff --git a/ui/src/app/index/index.component.html b/ui/src/app/index/index.component.html index 788ead0..5e685f7 100644 --- a/ui/src/app/index/index.component.html +++ b/ui/src/app/index/index.component.html @@ -1,3 +1,50 @@ -

- index works! -

+
+ +
+

Podsync

+ +

+ Simple and free service that lets you listen to any YouTube or + Vimeo channels, playlists or user videos in podcast format. +

+ + +
+ + + +
+ +
+ + Become my patron on Patreon + +
+ +
+
+ + +
+
+ +
diff --git a/ui/src/app/index/index.component.scss b/ui/src/app/index/index.component.scss index e69de29..4c2d9c8 100644 --- a/ui/src/app/index/index.component.scss +++ b/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; + } +} diff --git a/ui/src/app/index/index.component.ts b/ui/src/app/index/index.component.ts index bd9e8de..6c2c1a8 100644 --- a/ui/src/app/index/index.component.ts +++ b/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'; } - } diff --git a/ui/src/styles.scss b/ui/src/styles.scss index 90d4ee0..36c6394 100644 --- a/ui/src/styles.scss +++ b/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";