Skip to content

Commit 0408029

Browse files
robalbrobalb
committed
added bg and about page
1 parent 123c59c commit 0408029

File tree

4 files changed

+160
-1
lines changed

4 files changed

+160
-1
lines changed

‎about.php

+156
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<title>morse chat</title>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
7+
<meta name="application-name" content="online morse radio"/>
8+
<meta name="keywords" content="morse,telegraph,radio,frequency,chatroom,online,bugs" />
9+
<meta name="description" content="an online morse radio" />
10+
<meta name="msapplication-TileColor" content="#212121" />
11+
<meta name="theme-color" content="#212121" />
12+
13+
<!-- <link href="css/style.css" rel="stylesheet" /> -->
14+
<link href="css/icons.css" rel="stylesheet" />
15+
16+
<link href="https://fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet">
17+
<!--<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> -->
18+
19+
<style>
20+
html,body{
21+
background-color:#333333;
22+
color:#fafafa;
23+
font-family: 'Roboto', monospace;
24+
margin:0;
25+
overflow-x:hidden;
26+
height: 100%;
27+
-webkit-tap-highlight-color: rgba(0,0,0,0);
28+
29+
background: #333333 url("css/bg.png");
30+
31+
}
32+
33+
#nav{
34+
width: 100%;
35+
height:50px;
36+
background-color: #212121;
37+
box-shadow: 0 2px 5px rgba(0,0,0,.26);
38+
text-align:center;
39+
}
40+
#nav button{
41+
cursor: pointer;
42+
border: 0;
43+
display: block;
44+
height: 50px;
45+
overflow: hidden;
46+
top: -50px;
47+
left:0px;
48+
position:relative;
49+
width: 50px;
50+
color:#efebe9;
51+
background-color:#212121;
52+
outline-style:none;
53+
}
54+
#nav a{
55+
text-decoration: none;
56+
color: #efebe9;
57+
font-family: 'Roboto',monospace,Sans serif;
58+
font-size: 21px;
59+
height: 50px;
60+
line-height: 50px;
61+
margin: 0 .5em 0 .5em;
62+
width: .5em;
63+
cursor:pointer;
64+
}
65+
.block1{
66+
min-height:100%;
67+
background-color:rgba(66, 66, 66, 0.3);
68+
text-align:left;
69+
overflow-y:hidden;
70+
overflow-x:hidden;
71+
max-width:600px;
72+
margin: 0 auto;
73+
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
74+
-webkit-box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
75+
-moz-box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
76+
font-family: 'Roboto', monospace;
77+
padding:10px;
78+
}
79+
.block1 h1,h2,h3{
80+
color:white;
81+
font-family: 'Roboto', monospace;
82+
}
83+
.block1 a{
84+
background-color:#4d4d4d;
85+
color:white;
86+
text-decoration:none;
87+
background: linear-gradient(0deg, #333333 50%, #404040 50%);
88+
border-bottom:1px solid #a6a6a6;
89+
}
90+
.block1 a:hover{
91+
background: linear-gradient(0deg, #404040 50%, #333333 50%);
92+
border-bottom:1px solid #666666;
93+
}
94+
95+
ul {
96+
list-style: none;
97+
padding:0;
98+
margin:0;
99+
margin-bottom: 3em;
100+
}
101+
102+
li {
103+
line-height: 1.4;
104+
padding-left: 1em;
105+
margin-bottom: .8em;
106+
/*text-indent: -.5em;*/
107+
max-width: 700px;
108+
}
109+
li:before {
110+
content: "\21A3 ";
111+
color: #cccccc;
112+
}
113+
114+
115+
</style>
116+
117+
</head>
118+
<body>
119+
<div id="nav">
120+
<a>about</a>
121+
<button class="hamburger" onclick="window.history.back()" ><i class="material-icons">arrow_back</i></button>
122+
</div>
123+
124+
<div class="block1">
125+
<h1>morsechat</h1>
126+
<p>Morsechat is an open source morse chat for learning morse code, inspired by
127+
<a href="https://twitter.com/bkanber">&nbsp;@bkanber&nbsp;</a> 's web app <a href="morsecode.me">&nbsp;morsecode.me&nbsp;</a></p>
128+
<p>This chat is not in real time, the messages you type are sent only after a short period of inactivity, when
129+
the progress bar at the top of the page reaches the end.</p>
130+
131+
<h2>what's new</h2>
132+
<h3>V 1.0 <span style="color:#cccccc">[19/ 3/ 2018]</span></h3>
133+
<p>This is the first version of the chat. Too lazy to write the changelog now
134+
</p>
135+
136+
<h2 id="bugs">bugs</h2>
137+
<p>You can report bugs or give your suggestions on <a href="https://github.com/robalb/morsechat/issues">&nbsp;github&nbsp;</a>
138+
<!-- or on <a href="https://twitter.com//">&nbsp;twitter&nbsp;</a> --> </p>
139+
140+
<h2>todo list:</h2>
141+
<ul>
142+
<li>queque all the messages received from a user if one of its messages is still playing</li>
143+
<li>online users list, with 'user is typing' status</li>
144+
<li>more options for the received morse player</li>
145+
<li>auto refresh if a new update is detected</li>
146+
<li>better anti-spam algorithms</li>
147+
<li>accounts with stats and skill level. Private rooms and rooms restricted to skilled morsers only</h1>
148+
149+
</ul>
150+
151+
</div>
152+
153+
154+
155+
</body>
156+
</html>

‎css/bg.png

32.9 KB
Loading

‎css/style.css

+3
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,9 @@ html,body{
77
overflow:hidden;
88
height: 100%;
99
-webkit-tap-highlight-color: rgba(0,0,0,0);
10+
/* https://s3-us-west-2.amazonaws.com/s.cdpn.io/154/footer_lodyas.png */
11+
background: #333333 url("bg.png");
12+
1013
}
1114

1215
#nav{

‎index.php

+1-1
Original file line numberDiff line numberDiff line change
@@ -117,7 +117,7 @@
117117
<p><a href="http://halb.it">homepage</a></p>
118118
<p><a href="javascript:alert('coming soon')">practice</a></p>
119119
<p><a href="about.php">about</a></p>
120-
<p><a href="bug.php">bug</a></p>
120+
<p><a href="about.php#bugs">bugs</a></p>
121121
<p><a href="https://github.com/robalb/morsechat"><img class="icon-32" src="css/GitHub-Mark-Light-32px.png"></a></p>
122122
</div>
123123
</div>

0 commit comments

Comments
 (0)