51 lines
		
	
	
		
			1.8 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
			
		
		
	
	
			51 lines
		
	
	
		
			1.8 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
| <html>
 | |
| 	<head>
 | |
| 		<title>short URL</title>
 | |
| 		<meta charset="utf-8">
 | |
| 		<link rel="stylesheet" type="text/css" href="./sym/dark.css">
 | |
| 		<script src="./sym/script.js"></script>
 | |
| 		<script>
 | |
| 			const wsurl = 'ws://192.168.188.36:8081'
 | |
| 			const socket = new WebSocket(wsurl)
 | |
| 
 | |
| 			socket.onopen = () => {
 | |
| 				socket.send('new session')
 | |
| 			}
 | |
| 			socket.onerror = (error) => {
 | |
| 				console.log(`WebSocket error: ${error}`)
 | |
| 			}
 | |
| 			socket.onmessage = (e) => {
 | |
| 				console.log(e.data)
 | |
| 				document.getElementById('error-message').innerText = e.data
 | |
| 				document.getElementById('error-box').style.display = 'block'
 | |
| 			}
 | |
| 			function short_url(){
 | |
| 				socket.send('long_url '+document.getElementById('name-input').value)
 | |
| 			}
 | |
| 		</script>
 | |
| 	</head>
 | |
| 	<body>
 | |
| 		<div class="login">
 | |
| 			<div class="title">short your url</div>
 | |
| 			<form name="search" action="javascript:socket.send('long_url '+document.getElementById('name-input').value)" method="POST">
 | |
| 				<div class="inputbox" id="name">
 | |
| 					<input class="input" id="name-input" type="text" onblur="deselected('name');" onfocus="selected('name');" name="url" value="" maxlength="2000" placeholder="https://your.long.url/junk">
 | |
| 				</div>
 | |
| 				<input type="hidden" value="search" name="login">
 | |
| 				<a href="javascript:socket.send('long_url '+document.getElementById('name-input').value)">
 | |
| 					<div class="btn-blue" id="short-btn">
 | |
| 						<div class="btn-text">short</div>
 | |
| 					</div>
 | |
| 				</a>
 | |
| 			</form>
 | |
| 		</div>
 | |
| 		<div id="error-box" class="error">
 | |
| 			<div onclick="document.getElementById('error-box').style.display = 'none'" style="position: absolute; top:5px; right: 5px;" class="sym_btn-invisible">
 | |
| 				<img class="icon" src="./sym/ic_close_white_24px.svg">
 | |
| 			</div>
 | |
| 			<div id="error-message">
 | |
| 			</div>
 | |
| 		</div>
 | |
| 	</body>
 | |
| </html>
 |