229 lines
		
	
	
		
			4.6 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
			
		
		
	
	
			229 lines
		
	
	
		
			4.6 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 | |
| <html xmlns="http://www.w3c.org/1999/xhtml" xml:lang="da">
 | |
| <head>
 | |
| <title>The RichTextDevice</title>
 | |
| <style type='text/css'>
 | |
| * {
 | |
| 	margin:0;
 | |
| 	padding:0;
 | |
| 	text-decoration:none;
 | |
| 	font-weight:normal;
 | |
| 	color:#000;
 | |
| 	font:12px arial;
 | |
| 	}
 | |
| 	
 | |
| body {
 | |
| 	font:12px arial;
 | |
| 	background-color:#000;	
 | |
| 	overflow:hidden;
 | |
| 	}
 | |
| 
 | |
| #wrapper {
 | |
| 	width:400px;
 | |
| 	margin:0 auto;
 | |
| 	}
 | |
| 	
 | |
| #wrapper * {
 | |
| 	padding:4px;
 | |
| 	color:#fff;
 | |
| 	border-style:solid;
 | |
| 	border-color:#fff;
 | |
| 	}
 | |
| 	
 | |
| #header {
 | |
| 	height:25px;	
 | |
| 	padding-top:25px;
 | |
| 	font-size:20px;	
 | |
| 	border-width:0 2px 2px 2px;
 | |
| 	}
 | |
| 	
 | |
| #tools {
 | |
| 	height:20px;
 | |
| 	border-width:0 2px 2px 2px;
 | |
| 	}
 | |
| 	
 | |
| #content {
 | |
| 	height:350px;
 | |
| 	border-width:0 2px 2px 2px;
 | |
| 	overflow:hidden;
 | |
| 	}
 | |
| 	
 | |
| #footer {
 | |
| 	text-align:center;
 | |
| 	font-size:11px;
 | |
| 	border-width:0 2px 2px 2px;
 | |
| 	}
 | |
| 	
 | |
| .inl {
 | |
| 	font-size:12px;
 | |
| 	display:inline;
 | |
| 	border-width:0;
 | |
| 	}
 | |
| 	
 | |
| #t {
 | |
| 	position:absolute;
 | |
| 	top:-100px;
 | |
| 	left:-100px;
 | |
| 	width:50px;
 | |
| 	height:50px;
 | |
| 	visibility:hidden;
 | |
| 	}
 | |
| 	
 | |
| #tools a {
 | |
| 	padding:0;
 | |
| 	border-width:1px;
 | |
| 	float:left;
 | |
| 	width:18px;
 | |
| 	height:18px;
 | |
| 	margin-right:5px;
 | |
| 	background-repeat:no-repeat;
 | |
| 	}
 | |
| 	
 | |
| #b {
 | |
| 	background-image:url('img/bold.png');
 | |
| 	}	
 | |
| #i {
 | |
| 	background-image:url('img/italic.png');
 | |
| 	}	
 | |
| #u {
 | |
| 	background-image:url('img/underline.png');
 | |
| 	}
 | |
| 	
 | |
| #tools a:link,#tools a:visited,a.almtd:link,#tools a.almtd:visited {
 | |
| 	background-color:#000;
 | |
| 	}	
 | |
| #tools a:hover {
 | |
| 	background-color:#606060;
 | |
| 	}
 | |
| #tools a.almtd:hover {
 | |
| 	background-color:#000;
 | |
| 	}
 | |
| 	
 | |
| #tools a.chot:link,#tools a.chot:visited,a.cho:link,#tools a.cho:visited {
 | |
| 	background-color:#006600;
 | |
| 	}
 | |
| #tools a.chot:hover {
 | |
| 	background-color:#006600;
 | |
| 	}
 | |
| #tools a.cho:hover {
 | |
| 	background-color:#404040;
 | |
| 	}
 | |
| 	
 | |
| #content div {
 | |
| 	padding:0;
 | |
| 	border-width:0;
 | |
| 	display:inline;
 | |
| 	}
 | |
| 	
 | |
| .b {
 | |
| 	font-weight:bold;
 | |
| 	}
 | |
| .i {
 | |
| 	font-style:italic;
 | |
| 	}
 | |
| .u {
 | |
| 	text-decoration:underline;
 | |
| 	}
 | |
| 	
 | |
| .bi {
 | |
| 	font-weight:bold;
 | |
| 	font-style:italic;
 | |
| 	}
 | |
| 	
 | |
| .bu {
 | |
| 	font-weight:bold;
 | |
| 	text-decoration:underline;
 | |
| 	}
 | |
| 	
 | |
| .biu {
 | |
| 	font-weight:bold;
 | |
| 	font-style:italic;
 | |
| 	text-decoration:underline;
 | |
| 	}
 | |
| 	
 | |
| .iu {
 | |
| 	font-style:italic;
 | |
| 	text-decoration:underline;
 | |
| 	}	
 | |
| </style>
 | |
| <script type='text/javascript'>
 | |
| function wtd() {
 | |
| t=document.getElementById("t")
 | |
| t.focus()
 | |
| c=document.getElementById("content")
 | |
| ft=t.value
 | |
| cin=c.innerHTML
 | |
| if (c.className=="y") {
 | |
| ft=ft+"</b>"
 | |
| cin=cin.substr(0,cin.length-6)
 | |
| }
 | |
| 
 | |
| c.innerHTML=cin+ft
 | |
| t.value=""
 | |
| a=setTimeout("wtd()",25)
 | |
| }
 | |
| 
 | |
| function choit(pid) {
 | |
| c=document.getElementById("content")
 | |
| b=document.getElementById("b")
 | |
| i=document.getElementById("i")
 | |
| u=document.getElementById("u")
 | |
| tid=document.getElementById(pid)
 | |
| 
 | |
| if (tid.className=="" || tid.className=="almtd") {
 | |
| tid.className="chot"
 | |
| tid.onmouseout=function () {
 | |
| tid.className="cho"
 | |
| tid.onmouseout=""
 | |
| }
 | |
| 
 | |
| c.className="y"
 | |
| }
 | |
| else {
 | |
| tid.className="almtd"
 | |
| tid.onmouseout=function () {
 | |
| tid.className=""
 | |
| tid.onmouseout=""
 | |
| }
 | |
| }
 | |
| 
 | |
| if (b.className!="" && b.className!="almtd" && (i.className=="" || i.className=="almtd") && (u.className=="" || u.className=="almtd"))
 | |
| fid="b"
 | |
| else if (i.className!="" && i.className!="almtd" && (u.className=="" || u.className=="almtd") && (b.className=="" || b.className=="almtd"))
 | |
| fid="i"
 | |
| else if (u.className!="" && u.className!="almtd" && (b.className=="" || b.className=="almtd") && (i.className=="" || i.className=="almtd"))
 | |
| fid="u"
 | |
| else if (b.className!="" && b.className!="almtd" && i.className!="" && i.className!="almtd" && (u.className=="" || u.className=="almtd"))
 | |
| fid="bi"
 | |
| else if (b.className!="" && b.className!="almtd" && u.className!="" && u.className!="almtd" && (i.className=="" || i.className=="almtd"))
 | |
| fid="bu"
 | |
| else if (b.className!="" && b.className!="almtd" && i.className!="" && i.className!="almtd" && u.className!="" && u.className!="almtd")
 | |
| fid="biu"
 | |
| else if (i.className!="" && i.className!="almtd" && u.className!="" && u.className!="almtd" && (b.className=="" || b.className=="almtd"))
 | |
| fid="iu"
 | |
| else
 | |
| fid=""
 | |
| 
 | |
| if (fid!="")
 | |
| c.innerHTML=c.innerHTML+"<div class='"+fid+"'></div>"
 | |
| else
 | |
| c.className=""
 | |
| }
 | |
| 
 | |
| window.onload=wtd
 | |
| </script>
 | |
| </head>
 | |
| <body>
 | |
| <textarea id='t'></textarea>
 | |
| <div id='wrapper'>
 | |
| <div id='header'>The RichTextDevice <div class='inl'>(press a key on your keyboard)</div</div>
 | |
| <div id='tools'>
 | |
| <a href='#' id='b' onclick='choit("b")'></a>
 | |
| <a href='#' id='i' onclick='choit("i")'></a>
 | |
| <a href='#' id='u' onclick='choit("u")'></a>
 | |
| </div>
 | |
| <div id='content'></div>
 | |
| <div id='footer'>© nqpz 2008 - "And Now For Something Completely Different" (this)</div>
 | |
| </div>
 | |
| </body>
 | |
| </html> |