Typo
[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         body = document.getElementById("test");
46         
47         test.innerHTML=ta.value;
48         // Otherwise, the newline would not be counted.
49         if (ta.value[ta.value.length-1] == "\n") {
50                 test.innerHTML += '.';
51         }
52
53         ratioX = (window.innerWidth) / test.offsetWidth;
54         ratioY = (window.innerHeight) / test.offsetHeight;
55         ratio = Math.min(ratioX,ratioY);
56         fontSize = Math.floor(30 * ratio) + "px"
57         ta.style.fontSize = fontSize;
58         newHeight = Math.ceil(test.offsetHeight * ratio);
59         //ta.style.height = newHeight + "px";
60         //ta.style.top = Math.floor((window.innerHeight - newHeight)/2) + "px";
61         ta.style.paddingTop = Math.floor((window.innerHeight - newHeight)/2) + "px";
62         ta.style.paddingBottom = Math.floor((window.innerHeight - newHeight)/2) + "px";
63         newWidth = Math.ceil(test.offsetWidth * ratio);
64         //ta.style.width = newWidth + "px";
65         ta.style.paddingLeft = Math.floor((window.innerWidth - newWidth)/2) + "px";
66         ta.style.paddingRight = Math.floor((window.innerWidth - newWidth)/2) + "px";
67          
68         //test.innerHTML = newHeight + " " + window.innerHeight + " " + fontSize;
69 }
70
71 function showBox() {
72         opacity = 100;
73         window.clearTimeout(timeout);
74         setOpacity();
75 }
76 function fadeOut() {
77         opacity *= 0.985;
78         if (opacity > 1) {
79                 timeout = window.setTimeout("fadeOut()",20);
80         } else {
81                 opacity = 0;
82         }
83         setOpacity();
84 }
85 function setOpacity() {
86         about = document.getElementById("about");
87         about.style.opacity = opacity/100;
88         about.style.filter = "alpha(opacity="+Math.round(opacity)+")";
89 }
90 function init() {
91         ta = document.getElementById("textarea");
92         ta.focus();
93         adjust();
94         timeout = window.setTimeout("fadeOut();",1000);
95         setOpacity();
96         
97 }
98 </script>
99 <body onload="init()">
100 <textarea id="textarea" onKeyUp="adjust()">:-)</textarea>
101 <span id="test"></span>
102 <div id="about" onMouseOver="showBox()" onMouseOut="fadeOut()">
103 <p>
104 This is an online-version of the program <strong>screen-message</strong> for Linux.
105 </p>
106 <p>
107 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>.
108 </p>
109 <p>
110 <strong>screen-message</strong> was created by <a href="http://www.joachim-breitner.de/">Joachim Breitner</a>.
111 </p>
112 </div>
113 </body>
114 </html>