From 3cd6ec3ddb6ffa9a7706dbe774d69774c67f3dfa Mon Sep 17 00:00:00 2001 From: Sandu Victor Date: Mon, 30 Mar 2020 23:41:11 +0300 Subject: [PATCH] feat: changed style & added random quotes & added random button & added a wave svg --- packages/web/src/frontPage/home.tsx | 35 +++++++++++++- packages/web/src/frontPage/randomText.ts | 41 +++++++++++++++++ packages/web/src/frontPage/style.tsx | 58 ++++++++++++++++++++++-- 3 files changed, 128 insertions(+), 6 deletions(-) create mode 100644 packages/web/src/frontPage/randomText.ts diff --git a/packages/web/src/frontPage/home.tsx b/packages/web/src/frontPage/home.tsx index db7b93f..053c334 100644 --- a/packages/web/src/frontPage/home.tsx +++ b/packages/web/src/frontPage/home.tsx @@ -1,5 +1,9 @@ import * as React from "react"; +const ReactRotatingText = require("react-rotating-text"); + +import { getRandomText } from "./randomText"; + import { SvgCrown, Container, @@ -8,7 +12,11 @@ import { VerticallyCenteredText, FixText, FixCrown, - Title + Title, + RandomText, + Wave, + ButtonWrapper, + TypeButton } from "./style"; export const Home = () => { @@ -39,9 +47,34 @@ export const Home = () => { King Typer + + + + + Start Typing! + + + + + + + ); }; diff --git a/packages/web/src/frontPage/randomText.ts b/packages/web/src/frontPage/randomText.ts new file mode 100644 index 0000000..1cb156d --- /dev/null +++ b/packages/web/src/frontPage/randomText.ts @@ -0,0 +1,41 @@ +const randomText = [ + `Hello world!`, + `Keyboard on fire? Still not enough!`, + `Over 9000 WPM!!!!`, + `Typing is fun!`, + `Imagine any typing website, but better.`, + `Try typing faster than you can speak.`, + `WPM = words per minute`, + `CPM = characters per minute`, + `Don't look at the keyboard while typing, it will slow you down.`, + `Keyboards can get pretty dirty, clean your keyboard.`, + `Practice makes perfect.`, + `You can be slow at the beginning, keep practicing.`, + `It's important to follow the rules of typing.`, + `Don't forget about your posture.`, + `Drink some water, hydration is important.`, + `Typrrrrrr`, + `Fingers on fire? Still not enough!`, + `A pandemic can't stop you practicing!`, + `You can take a break if you want, but later.`, + `There are many types of keyboards, some can help you improve, some will do the opposite.`, + `Just keep typing, typing, typing...`, + `Queen typer, Prince typer, and Princess typer not included.`, + `If you think you're typing too much, take a break and go type something instead.`, + `The perfect website for practicing typing doesn't exis...`, + `Don't smash your keyboard, don't lose CONTROL`, + `If you have no Home you should find a replacement key.`, + `This typing website has no escape.`, + `My keyboard works for everyone except me, I guess it just isn't my type.`, + `The F and J keys have bumps on them, that helps you find them easier.`, + `You know the rules and so do I.` +]; + +export const getRandomText = (): Array => { + let array = randomText; + for (let i = array.length - 1; i > 0; i--) { + const j = Math.floor(Math.random() * (i + 1)); + [array[i], array[j]] = [array[j], array[i]]; + } + return array; +}; diff --git a/packages/web/src/frontPage/style.tsx b/packages/web/src/frontPage/style.tsx index e0e2530..79fa2ab 100644 --- a/packages/web/src/frontPage/style.tsx +++ b/packages/web/src/frontPage/style.tsx @@ -1,8 +1,11 @@ import styled from "@emotion/styled"; +import { css } from "@emotion/core"; //// CONTAINER 1 export const Container = styled.div` + position: relative; background-color: #198cf6; - height: 1080px; + height: 100vh; + min-height: 1000px; display: flex; flex-wrap: wrap; flex-direction: row; @@ -22,7 +25,7 @@ export const FixCrown = styled.div` export const VerticallyCenteredDiv = styled.div` margin: 0; position: absolute; - top: 40%; + top: 35%; left: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); @@ -31,12 +34,13 @@ export const VerticallyCenteredDiv = styled.div` export const FixText = styled.div` position: relative; flex: 2 2 750px; + margin-top: -100px; `; export const TitleTextButton = styled.div` - @import url("https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap"); - font-family: "Press Start 2P", cursive; + font-family: "Verdana"; color: white; + font-weight: bold; text-align: center; `; export const VerticallyCenteredText = styled.div` @@ -50,6 +54,50 @@ export const VerticallyCenteredText = styled.div` `; export const Title = styled.div` - font-size: 80px; + font-size: 110px; width: auto; `; + +export const RandomText = styled.div` + font-size: 22px; + font-style: oblique; + font-weight: normal; + padding: 30px; + height: 50px; + + .react-rotating-text-cursor { + animation: blinking-cursor 0.6s cubic-bezier(0.68, 0.01, 0.01, 0.99) 0s + infinite; + } + + @keyframes blinking-cursor { + 0% { + opacity: 0; + } + 50% { + opacity: 1; + } + 100% { + opacity: 0; + } + } +`; + +export const Wave = styled.div` + position: absolute; + width: 100%; + bottom: 0; +`; +export const TypeButton = styled.a` + background: #fde400; + color: black; + text-decorate: none; + font-size: 18px; + font-weight: bold; + padding: 15px 25px; +`; + +export const ButtonWrapper = styled.div` + width: 100%; + padding-top: 20px; +`;