Skip to content

Instantly share code, notes, and snippets.

@n1lesh
Created December 23, 2017 09:06
Show Gist options
  • Save n1lesh/cab2fe58301d11c87e5d4fd6600bfd67 to your computer and use it in GitHub Desktop.
Save n1lesh/cab2fe58301d11c87e5d4fd6600bfd67 to your computer and use it in GitHub Desktop.
Firebase Cloud Messaging with Node.js - Notification Center (HTML)
<!DOCTYPE html>
<html>
<head>
<title>Notification Center</title>
<style>
body {
text-align: center;
}
h1 {
font-size: 40px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
color: #444;
}
input[type=text] {
width: 300px;
margin: 0 auto;
display: block;
}
.border {
padding: 15px;
border-color: #7a7a7a;
border-style: solid;
font-family: Verdana, Geneva, Tahoma, sans-serif;
border-width: 2px;
border-radius: 3px;
}
textarea {
width: 300px;
margin: 0 auto;
height: 200px;
display: block;
margin-top: 20px;
}
button {
background: #444;
margin-top: 20px;
color: white;
display: block;
margin: 20px auto;
}
input[type=radio] {
margin: 20px 10px;
}
select {
display: block;
width: 200px;
display: none;
margin: 10px auto;
}
</style>
</head>
<body>
<h1>Notification Center</h1>
<form method="post" action="http://localhost:8000/notify">
<input class="border" type="text" name="title" placeholder="notiification title">
<textarea class="border" name="message" placeholder="message"></textarea>
<input type="radio" name="type" value="all">Send to all
<input type="radio" name="type" value="topic">Send to topic subscribers only
<select class="border" name="topic">
<option value="topic1">Topic 1</option>
<option value="topic2">Topic 2</option>
<option value="topic3">Topic 3</option>
</select>
<button class="border">Send Notification</button>
</form>
<script>
var all = document.getElementsByName('type')[0]
var topic = document.getElementsByName('type')[1]
var select = document.getElementsByTagName('select')[0]
console.log(all, topic, select)
topic.onclick = function () {
select.style.display = 'block'
all.checked = false
}
all.onclick = function () {
select.style.display = 'none'
topic.checked = false
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment