TAG 0.22.2-1
[darcs-mirror-screen-message.debian.git] / sm.html
1 <html>
2 <!--
3 #     sm.html
4 #     Copyright (C) 2006 - 2010 Joachim Breitner
5 #
6 #     This program is free software; you can redistribute it and/or modify
7 #     it under the terms of the GNU General Public License as published by
8 #     the Free Software Foundation; either version 2 of the License, or
9 #     (at your option) any later version.
10 #
11 #     This program is distributed in the hope that it will be useful,
12 #     but WITHOUT ANY WARRANTY; without even the implied warranty of
13 #     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
14 #     GNU General Public License for more details.
15 #
16 #     You should have received a copy of the GNU General Public License
17 #     along with this program; if not, write to the Free Software
18 #     Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301 USA
19 -->
20 <head>
21 <title>Screen message</title>
22 <style type="text/css">
23 #textarea {
24         position:absolute;
25         top:0px;
26         left:0px;
27         width:100%;
28         height:100%;
29         white-space:nowrap;
30         font-family: sans;
31         padding:0px;
32         margin:0px;
33         border:0px;
34         text-align:center;
35         overflow:hidden;
36         resize:none;
37 }
38
39 /* disable focus border at Chrome */
40 #textarea:focus {
41         outline: none;
42 }
43
44 #test {
45         position:absolute;
46         visibility:hidden;
47         top:0px;
48         left:0px;
49         font-size:30px;
50         white-space:pre;
51         font-family: sans;
52         border:0px;
53         padding:0.1em;
54         margin:0px;
55 }
56 #about {
57         position:absolute;
58         width:20em;
59         top:30px;
60         right:30px;
61         background-color:gray;
62         padding:1em;
63 }
64
65 </style>
66 <script type="text/javascript">
67 opacity = 100;
68 function adjust() {
69         ta = document.getElementById("textarea");
70         test = document.getElementById("test");
71         
72         test.textContent=ta.value;
73         // Otherwise, the newline would not be counted.
74         if (ta.value[ta.value.length-1] == "\n") {
75                 test.innerHTML += '.';
76         }
77
78         ratioX = (window.innerWidth) / test.offsetWidth;
79         ratioY = (window.innerHeight) / test.offsetHeight;
80         ratio = Math.min(ratioX,ratioY);
81         fontSize = Math.floor(30 * ratio) + "px"
82         ta.style.fontSize = fontSize;
83         newHeight = Math.ceil(test.offsetHeight * ratio);
84         //ta.style.height = newHeight + "px";
85         //ta.style.top = Math.floor((window.innerHeight - newHeight)/2) + "px";
86         ta.style.paddingTop = Math.floor((window.innerHeight - newHeight)/2) + "px";
87         ta.style.paddingBottom = Math.floor((window.innerHeight - newHeight)/2) + "px";
88         newWidth = Math.ceil(test.offsetWidth * ratio);
89         //ta.style.width = newWidth + "px";
90         ta.style.paddingLeft = Math.max(0,Math.floor((window.innerWidth - newWidth)/2)) + "px";
91         ta.style.paddingRight = Math.max(0,Math.floor((window.innerWidth - newWidth)/2)) + "px";
92          
93         //test.innerHTML = newHeight + " " + window.innerHeight + " " + fontSize;
94         
95         href =  "#t=" + encodeURIComponent(ta.value);
96         if (ta.style.color) {
97                 href +=  ";f=" + encodeURIComponent(ta.style.color);
98         }
99         if (ta.style.backgroundColor) {
100                 href +=  ";b=" + encodeURIComponent(ta.style.backgroundColor);
101         }
102         window.location.hash = href;
103 }
104
105 function showBox() {
106         opacity = 100;
107         window.clearTimeout(timeout);
108         setOpacity();
109 }
110 function fadeOut() {
111         opacity *= 0.985;
112         if (opacity > 1) {
113                 timeout = window.setTimeout("fadeOut()",20);
114         } else {
115                 opacity = 0;
116         }
117         setOpacity();
118 }
119 function setOpacity() {
120         about = document.getElementById("about");
121         about.style.opacity = opacity/100;
122         about.style.filter = "alpha(opacity="+Math.round(opacity)+")";
123 }
124
125 function parseHash() {
126         ta = document.getElementById("textarea");
127         ta.focus();
128
129         var queryString = {};
130         window.location.href.replace(
131                 new RegExp("([^?=&;#]+)(=([^&;]*))", "g"),
132                 function($0, $1, $2, $3) {queryString[$1] = decodeURIComponent($3); }
133         );
134         if (queryString['t']) {
135                 ta.value = queryString['t'];
136         }
137         if (queryString['f']) {
138                 ta.style.color = queryString['f'];
139         }
140         if (queryString['b']) {
141                 ta.style.backgroundColor = queryString['b'];
142         }
143         adjust();
144         timeout = window.setTimeout("fadeOut();",1000);
145         setOpacity();
146 }
147         
148 function init() {
149         if (window.navigator.mozApps) {
150                 document.getElementById("firefox").style.display = "block";
151         }
152         parseHash();
153 }
154 </script>
155 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
156 <meta name="apple-mobile-web-app-capable" content="yes">
157 <meta name="format-detection" content="telephone=no">
158 </head>
159 <body onload="init()" onhashchange="parseHash()" onresize="adjust()">
160 <textarea id="textarea" onKeyUp="adjust()" onpaste="adjust()" oninput="adjust()">:-)</textarea>
161 <span id="test"></span>
162 <div id="about" onMouseOver="showBox()" onMouseOut="fadeOut()">
163 <p>
164 This is an online-version of the program <strong>screen-message</strong> for Linux.
165 </p>
166 <p id="firefox" style="display:none">
167 You can <a href="#" onclick="window.navigator.mozApps.install('http://sm.nomeata.de/sm.webapp')">install it as a FireFox app</a>.
168 </p>
169 <p>
170 For more information about the original program, see what <a href="http://debaday.debian.net/2007/07/18/screen-message-use-your-screen-to-communicate/">Deb-a-Day</a> writes about it. You can download it from <a href="http://packages.debian.org/sid/sm">Debian</a> or <a href="http://darcs.nomeata.de/screen-message/">fetch the sourcecode</a>.
171 </p>
172 <p>
173 <strong>screen-message</strong> was created by <a href="http://www.joachim-breitner.de/">Joachim Breitner</a>.
174 If you like it, then <a href="http://flattr.com/thing/330186/screen-message" target="_blank">flattr this</a>.
175 </p>
176 </div>
177 </body>
178 </html>