aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--chatserver.html113
-rw-r--r--day.css89
-rw-r--r--night.css98
-rw-r--r--theme-day.css1
-rw-r--r--theme-night.css18
5 files changed, 129 insertions, 190 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">
diff --git a/day.css b/day.css
deleted file mode 100644
index 3254f95..0000000
--- a/day.css
+++ /dev/null
@@ -1,89 +0,0 @@
-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% - 30px);
-}
-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#nickbtn{
- display:inline-block;
- background-color:#bbb;
- border:1px #ddd solid;
- border-radius:5px;
- font-size:12px;
- cursor:pointer;
-}
-
-.textinput{
- bottom:0;
- width:664px;
- height:15px;
- border:none;
- border-top:1px #aaa solid;
- font-size:14px;
-} \ No newline at end of file
diff --git a/night.css b/night.css
deleted file mode 100644
index 0541527..0000000
--- a/night.css
+++ /dev/null
@@ -1,98 +0,0 @@
-html{height:calc(100% - 8px);}
-body{
- height:calc(100% - 8px);
- margin:8px;
- color:#fff;
- background-color:#112;
-}
-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% - 30px);
-}
-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;
-}
-tbody#lobbylogtb td.message-ownmessage{
- color:#2d4;
-}
-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#nickbtn{
- display:inline-block;
- background-color:#333;
- border:1px #555 solid;
- color:#ddd;
- 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;
- background-color:#001;
- color:#bbb;
-} \ No newline at end of file
diff --git a/theme-day.css b/theme-day.css
new file mode 100644
index 0000000..8ce06f6
--- /dev/null
+++ b/theme-day.css
@@ -0,0 +1 @@
+/*the same as in chatserver.html*/ \ No newline at end of file
diff --git a/theme-night.css b/theme-night.css
new file mode 100644
index 0000000..44c096d
--- /dev/null
+++ b/theme-night.css
@@ -0,0 +1,18 @@
+body{
+ color:#fff;
+ background-color:#112;
+}
+tbody#lobbylogtb td.message-ownmessage{
+ color:#2d4;
+}
+div.configbtn{
+ background-color:#333;
+ border:1px #555 solid;
+ color:#ddd;
+}
+
+.textinput{
+ font-family:Monaco,"Courier New",Monospace;
+ background-color:#001;
+ color:#bbb;
+} \ No newline at end of file
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2024-09-29 08:22:30 +0200