drewlesueur · May 16, 2010 19:31
diff --git a/index.html b/index.html
 <!doctype html>
 <html>
 <head>


 <meta name = "viewport" 
 content = "user-scalable = no, maximum-scale=1.0, initial-scale = 1.0, width = device-width, height = device-height">
   <script>
 lt="qwertyuiopasdfghjklzxcvbnm          "
 lt+="1234567890"
 lt+="[]{}<>()?!"
 lt+="+-*/='\":."
 lt+="$&@'#%^~|•"
 </script>
 <style>
 *{
  margin: 0;
  padding: 0
 }

 #t {
 font-size: 30px;
 overflow: hidden;
 }

 #t div { 
 width: 700px;
 }

 #l, #r {
 opacity: .45;

 }
 .pannel {
  position: absolute;
  border: 1px solid orange;
 }

 .key{
 width:  9%;
  display:  block;
  float: left;
  height:    30px;
  font-size:  30px;
  border: 1px solid black;
   text-align: center;
   font-family: helvetica;
   text-transform: capitalize;
 }


 </style>
 <script>
 var w = screen.width
 var h = screen.height
 </script>

 </head>
 <body>

 <div id=t class="pannel"></div>
 <div id=l class="pannel board">
 </div>
 <div id=r class="pannel board" >
 </div>

 <script>
 var lines = [[]]
 var line = lines[0];

 var pos = 0
 var ox = 0
 var oy = 0

 


 function redraw() {
  rows = []
 for (var  i = oy; i < lines.length;i++ ){
     line2 = lines[i]
    rows.push(line2.slice(ox, ox+80).join(""))
 }  
 rows = "<div>" + rows.join("</div><div>")
 +  "</div>" 
     
   t.innerHTML = rows
 } 




 keyboard = true
 function keytype(that) {
 // e.preventDefault()
    var k = that.innerHTML
    if (k == "") {
       var keys =   clss("key")
       if (keyboard == true) {
            for (var i=0; i<keys.length;i++) {
             keys[i].style.display = "none"
            }
             that.style.display=""
             keyboard = false
            return;
       } else {

             for (var i=0;i<keys.length;i++) {
                 k[i].style.display =""  
             }
        }
    }

    if (k == "") {
         line = []
         pos = 0
         lines.push(line)
        return
    } 

     if (k == "") {
        pos = pos -1
        if (pos < 0) {
            
        }
         line.splice(pos,1)
          console. log("delete")
          redraw()
         return; 
      }


    line.splice(pos,0,k)
    pos ++
    redraw()
   return false;

 }
 function gid(x) {
  return document.getElementById(x)
 }

 function clss(x) {
   var ts = document.
        getElementsByClassName(x);
    return ts;
 }


 t = gid("t")
 l = gid("l")

 document.body.width = w +"px"
 t.style.height = "100%"
 l.style.height = "100%"
 l.style.width = "100%"
 t.style.width = "100%"
 l.style.left = 0;
 t.style.left="0%"
 l.style.top = 0
 t. style.top= 0


 lt = lt.split("")
 h = []
 for (var i in lt) {
     h .push( '<div class="key"' +
         'ontouchstart="keytype(this)">' +
           lt[i] + '</div> ')
 } 

 l.innerHTML = h.join("")

 
 </script>
 </body>
 </html>
	<!doctype html>
	<html>
	<head>


	<meta name = "viewport"
	content = "user-scalable = no, maximum-scale=1.0, initial-scale = 1.0, width = device-width, height = device-height">
	<script>
	lt="qwertyuiopasdfghjklzxcvbnm "
	lt+="1234567890"
	lt+="[]{}<>()?!"
	lt+="+-*/='\":."
	lt+="$&@'#%^~\|•"
	</script>
	<style>
	*{
	margin: 0;
	padding: 0
	}

	#t {
	font-size: 30px;
	overflow: hidden;
	}

	#t div {
	width: 700px;
	}

	#l, #r {
	opacity: .45;

	}
	.pannel {
	position: absolute;
	border: 1px solid orange;
	}

	.key{
	width: 9%;
	display: block;
	float: left;
	height: 30px;
	font-size: 30px;
	border: 1px solid black;
	text-align: center;
	font-family: helvetica;
	text-transform: capitalize;
	}


	</style>
	<script>
	var w = screen.width
	var h = screen.height
	</script>

	</head>
	<body>

	<div id=t class="pannel"></div>
	<div id=l class="pannel board">
	</div>
	<div id=r class="pannel board" >
	</div>

	<script>
	var lines = [[]]
	var line = lines[0];

	var pos = 0
	var ox = 0
	var oy = 0




	function redraw() {
	rows = []
	for (var i = oy; i < lines.length;i++ ){
	line2 = lines[i]
	rows.push(line2.slice(ox, ox+80).join(""))
	}
	rows = "<div>" + rows.join("</div><div>")
	+ "</div>"

	t.innerHTML = rows
	}




	keyboard = true
	function keytype(that) {
	// e.preventDefault()
	var k = that.innerHTML
	if (k == "") {
	var keys = clss("key")
	if (keyboard == true) {
	for (var i=0; i<keys.length;i++) {
	keys[i].style.display = "none"
	}
	that.style.display=""
	keyboard = false
	return;
	} else {

	for (var i=0;i<keys.length;i++) {
	k[i].style.display =""
	}
	}
	}

	if (k == "") {
	line = []
	pos = 0
	lines.push(line)
	return
	}

	if (k == "") {
	pos = pos -1
	if (pos < 0) {

	}
	line.splice(pos,1)
	console. log("delete")
	redraw()
	return;
	}


	line.splice(pos,0,k)
	pos ++
	redraw()
	return false;

	}
	function gid(x) {
	return document.getElementById(x)
	}

	function clss(x) {
	var ts = document.
	getElementsByClassName(x);
	return ts;
	}


	t = gid("t")
	l = gid("l")

	document.body.width = w +"px"
	t.style.height = "100%"
	l.style.height = "100%"
	l.style.width = "100%"
	t.style.width = "100%"
	l.style.left = 0;
	t.style.left="0%"
	l.style.top = 0
	t. style.top= 0


	lt = lt.split("")
	h = []
	for (var i in lt) {
	h .push( '<div class="key"' +
	'ontouchstart="keytype(this)">' +
	lt[i] + '</div> ')
	}

	l.innerHTML = h.join("")


	</script>
	</body>
	</html>