Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <head>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=PT+Mono" rel="stylesheet">
  </head>

<body>
  <div class="phone-body">
    <div class="volume-on-off-button"></div>
    <div class="screen-body">

    <div class="message-body">
      <div class="scroll">
      <div class="message-to-show">
        
        <div class="date-body"><span class="date-on">7 maio</span></div>
        <div class="message-box-sun">
           <div class="suns-message">         
             Olá, seja bem-vindo ao meu projeto de Dia das Mães, para fazer funcionar basta clicar aqui embaixo na caixa de texto, cada vez que clicar uma serie de frases novas aparecerão, conversas tipicas entra mãe e filho(a). Esse é o meu presente pra minha mãe, te amo mãe. 💝
       <div class="time-send"><div class="time-send-box">16:20</div></div>
      </div>
       </div>
      </div>
      </div>
      
    </div>
    <div class="top">
      <div class="bar">
        <span class="time">16:20</span>
        <i class="fas fa-wifi wifi icon-bar"></i>
        <i class="tidy material-icons icon-bar">battery_full</i>
        
      </div>
      <i class="material-icons back-button">arrow_back</i>
      <span class="glyphicon glyphicon-heart heart"></span>
      <div class="contact">
        Mãe ♥</br>
        <span class="status">online<span>
          
      </div>
          <i class="more material-icons">more_vert</i>
      </div>
    <div class="bottom">
     <i class="material-icons emoji">tag_faces</i>
     <div class="new-message">
       <div class="bar-text">
       </div>
     </div>
      <span class="glyphicon glyphicon-paperclip paperclip-button"></span>
      <span class="glyphicon glyphicon-send send-button"></span>
    </div>
    </div>
  </div>
</body>
              
            
!

CSS

              
                *{
  box-sizing:border-box;
}

.phone-body,.bottom,.top,.message-body,
.new-message,.new-message:after,.new-message:before,.bottom:after,.phone-body:after,.phone-body:before,.bar-text,.send-button,.paperclip-button,.emoji,.bar,.icon-bar,.back-button,.contact,.more,.heart,.volume-on-off-button,.volume-on-off-button:after,.time{
  position:absolute;
  margin:auto;
}

.time{
  top:0;
  left:7px;
  color:white;
  font-size:12px;
}

.time-send{
  display:inline;
  margin-top:5px;
  margin-left:5px;
  float:right;
  font-size:10px;
  color:grey;
}

body{
  background-color: #ffb3b3;
}

.phone-body:after{
  content:'';
  left:11px;
  bottom:11px;
  width:6px;
  height:6px;
  border-radius:50%;
  background-color:#777;
}
.phone-body:before{
  content:'';
  left:9px;
  bottom:9px;
  width:10px;
  height:10px;
  border-radius:50%;
  background-color:#555;
}


.heart{
  top:22px;
  left:50px;
  color:red;
  background-color:white;
  border-radius:50%;
  width:30px;
  height:30px;
  line-height:30px;
  text-align:center;
}

.back-button{
  left:5px;
  bottom:12px;
  color:white;
}

.screen-body{
  position:absolute;
  margin:auto;
  top:3px;
  left:0;
  right:0;
  width:274px;
  height:520px;
  border-radius:13px;
  background-color: #fff;
  overflow:hidden;
}

.wifi{
  top:2px;
  bottom:0;
  right:35px;
}

.status{
  font-size:12px;
}

.more{
  top:25px;
  right:0;
  color:white;
}

.contact{
  color:#fff;
  width:30%;
  top:22px;
  right:10px;
  left:0;
  line-height:15px;
}

.tidy{
  color:rgb(120,120,120);
  top:0;
  bottom:0;
  right:5px;
  transform:rotate(90deg); 
}

.date-body{
  width:100%;
  text-align:center;
}

.date-on{
  background-color:rgba(0,0,0,0.3);
  min-width:60px;
  border-radius:10px;
  margin-bottom:15px;
  margin-top:10px;
  padding:0 10px;
  display:inline-block;
  color:white;
  font-weight:400;
}

.message-box-mom{
  text-align:left;
  width:100%;
}

.message-box-sun{
  text-align:right;
  width:100%;
  
}

.moms-message,.suns-message,.loading{
  margin-bottom:10px;
  position:relative;
  padding:6px;
  background-color:blue;
  max-width:80%;
  display: inline-block;
  border-radius:5px;
  font-size:13px;
}
.moms-message,.loading{
  border-top-left-radius:0;
  margin-left:0;
  background-color:white;
}

.moms-message{
  text-align:left;
}

.suns-message{
  text-align:left;
  border-top-right-radius:0;
  background-color:#E1FEC6;
}

.loading{
  
}

.dot{
  display:inline-block;
  width:8px;
  height:8px;
  background-color:#aaa;
  border-radius:50%;
  margin-left:2px;
}
.dot:nth-of-type(1){
  animation: animation-dot 1.5s infinite;
}
.dot:nth-of-type(2){
  animation: animation-dot 1.5s infinite 0.5s;
}
.dot:nth-of-type(3){
  animation: animation-dot 1.5s infinite 1s;
}

.moms-message:after,.suns-message:after,.loading:after{
  content:'';
  width:0;
  height:0;
  position:absolute;
  top:0px;
  border-bottom:8px solid transparent;
}

.suns-message:after{
  border-left:8px solid #E1FEC6;
  right:-7px;
  
}

.moms-message:after,.loading:after{
  border-right:8px solid white;
  left:-7px; 
}

.bar{
  background-color:#7EC1FF;
  width:100%;
  height:15px;
}

.icon-bar{
  color:rgb(255,255,255);
  font-size:10px;
}

.phone-body{
  top:0;
  bottom:0;
  left:0;
  right:0;
  width:280px;
  height:550px;
  border-radius:15px;
  background-color: #444;
}

.volume-on-off-button{
  left:-2px;
  top:80px;
  width:2px;
  height:80px;
  border-top-left-radius:2px;
  border-bottom-left-radius:2px;
  background-color:#444;
}

.volume-on-off-button:after{
   border-top-left-radius:2px;
  border-bottom-left-radius:2px;
  top:90px;
  content:'';
  width:2px;
  height:40px;
  background-color:#444;
}
.emoji{  
  top:5px;
  bottom:0;
  left:5px;
}

.top{
  background-color:#66b3ff;
  top:0;
 width:100%;
  height:60px;
}
.bottom{
  bottom:0;
  width:100%;
  height:35px;
}
.bottom:after,.top:after{  
  content:'';
  position:absolute;
  width:100%;
  height:2px;
  background-image:linear-gradient(to top,rgb(200,200,200),transparent);
}
.bottom:after{
  top:-2px;
}

.send-button{
  top:0;
  line-height:30px;
  bottom:0;
  right:10px;
}



.send-button:hover,.paperclip-button:hover{
  color:#0099ff;
}

.paperclip-button{
  right:35px;
  line-height:30px;
}

.glyphicon-send,.paperclip-button,.emoji{
  font-size:20px;
  color:rgb(150,150,150);
  cursor:default;
}

.top:after{
  bottom:0;
}
.message-body{ 
  background-image:url(https://i.pinimg.com/originals/51/ed/c0/51edc046eb80046ee4755ee71d0f19ca.jpg);
  background-size: contain;
  width:100%;
  position:relative;
  margin:auto;
  height: 100%;
  bottom:35px;
  background-color: #fff;
}

.message-to-show{
  position:absolute;
  bottom:0;
  margin-bottom:0;
  padding-left:15px;
  padding-right:15px;
  width:100%;
  animation:stick 0.3s forwards;
}

.new-message{
 top:0;
  bottom:0;
  left:30px;
  width:70%;
  height:30px;
  background-color:#fff;
}
.bar-text{
  content:'';
  height:70%;
  width:2px;
  top:0;
  bottom:0;
  left:5px;
  background:#0099ff;
} 
.new-message:before{
  content:'Click para uma nova conversa';
  font-size:13px;
  top:0;
  bottom:0;
  line-height:32px;
  left:6px;
  color:rgb(150,150,150);
}

.check-view{
  display:inline-block;
  height:5px;
  width:10px;
  border-left:1.2px solid grey;
  border-bottom:1.2px solid grey;
  transform:rotate(-45deg);
  position:relative;
  bottom:-3px;
  margin-right:1px;
}
.check-view:after{
  content:'';
  display:inline-block;
  height:2px;
  width:10px;
  border-left:1.2px solid grey;
  border-bottom:1.2px solid grey;
  margin-bottom:4px;
  margin-left:2px;
  
}

.stoned-photo{
  border-radius:3px;
  margin-bottom:5px;
}

@keyframes check{

  to{
    border-color:blue;
  }
}

@keyframes animation-dot{
  
  from{
    opacity:1
  }
  50%{
    opacity:0
  }
  top{
    opacity:1
  }
  
}


@media only screen and (max-width:500px){
  
  
  
  .screen-body{
    top:0;
    width:100%;
    height:100%;
    border-radius:0px;
  }
  .phone-body{
    width:100%;
    height:100%;
  }
  .phone-body:after{
    display:none;
  }
  
}
              
            
!

JS

              
                // returns first element selected - $('input[name="food"]')
var $ = document.querySelector.bind(document);
// return array of selected elements - $$('img.dog')
var $$ = document.querySelectorAll.bind(document);

let messageShow = $('.message-to-show');
let newMessage = $('.new-message');
let validQuote = [];
let stonedHour = $(".time");
let date = 0;
let loading = document.createElement('div');
loading.classList.add('loading');
let dot = document.createElement('div');
dot.classList.add('dot');
loading.appendChild(dot);
loading.appendChild(dot.cloneNode());
loading.appendChild(dot.cloneNode());
let validStoned = 0;

stonedHour.addEventListener("click",stonedSun);

function stonedSun(){
  if(validStoned == 5){
    stonedMessages();
    messageShow.innerHTML = `<div class="date-body"><span class="date-on">7 maio</span></div>
        <div class="message-box-sun">
           <div class="suns-message">         
             OPAAAAAAAA, se você caiu aqui para ver algumas mensagens de mães de MACONHEIROSSS(ASSSS) então entrou no lugar certo, clique aqui embaixo para carregar as mensagens.
       <div class="time-send"><div class="time-send-box">16:20</div></div>
      </div>
       </div>`;
    stonedHour.removeEventListener("click",stonedSun);
   }
  validStoned++;
}

let quotes = [
  [{message:'Mãe, vou voltar tarde hoje, pode deixar a porta aberta pra mim?', classe:'sun',time:1000,check:'check-view',hour:'13:20',dayon:'on',day:'1 junho'},
    {message:'Aqui não é hotel não! Trate de voltar antes das 23h ou vai ficar pra fora.' ,classe:'mom',time:'1000',time:4000,check:'',hour:'13:21',dayon:'off',day:''}],
      [{message:'Bom dia, Você pode arrumar o seu quarto? Parece que passou um furacão lá. &#128530;', classe:'mom',time:3000,check:'',hour:'09:00',dayon:'on',day:'4 maio'},
    {message:'Ta bom, mãe',classe:'sun',time:'1000',time:1000,check:'check-view',hour:'09:00',dayon:'off',day:''}],
  [{message:"Oi, mãe, me da dinheiro pra sair com a galera?", classe:'sun',time:500,check:'check-view',hour:'18:13',dayon:'on',day:'24 abril'},{message:"Dinheiro não nasce em árvore, sabia?!", classe:'mom',time:2000,check:'',hour:'18:13',dayon:'off',day:''}],[{message:"Te amo &#9829;</span>",classe:"mom",time:1000,check:'',hour:'12:54',dayon:'on',day:'2 outubro'},{message:"&#128525", classe:'sun',time:500,check:'check-view',hour:'12:54',dayon:'off',day:''}],[{message:"Mãe, você viu minha aquela minha camisa florida?", classe:'sun',time:500,check:'check-view',hour:'18:13',dayon:'on',day:'25 dezembro'},{message:"Ta na segunda gaveta.", classe:'mom',time:2000,check:'',hour:'18:13',dayon:'off',day:''},{message:"Já vi lá, não achei", classe:'sun',time:1000,check:'check-view',hour:'18:14',dayon:'off',day:''},{message:"Se eu for ai e achar você vai ser ver comigo.", classe:'mom',time:2000,check:'',hour:'18:14',dayon:'off',day:''},{message:"Achei já", classe:'sun',time:1000,check:'check-view',hour:'18:14',dayon:'off',day:''}],[{message:"Desce agora e vem lavar essa louça que você deixou.", classe:'mom',time:1000,check:'',hour:'11:38',dayon:'on',day:'1 janeiro'},{message:"So deixa eu terminar essa partida que eu vou.", classe:'sun',time:2000,check:'check-view',hour:'11:38',dayon:'off',day:''},{message:"Eu vou contar até 3.", classe:'mom',time:2000,check:'',hour:'11:39',dayon:'off',day:''}],[{message:"&#128518 &#128519 &#128526 &#128550 &#128590 &#128580 &#128530 &#128591 &#128520 &#128554 &#128528 &#128523 &#128542 &#128510 &#128535 &#128571", classe:'mom',time:3000,check:'',hour:'22:03',dayon:'on',day:'11 abril'}],[{message:"Mãe, to indo na farmácia, volto daqui a pouco.", classe:'sun',time:1000,check:'',hour:'11:38',dayon:'on',day:'17 novembro'},{message:"Leva um casaquinho porque tá frio.", classe:'mom',time:2000,check:'check-view',hour:'11:38',dayon:'off',day:''}],[{message:"Então, recebemos o seu boletim hoje, você não tem vergonha da sua nota em matemática?", classe:'mom',time:1000,check:'',hour:'11:38',dayon:'on',day:'10 novembro'},{message:"Mas mãe,as provas estavam muito difíceis, todo mundo se deu mal também.", classe:'sun',time:2000,check:'check-view',hour:'11:38',dayon:'off',day:''},{message:"E eu por acaso sou mãe de todo mundo? Eu sou sua mãe", classe:'mom',time:2000,check:'',hour:'11:38',dayon:'off',day:''}],[{message:"Aqui, seu pai e eu conversamos e decidimos que é melhor você nao ir nessa festa", classe:'mom',time:1000,check:'',hour:'11:38',dayon:'on',day:'25 maio'},{message:"Mas mãe, todo mundo vai estar lá", classe:'sun',time:2000,check:'check-view',hour:'11:38',dayon:'off',day:''},{message:"Então se todo mundo pular da ponte você vai pular também?", classe:'mom',time:2000,check:'',hour:'11:38',dayon:'off',day:''}],[{message:"O almoço está pronto", classe:'mom',time:1000,check:'',hour:'18:02',dayon:'on',day:'6 agosto'},{message:"Já vou", classe:'sun',time:2000,check:'check-view',hour:'18:02',dayon:'off',day:''},{message:"Vem comer senão vai esfriar e você vai comer assim.", classe:'mom',time:2000,check:'',hour:'18:02',dayon:'off',day:''}],[{message:"Já fez o que eu te pedi?", classe:'mom',time:1000,check:'',hour:'10:52',dayon:'on',day:'30 julho'},{message:"Já vou fazer mãe, você ta me enchendo o saco com isso", classe:'sun',time:2000,check:'check-view',hour:'11:38',dayon:'off',day:''},{message:"Tá pensando que tá falando com quem? Me respeita que não sou teus amiguinhos não.", classe:'mom',time:3000,check:'',hour:'10:52',dayon:'off',day:''},{message:" E me responde de novo assim, que eu te quebro os dentes", classe:'mom',time:4000,check:'',hour:'10:53',dayon:'off',day:''}],[{message:"Sabia que a filha de Gerson ajuda ele em casa? E você so fica ai, com a bunda no sofa mexendo no celular.", classe:'mom',time:3000,check:'',hour:'08:38',dayon:'on',day:'25 janeiro'}],[{message:"Mãe, vou dormir na casa do Erick hoje", classe:'sun',time:1000,check:'',hour:'10:52',dayon:'on',day:'30 julho'},{message:"Ok", classe:'mom',time:2000,check:'check-view',hour:'11:38',dayon:'off',day:''},{message:"Me manda o numero da casa e da mãe dele.", classe:'mom',time:3000,check:'',hour:'10:52',dayon:'off',day:''},{message:"Mãe, eu já estou grande pra isso, achei que já tinhamos conversado sobre isso.", classe:'sun',time:4000,check:'',hour:'10:53',dayon:'off',day:''},{message:"Mas você sempre vai ser o meu bebezinho. Mamae te ama.", classe:'mom',time:4000,check:'',hour:'10:53',dayon:'off',day:''}],[{message:'<img class="stoned-photo" src="http://www.mensagensdebomdia.com.br/wp-content/uploads/xbom-dia-para-voce.jpg.pagespeed.ic.n3_NUKaowe.webp" alt="" width="100%" styles:"border-radius:3px"> Bom dia, flor do dia', classe:'mom',time:3000,check:'',hour:'07:54',dayon:'on',day:'22 outubro'}],[{message:'Esqueceu que tem mãe é?', classe:'mom',time:3000,check:'',hour:'07:54',dayon:'on',day:'22 outubro'},{message:"Desculpa, ando com muito coisa pra fazer", classe:'sun',time:4000,check:'',hour:'10:53',dayon:'off',day:''},{message:'Mãe é uma só! Depois eu morro e vem chorar no meu caixão', classe:'mom',time:3000,check:'',hour:'19:24',dayon:'',day:''},{message:'Que drama', classe:'sun',time:3000,check:'check-view',hour:'19:24',dayon:'',day:''},{message:'Te carreguei 9 meses não foi pra isso, então trate de achar tempo pra sua mãezinha', classe:'mom',time:3000,check:'',hour:'19:24',dayon:'',day:''},{message:'Desculpa  😞', classe:'sun',time:3000,check:'check-view',hour:'19:24',dayon:'',day:''}],[{message:'Por que você não me atende?', classe:'mom',time:3000,check:'',hour:'07:54',dayon:'on',day:'22 outubro'},{message:"Desculpa, não vi a chamada", classe:'sun',time:4000,check:'',hour:'10:53',dayon:'off',day:''},{message:'Ah é? Fica o dia todo como o celular enfiado na cara e agora nao viu?', classe:'mom',time:3000,check:'',hour:'19:24',dayon:'',day:''},{message:'Tem celular pra que então?', classe:'mom',time:3000,check:'',hour:'19:24',dayon:'',day:''}]
];
console.log(quotes.length);
let bar = document.querySelector('.bar-text');
setInterval(function(){
  bar.style.opacity = bar.style.opacity == "0" ? "1" : "0";
},800);


class MessageView{
  
 constructor(elemento){
   this._elemento = elemento;
 }
  
  _template(model){
    return `${model.messageList.map(
         n => `
<div class="date-body"><span class="date-${n[4]}">${n[5]}</span></div>
<div class="message-box-${n[1]}">
           <div class="${n[1]}s-message">
       ${n[0]}<div class="time-send"><div class="time-send-box">${n[3]} <span class="${n[2]}"></span></div></div>
      </div>
       </div>`).join('')}`;
  }
  
  update(model){
    this._elemento.innerHTML = this._template(model);
  }
}

class MessageList{
  constructor() {
    this._messageList = [];
  }
  
  get messageList(){
    return [].concat(this._messageList);
  }
  
  addMessage(message,classe,check,hour,dayon,day){
    this._messageList.push([message,classe,check,hour,dayon,day]);
  }
}

class Message {
  constructor(message,classe){
    this._message = message;
    this._classe = classe;

  }
  get message(){
    return this._message;
  }
  get classe(){
    return this._classe;
  }
}

class MessageController{
  
  constructor(){
    
    this._messageList = new MessageList();
    this._messageView = new MessageView($(".message-to-show"));
  }
  
  
  add(message,classe,check,hour,dayon,day){ 
    this._messageList.addMessage(message,classe,check,hour,dayon,day);
    this._messageView.update(this._messageList,date);
  }
}

var controller = new MessageController();
    

newMessage.addEventListener('click', clickMessage);


function clickMessage(){

//removo o Evento para evitar que a pessoa fique clicando chamando varias mensagens.
  date++;
  newMessage.removeEventListener('click', clickMessage);

// Está com 2 quotes então o random é somente para 2.
  var randomNumber = Math.floor(Math.random() * quotes.length);


  if(validQuote.length == quotes.length){

  } else{

// aqui é para evitar que apareça uma msg igual, estragaria o clima
    
    while(validQuote.includes(randomNumber)){
      randomNumber = Math.floor(Math.random() * quotes.length);
    }
    validQuote.push(randomNumber);
    var pos = 0;
    var quote = quotes[randomNumber];
    var quoteLength = quote.length;

// aqui a magica acontece:
  function addQuote(){
    setTimeout(function(){
    
 controller.add(quote[pos].message,quote[pos].classe,quote[pos].check,quote[pos].hour,quote[pos].dayon,quote[pos].day);
    pos++;
    if(pos == quote.length){
      newMessage.addEventListener('click', clickMessage);
      return;
    }
    validMomOrSun();
    },quote[pos].time);   
  }
  function validMomOrSun(){   
    if(quote[pos].classe == 'mom'){
        setTimeout(function(){
          messageShow.appendChild(loading);  
          addQuote();
         },1000);            
    } else {    
          addQuote();  
    }
  }

  validMomOrSun();
  }
}

function stonedMessages(){
  quotes = [];
  quotes = [
  [{message:'<img class="stoned-photo" src="http://4.bp.blogspot.com/-WzXxMZHcj5E/UR4mzVcB3MI/AAAAAAAADLE/bFI9G0V6fcg/s1600/75303_316084371826099_1393475848_n.jpg" alt="" width="100%" styles:"border-radius:3px"> 16:20 galeraaaaaaaa', classe:'sun',time:1000,check:'check-view',hour:'13:20',dayon:'on',day:'20 abril'},
    {message:'O que é isso?' ,classe:'mom',time:'1000',time:3000,check:'',hour:'13:21',dayon:'off',day:''}, {message:'Opa' ,classe:'sun',time:'1000',time:1000,check:'check-view',hour:'13:21',dayon:'off',day:''},{message:'Mandei errado, mãe, esse é um experimento da faculdade que a gente ta desenvolvendo.' ,classe:'sun',time:'1000',time:2000,check:'check-view',hour:'13:21',dayon:'off',day:''}],[{message:'Vimos que você entrou quieto, não falou com ninguém...', classe:'mom',time:3000,check:'',hour:'13:20',dayon:'on',day:'20 abril'},{message:'Só to cansado', classe:'sun',time:1500,check:'check-view',hour:'13:20',dayon:'',day:''},{message:'Tava meio lesado, você não ta usando de novo não né?', classe:'mom',time:2000,check:'',hour:'13:20',dayon:'',day:''},{message:'Ta falando do que mãe?', classe:'sun',time:1500,check:'check-view',hour:'13:20',dayon:'',day:''},{message:'Maconha!', classe:'mom',time:2000,check:'',hour:'13:20',dayon:'',day:''},{message:'Quero!', classe:'sun',time:2000,check:'check-view',hour:'13:20',dayon:'',day:''}],[{message:'<img class="stoned-photo" src="http://s2.glbimg.com/Hrl5a8sh5cjZlEERP9Z0W-85O7w=/620x465/s.glbimg.com/jo/g1/f/original/2017/02/04/whatsapp_image_2017-02-04_at_10.35.351.jpeg" alt="" width="100%" styles:"border-radius:3px"> Que merda é essa?', classe:'mom',time:1000,check:'',hour:'13:20',dayon:'on',day:'20 abril'},
    {message:'Mãe, não é o que você ta pensando' ,classe:'sun',time:3000,check:'check-view',hour:'13:21',dayon:'off',day:''}, {message:'Quando você chegar em casa a gente vai ter uma conversa' ,classe:'mom',time:1000,check:'',hour:'13:21',dayon:'off',day:''}],[{message:'Encontrei aquele matinho de novo no seu quarto', classe:'mom',time:2000,check:'',hour:'13:20',dayon:'on',day:'20 abril'},
    {message:'Não criei filho pra fumar maconha!' ,classe:'mom',time:3000,check:'',hour:'13:21',dayon:'off',day:''}],[{message:'Sabia que maconha destroi os neuronios? Acho bom você não estar usando algo tão destrutivo' ,classe:'mom',time:2000,check:'',hour:'13:21',dayon:'off',day:''},{message:'Isso é mito mãe! Da onde você tirou isso?' ,classe:'sun',time:1000,check:'check-view',hour:'13:21',dayon:'off',day:''},{message:'http://www.jesusamatodosque</br>naofumammaconha.com.br/</br>como-a-maconha-pode-acabar-com-60-%-do-cerebro-da-pessoa' ,classe:'mom',time:3000,check:'',hour:'13:21',dayon:'off',day:''}]];
}










              
            
!
999px

Console