diff options
| author | tomsmeding <hallo@tomsmeding.nl> | 2015-04-21 22:01:56 +0200 |
|---|---|---|
| committer | tomsmeding <hallo@tomsmeding.nl> | 2015-04-21 22:01:56 +0200 |
| commit | ec7754aa85d8a1c2a0165f995e9db1a04493747f (patch) | |
| tree | c7cfc113c4d7facff5907f307b4c3cf1812bb8db /chatserver.html | |
| parent | 5209faba38bc3b02d04d27250f2a2b2e309ec2ae (diff) | |
New theme mechanism; revamp
Diffstat (limited to 'chatserver.html')
| -rw-r--r-- | chatserver.html | 113 |
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"> |