From ec7754aa85d8a1c2a0165f995e9db1a04493747f Mon Sep 17 00:00:00 2001
From: tomsmeding <hallo@tomsmeding.nl>
Date: Tue, 21 Apr 2015 22:01:56 +0200
Subject: New theme mechanism; revamp

---
 chatserver.html | 113 ++++++++++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 110 insertions(+), 3 deletions(-)

(limited to 'chatserver.html')
diff --git a/chatserver.html b/chatserver.html
index f27d303..3b11fd5 100644
--- a/chatserver.html
+++ b/chatserver.html
@@ -3,7 +3,99 @@
 <head>
 <meta charset="utf-8">
 <title>Chatserver</title>
-<link rel="stylesheet" href="night.css">
+<style>
+html{height:calc(100% - 8px);}
+body{
+	height:calc(100% - 8px);
+	margin:8px;
+}
+table#maintable,
+table#maintable > tbody,
+table#maintable > tbody > tr{
+	width:800px;
+	height:100%;
+	display:block;
+	margin:0;
+	padding:0;
+}
+td#lobbylist,
+td#lobbylog{
+	display:inline-block;
+	height:calc(100% - 8px);
+	border:1px #ccc solid;
+	border-radius:10px;
+	padding:0;
+	font-family:Monaco,"Courier New",Monospace;
+}
+td#lobbylist{width:120px;}
+td#lobbylog{
+	width:672px;
+	word-wrap:break-word;
+}
+div#lobbylistdiv{
+	width:100%;
+	height:calc(100% - 50px);
+}
+div#lobbylistdiv > div{
+	cursor:pointer;
+}
+div#lobbylistdiv > div.selected{
+	color:#00a;
+	background-color:#eef;
+}
+td#lobbylog > div,
+tbody#lobbtlobtb{
+	overflow:scroll;
+}
+tbody#lobbylogtb,
+tbody#lobbylogtb > tr{
+	width:100%;
+}
+td#lobbylog > div{
+	height:calc(100% - 22px);
+}
+tbody#lobbylogtb td{
+	padding:0;
+}
+td#lobbylog table{
+	border-collapse:collapse;
+}
+tbody#lobbylogtb > tr > td > table > tbody > tr > td:first-child{
+	display:inline-block;
+	padding-right:6px;
+	width:100px;
+	text-align:right;
+	margin-bottom:5px;
+}
+tbody#lobbylogtb > tr > td > table > tbody > tr > td:last-child{
+	/*display:inline-block;*/
+	padding-left:6px;
+	width:calc(100% - 100px);
+	max-width:calc(100% - 100px);
+	margin-bottom:5px;
+	word-wrap:break-word;
+	border-left:1px #eee solid;
+}
+div.configbtn{
+	display:inline-block;
+	background-color:#bbb;
+	border:1px #ddd solid;
+	border-radius:5px;
+	font-size:12px;
+	cursor:pointer;
+}
+
+.textinput{
+	font-family:Monaco,"Courier New",Monospace;
+	bottom:0;
+	width:664px;
+	height:15px;
+	border:none;
+	border-top:1px #aaa solid;
+	font-size:14px;
+}
+</style>
+<link id="theme-css-link" rel="stylesheet" type="text/css" href="theme-night.css" media="all">
 <script>
 var ws,nick;
 ws=new WebSocket("ws://"+location.hostname+":8000");
@@ -100,7 +192,21 @@ function sendMessage(text){
 
 function changeNickPrompt(){
 	var newnick=prompt("If you want to change your nick, please enter your new choice here.");
-	if(newnick!=null)ws.send("#nick "+newnick.replace(/[\x00-\x20\x7F]/g,""));
+	if(newnick!=null)ws.send("#nick "+newnick.replace(/[\x00-\x20\x7F\x80-\xFF]/g,""));
+}
+
+function changeThemePrompt(){
+	var theme_names=["day","night"];
+	var thnm=prompt("Enter the chosen theme name here.\nChoices: "+theme_names.join(" "));
+	if(thnm!=null){
+		if(theme_names.indexOf(thnm)!=-1)switchTheme(thnm);
+		else alert("Non-existent theme! Try again.");
+	}
+}
+
+
+function switchTheme(theme){
+	document.getElementById("theme-css-link").href="theme-"+escape(theme)+".css";
 }
 </script>
 </head>
@@ -109,7 +215,8 @@ function changeNickPrompt(){
 	<td id="lobbylist">
 		<div id="lobbylistdiv"></div>
 		<div>
-			<div id="nickbtn" onclick="changeNickPrompt()">change nick</div>
+			<div class="configbtn" id="nickbtn" onclick="changeNickPrompt()">change nick</div>
+			<div class="configbtn" id="themebtn" onclick="changeThemePrompt()">change theme</div>
 		</div>
 	</td>
 	<td id="lobbylog">
-- 
cgit v1.2.3-70-g09d2

