Wapego[Events] Share vài code ego 20/08

<div class="phdr">Upload ảnh</div>
<div class="menu">
<button onclick="document.querySelector('#input_frm').click();return false;" id="up_info"><b>Upload ảnh bìa lên wap</b></button><input style="visibility: collapse; width: 0px;display:none" type="file" onchange="upload(this.files[0])" id="input_frm">
 
 
</div>
<script type="text/javascript">
function upload(file) {
    if (!file || !file.type.match(/image.*/)) return;
document.querySelector("#up_info").innerHTML='Đang upload ảnh..';
 
    var fd = new FormData();
    fd.append("image", file);
    var xhr =  new XMLHttpRequest()||new ActiveXObject("Microsoft.XMLHTTP")||new ActiveXObject("Msxml2.XMLHTTP");
    xhr.open("POST", "http://uploads.im/api?upload");
    xhr.onload = function() {
document.querySelector("#up_info").innerHTML='Đã upload thành công^^';
        var link = JSON.parse(xhr.responseText);
var slink=((link.data.thumb_url).replace('/t/','/d/'));
var http =  new XMLHttpRequest()||new ActiveXObject("Microsoft.XMLHTTP")||new ActiveXObject("Msxml2.XMLHTTP");
var url = "main.php?[ses]&id=ch_topic_h&uid={{form_url|split('&uid=')[1][0:6]}}";
var params = "text="+slink;
http.open("POST", url, true);
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
 
http.onreadystatechange = function() {
    if(http.readyState == 4 && http.status == 200) {
        window.location.href=window.location.href;
    }
}
http.send(params);
 
    }
    xhr.send(fd);
}
</script>
{{message_list}}

<div class="list1">
  <img class="ava" src="{{message}}" style="max-height:360px">
  <form method="post" action="main.php?id=ch_topic_h&uid=230444&uuid=[user_id]&amp;back_url=%2Fuser_info.php%3Fuid%3D[user_id]"><input name="text" value="{{message}}" type="hidden"><input type="submit" class="topic cat_blue" style="margin-top:4px;padding:5px;" value="Chọn"></form>
</div>

{%set u=api.u.get(api.r.get('uid'))%}
<div class="phdr"><span class="{{u.levelCss}}">{{u.nick}}</span>  - <a style="color:#fff" href="http://lovemoon.wap.mu/main.php?f=3527907"><i class="fa fa-arrow-circle-o-up"></i> Tải ảnh bìa</a>  <span style="float:right"></span></div>
 
<div class="timeline-header-wrapper">    <div class="cover-container">
        <div class="cover-wrapper"> 
 
 
          <img src="{{message_list|default('http://vietkey.wap.mu/files/1049880/coveredit.png')}}" alt="cover" style="width:100%;max-height:360px">
 
 
 
 
            <div class="cover-progress"></div> </div> 
 
        <div class="avatar-wrapper">
            <img src="{{u.profilephotourl|replace({"ic=3":'ic=3&w=500&h=500',"preset_size=5":'preset_size=0',"m=3":'m=7',"m=5":'m=7',"ic=4":'ic=3&w=500&h=500'})}}" id="edit-avatar" data-id="24995457" alt="">
 
<div class="avatar-progress-wrapper"></div>
        </div>  <div class="timeline-name-wrapper">              <div id="ava_abc"><span class="{{u.levelCss}}">{{u.nick|raw}}</span>  </div>{%if "now"|date('U')-u.loged>=300%}<font color="red">OFF</font>{%else%}<font color="green"><img src="http://vietkey.wap.mu/files/1049880/online.png">Đang hoạt động</font>{%endif%}<div class="status_p"> {{u.name|default(u.nick|raw)|raw}}</div>    </div>
    </div>
 
    <div class="timeline-statistics-wrapper">
        <table border="0" width="100%" cellpadding="0" cellspacing="0">
        <tbody><tr>
            <td class="statistic" align="center" valign="middle">
    <a href="user_info.php?uid={{u.uid}}">Tường</a>
</td>
            <td class="statistic" align="center" valign="middle">
    <a href="/user_info.php?uid={{u.uid}}&ref=info">Giới thiệu</a>
</td>
 
            <td class="statistic" align="center" valign="middle">
    <a href="/friends.php?id=user_friends&uid={{u.uid}}">Bạn bè</a>
</td>
 
<td class="statistic" align="center" valign="middle">
    <a href="/user_info.php?uid={{u.uid}}&ref=album">Album ảnh</a>
</td>
 
            <td class="statistic" align="center" valign="middle">
                <a href="/user_info.php?uid={{u.uid}}&ref=character">Nhân vật</a>
            </td>
 
        </tr>
        </tbody></table>
    </div>
</div>

{{message}}

<!--Album Ảnh-->
<style type="text/css">
  img.ava {
    padding: 4px;
    background-color: #fff;
    border: 1px solid rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
 
  .topic.cat_blue {
    background-color: #03A9F4;
    border: 1px solid #0288D1;
    color: #FFF;
    line-height: 14px;
    vertical-align: baseline;
    white-space: nowrap;
    padding: 1px 4px 2px;
}
  .list1 {
    background-color: #fff;
    border: 1px solid #EFEFF0;
    margin: 0;
    padding: 3px 4px 4px;
}
  .fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);
}
  .fa-arrow-circle-o-up:before {
    content: "\f01b";
}
  .cover-container, .cover-wrapper {
    position: relative;
}
  .timeline-header-wrapper {
    background: #fff;
    margin: 0;
    padding: 0;
}
 
.timeline-header-wrapper .timeline-name-wrapper {
    position: absolute;
    left: 190px;
    bottom: 7px;
    display: inline-block;
    color: rgba(255, 255, 255, .5);
    text-shadow: 0 0 3px rgba(0, 0, 0, .9);
    font-size: 19px;
    font-weight: 500;
}
 
 
#ava_abc {
    font-size: 16pt;
    font-weight: 600;
    color: white;
    margin-top: 6px;
}
 
 
.status_p {
    border: 2px #fff solid;
    position: relative;
    word-wrap: break-word;
    color: #FFF;
    font-weight: bold;
    padding: 1px;
    margin: 7px 3px 0 4px;
    font-size: small;
    opacity: 2;
    padding: 3px;
    background-color: rgba(255, 255, 255, 0.4);
}
 
  .status_p:after {
    content: '';
    display: block;
    position: absolute;
    top: -9px;
    left: 6px;
    width: 0;
    height: 0;
    border-color: transparent transparent #fff #FFFFFF;
    border-style: solid;
    border-width: 4px;
}
 
  .timeline-statistics-wrapper .statistic {
    background: #fff;
    font-weight: 500;
    padding: 10px 15px;
    border-right: 1px solid #e5e6e7;
    border-bottom: 2px solid #ffffff;
    height: 10px;
}
  .timeline-statistics-wrapper .statistic:hover {
    border-bottom-color: #009688;
}
  .timeline-header-wrapper .avatar-wrapper img {
    width: 155px;
    height: 155px;
    background: #fff;
    padding: 4px;
    border-radius: 100%;
}
  .timeline-header-wrapper .avatar-wrapper {
    position: absolute;
    left: 15px;
    bottom: -27px;
    display: inline;
    border-radius: 100%;
}
  .cover-wrapper {
    width: 100%;
}
.cover-container, .cover-wrapper {
    position: relative;
}
 
.timeline-statistics-wrapper {
    padding-left: 182px;
    border-width: 0 1px 1px;
    border-style: solid;
    border-color: #d4d5d4;
}
.album_img{
border: 1px solid #dcdcdc;
    border-radius: 2px;
    padding: 1px;
    box-shadow: 1px 1px 3px 1px #928686;
    background-color: #fff;
}
.phdr {
    background-color: #009688;
    border: 1px solid;
    border-color: #009688;
    padding: 5px;
    color: #fff;
    margin-top: 4px;
}
a:link, a:visited {
    color: #00796B;
    text-decoration: none;
}
.showlike {
    background-color: #fff;
    border: 1px solid;
    border-color: #E2E0E0;
    padding: 5px;
    margin-top: 5px;
    line-height: 1.5;
}
textarea {
    width: 99%;
    max-width: 640px;
}
.text_cmt {
    border-top: 1px solid #D7EDFC;
    color: #000;
    padding: 5px;
    background-color: #fff;
}
.avatar {
    margin: 2px;
    background: #fff;
    padding: 2px;
    border: 1px solid #EFEFEF;
    border-radius: 2px;
}
img {
    max-width: 100%;
    max-height: auto;
}
.box_info_cmt {
    background-color: #fff;
    border: 1px solid #D2D1D1;
    color: #34617e;
    margin-top: 4px;
    padding: 3px 4px;
}
.prefix.prefixRed {
    color: #fff;
    background-color: #FE4646;
    border-color: #F88;
}
.prefix {
    background: transparent url(http://nhanhnao.xy/images/form-button-white-25px.png) repeat-x top;
    padding: 0 4px;
    margin: 2px 0;
    border: 1px solid transparent;
}
.textarea {
    padding: 8px;
    margin: 0;
    word-wrap: break-word;
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
    cursor: auto;
    border: 0 none;
    max-width: 896px;
}
@font-face {
  font-family: 'FontAwesome';
  src: url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.eot?v=4.6.3');
  src: url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.eot?#iefix&v=4.6.3') format('embedded-opentype'), url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.woff2?v=4.6.3') format('woff2'), url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.woff?v=4.6.3') format('woff'), url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.ttf?v=4.6.3') format('truetype'), url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.svg?v=4.6.3#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
.wcontainer>.center div:not([class]), .hide, a[href='pm.php'], a[href='pm.php']+br, a[href$='id=menu'], a[href$='id=menu']+br, a[href$='id=forum_sets'], a[href$='id=forum_sets']+br, img[src$='bullet_blue.png'], .center a[href*='read='], .center a[href*='read=']+br, .center a[href*='id=add_post'], .center a[href*='id=add_post']+br, a[href*='id=t_online'], a[href*='id=t_online']+br, a[href*='id=t_online']+br+br, form[action='forums.php'], form[action='forums.php']+.left+.center, a[href='forums.php'], a[href='forums.php']+br, a[href="/main.php?"], a[href="main.php"]+br, a[href='main.php'], a[href*="id=forgot"]+br, a[href*='forums.php?id=online'], a[href*='forums.php?id=online']+br, a[href*='pm.php']+br, a[href*='pm.php']+br+br, .left:empty, form[action$="id=upload"]+br {
    display: none;
}
body, td, input, textarea {
    font-family: Arial,Tahoma,sans-serif;
    font-size: small;
}
body {
    background: #fff url(images/bckg_page.png) repeat 0 0;
    color: #000;
    margin: 0 auto;
    padding: 0;
    max-width: 800px;
}
* {
    box-sizing: border-box;
}
* {
    word-wrap: break-word;
}
.redactor_box {
    border: 1px solid #D7EDFC;
    border-bottom: none;
    position: relative;
    overflow: hidden;
}
.redactor_toolbar {
    background: url(/images/form-button-white-25px.png) repeat-x scroll center top #F0F7FC;
    padding: 0 0 0 2px;
    margin: 0;
    border-bottom: 1px solid #D7EDFC;
    position: relative;
    left: 0;
    top: 0;
    line-height: 0;
    list-style: outside none none;
    overflow: hidden;
}
 
.redactor_btn_group {
    background: url(/images/form-button-white-25px.png) repeat-x scroll center top #F0F7FC;
    padding: 1px;
    margin: 0;
    border: 1px solid #D7EDFC;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 1px 1px 1px rgba(255,255,255,0.5);
    outline: medium none;
    list-style: none outside none;
    margin: 2px 2px 2px 2px;
    float: left;
}
 
 
ul {
    margin: 0;
    padding-left: 20px;
}
.body {
    background-color: #EBEBEC;
    padding: 4px;
    border: 1px solid #DEDEE0;
    box-shadow: 0 0 10px #343434;
}
nav.header {
    position: relative;
    top: 0;
    padding: 10px 15px;
    margin-bottom: 6px;
    background-color: #009688;
    border-color: #009688;
    box-shadow: -1px 0 13px 0 rgba(50,50,50,0.45);
    color: #fff;
    text-align: center;
    font-size: 20px;
}
.menu, .topmenu, .noti {
    background: #fff;
    -moz-border: 1px solid;
    border: 1px solid;
    -moz-border-color: #DCDBDB #CACACA;
    border-color: #DCDBDB #CACACA;
    border-top: none;
    padding: 6px;
    color: #00796B;
    margin-top: 0;
}
.title {
    background-color: #009688;
    border: 1px solid;
    border-color: #009688;
    padding: 5px;
    color: #fff;
    margin-top: 4px;
    text-align: left;
}
.footer-nhanhnao {
    background: #607D8B;
    border: 1px solid #46627F;
    color: #fff;
    margin-top: 4px;
    padding: 3px 0 4px 4px;
    text-align: center;
}
.button-up {
    background: #607D8B;
    border: 1px solid #fff;
    padding: 5px;
    margin: 3px;
    color: #fff;
    text-align: center;
}
.post:hover {
    background: #fe2f22;
}
.button:hover {
    background: #0079a5;
}
.post {
    background: #FE5F55;
}
.button {
    min-width: 15em;
}
.button {
    display: inline-block;
    font-family: "Montserrat","Trebuchet MS",Helvetica,sans-serif;
    -webkit-font-smoothing: antialiased;
    position: relative;
    padding: 6px;
    padding-right: 2em;
    background: #009ed8;
    border: none;
    color: #fff;
    transition: .2s;
}
.button:before {
    background: rgba(0,0,0,0.1);
}
.button:before, .button:after {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    padding-top: inherit;
    padding-bottom: inherit;
    width: 2.5em;
    content: "^";
    font-family: 'FontAwesome',sans-serif;
    font-size: 1em;
    text-align: center;
    transition: .2s;
}
 
.post:hover:after {
    -webkit-animation: bounceright .3s alternate ease infinite;
    animation: bounceright .3s alternate ease infinite;
}
.post:after {
    content: "^;
}
.button:before, .button:after {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    padding-top: inherit;
    padding-bottom: inherit;
    width: 2.5em;
    content: "^";
    font-family: 'FontAwesome',sans-serif;
    font-size: 1em;
    text-align: center;
    transition: .2s;
}
@-webkit-keyframes bounceright{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(3px)}}@-webkit-keyframes wiggle{from{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(30deg)}}@keyframes bounceright{from{transform:translateX(0)}to{transform:translateX(3px)}}@keyframes wiggle{from{transform:rotate(0deg)}to{transform:rotate(30deg)}}
 
</style>