amator
Version:
Tiny animation library
108 lines (100 loc) • 2.4 kB
HTML
<html lang="en">
<head>
<meta property="og:title" content="Hash chat" />
<meta property="og:image" content="https://raw.githubusercontent.com/anvaka/amator/master/demo/hash-chat/thumbnail_question.png" />
<meta property="og:description" content="Communicate via query string" />
<meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no'>
<meta http-equiv='X-UA-Compatible' content='IE=edge' >
<meta charset="utf-8">
<title>Hash chat - communicate via query string with style</title>
<meta name="Description" content="Chat via query string">
<style type="text/css" media="screen">
* {
box-sizing: border-box;
}
.scene {
font-size: 32px;
}
.letter {
display: inline-block;
white-space: pre;
}
body {
cursor: pointer;
overflow: hidden;
background: black;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 0;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.edit-text {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
input#text-input {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
background: transparent;
opacity: 0;
color: white;
width: 500px;
border-width: 0px;
border-bottom: 1px dotted #3399aa;
text-align: center;
font-size: 34px;
outline: none;
margin-top: 22px;
}
input#text-input:focus {
opacity: 1;
}
.help-text {
opacity: 0;
color: #444;
padding-top: 3px;
}
input#text-input:focus ~ .help-text {
opacity: 1;
}
#current-url {
opacity: 0;
position: absolute;
left: -1000px;
}
@media (max-width: 740px) {
input#text-input:focus {
width: 100%;
}
}
</style>
</head>
<body>
<div class='scene'></div>
<div class='edit-text'>
<input type='text' id='text-input'></input>
<div class='help-text'>
Enter your response and send them the link.
</div>
</div>
<input id='current-url' tyle='text'></input>
<script src='bundle.js'></script>
</body>
</html>