aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorkaotisk <kaotisk@arching-kaos.com>2021-03-06 01:39:20 +0200
committerkaotisk <kaotisk@arching-kaos.com>2021-03-06 01:39:20 +0200
commit0eb2bd191c0bb3ae213081dd40ada9a73bd0a7e8 (patch)
tree2564c6c618dd91a7d0b70b8cfcf0f61e032b86ab
parenta49d71e4e6bf1e1eaf3d67e66be6d91cca367128 (diff)
downloadmy-app-react-0eb2bd191c0bb3ae213081dd40ada9a73bd0a7e8.tar.gz
my-app-react-0eb2bd191c0bb3ae213081dd40ada9a73bd0a7e8.tar.bz2
my-app-react-0eb2bd191c0bb3ae213081dd40ada9a73bd0a7e8.zip
Import akr files
-rw-r--r--package.json1
-rw-r--r--public/arching-kaos-radio-favicon.icobin0 -> 5694 bytes
-rw-r--r--public/index.html35
-rw-r--r--public/manifest.json14
-rw-r--r--src/App.css38
-rw-r--r--src/App.js54
-rw-r--r--src/App.test.js11
-rw-r--r--src/Chat.css8
-rw-r--r--src/Chat.js32
-rw-r--r--src/Header.js26
-rw-r--r--src/MainBody.js14
-rw-r--r--src/Menu.css60
-rw-r--r--src/Menu.js38
-rw-r--r--src/MenuButton.css25
-rw-r--r--src/MenuButton.js13
-rw-r--r--src/MenuContainer.js38
-rw-r--r--src/NowPlaying.js53
-rw-r--r--src/Player.js21
-rw-r--r--src/RadioPlayer.js16
-rw-r--r--src/ShowList.css69
-rw-r--r--src/ShowList.js55
-rw-r--r--src/Signature.css26
-rw-r--r--src/Signature.js20
-rw-r--r--src/assets/img/arching-kaos-radio-logo.gifbin0 -> 23887 bytes
-rw-r--r--src/assets/img/arching-logo-16.pngbin0 -> 590 bytes
-rw-r--r--src/assets/img/arching-logo-500.pngbin0 -> 12851 bytes
-rw-r--r--src/assets/img/flame.pngbin0 -> 3939628 bytes
-rw-r--r--src/index.css18
-rw-r--r--src/index.js17
-rw-r--r--src/logo.svg8
-rw-r--r--src/serviceWorker.js135
-rw-r--r--src/ssbTest.js14
32 files changed, 791 insertions, 68 deletions
diff --git a/package.json b/package.json
index c41a734..3d50f42 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
+ "node-fetch": "^2.6.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.3",
diff --git a/public/arching-kaos-radio-favicon.ico b/public/arching-kaos-radio-favicon.ico
new file mode 100644
index 0000000..93694af
--- /dev/null
+++ b/public/arching-kaos-radio-favicon.ico
Binary files differ
diff --git a/public/index.html b/public/index.html
index aa069f2..1db19be 100644
--- a/public/index.html
+++ b/public/index.html
@@ -2,14 +2,18 @@
<html lang="en">
<head>
<meta charset="utf-8" />
- <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
- <meta name="viewport" content="width=device-width, initial-scale=1" />
- <meta name="theme-color" content="#000000" />
+ <meta property="og:url" content="https://radio.arching-kaos.com" />
+ <meta property="og:type" content="website" />
+ <meta property="og:title" content="Arching Kaos Web Radio" />
+ <meta property="og:description" content="Relax and enjoy smooth vibes. You can chat with us and listen to your favourite mix as long as you wish!" />
+ <meta property="og:image" content="https://radio.arching-kaos.com/static/media/arching-kaos-radio-logo.66162ea5.gif" />
+
+ <link rel="shortcut icon" href="%PUBLIC_URL%/arching-kaos-radio-favicon.ico" />
<meta
- name="description"
- content="Web site created using create-react-app"
+ name="viewport"
+ content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
- <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+ <meta name="theme-color" content="#000000" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
@@ -24,10 +28,25 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
- <title>React App</title>
+ <title>Arching Kaos Radio</title>
</head>
<body>
- <noscript>You need to enable JavaScript to run this app.</noscript>
+ <noscript>You need to enable JavaScript to run this app. To listen to our radio station try with VLC-> File -> Open Network Stream and paste one of the links:
+ <ul>
+ <li><p>https://lite.arching-kaos.com/</p>
+ <a href="https://lite.arching-kaos.com">A non-JS based interface to browse our radio</a>
+ </li>
+ <li><p>https://icecast.arching-kaos.com/demo.ogg</p>
+ <a href="https://icecast.arching-kaos.com/demo.ogg">Radio over internet</a>
+ </li>
+ <li><p>http://hs.arching-kaos.com:8000/demo.ogg</p>
+ <a href="http://hs.arching-kaos.com:8000/demo.ogg">Radio over cjdns network</a>
+ </li>
+ <li><p>http://ys.arching-kaos.com:8000/demo.ogg</p>
+ <a href="http://ys.arching-kaos.com:8000/demo.ogg">Radio over yggdrasil network</a>
+ </li>
+ </ul>
+ . - Arching Kaos Radio</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
diff --git a/public/manifest.json b/public/manifest.json
index 080d6c7..8580e85 100644
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -1,21 +1,11 @@
{
- "short_name": "React App",
- "name": "Create React App Sample",
+ "short_name": "Arching Kaos Radio",
+ "name": "Arching Kaos Radio homepage",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
- },
- {
- "src": "logo192.png",
- "type": "image/png",
- "sizes": "192x192"
- },
- {
- "src": "logo512.png",
- "type": "image/png",
- "sizes": "512x512"
}
],
"start_url": ".",
diff --git a/src/App.css b/src/App.css
index 74b5e05..b4fec27 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,18 +1,21 @@
+/*
+ * Kaotisk Hund 2019
+ * Βασικά στοιχεία CSS για τον ιστότοπο.
+ *
+ */
+
+/* Στοίχηση κειμένου στο κέντρο */
.App {
text-align: center;
}
+/* Λεπτομέριες προβολής λογότυπου σταθμού */
.App-logo {
+ /*animation: App-logo-spin infinite 20s linear;*/
height: 40vmin;
pointer-events: none;
}
-@media (prefers-reduced-motion: no-preference) {
- .App-logo {
- animation: App-logo-spin infinite 20s linear;
- }
-}
-
.App-header {
background-color: #282c34;
min-height: 100vh;
@@ -22,10 +25,18 @@
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
+ /*background-image: url("assets/img/floor.svg");*/
+ background-repeat: repeat-x;
+ background-position: bottom;
+ background-size: cover;
+ padding: 20px;
+ padding-top: 20%;
}
+/* Αφαίρεση στυλ κειμένου στους υπερσυνδέσμους */
.App-link {
- color: #61dafb;
+ text-decoration: none;
+ color: #7fff84f0;
}
@keyframes App-logo-spin {
@@ -36,3 +47,16 @@
transform: rotate(360deg);
}
}
+
+a {
+ color: white;
+}
+
+a:visited {
+ color: white;
+}
+
+iframe {
+ width: 80%;
+ height: 540px;
+} \ No newline at end of file
diff --git a/src/App.js b/src/App.js
index 3784575..5d14da6 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,25 +1,37 @@
-import logo from './logo.svg';
-import './App.css';
+/*
+ * Kaotisk Hund 2019-2020
+ * Βασική εφαρμογή του ιστότοπού μας
+ *
+ */
-function App() {
- return (
- <div className="App">
- <header className="App-header">
- <img src={logo} className="App-logo" alt="logo" />
- <p>
- Edit <code>src/App.js</code> and save to reload.
- </p>
- <a
- className="App-link"
- href="https://reactjs.org"
- target="_blank"
- rel="noopener noreferrer"
- >
- Learn React
- </a>
- </header>
- </div>
- );
+import React, { Component } from 'react';
+import Header from './Header';
+import Signature from './Signature';
+import ShowList from './ShowList';
+import Chat from './Chat';
+import Menu from './Menu';
+
+/* Class της εφαρμογής μας που προβάλει τον ιστότοπο του σταθμού μας */
+class App extends Component {
+ constructor(props, context) {
+ super(props, context);
+ this.state = {
+ radio : "https://icecast.arching-kaos.tk/demo.ogg" // Στατική διεύθυνση του βασικού μας stream
+ }
+ }
+ render() {
+ /* Η βασική διάταξη της ιστοσελίδας μας */
+ return (
+ <div className="App">
+ <Header>
+ <Menu/>
+ </Header>
+ <ShowList onShowList={this.props.mix}/>
+ <Chat/>
+ <Signature/>
+ </div>
+ );
+ }
}
export default App;
diff --git a/src/App.test.js b/src/App.test.js
index 1f03afe..a754b20 100644
--- a/src/App.test.js
+++ b/src/App.test.js
@@ -1,8 +1,9 @@
-import { render, screen } from '@testing-library/react';
+import React from 'react';
+import ReactDOM from 'react-dom';
import App from './App';
-test('renders learn react link', () => {
- render(<App />);
- const linkElement = screen.getByText(/learn react/i);
- expect(linkElement).toBeInTheDocument();
+it('renders without crashing', () => {
+ const div = document.createElement('div');
+ ReactDOM.render(<App />, div);
+ ReactDOM.unmountComponentAtNode(div);
});
diff --git a/src/Chat.css b/src/Chat.css
new file mode 100644
index 0000000..5f867a5
--- /dev/null
+++ b/src/Chat.css
@@ -0,0 +1,8 @@
+.chat {
+ background-color: #256d55;
+ padding: 20px;
+ padding-top: 25%;
+ padding-bottom: 10%;
+}
+
+.chat h3 {color: #dde6d7;}
diff --git a/src/Chat.js b/src/Chat.js
new file mode 100644
index 0000000..a81a687
--- /dev/null
+++ b/src/Chat.js
@@ -0,0 +1,32 @@
+/*
+ * Kaotisk Hund 2019-2020
+ * Εφαρμογή συνομιλιών του ιστότοπού μας, χρησιμοποιώντας web-client
+ * της KiwiIRC.com για να συνδεθούμε σε IRC server.
+ * Embed KiwiIRC-web client application. We use it to connect to an
+ * IRC server.
+ *
+ *
+ */
+
+import React, { Component } from 'react';
+import './Chat.css';
+
+class Chat extends Component {
+ constructor(props, context) {
+ super(props, context);
+ this.state = {
+ ircwebclient : "https://kiwiirc.com/nextclient/?settings=82305268c11cda29b805c33f03156815" // Εδώ βάουμε το link
+ }
+ }
+ render() {
+ /* Η βασική διάταξη της ιστοσελίδας μας */
+ return (
+ <div id="chat" class="chat">
+ <h3>Chat</h3>
+ <iframe title="chat" src={this.state.ircwebclient}></iframe>
+ </div>
+ );
+ }
+}
+
+export default Chat;
diff --git a/src/Header.js b/src/Header.js
new file mode 100644
index 0000000..1a93f08
--- /dev/null
+++ b/src/Header.js
@@ -0,0 +1,26 @@
+import React, { Component } from 'react';
+import logo from './assets/img/arching-kaos-radio-logo.gif';
+import './App.css';
+
+class Header extends Component {
+ render() {
+ return (
+ <header className="App-header">
+ <img src={logo} className="App-logo" alt="logo" />
+ <a
+ className="App-link"
+ href="http://radio.arching-kaos.tk/"
+ rel="noopener noreferrer"
+ >
+ <h2>Arching Kaos Radio</h2>
+ </a>
+ <p>
+ Welcome to Arching Kaos Radio!<br/>Enjoy music!
+ </p>
+ {this.props.children}
+ </header>
+ );
+ }
+}
+
+export default Header;
diff --git a/src/MainBody.js b/src/MainBody.js
new file mode 100644
index 0000000..4e5ce35
--- /dev/null
+++ b/src/MainBody.js
@@ -0,0 +1,14 @@
+import React, { Component } from 'react';
+import './App.css';
+
+class MainBody extends Component {
+ render() {
+ return (
+ <MainBody className="App-MainBody">
+ {this.props.children}
+ </MainBody>
+ );
+ }
+}
+
+export default MainBody; \ No newline at end of file
diff --git a/src/Menu.css b/src/Menu.css
new file mode 100644
index 0000000..7be5349
--- /dev/null
+++ b/src/Menu.css
@@ -0,0 +1,60 @@
+#menu {
+ position: fixed;
+ top: 0px;
+ left: 0px;
+ padding: 1.5%;
+ background-color: #282c34;
+ text-align: left;
+ max-width: 100%;
+ width: 100%;
+ /*display: inline;
+ text-align: center;*/
+}
+
+.line {
+ display: inline;
+}
+
+.menu-right {
+ float: right;
+ right: 2%;
+ position: fixed;
+}
+
+.menu-left {
+ left: 2%;
+ position: relative;
+}
+
+.menu-logo img{
+ /*display: inline;*/
+ /*max-width: 16px;*/
+}
+
+.NowPlaying {
+ /*display: inline;*/
+ text-align: center;
+}
+
+p {
+ display: inline;
+ padding-left: 2%;
+}
+
+audio {
+ background-color: #282c34;
+ max-width: 100%;
+ width: 80%;
+ border-radius: 9px;
+ display: inline;
+ text-align: center;
+}
+
+.RadioPlayer {
+ padding-top: 1%;
+ text-align: center;
+ max-width: 100%;
+ width: 100%;
+ height: 100%;
+ position: relative;
+} \ No newline at end of file
diff --git a/src/Menu.js b/src/Menu.js
new file mode 100644
index 0000000..7261b2b
--- /dev/null
+++ b/src/Menu.js
@@ -0,0 +1,38 @@
+import React, { Component } from "react";
+import "./Menu.css";
+import logo from './assets/img/arching-logo-16.png';
+import NowPlaying from './NowPlaying';
+import RadioPlayer from './RadioPlayer';
+
+class Menu extends Component {
+ constructor(props, context) {
+ super(props, context);
+ this.state = {
+ // old hack
+ // radio: document.URL.replace(/\/$/, "").replace("https", "http")+":8000/demo.ogg" /* Θέτουμε την πηγή του σταθμού μας εδώ */
+ radio : "https://icecast.arching-kaos.com/demo.ogg"
+ }
+ }
+
+ render() {
+ return (
+ <div id="menu">
+ <div class="line menu-left">
+ <img src={logo} className="menu-logo" alt="Arching Kaos Radio"/>
+ <p class="title">Arching Kaos Radio</p>
+ </div>
+ <div class="line menu-right">
+ <a href="#mixes">Mixes</a>&nbsp;|&nbsp;
+ <a href="#chat">Chat</a>&nbsp;|&nbsp;
+ <a href="https://api.arching-kaos.com" target="_blank" rel="noopener noreferrer">Upload guide</a>
+ </div>
+ <div class="">
+ <NowPlaying class="top-now"/>
+ <RadioPlayer class="top-radio" className="top-radio" audioSource={this.state.radio}/>
+ </div>
+ </div>
+ );
+ }
+}
+
+export default Menu;
diff --git a/src/MenuButton.css b/src/MenuButton.css
new file mode 100644
index 0000000..e9ab83d
--- /dev/null
+++ b/src/MenuButton.css
@@ -0,0 +1,25 @@
+#roundButton {
+ background-color: #96D9FF;
+ margin-bottom: 20px;
+ width: 50px;
+ height: 50px;
+ border-radius: 50%;
+ border: 10px solid #0065A6;
+ outline: none;
+ transition: all .2s cubic-bezier(0, 1.26, .8, 1.28);
+ position: fixed;
+ top: 10px;
+ left: 10px;
+}
+
+#roundButton:hover {
+ background-color: #96D9FF;
+ cursor: pointer;
+ border-color: #003557;
+ transform: scale(1.2, 1.2);
+}
+
+#roundButton:active {
+ border-color: #003557;
+ background-color: #FFF;
+}
diff --git a/src/MenuButton.js b/src/MenuButton.js
new file mode 100644
index 0000000..6e257b2
--- /dev/null
+++ b/src/MenuButton.js
@@ -0,0 +1,13 @@
+import React, { Component } from "react";
+import './MenuButton.css';
+
+class MenuButton extends Component {
+ render() {
+ return (
+ <button id="roundButton"
+ onMouseDown={this.props.handleMouseDown}></button>
+ );
+ }
+}
+
+export default MenuButton;
diff --git a/src/MenuContainer.js b/src/MenuContainer.js
new file mode 100644
index 0000000..3b86eb4
--- /dev/null
+++ b/src/MenuContainer.js
@@ -0,0 +1,38 @@
+import React, { Component } from "react";
+import MenuButton from './MenuButton';
+import Menu from './Menu';
+
+class MenuContainer extends Component {
+ constructor(props, context) {
+ super(props, context);
+ this.state = {
+ visible: false
+ };
+ this.handleMouseDown = this.handleMouseDown.bind(this);
+ this.toggleMenu = this.toggleMenu.bind(this);
+ }
+
+ toggleMenu() {
+ this.setState({
+ visible: !this.state.visible
+ });
+ }
+
+ handleMouseDown(e){
+ this.toggleMenu();
+
+ console.log("clicked");
+ e.stopPropagation();
+ }
+
+ render() {
+ return (
+ <div>
+ <MenuButton handleMouseDown={this.handleMouseDown}/>
+ <Menu handleMouseDown={this.handleMouseDown} menuVisibility={this.state.visible}/>
+ </div>
+ );
+ }
+}
+
+export default MenuContainer;
diff --git a/src/NowPlaying.js b/src/NowPlaying.js
new file mode 100644
index 0000000..c4cca63
--- /dev/null
+++ b/src/NowPlaying.js
@@ -0,0 +1,53 @@
+import React, { Component } from 'react';
+//import './NewComponent.css';
+var fetch = require('node-fetch');
+
+class NowPlaying extends Component {
+ constructor(props, context) {
+ super(props, context);
+/*fetch("https://icecast.arching-kaos.tk/status-json.xsl")
+ .then(res => res.json())
+ .then(json => this.state({
+ icestats : json.icestats,
+ source : json.icestats.source,
+ genre : json.icestats.source.genre,
+ title : json.icestats.source.title,
+ artist : json.icestats.source.artist
+ }));*/
+ this.state = {
+ icestats: null,
+ source: null,
+ genre: null,
+ title: null,
+ artist: null
+ }
+
+ this.timerTick = this.timerTick.bind(this);
+ }
+
+ timerTick() {
+ fetch("https://icecast.arching-kaos.com/status-json.xsl")
+ .then(res => res.json())
+ .then(json => this.setState({
+ icestats : json.icestats,
+ source : json.icestats.source,
+ genre : json.icestats.source.genre,
+ title : json.icestats.source.title,
+ artist : json.icestats.source.artist
+ }));
+ }
+
+ componentDidMount() {
+ setInterval(this.timerTick, 10000);
+ }
+
+ render() {
+ return (
+ <div class="NowPlaying">
+ {this.state.artist} - {this.state.title}
+ </div>
+ );
+ }
+}
+
+export default NowPlaying;
diff --git a/src/Player.js b/src/Player.js
new file mode 100644
index 0000000..1fe6219
--- /dev/null
+++ b/src/Player.js
@@ -0,0 +1,21 @@
+import React, { Component } from 'react';
+//import './NewComponent.css';
+
+class Player extends Component {
+
+constructor(props, context) {
+ super(props, context);
+ console.log(props)
+ }
+
+ render() {
+ return (
+ <audio xmlns="http://www.w3.org/1999/xhtml" controls="controls" preload="none" autoPlay={false} class={this.props.className}>
+ <source src={this.props.audioSource} type="application/ogg" />
+ Sorry, seems your browser can't play this.
+ </audio>
+ );
+ }
+}
+
+export default Player; \ No newline at end of file
diff --git a/src/RadioPlayer.js b/src/RadioPlayer.js
new file mode 100644
index 0000000..cb7f22f
--- /dev/null
+++ b/src/RadioPlayer.js
@@ -0,0 +1,16 @@
+import React, { Component } from 'react';
+import Player from './Player';
+//import './NewComponent.css';
+
+class RadioPlayer extends Component {
+ render() {
+ return (
+ <div className="RadioPlayer">
+ <Player class={this.props.className} audioSource={this.props.audioSource}/>
+ </div>
+ );
+ }
+}
+
+
+export default RadioPlayer; \ No newline at end of file
diff --git a/src/ShowList.css b/src/ShowList.css
new file mode 100644
index 0000000..ecab467
--- /dev/null
+++ b/src/ShowList.css
@@ -0,0 +1,69 @@
+.ShowList audio {
+ max-width: 100%;
+ width: 100%;
+}
+
+.ShowList {
+ text-align: center;
+ background-color: #6f2424;
+ padding: 5px;
+ margin: 15px;
+ color: white;
+/* height: 50%;
+ overflow-y: scroll;
+ display: none;*/
+}
+
+.ShowList div {
+ vertical-align: middle;
+}
+
+.ShowListContainer {
+/* position: absolute;*/
+/* height: 50%;
+*/ z-index: 50;
+
+
+
+}
+
+.ShowListContainer h3 {
+/* position: fixed;
+ top: 2px;
+ float: right;*/
+ color: white;
+}
+
+
+.list-info {
+
+}
+
+.player-container {
+
+}
+
+.list-item {
+ padding: 5px;
+ background: #dfa9504d;
+ margin: 20px;
+ border-radius: 6px;
+ /*background-image: url('assets/img/flame.png');*/
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: cover;
+}
+
+.list-info {
+ background-color: none;
+ font-size: 20pt;
+ padding: 20px;
+ text-align: left;
+}
+
+#mixes {
+ background-color: #6f2424;
+ padding: 20px;
+ padding-top: 25%;
+ padding-bottom: 10%;
+} \ No newline at end of file
diff --git a/src/ShowList.js b/src/ShowList.js
new file mode 100644
index 0000000..3ee1a1f
--- /dev/null
+++ b/src/ShowList.js
@@ -0,0 +1,55 @@
+import React, { Component } from 'react';
+import './ShowList.css';
+import Player from './Player'
+//import Lists from './lists.json';
+var fetch = require('node-fetch');
+
+class ShowList extends Component {
+ constructor(props, context) {
+ super(props, context);
+ this.state = {
+ mixes : [],
+ visible : false,
+ state: false
+ }
+
+ this.timerTick = this.timerTick.bind(this);
+
+ }
+ timerTick(){
+ fetch("https://api.arching-kaos.com/shows")
+ .then(res => res.json())
+ .then(json => this.setState({
+ mixes: json,
+ state: true
+ }));
+ }
+
+ componentDidMount() {
+ setInterval(this.timerTick, 1000);
+// this.render()
+ }
+
+ render(state, props) {
+ return ( <div id="mixes" className="ShowListContainer">
+ <h3 onClick={this.handleMouseDown}>Mixes</h3>
+ <div className="ShowList">
+ {this.state.mixes.map(function(obj, idx){
+ return (
+ <div className="list-item">
+ <div className="list-info" key={idx}>
+ <h4>{obj.artist}</h4>
+ <h5>{obj.title}</h5>
+ </div>
+ <div className="player-container">
+ <Player audioSource={obj.ipfs}/>
+ </div>
+ </div>)
+ })}
+ </div>
+ </div>
+ )
+ }
+}
+
+export default ShowList;
diff --git a/src/Signature.css b/src/Signature.css
new file mode 100644
index 0000000..2677194
--- /dev/null
+++ b/src/Signature.css
@@ -0,0 +1,26 @@
+#signature {
+ font-size: 75%;
+ color: white;
+ text-align: right;
+}
+
+#sign-link a {
+ text-decoration-style: none;
+ color: white;
+}
+/*
+#sign-link a:visited {
+ text-decoration-style: none;
+ color: white;
+}*/
+
+#foot {
+ background-color: #282c34;
+ padding: 10px;
+ position: fixed;
+ bottom: 0px;
+ right: 0px;
+ max-width: 100%;
+ width: 100%;
+ max-height: 100%;
+}
diff --git a/src/Signature.js b/src/Signature.js
new file mode 100644
index 0000000..8c2c579
--- /dev/null
+++ b/src/Signature.js
@@ -0,0 +1,20 @@
+import React, { Component } from 'react';
+import './Signature.css';
+
+class Signature extends Component {
+ render(){
+ return (
+ <div id="foot">
+ <p id="signature">
+ An&nbsp;
+ <a id="sign-link" rel="noopener noreferrer" href="https://arching-kaos.com" target="_blank">Arching Kaos</a>&nbsp;
+ project by&nbsp;
+ <a id="sign-link" rel="noopener noreferrer" href="https://www.kaotisk-hund.com/" target="_blank">kaotisk hund</a>&nbsp;2019-2021
+ </p>
+ </div>
+ );
+ }
+}
+
+
+export default Signature;
diff --git a/src/assets/img/arching-kaos-radio-logo.gif b/src/assets/img/arching-kaos-radio-logo.gif
new file mode 100644
index 0000000..acae4b8
--- /dev/null
+++ b/src/assets/img/arching-kaos-radio-logo.gif
Binary files differ
diff --git a/src/assets/img/arching-logo-16.png b/src/assets/img/arching-logo-16.png
new file mode 100644
index 0000000..b398aea
--- /dev/null
+++ b/src/assets/img/arching-logo-16.png
Binary files differ
diff --git a/src/assets/img/arching-logo-500.png b/src/assets/img/arching-logo-500.png
new file mode 100644
index 0000000..ad9c514
--- /dev/null
+++ b/src/assets/img/arching-logo-500.png
Binary files differ
diff --git a/src/assets/img/flame.png b/src/assets/img/flame.png
new file mode 100644
index 0000000..3ff92bb
--- /dev/null
+++ b/src/assets/img/flame.png
Binary files differ
diff --git a/src/index.css b/src/index.css
index ec2585e..a085d3c 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,13 +1,25 @@
body {
margin: 0;
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
- 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+ padding: 0;
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+ "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
- font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+ font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
}
+
+body {
+ background-color: #EEE;
+ font-family: sans-serif;
+ font-size: 20px;
+ overflow: auto;
+}
+
+#container li {
+ margin-bottom: 10px;
+} \ No newline at end of file
diff --git a/src/index.js b/src/index.js
index ef2edf8..87d1be5 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,16 +2,11 @@ import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
-import reportWebVitals from './reportWebVitals';
+import * as serviceWorker from './serviceWorker';
-ReactDOM.render(
- <React.StrictMode>
- <App />
- </React.StrictMode>,
- document.getElementById('root')
-);
+ReactDOM.render(<App />, document.getElementById('root'));
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();