Android M Quick Reply

Memasang kode Android M Quick Reply
Code ini menggunakan CSS dan HTML. Untuk menerapkan kode tersebut Langkah awal Login ke akun blog klik tombol blog baru, buat satubuah link baru  kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut, hapus semua kode template  
ganti dengan kode blank template, yang tersedia pada sumber  berikut ini Get Blank Template edit background warna sesuai keinginan dan klik simpan selesai

Kemudian klik entri halaman baru HTML pada link tersebut
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai

<style class="Mys2010-styles">

html {
  font-size: 100%;
  height: 100%;
  width: 100%;
  outline: none;
}

body {
  background: #00BCD4;
  font-family: 'roboto', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #fff;
  line-height: 26px;
  text-align: left;
  overflow-x: hidden;
  margin: auto;
  width: 100%;
  outline: none;
}
a{
  color:#fff;
  text-decoration: none;
}
.mobile__wrapper{
  position: absolute;
  text-align: center;
  font-size: 24px;
  color:  #FF1493;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
.mobile{
    transform: scale(1);
}

/**************************************
              Mobile
**************************************/
.nexus {
  height: 550px;
  width: 280px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
          display:inline-block;
  background-color: #111111;
  border: 2px solid #000000;
  border-top-left-radius: 200px 25px;
  border-top-right-radius: 200px 25px;
  border-bottom-left-radius: 200px 25px;
  border-bottom-right-radius: 200px 25px;
  box-shadow:1px 1px 8px #333333;
}
.camera {
  position: absolute;
  background-color: #FF0000;
  height: 10px;
  width: 10px;
  border-radius: 10px;
  margin-top: 25px;
  margin-left: 35px;
}
.speaker {
  position: absolute;
  background-color: #0000CD;
  height: 15px;
  width: 15px;
  border-radius: 10px;
  margin-top: 22px;
  margin-left: 130px;
}
.volume {
  background-color: #080808;
  position: absolute;
  height: 75px;
  width: 3px;
  margin-top: 100px;
  margin-left: -3px;
}
.screen{
  position: absolute;
  height: 450px;
  width: 260px;
  left: 10px;
  top: 48px;
  background: #FF9800;
  overflow: hidden;
}
.icon {
  opacity: 0;
  font-size: 200px;
  text-align: center;
  color: rgba(0, 0, 0, 0.2);
  margin: 60px 0;
  cursor: pointer;
}
.reload {
  opacity: 0;
  font-size: 18px;
  color: #fff;
  margin: -60px 0;
}
.download{
  opacity: 0;
  font-size: 50px;
  color: #FFF !important;
  margin: 90px;
}
.author {
  margin: -75px;
  font-size: 16px;
  color: #9E82D0 !important;
}
.reactive {
    opacity: 1;
  -webkit-transition-delay: 2s;
  -webkit-transition: all 3s cubic-bezier(0, 0.02, 0.97, 0.05);
}
/**************************************
              infobar
**************************************/
.info__bar {
  position: relative;
  height: 30px;
  background-color: rgba(0, 0, 0, 0.1);
}
.info__bar i {
  position: relative;
  top: 3px;
  left: 75px;
  color: #fff;
  font-size: 15px;
}
.info__bar .time{
  float: right;
  font-size: 16px;
  margin: 3px 10px 0 0;
  color: #fff;
}
/**************************************
              Notification
**************************************/

.notification{
  position: absolute;
  height: 60px;
  width: 260px;
  background: #4B0082;
  z-index: 2;
  top: -14%;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.23), 0 3px 12px rgba(0, 0, 0, 0.16);
  -webkit-transition: all .2s cubic-bezier(0, 0.02, 0.97, 0.05);
  -webkit-transition-delay: .5s;
}
.active_noti{
    top: 0%;
  -webkit-transition: all .2s cubic-bezier(0, 0.02, 0.97, 0.05);
}
.mys2010 {
  position: absolute;
  height: 45px;
  width: 45px;
  margin: 7px 15px 0 15px;
  background: #4B0082;
  border-radius: 50%;
}
.mys2010:before{
  position: absolute;
  content: "";
  display: block;
  height: 15px;
  width: 15px;
  margin: 25px 0 0 32px;
  border:2px solid #4B0082;
  background: #4B0082;
  border-radius: 50%;
}
.notification .time{
    position: absolute;
    font-size: 10px;
    right: 7px;
    top: -3px;
}
.msg{
  position: absolute;
  font-size: 18px;
  padding: 17px 15px;
  right: 0;
}
.msg i{
  color: red;
}

/**************************************
              Quikreply
**************************************/
.quick__reply{
  position: absolute;
  height: 40px;
  width: 260px;
  background: #fff;
  top: -10%;
  z-index: 1;
  box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);
  -webkit-transition: all .2s cubic-bezier(0, 0.02, 0.97, 0.05);
}
.active{
  top: 13%;
  -webkit-transition: all .2s cubic-bezier(0, 0.02, 0.97, 0.05);
    -webkit-transition-delay: .3s;
}

.material_input {
  position: absolute;
  left: 15px;
  top: 5px;
  border-top: 0;
  border-right: 0;
  border-left: 0;
  border-bottom: 2px solid rgba(102, 102, 102, 0.20);
  width: 70%;

  color: #737373;
  font-size: 17px;
  letter-spacing: 0.5px;
}
.material_input:focus {
  outline: none;
  border-top: 0;
  border-right: 0;
  border-left: 0;
  border-bottom: 2px solid rgba(102, 102, 102, 0);
}
.bar  { 
  position: absolute;
  display: block;
  width: 70%;
  top: 34px;
  left: 15px;
}
.bar:before, .bar:after   {
  content:'';
  height:3px; 
  width:0;
  bottom:1px; 
  position:absolute;
  background:#737373; 
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}
.bar:before {
  left:50%;
}
.bar:after {
  right:50%; 
}
/* active state */
input:focus ~ .bar:before, input:focus ~ .bar:after {
  width:50%;
}

.btn{
  color: #DFDFDF;
  position: absolute;
  right: 15px;
  top: 5px;
  font-size: 25px;
  cursor: pointer;
  height: 35px;
  width: 35px;
  border-radius: 50%;
  line-height: 35px;
}
.btn:hover{
  color: #737373;
}
@media only screen and (min-width:320px) {
  .mobile{
      transform: scale(0.7);
  }
}
@media only screen and (min-width:480px) {
  .mobile{
      transform: scale(0.8);
  }
}
@media (min-width:768px) {
    .mobile{
      transform: scale(1);
  }
}
</style>

<body onload="play()";>
<div class="mobile__wrapper">
<div class="mobile">
<div class="nexus">
<div class="camera">
</div>
<div class="speaker">
</div>
<div class="screen">
<div class="icon" onclick="play()">
<i class="md-notifications "></i>
</div>
<div class="reload">
Cibeber Cimahi</div>
<div class="download">
<i class="md md-cloud-download"></i></a></div>
<div class="author">
</div>
<div class="notification active_noti">
<div class="mys2010">
</div>
<div class="time">
307:308</div>
<div class="msg">
<i class="md md-favorite"></i>I Material Design</div>
</div>

<div class="quick__reply">
<div class="group">
<input type="text" class="material_input" required >
<span class="bar"></span>
<div class="btn">
<i class="md md-send"></i></div>
</div>

<i class="md md-cloud-download"></i></a></div>
<div class="author">

<hand phone js>
<link rel='stylesheet prefetch' href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css'>
<hand phone js end>

<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'>
</script>

<script src='//ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js'>
</script>

<script src='http://cdnjs.cloudflare.com/ajax/libs/mootools-more/1.4.0.1/mootools-more-yui-compressed.js'></script>

<script src="//assets.codepen.io/assets/common/stopExecutionOnTimeout-f961f59a28ef4fd551736b43f94620b5.js">
</script>

<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'>
</script>

<script>
$('.info__bar').on('click', function(){
    $('.notification').addClass('active_noti');
});
$('.notification').on('click', function(){
    $('.quick__reply').toggleClass('active');
});
$('.btn').on('click', function(){
    $('.quick__reply').removeClass('active');
    $('.notification').removeClass('active_noti');
    $('.group').find("input[type=text]").val("");
    $('.reload').addClass('reactive');
    $('.icon').addClass('reactive');
    $('.download').addClass('reactive');
});
$('.icon').on('click', function(){
    $('.notification').addClass('active_noti');
});
function play(){
       var audio = document.getElementById("audio");
       audio.play();
}
</script>

Penjelasan :
Tambahkan code audio player Mp3, copy code berikut :

/* Music */
.player {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    width: 210px;
    height: 100px;
    background: #;
    border-radius: 10px;
    padding: 10px;
    font-size: 16px;
    color: #fff;
    font-family: arial, sans-serif;
}
.player .source-ctrl-container {
    height: 50px;
    width: 50px;
    background: #fff;
    border-radius: 50%;
    float: left;
    position: relative;
    cursor: pointer;
    color: #000;         
    background: #FFCC00; 
}
.player .volume-ctrl-container {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding-top: 10px;
    height: 50px;
    width: 118px;
    float: right;
}
.player .fa-pause {
    position: absolute;
    top: 18px;
    left: 18px;
}
.player .fa-play {
    position: absolute;
    top: 18px;
    left: 20px;
}
.player .time-info {
    clear: both;
    position: relative;
    top: 8px;
    text-align: center;
    font-size: 13px;
}
.player .time-current {
    color: #ffff00;
}
.player .volume-slider {
    display: inline-block;
    height: 2px;
    width: 50px;
    background: blue;
    margin: 0 10px;
    position: relative;
    top: -10px;
}
.player .volume-knob {
    background: #fff;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    position: relative;
    top: -6px;
} 

Letakan diatas code :

</style>

Kemudian copy code berikut :

<script>       
"use strict";
/**
 * Music player
 */

var Player = function(audio_element, options) {

    this.audio_obj = document.id(audio_element);
    this.options = options;

    this.init = function() {
        this.status = 'pause';
        //this.duration = this.audio_obj.duration;
        this.time = '00';
        this.render();
        this.addEvents();
    };

    this.render = function() {

        // source controller
        this.source_ctrl_el = new Element('div.source-ctrl.fa.fa-play');
        this.source_ctrl_button = new Element('div.source-ctrl-container')
            .adopt(this.source_ctrl_el);

        // time info
        this.time_current_el = new Element('span.time-current');
        this.time_duration_el = new Element('span.time-duration');
        var time_info = new Element('div.time-info')
            .adopt(
                this.time_current_el,
                new Element('span.time-current-duration-separator').set('text', ' / '),
                this.time_duration_el
            );

        // volume ctrl
        this.volume_slider = new Element('div.volume-slider');
        this.volume_ctrl = new Element('div.volume-ctrl')
            .adopt(
                new Element('span.fa.fa-2x.fa-volume-off'),
                this.volume_slider.adopt( new Element('div.volume-knob')),
                new Element('span.fa.fa-2x.fa-volume-up')
            );

        var container = new Element('div.player')
            .adopt(
                this.source_ctrl_button,
                new Element('div.volume-ctrl-container').adopt(this.volume_ctrl),
                time_info
            )
            .inject(this.audio_obj, 'after');
    };

    this.addEvents = function() {
        this.audio_obj.load();
        this.audio_obj.addEventListener('loadeddata', function() { 
            this.time_duration_el.set('text', this.toHHMMSS(this.audio_obj.duration));
            this.time_current_el.set('text', this.toHHMMSS(this.audio_obj.currentTime));
        }.bind(this));
        this.source_ctrl_button.addEvent('click', this.sourceCtrlAction.bind(this));

        new Slider(this.volume_slider, this.volume_slider.getElement('.volume-knob'), {
            range: [0, 100],
            initialStep: this.audio_obj.volume * 100,
            onChange: function(value){
                this.audio_obj.volume = value/100;
            }.bind(this)
        });
    };

    this.sourceCtrlAction = function() {
        if(this.status == 'pause') {
            this.play();
        }
        else {
            this.pause();
        }
    };

    this.toHHMMSS = function(s) {
        var sec_num = parseInt(s, 10);
        var hours   = Math.floor(sec_num / 3600);
        var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
        var seconds = sec_num - (hours * 3600) - (minutes * 60);

        if(hours   < 10) { hours   = "0" + hours; }
        if(minutes < 10) { minutes = "0" + minutes; }
        if(seconds < 10) { seconds = "0" + seconds; }

        var time = (hours == '00' ? '' : hours + ':') + minutes + ':' + seconds;

        return time;
    }

    this.play = function() {
        this.time_current_el.set('text', this.toHHMMSS(this.audio_obj.currentTime));
        this.time_ti = setInterval(function() {
            this.time_current_el.set('text', this.toHHMMSS(this.audio_obj.currentTime));
        }.bind(this), 1000);
        this.source_ctrl_el.removeClass('fa-play').addClass('fa-pause');
        this.audio_obj.play();
        this.status = 'play';
    };

    this.pause = function() {
        clearInterval(this.time_ti);
        this.source_ctrl_el.removeClass('fa-pause').addClass('fa-play');
        this.audio_obj.pause();
        this.status = 'pause';
    };
}
var player = new Player('player');
player.init();      
</script>

letakan dibawah code :

function play(){
       var audio = document.getElementById("audio");
       audio.play();
}
</script>

Selanjutnya copy code berikut :

<center>
<audio id="player">
<source src="https://sites.google.com/site/studiedingsongmp3/laguku/Sisa-mys2010.mp3" type="audio/mpeg">
</audio>
<img src="http://findicons.com/files/icons/1035/human_o2/128/audio_headset.png" name="e902" border="0" width="120" height="180" /></a>

letakan dibawah code :

<i class="md md-cloud-download"></i></a></div>
<div class="author">

klik pratinjau untuk melihat hasil,
edit code warna dan ganti link Mp3 sesuai keinginan lalu klik perbarui selesai

Edited by. Myscript2010
Code Music by. Abidibo on Codepen
Android M by. Grapes Theme on Codepen

DEMOSHOW

Category: Android M Quick Reply

Tweet