170 lines
5.6 KiB
HTML
170 lines
5.6 KiB
HTML
<!doctype html>
|
|
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
<title>Whistlebox</title>
|
|
<meta name="title" content="Whistlebox" />
|
|
<meta name="description" content="Put your sensitive disclosures here (don't really, it's a proof of concept)." />
|
|
<meta name="author" content="Zev Averbach">
|
|
|
|
<meta property="og:title" content="Whistlebox">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:url" content="https://web3.averba.ch">
|
|
<meta property="og:description" content="A simple HTML5 Template for new projects.">
|
|
<meta property="og:image" content="image.png">
|
|
|
|
<link rel="icon" href="/favicon.ico">
|
|
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
|
|
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
|
|
<!-- Facebook -->
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:url" content="https://web3.averba.ch/">
|
|
<meta property="og:title" content="Whistlebox">
|
|
<meta property="og:description" content="I want to meet you! Send me a wave now!">
|
|
<meta property="og:image" content="https://s3.amazonaws.com/cdn.buildspace.so/courses/ethereum-smart-contracts/metadata.png">
|
|
|
|
<!-- Twitter -->
|
|
<meta property="twitter:card" content="summary_large_image">
|
|
<meta property="twitter:url" content="https://web3.averba.ch/">
|
|
<meta property="twitter:title" content="Whistlebox">
|
|
<meta property="twitter:description" content="Put your sensitive disclosures here (don't really, it's a proof of concept).">
|
|
<meta property="twitter:image"
|
|
content="https://s3.amazonaws.com/cdn.buildspace.so/courses/ethereum-smart-contracts/metadata.png">
|
|
<style>
|
|
|
|
#confirm {
|
|
color: red;
|
|
display: none;
|
|
text-align: center;
|
|
margin-top: 1em;
|
|
}
|
|
|
|
.mainContainer {
|
|
display: flex;
|
|
justify-content: center;
|
|
width: 100%;
|
|
margin-top: 64px;
|
|
}
|
|
|
|
.dataContainer {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
max-width: 600px;
|
|
}
|
|
|
|
form {
|
|
margin: 0 auto;
|
|
padding: 2em 0;
|
|
}
|
|
|
|
textarea {
|
|
margin: 0 3em;
|
|
resize: none;
|
|
font-size: 1em;
|
|
border: none;
|
|
outline: none;
|
|
}
|
|
|
|
.header {
|
|
text-align: center;
|
|
font-size: 32px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.bio {
|
|
text-align: center;
|
|
color: gray;
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.whistleButton {
|
|
cursor: pointer;
|
|
text-align: center;
|
|
margin: 0 auto;
|
|
padding: 8px;
|
|
width: 200px;
|
|
border: 0;
|
|
background-color: yellow;
|
|
}
|
|
|
|
body {
|
|
margin: 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',
|
|
monospace;
|
|
}
|
|
</style>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<noscript>You need to enable JavaScript to run this app.</noscript>
|
|
|
|
|
|
<div class="mainContainer">
|
|
|
|
<div class="dataContainer">
|
|
<div class="header">
|
|
👋 Hey there!
|
|
</div>
|
|
|
|
<div class="bio">
|
|
Hey, I'm Zev and this is a place to put sensitive whistleblower disclosures (not really! it's a proof of concept) into the ethereum blockchain.
|
|
</div>
|
|
|
|
<form action="javascript:;" onsubmit="whistle()" id="whistleForm">
|
|
<label for=disclosure>
|
|
Sensitive Disclosure
|
|
</label>
|
|
</form>
|
|
|
|
<textarea autofocus rows="5" cols="30" name=disclosure></textarea>
|
|
|
|
<button type=submit form="whistleForm" value="Disclose" class="whistleButton">
|
|
Disclose
|
|
</button>
|
|
<div id=confirm>Disclosure sent!</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
const box = document.getElementsByName("disclosure")[0]
|
|
|
|
const whistle = () => {
|
|
const disclosure = box.value
|
|
console.log(disclosure)
|
|
box.value = ""
|
|
showConfirm()
|
|
}
|
|
|
|
const confirm = document.getElementById("confirm")
|
|
|
|
const showConfirm = () => {
|
|
confirm.style.display = "block"
|
|
console.log('displaying confirm')
|
|
setTimeout(() => {
|
|
confirm.style.display = "none"
|
|
console.log('hiding confirm')
|
|
}, 5000)
|
|
}
|
|
|
|
document.addEventListener('keydown', (event) => {
|
|
if(event.ctrlKey && event.key == "Enter" || event.metaKey && event.key == "Enter") {
|
|
whistle()
|
|
box.blur()
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|