Commit fd4afa10 authored by Mike Street's avatar Mike Street
Browse files

FE: Create initial interface

parent 111740c0
document.addEventListener('click', function(e){
if(e.target && Object.keys(e.target.dataset).length && e.target.dataset.status.length) {
setStatus(e.target.dataset.status);
}
});
getCurrentStatus();
function setStatus(code) {
getJSON('/.netlify/functions/sitrep?action=update&statusCode=' + code)
.then(() => getCurrentStatus());
}
function getCurrentStatus() {
storeCurrentStatus()
.then(status => {
const current = document.getElementById('currentStatus');
current.innerText = `${emoji(status.profile.status_emoji)} ${status.profile.status_text}`;
});
}
function storeCurrentStatus() {
return getJSON('/.netlify/functions/sitrep?action=get')
.then(data => {
localStorage.setItem('sitrep', JSON.stringify(data));
return data;
});
}
function getJSON(url) {
return fetch(url)
.then(data => data.json());
}
function emoji(input) {
let output = '';
let emojimap = {
':sandwich:': '🥪',
':phone:': '☎️',
':brb:': '↪️',
':kids:': '🧒'
};
if(emojimap.hasOwnProperty(input)) {
output = emojimap[input];
}
return output;
}
\ No newline at end of file
......@@ -3,8 +3,85 @@
<head>
<meta charset="utf-8">
<title>SitRep</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
<style>
:root {
--base: #2a2a2a;
--primary: #2b76b9;
--primaryLighter: #9ad8ea;
--primaryLight: #2cacd1;
--primaryDark: #1f5584;
--primaryDarker: #133553;
--secondary: #3d3393;
--secondaryDark: #26205b;
--tertiary: #35eb93;
--tertiaryLight: #6af0b0;
--quaternary: #cf2226;
--neutralDark: #666;
--neutralMid: #bbb;
--neutralLight: #eee;
--neutralLighter: #f2f2f2;
--neutralLightest: #fff;
--siteWidth: 50rem;
--siteWidthThin: 40rem;
--gutter: 1rem;
--gutterLarge: 2rem;
}
* {
box-sizing: border-box;
}
body {
max-width: 30rem;
margin: 0 auto;
text-align: center;
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
}
.actions {
display: flex;
align-items: center;
flex-wrap: wrap;
}
p {
min-height: 1.2em;
font-size: 1.4rem;
}
button {
width: calc(50% - 2rem);
margin: 1rem;
padding: 1.5rem;
font-size: 3rem;
border-radius: 2rem;
border: 0;
background: linear-gradient(90deg,var(--secondary),var(--primary),var(--primaryLight));
line-height: 1.5;
color: var(--neutralLightest);
font-weight: 700;
transition: .35s ease;
transition-property: box-shadow,color;
}
button:hover {
box-shadow: inset 0 -5em 0 0 var(--tertiaryLight);
color: var(--base);
}
button:first-child {
width: 100%;
font-size: 1rem;
padding: 1rem;
}
</style>
</head>
<body>
<h1>SitRep</h1>
<p id="currentStatus"></p>
<div class="actions">
<button data-status="0">Clear</button>
<button data-status="1">🥪</button>
<button data-status="2">☎️</button>
<button data-status="3">↪️</button>
<button data-status="4">🧒</button>
</div>
<script src="app.js"></script>
</body>
</html>
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment