Design polish etc.
- dark Mode (media) - responsive for larger screens - logo and navigation on every page - next/link in main navigation
This commit is contained in:
Hauke Tönjes
parent
e52ebff719
commit
c38718cb50
|
|
@ -1,21 +1,20 @@
|
|||
export default Card
|
||||
|
||||
function Card({heading, content, step}) {
|
||||
function Card({ heading, content, step }) {
|
||||
return (
|
||||
<div className="rounded-3xl shadow-lg p-2 m-4">
|
||||
{ step ?
|
||||
<div className="flex flex-row items-center p-2">
|
||||
<div className="rounded-md p-6 bg-white dark:bg-gray-800 space-y-4">
|
||||
{step &&
|
||||
<div className="flex flex-row items-center">
|
||||
<div className="rounded-full p-4 bg-green-600 h-5 w-5 flex items-center justify-center">
|
||||
<p className="text-white text-lg font-bold">
|
||||
{step}
|
||||
</p>
|
||||
</div>
|
||||
<div className="pl-3 font-bold text-xl">
|
||||
<div className="ml-3 font-bold text-xl">
|
||||
{heading}
|
||||
</div>
|
||||
</div> :
|
||||
<p></p>}
|
||||
<div className="p-4 text-lg">
|
||||
</div>}
|
||||
<div className="text-lg">
|
||||
{content}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -127,28 +127,24 @@ function Form() {
|
|||
|
||||
return (
|
||||
<div>
|
||||
<form id="form" action="https://api.covidpass.marvinsextro.de/covid.pkpass" method="POST" onSubmit={(e) => addToWallet(e)}>
|
||||
<form className="space-y-5" id="form" action="https://api.covidpass.marvinsextro.de/covid.pkpass" method="POST" onSubmit={(e) => addToWallet(e)}>
|
||||
<Card step={1} heading="Select Certificate" content={
|
||||
<div className="space-y-5">
|
||||
<p>
|
||||
Please select the (scanned) certificate PDF page, which you received from your doctor, pharmacy, vaccination centre or online.
|
||||
</p>
|
||||
<input
|
||||
className="w-full"
|
||||
type="file"
|
||||
id="pdf"
|
||||
accept="application/pdf"
|
||||
required
|
||||
style={{
|
||||
"whiteSpace": "nowrap",
|
||||
"overflow": "hidden",
|
||||
"width": "300px",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
}/>
|
||||
} />
|
||||
<Card step={2} heading="Pick a Color" content={
|
||||
<div className="space-y-5">
|
||||
<select name="color" id="color">
|
||||
<div className="relative inline-block w-full">
|
||||
<select name="color" id="color" className="bg-gray-200 dark:bg-gray-900 focus:outline-none w-full h-10 pl-3 pr-6 text-base rounded-md appearance-none cursor-pointer">
|
||||
<option value="white">white</option>
|
||||
<option value="black">black</option>
|
||||
<option value="grey">grey</option>
|
||||
|
|
@ -158,8 +154,11 @@ function Form() {
|
|||
<option value="purple">purple</option>
|
||||
<option value="teal">teal</option>
|
||||
</select>
|
||||
<div className="absolute inset-y-0 right-0 flex items-center px-2 pointer-events-none">
|
||||
<svg className="w-5 h-5 fill-current" viewBox="0 0 20 20"><path d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clipRule="evenodd" fillRule="evenodd"></path></svg>
|
||||
</div>
|
||||
</div>
|
||||
}/>
|
||||
} />
|
||||
<Card step={3} heading="Add to Wallet" content={
|
||||
<div className="space-y-5">
|
||||
<p>
|
||||
|
|
@ -167,16 +166,16 @@ function Form() {
|
|||
In order for you to make an informed decision, please read the <a href="/privacy">Privacy Policy</a>.
|
||||
</p>
|
||||
<label htmlFor="privacy" className="flex flex-row space-x-4 items-center">
|
||||
<input type="checkbox" id="privacy" value="privacy" required />
|
||||
<input type="checkbox" id="privacy" value="privacy" required className="h-4 w-4" />
|
||||
<p>
|
||||
I accept the <a href="/privacy" className="underline">Privacy Policy</a>
|
||||
</p>
|
||||
</label>
|
||||
<div className="flex flex-row items-center justify-start">
|
||||
<button id="download" type="download" className="shadow-inner focus:outline-none bg-green-600 py-2 px-3 text-white font-semibold rounded-md disabled:bg-gray-400">
|
||||
<button id="download" type="download" className="focus:outline-none bg-green-600 py-2 px-3 text-white font-semibold rounded-md disabled:bg-gray-400">
|
||||
Add to Wallet
|
||||
</button>
|
||||
<div id="spin" style={{"display": "none"}}>
|
||||
<div id="spin" style={{ "display": "none" }}>
|
||||
<svg className="animate-spin h-5 w-5 ml-2" viewBox="0 0 24 24">
|
||||
<circle className="opacity-0" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
|
||||
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||
|
|
@ -184,11 +183,10 @@ function Form() {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}/>
|
||||
} />
|
||||
</form>
|
||||
<Alert />
|
||||
<canvas id="canvas" style={{display: "none"}} />
|
||||
<canvas id="canvas" style={{ display: "none" }} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
@ -1,14 +1,17 @@
|
|||
import Icon from '../public/favicon.svg'
|
||||
import Link from 'next/link'
|
||||
|
||||
export default Logo
|
||||
|
||||
function Logo() {
|
||||
return (
|
||||
<div className="flex flex-row items-center p-3 justify-center space-x-1" >
|
||||
<Icon />
|
||||
<h1 className="text-3xl font-bold">
|
||||
CovidPass
|
||||
</h1>
|
||||
</div>
|
||||
<Link href="/">
|
||||
<a className="flex flex-row items-center p-3 justify-center space-x-1" >
|
||||
<Icon className="fill-current" />
|
||||
<h1 className="text-3xl font-bold">
|
||||
CovidPass
|
||||
</h1>
|
||||
</a>
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,15 +1,32 @@
|
|||
import Head from 'next/head'
|
||||
import Logo from './Logo'
|
||||
import Link from 'next/link'
|
||||
|
||||
export default Page
|
||||
|
||||
function Page({content}) {
|
||||
function Page({ content }) {
|
||||
return (
|
||||
<div className="lg:w-1/3 lg:mx-auto flex flex-col min-h-screen justify-center md:px-12 py-12">
|
||||
<div className="md:w-2/3 xl:w-2/5 md:mx-auto flex flex-col min-h-screen justify-center px-5 py-12">
|
||||
<Head>
|
||||
<title>CovidPass</title>
|
||||
<link rel="icon" href="/favicon.png" />
|
||||
</Head>
|
||||
{content}
|
||||
<div>
|
||||
<main className="flex flex-col space-y-5">
|
||||
<Logo />
|
||||
|
||||
{content}
|
||||
|
||||
<footer>
|
||||
<nav className="nav flex space-x-4 m-6 flex-row-reverse space-x-reverse text-md font-bold">
|
||||
<Link href="/privacy"><a className="hover:underline" >Privacy Policy</a></Link>
|
||||
<Link href="/imprint"><a className="hover:underline" >Imprint</a></Link>
|
||||
<a href="https://www.paypal.com/paypalme/msextro" className="hover:underline" >Donate</a>
|
||||
<a href="https://github.com/marvinsxtr/covidpass" className="hover:underline" >GitHub</a>
|
||||
</nav>
|
||||
</footer>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
import Document, { Html, Head, Main, NextScript } from 'next/document'
|
||||
|
||||
class CustomDocument extends Document {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Html lang="en">
|
||||
<Head />
|
||||
<body className="bg-gray-200 dark:bg-gray-900 text-gray-800 dark:text-white">
|
||||
<Main />
|
||||
<NextScript />
|
||||
</body>
|
||||
</Html>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default CustomDocument
|
||||
|
|
@ -4,7 +4,7 @@ import Card from '../components/Card'
|
|||
export default function Imprint() {
|
||||
return(
|
||||
<Page content={
|
||||
<Card step=" " heading="Impressum" content={
|
||||
<Card step="§" heading="Imprint" content={
|
||||
<div className="space-y-2">
|
||||
<p className="font-bold">Information according to § 5 TMG</p>
|
||||
<p>
|
||||
|
|
|
|||
|
|
@ -32,27 +32,14 @@ export default function Home() {
|
|||
}}
|
||||
/>
|
||||
<Page content={
|
||||
<div>
|
||||
<main className="flex flex-col">
|
||||
<Logo />
|
||||
<div className="space-y-5">
|
||||
<Card content={
|
||||
<p>
|
||||
Add your EU Digital Covid Vaccination Certificates to your favorite wallet app. On iOS, please use the Safari Browser.
|
||||
</p>
|
||||
} />
|
||||
|
||||
<Card content={
|
||||
<p>
|
||||
Add your EU Digital Covid Vaccination Certificates to your favorite wallet app. On iOS, please use the Safari Browser.
|
||||
</p>
|
||||
} />
|
||||
|
||||
<Form className="flex-grow" />
|
||||
|
||||
<footer>
|
||||
<nav className="nav flex space-x-4 m-6 flex-row-reverse space-x-reverse text-md font-bold">
|
||||
<a href="/privacy" className="hover:underline" >Privacy Policy</a>
|
||||
<a href="/imprint" className="hover:underline" >Imprint</a>
|
||||
<a href="https://www.paypal.com/paypalme/msextro" className="hover:underline" >Donate</a>
|
||||
<a href="https://github.com/marvinsxtr/covidpass" className="hover:underline" >GitHub</a>
|
||||
</nav>
|
||||
</footer>
|
||||
</main>
|
||||
<Form className="flex-grow" />
|
||||
</div>
|
||||
} />
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import Card from '../components/Card'
|
|||
export default function Privacy() {
|
||||
return(
|
||||
<Page content={
|
||||
<Card step=" " heading="Privacy Policy" content={
|
||||
<Card step="i" heading="Privacy Policy" content={
|
||||
<div className="space-y-2">
|
||||
<p>
|
||||
Our privacy policy is based on the terms used by the European legislator for the adoption of the General Data Protection Regulation (GDPR).
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
module.exports = {
|
||||
mode: 'jit',
|
||||
purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
|
||||
darkMode: false,
|
||||
darkMode: 'media',
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue