aboutsummaryrefslogtreecommitdiff
path: root/chatserver.html
diff options
context:
space:
mode:
authortomsmeding <hallo@tomsmeding.nl>2015-04-21 22:01:56 +0200
committertomsmeding <hallo@tomsmeding.nl>2015-04-21 22:01:56 +0200
commitec7754aa85d8a1c2a0165f995e9db1a04493747f (patch)
treec7cfc113c4d7facff5907f307b4c3cf1812bb8db /chatserver.html
parent5209faba38bc3b02d04d27250f2a2b2e309ec2ae (diff)
New theme mechanism; revamp
Diffstat (limited to 'chatserver.html')
-rw-r--r--chatserver.html113
1 files changed, 110 insertions, 3 deletions
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">