66e731d72f3ea1361f2d54972ec186f63e96abbb
[darcs-mirror-screen-message.debian.git] / sm.html
1 <html>
2 <style type="text/css">
3 #textarea {
4         position:absolute;
5         top:0px;
6         left:0px;
7         width:100%;
8         height:100%;
9         white-space:nowrap;
10         font-family: sans;
11         padding:0px;
12         margin:0px;
13         border:0px;
14         text-align:center;
15         overflow:hidden;
16 }
17
18 #test {
19         position:absolute;
20         visibility:hidden;
21         top:0px;
22         left:0px;
23         font-size:30px;
24         white-space:pre;
25         font-family: sans;
26         border:0px;
27         padding:0.1em;
28         margin:0px;
29 }
30 #about {
31         position:absolute;
32         width:20em;
33         top:30px;
34         right:30px;
35         background-color:gray;
36         padding:1em;
37 }
38
39 </style>
40 <script type="text/javascript">
41 opacity = 100;
42 function adjust() {
43         ta = document.getElementById("textarea");
44         test = document.getElementById("test");
45         
46         test.innerHTML=ta.value;
47         // Otherwise, the newline would not be counted.
48         if (ta.value[ta.value.length-1] == "\n") {
49                 test.innerHTML += '.';
50         }
51
52         ratioX = (window.innerWidth) / test.offsetWidth;
53         ratioY = (window.innerHeight) / test.offsetHeight;
54         ratio = Math.min(ratioX,ratioY);
55         fontSize = Math.floor(30 * ratio) + "px"
56         ta.style.fontSize = fontSize;
57         newHeight = Math.ceil(test.offsetHeight * ratio);
58         //ta.style.height = newHeight + "px";
59         //ta.style.top = Math.floor((window.innerHeight - newHeight)/2) + "px";
60         ta.style.paddingTop = Math.floor((window.innerHeight - newHeight)/2) + "px";
61         ta.style.paddingBottom = Math.floor((window.innerHeight - newHeight)/2) + "px";
62         newWidth = Math.ceil(test.offsetWidth * ratio);
63         //ta.style.width = newWidth + "px";
64         ta.style.paddingLeft = Math.max(0,Math.floor((window.innerWidth - newWidth)/2)) + "px";
65         ta.style.paddingRight = Math.max(0,Math.floor((window.innerWidth - newWidth)/2)) + "px";
66          
67         //test.innerHTML = newHeight + " " + window.innerHeight + " " + fontSize;
68         
69         href = window.location.hash = "#t=" + encodeURIComponent(ta.value);
70 }
71
72 function showBox() {
73         opacity = 100;
74         window.clearTimeout(timeout);
75         setOpacity();
76 }
77 function fadeOut() {
78         opacity *= 0.985;
79         if (opacity > 1) {
80                 timeout = window.setTimeout("fadeOut()",20);
81         } else {
82                 opacity = 0;
83         }
84         setOpacity();
85 }
86 function setOpacity() {
87         about = document.getElementById("about");
88         about.style.opacity = opacity/100;
89         about.style.filter = "alpha(opacity="+Math.round(opacity)+")";
90 }
91
92 function init() {
93         ta = document.getElementById("textarea");
94         ta.focus();
95
96         var queryString = {};
97         window.location.href.replace(
98                 new RegExp("([^?=&;#]+)(=([^&;]*))", "g"),
99                 function($0, $1, $2, $3) {queryString[$1] = decodeURIComponent($3); }
100         );
101         if (queryString['t']) {
102                 ta.value = queryString['t'];
103         }
104         adjust();
105         timeout = window.setTimeout("fadeOut();",1000);
106         setOpacity();
107         
108 }
109 </script>
110 <body onload="init()">
111 <textarea id="textarea" onKeyUp="adjust()">:-)</textarea>
112 <span id="test"></span>
113 <div id="about" onMouseOver="showBox()" onMouseOut="fadeOut()">
114 <p>
115 This is an online-version of the program <strong>screen-message</strong> for Linux.
116 </p>
117 <p>
118 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.upstream/">fetch the sourcecode</a>.
119 </p>
120 <p>
121 <strong>screen-message</strong> was created by <a href="http://www.joachim-breitner.de/">Joachim Breitner</a>.
122 </p>
123 </div>
124 </body>
125 </html>