<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="themes/jquery/css/themes/default/jquery.mobile-1.4.5.min.css">
	<link rel="stylesheet" href="themes/home/css/fonts/font-awesome.min.css">
    <link rel="stylesheet" href="themes/home/css/ui-box.css">
    <link rel="stylesheet" href="themes/home/css/ui-base.css">
    <link rel="stylesheet" href="themes/home/css/ui-color.css">
    <link rel="stylesheet" href="themes/home/css/icon.css">
    <link rel="stylesheet" href="themes/home/css/control.css">
    <link rel="stylesheet" href="themes/home/css/main.css">
	<style type="text/css">
		/**
	 * 	iphone气泡
	 */
	
	.bubble {
		position: relative;
		display: inline-block;
		min-width: 30px;
		max-width: 300px;
		word-break: break-all;
		word-wrap: break-word;
		min-height: 22px;
		margin-bottom: 20px;
		padding: 6px 8px;
		border:solid #FFFFFF 1px;
	}
	.bubble:before {
		content: '';
		display: block;
		font-size: 0;
		width: 0;
		height: 0;
		border-width: 6px;
		position: absolute;
		bottom: -12px;
		left: 12px; 
	}
	.bubble:after {
		content: '';
		display: block;
		font-size: 0;
		position: absolute;
		bottom: -9px;
		left: 13px;
		width: 0;
		height: 0;
		border-width: 5px;
	}
	.bubble .content {
		position: relative;
		padding: 0 4px;
	}
	.bubble .content:before {
		content: '';
		position: absolute;
		margin: auto;
		top: -5px;
		left: 0;
		width: 100%;
		height: 12px;
	}
	
	
	/**
	 * 	绿色气泡
	 */
	#wraper1 {
		color: #f5f4f4;
		position: relative;
		width: 100%;
		text-align:left;
		margin-top:20px;
		
	}
	#wraper1 .span {
		color: #000;
	}
	#wraper1 .bubble {
		background: #ADACAC;
	}
	#wraper1 .bubble:after {
		border-color: #ADACAC transparent transparent #ADACAC;
		border-style: solid dashed dashed solid;
	}
	#wraper1font{
		text-align: left;
		padding-left:20px;
	}
	/**
	 * 	绿色气泡
	 */
	#wraper2 {
		color: #f5f4f4;
		position: relative;
		width: 100%;
		text-align:right;
		margin-top:20px;
	}
	#wraper2 .bubble {
		background: #218DD5;
	}
	#wraper2 .span {
		color: #000;
	}
	#wraper2 .bubble:before {
		left: auto;
		right: 12px;
		border-color: #218DD5 #218DD5 transparent transparent;
		border-style: solid solid dashed dashed;
	}
	#wraper2 .bubble:after {
		left: auto;
		right: 13px;
		border-color: #218DD5 #218DD5 transparent transparent;
		border-style: solid solid dashed dashed;
	}
	#wraper2font{
		text-align: right;
		padding-right:20px;
	}
	</style>
	<link rel="stylesheet" href="themes/css/list.css">
	<link rel="stylesheet" href="themes/css/ui-box.css">
	<script src="themes/jquery/js/jquery.js"></script>
	<script src="themes/jquery/js/jquery.mobile-1.4.5.min.js"></script>
</head>
<body class="um-vp c-wh " ontouchstart>
	<div data-role="page" data-quicklinks="true" class="ub ub-ver ">
      <div data-role="header" id="header" data-position="fixed" data-fullscreen="true" data-tap-toggle="false" >
	  <div class="uh bc-text-head ub bc-head">
                <div class="nav-btn" id="nav-left"  onClick="javascript:window.location='sms.php'">
                    <div class="fa fa-angle-left fa-2x"></div>
                </div>
                <h1 class="ut ub-f1 ulev-3 ut-s tx-c" tabindex="0"><?php echo get_realname($receiveperson);?></h1>
                <div class="nav-btn nav-bt" id="nav-right" >
                    <!--<div class="ub-img icon-adduser umw2 umh4"></div> -->
                </div>
            </div>
	
	<div style="top: 0;left: 0;position: absolute;margin-top:48px;padding-left:5px; padding-right:10px;" class=" ub-ver ub-fh bc-bg">
		<div class="ub ub-ac">
                <div class=" tx-c bc-text ub-f1 ulev-app1">
                <input id="text-basic" placeholder="请输入内容..." name="text-basic" value="" type="text" >
                </div>
                <div class="nav-btn" id="nav-left" onClick="sms_add();">
               <div class="ui-btn " style="width:45px; height:10px; line-height:10px; font-size:18px;">发 送</div>
                </div>
            </div>
            
        </div> 
	
	
	</div>
		<!-- /header -->
  <div data-role="content" style="padding:140px 6px 10px 3px;" id="content">
		<div  id="sms_note"></div>
  </div>
<!-- /content --> 
	


	</div><!-- /page -->
 <script type="text/javascript"> 
    window.onload = function(){ 
        var heg=document.getElementById("header").offsetHeight+35;
		var content=document.getElementById("content"); 
		content.style.cssText="margin-top:"+heg+"px;";
		sms_list();
    }
	function sms_list(){
		jQuery.ajax({
			  type: 'GET',
			  url: 'sms.php?do=ajax&receiveperson=<?php echo $receiveperson;?>',
			  success: function(data){
			    $('#sms_note').html(data);
			  	//window.location.reload();
			  }
		   });
		  window.setTimeout(sms_list,10*5*1000);
	}
	function sms_add(){
		var note = document.getElementById('text-basic').value;
		jQuery.ajax({
			  type: 'GET',
			  url: 'sms.php?do=add&receiveperson=<?php echo $receiveperson;?>&content='+note,
			  success: function(data){
			    //alert(data);
				sms_list();
				document.getElementById('text-basic').value='';
			  	//window.location.reload();
			  }
		   });
	}
</script> 
</body>
</html>
