a27327b2508d9cb67b1dc93744a19dfa3112e8a3
[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         link = document.getElementById("permlink");
70         href = window.location.href.replace(/\#.*/,"");
71         link.href = href + "#t=" + encodeURIComponent(ta.value);
72 }
73
74 function showBox() {
75         opacity = 100;
76         window.clearTimeout(timeout);
77         setOpacity();
78 }
79 function fadeOut() {
80         opacity *= 0.985;
81         if (opacity > 1) {
82                 timeout = window.setTimeout("fadeOut()",20);
83         } else {
84                 opacity = 0;
85         }
86         setOpacity();
87 }
88 function setOpacity() {
89         about = document.getElementById("about");
90         about.style.opacity = opacity/100;
91         about.style.filter = "alpha(opacity="+Math.round(opacity)+")";
92 }
93
94 function init() {
95         ta = document.getElementById("textarea");
96         ta.focus();
97
98         var queryString = {};
99         window.location.href.replace(
100                 new RegExp("([^?=&;#]+)(=([^&;]*))", "g"),
101                 function($0, $1, $2, $3) {queryString[$1] = decodeURIComponent($3); }
102         );
103         if (queryString['t']) {
104                 ta.value = queryString['t'];
105         }
106         adjust();
107         timeout = window.setTimeout("fadeOut();",1000);
108         setOpacity();
109         
110 }
111 </script>
112 <body onload="init()">
113 <textarea id="textarea" onKeyUp="adjust()">:-)</textarea>
114 <span id="test"></span>
115 <div id="about" onMouseOver="showBox()" onMouseOut="fadeOut()">
116 <p>
117 This is an online-version of the program <strong>screen-message</strong> for Linux.
118 </p>
119 <p>
120 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>.
121 </p>
122 <p>
123 <strong>screen-message</strong> was created by <a href="http://www.joachim-breitner.de/">Joachim Breitner</a>.
124 </p>
125 <p>
126 Use <a id="permlink">this link</a> to share your current text.
127 </p>
128 </div>
129 </body>
130 </html>