65 lines
2.4 KiB
HTML
65 lines
2.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<!--Import Google Icon Font-->
|
|
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
|
<!--Import materialize.css-->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">
|
|
|
|
<!--Let browser know website is optimized for mobile-->
|
|
<link rel="shortcut icon" href="/static/1.png">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
|
<title>register</title>
|
|
</head>
|
|
|
|
<body>
|
|
<!--Import jQuery before materialize.js-->
|
|
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
|
|
<nav>
|
|
<div class="nav-wrapper teal">
|
|
<a href="#" class="brand-logo center">聊天室</a>
|
|
</div>
|
|
</nav>
|
|
<div class="container">
|
|
<div class="row"></div>
|
|
<div class="row"></div>
|
|
<div class="row">
|
|
<div class="col s4 offset-s4 ">
|
|
<form class="col s12" method="post" action="{{ url_for('Chat.ChatIndex') }}">
|
|
<div class="row">
|
|
<div class="input-field col s12">
|
|
<input value="" id="username" type="text" class="validate" name="username">
|
|
<label class="active" for="username">昵称</label>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="input-field col s12">
|
|
<input value="默认" id="room" type="text" class="validate" name="room">
|
|
<label class="active" for="room">房间</label>
|
|
</div>
|
|
</div>
|
|
<button id="submit" class="btn waves-effect waves-light teal z-depth-3 right" type="submit"
|
|
name="action">开始聊天
|
|
<i class="material-icons right">send</i>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
let inp = document.querySelector('#username');
|
|
let roominp = document.querySelector('#room');
|
|
let btn = document.querySelector('#submit');
|
|
setInterval(function () {
|
|
if (inp.value && roominp.value) {
|
|
btn.classList.remove('disabled');
|
|
} else {
|
|
if (!btn.classList.contains('disabled')) {
|
|
btn.classList.add('disabled');
|
|
}
|
|
}
|
|
}, 300);
|
|
</script>
|
|
</body>
|
|
</html> |