[jquery] iOs 7 sms app v1.2
Update :
- Được thay đổi tên người nhận + tên mạng điện thoại
- Thêm chức năng chụp ảnh iPhone ngay trên trình duyệt...[sử dụng plugin html2canvas]
- Thêm hướng dẫn sử dụng..
- Fix 1 số lỗi css
- Cuối cùng là mình vẫn không filter html cho input .. và mình vẫn chưa biết XSS là gì
Trọn Bộ Code:
Style Css
body{
background: url(bg.png);
font-family: open sans;
}
.screen {
background: none repeat scroll 0 0 #fff;
border: 1px solid #f1f1f1;
border-radius: 7px;
box-shadow: 0 0 2px #ccc inset;
height: 425px;
left: 21px;
position: absolute;
top: 80px;
width: 239px;
overflow: hidden;
}
.top-bar {
background: none repeat scroll 0 0 #f8f8f8;
border-bottom: 1px solid #ccc;
border-radius: 4px 4px 0 0;
font-size: 10px;
height: 45px;
position: absolute;
width: 100%;
z-index: 999;
text-align: center;
}
.network {
text-align: left;
}
.ball {
background: none repeat scroll 0 0 #000;
border-radius: 10px;
display: inline-block;
height: 6px;
left: 5px;
margin: 0 -1px;
padding: 0;
position: relative;
vertical-align: middle;
width: 6px;
}
.brand {
display: inline-block;
margin-left: 6px;
vertical-align: middle;
}
.signal {
display: inline-block;
margin-right: 4px;
}
.time {
position: absolute;
right: 39%;
text-align: center;
top: 1px;
}
.bat {
display: inline-block;
float: right;
text-align: right;
}
.clr{
clear: both;
margin: 0;
padding: 0;
}
.left-control.title {
color: #308ffd;
display: inline-block;
font-size: 16px;
padding-left: 4px;
padding-top: 7px;
width: 33%;
}
.right-control.title {
color: #308ffd;
display: inline-block;
font-size: 16px;
padding-top: 7px;
text-align: right;
width: 27%;
}
.title {
color: #333;
display: inline-block;
font-size: 16px;
padding-top: 7px;
text-align: center;
width: 33%;
}
.bot-bar {
background: none repeat scroll 0 0 #f7f7f7;
border-top: 1px solid #ccc;
bottom: 0;
box-shadow: 0 1px 3px #ccc inset;
height: 46px;
position: absolute;
width: 100%;
z-index: 999;
}
.camera {
background: url("camera.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
display: inline-block;
height: 37px;
margin-left: 5px;
margin-top: 11px;
width: 16%;
}
.mess-box {
background: none repeat scroll 0 0 #f1f1f1;
border: 1px solid #ccc;
border-radius: 5px;
color: #aaa;
display: inline-block;
font-size: 12px;
padding: 7px 4px;
vertical-align: 16px;
width: 61%;
}
.send-btn {
color: #333;
display: inline-block;
font-size: 10px;
font-weight: bold;
width: 9%;
vertical-align: 16px;
}
.send-btn:hover{
color: #308ffd;
cursor: default;
}
#wrapper{
height: 325px;
overflow: visible;
}
.list {
font-size: 11px;
list-style: none outside none;
overflow: hidden;
padding: 0;
position: absolute;
top: 49px;
width: 100%;
}
.sms {
background: none repeat scroll 0 0 #e6e5eb;
border-radius: 12px;
color: #333;
font-size: 11px;
margin: 7px 0 10px 0;
padding: 13px;
width: 53%;
}
.sms.green {
background: none repeat scroll 0 0 #4fd73b;
color: #fff;
left: 31px;
margin: 0 auto;
position: relative;
text-align: left;
}
/*.green > .tail {
background: url("green-bubble.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
bottom: -9px;
height: 24px;
position: absolute;
right: -9px;
width: 24px;
}*/
.sms.green:after {
background: url("green-bubble.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
bottom: -4px;
content: "";
height: 19px;
position: absolute;
right: -9px;
width: 24px;
}
.sms.grey:before {
background: url("grey-bubble.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
bottom: -6px;
content: "";
height: 21px;
left: -11px;
position: absolute;
width: 22px;
}
.sms.grey {
left: 16px;
position: relative;
}
.on{
background: #fff;
}
.preview {
display: inline-block;
height: 600px;
vertical-align: top;
width: 300px;
}
.help {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
color: #fff;
display: inline-block;
font-size: 11px;
padding: 11px;
vertical-align: top;
width: 300px;
}
.wrap {
background: url("phone.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
display: inline-block;
height: 600px;
margin: 0 20px;
position: relative;
width: 300px;
}
.text {
background: none repeat scroll 0 0 rgba(155, 100, 250, 0.5);
color: #fff;
font-size: 13px;
padding: 16px;
}
background: url(bg.png);
font-family: open sans;
}
.screen {
background: none repeat scroll 0 0 #fff;
border: 1px solid #f1f1f1;
border-radius: 7px;
box-shadow: 0 0 2px #ccc inset;
height: 425px;
left: 21px;
position: absolute;
top: 80px;
width: 239px;
overflow: hidden;
}
.top-bar {
background: none repeat scroll 0 0 #f8f8f8;
border-bottom: 1px solid #ccc;
border-radius: 4px 4px 0 0;
font-size: 10px;
height: 45px;
position: absolute;
width: 100%;
z-index: 999;
text-align: center;
}
.network {
text-align: left;
}
.ball {
background: none repeat scroll 0 0 #000;
border-radius: 10px;
display: inline-block;
height: 6px;
left: 5px;
margin: 0 -1px;
padding: 0;
position: relative;
vertical-align: middle;
width: 6px;
}
.brand {
display: inline-block;
margin-left: 6px;
vertical-align: middle;
}
.signal {
display: inline-block;
margin-right: 4px;
}
.time {
position: absolute;
right: 39%;
text-align: center;
top: 1px;
}
.bat {
display: inline-block;
float: right;
text-align: right;
}
.clr{
clear: both;
margin: 0;
padding: 0;
}
.left-control.title {
color: #308ffd;
display: inline-block;
font-size: 16px;
padding-left: 4px;
padding-top: 7px;
width: 33%;
}
.right-control.title {
color: #308ffd;
display: inline-block;
font-size: 16px;
padding-top: 7px;
text-align: right;
width: 27%;
}
.title {
color: #333;
display: inline-block;
font-size: 16px;
padding-top: 7px;
text-align: center;
width: 33%;
}
.bot-bar {
background: none repeat scroll 0 0 #f7f7f7;
border-top: 1px solid #ccc;
bottom: 0;
box-shadow: 0 1px 3px #ccc inset;
height: 46px;
position: absolute;
width: 100%;
z-index: 999;
}
.camera {
background: url("camera.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
display: inline-block;
height: 37px;
margin-left: 5px;
margin-top: 11px;
width: 16%;
}
.mess-box {
background: none repeat scroll 0 0 #f1f1f1;
border: 1px solid #ccc;
border-radius: 5px;
color: #aaa;
display: inline-block;
font-size: 12px;
padding: 7px 4px;
vertical-align: 16px;
width: 61%;
}
.send-btn {
color: #333;
display: inline-block;
font-size: 10px;
font-weight: bold;
width: 9%;
vertical-align: 16px;
}
.send-btn:hover{
color: #308ffd;
cursor: default;
}
#wrapper{
height: 325px;
overflow: visible;
}
.list {
font-size: 11px;
list-style: none outside none;
overflow: hidden;
padding: 0;
position: absolute;
top: 49px;
width: 100%;
}
.sms {
background: none repeat scroll 0 0 #e6e5eb;
border-radius: 12px;
color: #333;
font-size: 11px;
margin: 7px 0 10px 0;
padding: 13px;
width: 53%;
}
.sms.green {
background: none repeat scroll 0 0 #4fd73b;
color: #fff;
left: 31px;
margin: 0 auto;
position: relative;
text-align: left;
}
/*.green > .tail {
background: url("green-bubble.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
bottom: -9px;
height: 24px;
position: absolute;
right: -9px;
width: 24px;
}*/
.sms.green:after {
background: url("green-bubble.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
bottom: -4px;
content: "";
height: 19px;
position: absolute;
right: -9px;
width: 24px;
}
.sms.grey:before {
background: url("grey-bubble.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
bottom: -6px;
content: "";
height: 21px;
left: -11px;
position: absolute;
width: 22px;
}
.sms.grey {
left: 16px;
position: relative;
}
.on{
background: #fff;
}
.preview {
display: inline-block;
height: 600px;
vertical-align: top;
width: 300px;
}
.help {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
color: #fff;
display: inline-block;
font-size: 11px;
padding: 11px;
vertical-align: top;
width: 300px;
}
.wrap {
background: url("phone.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
display: inline-block;
height: 600px;
margin: 0 20px;
position: relative;
width: 300px;
}
.text {
background: none repeat scroll 0 0 rgba(155, 100, 250, 0.5);
color: #fff;
font-size: 13px;
padding: 16px;
}
Các bạn Lưu ý: up toàn bộ code lên host và để chung cùng một thư mục nhé :)