lang-detector
Version:
A library for detecting the programming language of a code snippet.
105 lines (89 loc) • 1.61 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>lang-detector</title>
<script defer src="bundle.js"></script>
</head>
<body>
<h1 id="title">lang-detector</h1>
<div class="wrapper">
<textarea id="input" autofocus placeholder="Write some code to detect here."></textarea>
<pre id="output" disabled></pre>
<button id="btn">Detect</button>
</div>
<footer class="copyright">Toni Sučić © 2015</footer>
<style>
@import url(http://fonts.googleapis.com/css?family=Roboto:700,400,300);
body {
margin: 20px;
font-family: 'Roboto', sans-serif;
}
textarea {
color: #555;
font-size: 1em;
width: 600px;
height: 200px;
border: 4px solid #eee;
padding: 10px;
outline: none;
overflow: scroll;
}
textarea,
textarea[disabled] {
background-color: white;
}
pre {
color: #555;
font-size: 1em;
width: 600px;
height: 150px;
border: 4px solid #eee;
padding: 10px;
outline: none;
overflow: scroll;
}
button {
color: #999;
background: none;
border: 4px solid #eee;
padding: 7px 12px 7px 12px;
margin: 0;
font-size: 1.2em;
outline: none;
}
button:hover {
color: #777;
cursor: pointer;
border: 4px solid #ccc;
}
button:active {
color: #555;
background-color: #f8f8f8;
border: 4px solid #bbb;
}
#title {
color: #aaa;
font-size: 2.5em;
text-align: center;
font-weight: bold;
padding: 10px;
}
#input, #output {
resize: none;
}
#btn {
display: block;
}
.wrapper {
width: 600px;
margin: 0 auto;
}
.copyright {
color: #bbb;
padding: 30px;
text-align: center;
}
</style>
</body>
</html>