mirror of
https://github.com/cupcakearmy/rauchmelder.git
synced 2025-09-06 01:20:40 +00:00
Rauchmelder
This commit is contained in:
42
src/App.styl
Normal file
42
src/App.styl
Normal file
@@ -0,0 +1,42 @@
|
||||
@import url('https://fonts.googleapis.com/css?family=PT+Sans')
|
||||
|
||||
*
|
||||
box-sizing border-box
|
||||
|
||||
html
|
||||
body
|
||||
#root
|
||||
margin 0
|
||||
padding 0
|
||||
width 100vw
|
||||
height 100vh
|
||||
overflow hidden
|
||||
font-family 'PT Sans', sans-serif
|
||||
font-weight bold
|
||||
|
||||
#app
|
||||
height: 100%
|
||||
width: 100%
|
||||
//background-color #eeffee
|
||||
background linear-gradient(45deg, #111, #222)
|
||||
color #fff
|
||||
display flex
|
||||
justify-content center
|
||||
align-items center
|
||||
text-align center
|
||||
|
||||
@media (min-width: 0px)
|
||||
#text
|
||||
font-size 3em
|
||||
#title
|
||||
font-size 2em
|
||||
@media (min-width: 900px)
|
||||
#text
|
||||
font-size 4em
|
||||
#title
|
||||
font-size 3em
|
||||
@media (min-width: 1200px)
|
||||
#text
|
||||
font-size 5em
|
||||
#title
|
||||
font-size 4em
|
31
src/App.tsx
Normal file
31
src/App.tsx
Normal file
@@ -0,0 +1,31 @@
|
||||
import moment from 'moment'
|
||||
import React, { useEffect, useState } from 'react'
|
||||
// @ts-ignore
|
||||
|
||||
|
||||
const App: React.FC = () => {
|
||||
|
||||
const [refresh, setRefresh] = useState<number>(0)
|
||||
|
||||
const gloryTime = moment('2019-02-12').unix()
|
||||
const now = Date.now() / 1000 | 0
|
||||
const delta = moment.duration(now - gloryTime, 'seconds')
|
||||
|
||||
useEffect(()=> {
|
||||
setTimeout(()=> setRefresh(refresh + 1), 1000)
|
||||
}, [refresh])
|
||||
|
||||
return <div id="app">
|
||||
<div>
|
||||
<div id={'title'}>Rauchmelder 💨</div>
|
||||
<br/>
|
||||
<div id={'text'}>
|
||||
{delta.humanize()}
|
||||
<br/>
|
||||
{delta.asSeconds()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
export default App
|
14
src/index.html
Executable file
14
src/index.html
Executable file
@@ -0,0 +1,14 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<title>💨</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<main id="root"></main>
|
||||
</body>
|
||||
|
||||
</html>
|
7
src/index.tsx
Executable file
7
src/index.tsx
Executable file
@@ -0,0 +1,7 @@
|
||||
import React from 'react'
|
||||
import ReactDOM from 'react-dom'
|
||||
|
||||
import './App.styl'
|
||||
import App from './App'
|
||||
|
||||
ReactDOM.render(<App />, document.getElementById('root'))
|
Reference in New Issue
Block a user