Skip to content

❤️ #2463

Open
Open
❤️#2463

Description

@danielsandelirio-ux
danielsandelirio-ux
opened on Aug 1, 2026

Error code

ERRW:ST1.0

Were you logged in?

Yes

Your username (if logged in)

Danielsandelirio

Your HTML

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>Para a dona do meu pensamento 💜</title>
  
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;0,700;1,400&family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&display=swap" rel="stylesheet">

  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html, body {
      width: 100vw;
      max-width: 100%;
      overflow-x: hidden !important;
      background-color: #0d0714;
      background: radial-gradient(circle at top, #1a0b2e 0%, #090312 100%);
      color: #ffffff;
      font-family: 'Plus Jakarta Sans', sans-serif;
      min-height: 100vh;
    }

    /* Container Rígido sem Overflow */
    .container {
      width: 100%;
      max-width: 100%;
      padding: 20px 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 0 auto;
    }

    /* Ícone no Topo */
    .main-heart {
      font-size: 2.8rem;
      color: #a77bfe;
      text-shadow: 0 0 20px rgba(167, 123, 254, 0.6);
      margin-bottom: 8px;
      animation: pulse 2.5s infinite ease-in-out;
    }

    @keyframes pulse {
      0%, 100% { transform: scale(1); opacity: 0.9; }
      50% { transform: scale(1.06); opacity: 1; filter: drop-shadow(0 0 12px #a77bfe); }
    }

    /* Título Principal */
    .title {
      font-family: 'Playfair Display', serif;
      font-size: 1.5rem;
      font-weight: 700;
      text-align: center;
      line-height: 1.25;
      color: #f3ebff;
      margin-bottom: 12px;
    }

    /* Subtítulo da Data */
    .date-badge {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 0.7rem;
      color: #bfa8e8;
      background: rgba(138, 92, 246, 0.12);
      padding: 6px 12px;
      border-radius: 20px;
      border: 1px solid rgba(167, 123, 254, 0.25);
      margin-bottom: 18px;
    }

    /* Grade do Contador */
    .counter-grid {
      display: flex;
      gap: 10px;
      margin-bottom: 14px;
    }

    .counter-card {
      background: rgba(35, 18, 62, 0.5);
      border: 1px solid rgba(167, 123, 254, 0.25);
      border-radius: 16px;
      width: 72px;
      height: 72px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      backdrop-filter: blur(8px);
    }

    .counter-number {
      font-size: 1.4rem;
      font-weight: 700;
      color: #ffffff;
      line-height: 1;
    }

    .counter-label {
      font-size: 0.58rem;
      font-weight: 600;
      color: #a78bfa;
      letter-spacing: 1px;
      margin-top: 4px;
    }

    /* Relógio Digital */
    .time-pill {
      background: rgba(30, 15, 52, 0.7);
      border: 1px solid rgba(167, 123, 254, 0.2);
      padding: 5px 16px;
      border-radius: 20px;
      font-size: 0.78rem;
      font-weight: 600;
      letter-spacing: 2px;
      color: #d8c3ff;
      margin-bottom: 12px;
    }

    /* Subtexto do Total de Dias */
    .total-days {
      font-size: 0.72rem;
      color: #b39ddb;
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .total-days span {
      font-weight: 700;
      color: #ffffff;
    }

    /* Divisória Decorativa */
    .divider {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin-bottom: 20px;
    }

    .divider-line {
      height: 1px;
      flex: 1;
      background: linear-gradient(90deg, transparent, rgba(167, 123, 254, 0.4), transparent);
    }

    .divider-heart {
      color: #a77bfe;
      font-size: 0.7rem;
    }

    /* CARD DE MÚSICA REVELAÇÃO COM TRECHO */
    .music-reveal-card {
      width: 100%;
      background: rgba(30, 15, 52, 0.65);
      border: 1px solid rgba(167, 123, 254, 0.3);
      border-radius: 24px;
      padding: 22px 18px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      margin-bottom: 24px;
      backdrop-filter: blur(10px);
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    }

    .music-card-icon {
      font-size: 2.2rem;
      color: #a77bfe;
      margin-bottom: 6px;
    }

    .music-card-title {
      font-family: 'Playfair Display', serif;
      font-size: 1.35rem;
      font-weight: 700;
      color: #ffffff;
      margin-bottom: 2px;
    }

    .music-card-artist {
      font-size: 0.75rem;
      color: #bfa8e8;
      margin-bottom: 12px;
    }

    /* Trecho da Música */
    .music-quote {
      font-size: 0.8rem;
      font-style: italic;
      color: #e5d8ff;
      line-height: 1.5;
      background: rgba(167, 123, 254, 0.1);
      border-left: 3px solid #a77bfe;
      padding: 10px 14px;
      border-radius: 0 12px 12px 0;
      margin-bottom: 16px;
      width: 100%;
      max-width: 320px;
    }

    .music-card-btn {
      width: 100%;
      max-width: 260px;
      background: linear-gradient(135deg, #a77bfe, #8a5cf6);
      color: #ffffff;
      border: none;
      padding: 12px 20px;
      border-radius: 30px;
      font-size: 0.88rem;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      box-shadow: 0 4px 15px rgba(138, 92, 246, 0.4);
      transition: all 0.3s ease;
    }

    .music-card-btn:active {
      transform: scale(0.96);
    }

    .music-notes-deco {
      margin-top: 12px;
      font-size: 0.75rem;
      color: rgba(167, 123, 254, 0.5);
      letter-spacing: 6px;
    }

    /* Galeria de Fotos */
    .moments-section {
      width: 100%;
      margin-bottom: 22px;
      text-align: center;
    }

    .moments-title {
      font-family: 'Playfair Display', serif;
      font-size: 1.3rem;
      font-weight: 700;
      color: #f3ebff;
      margin-bottom: 4px;
    }

    .moments-subtitle {
      font-size: 0.72rem;
      color: #bfa8e8;
      margin-bottom: 12px;
    }

    .carousel-container {
      position: relative;
      width: 100%;
      height: 280px;
      border-radius: 18px;
      overflow: hidden;
      border: 1px solid rgba(167, 123, 254, 0.3);
      box-shadow: 0 8px 20px rgba(0,0,0,0.4);
      margin-bottom: 10px;
      background-color: #120722;
    }

    .carousel-slide {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: none;
    }

    .carousel-slide.active {
      display: block;
    }

    .badge {
      position: absolute;
      top: 8px;
      right: 8px;
      background: rgba(12, 5, 23, 0.65);
      border: 1px solid rgba(167, 123, 254, 0.3);
      color: #f0e6ff;
      padding: 3px 8px;
      border-radius: 10px;
      font-size: 0.62rem;
      backdrop-filter: blur(4px);
    }

    .nav-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(23, 12, 42, 0.6);
      color: #e5d8ff;
      border: 1px solid rgba(167, 123, 254, 0.3);
      width: 30px;
      height: 30px;
      border-radius: 50%;
      cursor: pointer;
      font-size: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(4px);
      z-index: 2;
    }

    .prev { left: 8px; }
    .next { right: 8px; }

    .dots-container {
      position: absolute;
      bottom: 8px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 5px;
    }

    .dot {
      width: 5px;
      height: 5px;
      background: rgba(255, 255, 255, 0.4);
      border-radius: 50%;
      transition: 0.3s;
    }

    .dot.active {
      background: #a77bfe;
      width: 14px;
      border-radius: 8px;
    }

    .thumbnails-grid {
      display: flex;
      gap: 6px;
      justify-content: flex-start;
      overflow-x: auto;
      padding-bottom: 6px;
      width: 100%;
    }

    .thumb {
      width: 48px;
      height: 48px;
      border-radius: 10px;
      object-fit: cover;
      cursor: pointer;
      opacity: 0.5;
      border: 2px solid transparent;
      flex-shrink: 0;
    }

    .thumb.active {
      opacity: 1;
      border-color: #a77bfe;
    }

    /* Carta */
    .letter-box {
      width: 100%;
      background: rgba(23, 12, 42, 0.65);
      border: 1px solid rgba(167, 123, 254, 0.22);
      border-radius: 18px;
      padding: 18px 14px;
      box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.5);
      margin-bottom: 20px;
    }

    .letter-text {
      font-size: 0.82rem;
      line-height: 1.6;
      color: #e5d8ff;
      font-style: italic;
      text-align: center;
      font-weight: 300;
    }

    .letter-text p {
      margin-bottom: 10px;
    }

    .letter-signature {
      display: block;
      margin-top: 8px;
      font-weight: 600;
      color: #f0e6ff;
    }

    /* Rodapé */
    .footer {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
    }

    .footer-brand {
      display: flex;
      align-items: center;
      gap: 5px;
      font-family: 'Playfair Display', serif;
      font-size: 0.88rem;
      font-weight: 700;
      color: #f0e6ff;
    }

    .footer-brand span {
      color: #a77bfe;
    }

    .footer-tagline {
      font-size: 0.6rem;
      color: #8c73b8;
    }
  </style>
</head>
<body>

  <div class="container">
    
    <div class="main-heart">💌</div>

    <h1 class="title">Para a dona do meu<br>pensamento</h1>

    <div class="date-badge">
      📅 Juntos desde 2 de Junho de 2026
    </div>

    <div class="counter-grid">
      <div class="counter-card">
        <span class="counter-number">2</span>
        <span class="counter-label">MESES</span>
      </div>
      <div class="counter-card">
        <span class="counter-number">0</span>
        <span class="counter-label">DIAS</span>
      </div>
    </div>

    <div class="time-pill" id="live-clock">
      12 : 56 : 33
    </div>

    <div class="total-days">
      ✨ São <span>60</span> dias de amor ✨
    </div>

    <div class="divider">
      <div class="divider-line"></div>
      <div class="divider-heart">💜</div>
      <div class="divider-line"></div>
    </div>

    <!-- CARD DE MÚSICA COM TRECHO -->
    <div class="music-reveal-card">
      <div class="music-card-icon">🎵</div>
      <h2 class="music-card-title">Te Assumi Pro Brasil</h2>
      <p class="music-card-artist">Matheus & Kauan</p>

      <div class="music-quote">
        "E o que na vida ninguém fez<br>
        Você fez em menos de um mês..." 🎶
      </div>
      
      <button class="music-card-btn" id="musicBtn" onclick="toggleMusic()">
        <span id="playIcon">▷</span> <span id="btnText">Ouvir nossa música</span>
      </button>

      <div class="music-notes-deco">♫ ♫ ♫</div>
    </div>

    <!-- Áudio da música (Te Assumi Pro Brasil) -->
    <audio id="bgMusic" loop>
      <source src="https://cdns-preview-d.dzcdn.net/stream/c-d34938a1ef6f06a4b12330a84d4b1ee6-3.mp3" type="audio/mp3">
      Seu navegador não suporta áudio.
    </audio>

    <!-- SEÇÃO NOSSOS MOMENTOS -->
    <div class="moments-section">
      <h2 class="moments-title">Nossos Momentos</h2>
      <p class="moments-subtitle">Memórias que guardamos no coração</p>

      <div class="carousel-container">
        <div class="badge" id="badge">1 / 8</div>

        <!-- Fotos -->
        <img class="carousel-slide active" src="https://i.postimg.cc/KkkYykGv/IMG-20260801-093008.jpg" alt="Momento 1">
        <img class="carousel-slide" src="https://i.postimg.cc/FddKQdrK/Screenshot-2026-08-01-09-29-10-076-com-whatsapp.jpg" alt="Momento 2">
        <img class="carousel-slide" src="https://i.postimg.cc/1gYzTcQQ/Screenshot-2026-08-01-09-29-30-799-com-whatsapp.jpg" alt="Momento 3">
        <img class="carousel-slide" src="https://i.postimg.cc/8JJCVJp5/Screenshot-2026-08-01-09-29-37-707-com-whatsapp.jpg" alt="Momento 4">
        <img class="carousel-slide" src="https://i.postimg.cc/CZ6KtHgY/Screenshot-2026-08-01-10-56-30-254-com-miui-gallery.jpg" alt="Momento 5">
        <img class="carousel-slide" src="https://i.postimg.cc/4KF3MbgG/Screenshot-2026-08-01-10-56-51-760-com-miui-gallery.jpg" alt="Momento 6">
        <img class="carousel-slide" src="https://i.postimg.cc/d7S0XmYK/Screenshot-2026-08-01-10-57-57-627-com-miui-gallery.jpg" alt="Momento 7">
        <img class="carousel-slide" src="https://i.postimg.cc/56cXb3FM/Screenshot-2026-08-01-10-59-17-930-com-miui-gallery.jpg" alt="Momento 8">

        <button class="nav-btn prev" onclick="changeSlide(-1)">❮</button>
        <button class="nav-btn next" onclick="changeSlide(1)">❯</button>

        <div class="dots-container" id="dotsContainer"></div>
      </div>

      <!-- Miniaturas -->
      <div class="thumbnails-grid">
        <img class="thumb active" src="https://i.postimg.cc/KkkYykGv/IMG-20260801-093008.jpg" onclick="goToSlide(0)">
        <img class="thumb" src="https://i.postimg.cc/FddKQdrK/Screenshot-2026-08-01-09-29-10-076-com-whatsapp.jpg" onclick="goToSlide(1)">
        <img class="thumb" src="https://i.postimg.cc/1gYzTcQQ/Screenshot-2026-08-01-09-29-30-799-com-whatsapp.jpg" onclick="goToSlide(2)">
        <img class="thumb" src="https://i.postimg.cc/8JJCVJp5/Screenshot-2026-08-01-09-29-37-707-com-whatsapp.jpg" onclick="goToSlide(3)">
        <img class="thumb" src="https://i.postimg.cc/CZ6KtHgY/Screenshot-2026-08-01-10-56-30-254-com-miui-gallery.jpg" onclick="goToSlide(4)">
        <img class="thumb" src="https://i.postimg.cc/4KF3MbgG/Screenshot-2026-08-01-10-56-51-760-com-miui-gallery.jpg" onclick="goToSlide(5)">
        <img class="thumb" src="https://i.postimg.cc/d7S0XmYK/Screenshot-2026-08-01-10-57-57-627-com-miui-gallery.jpg" onclick="goToSlide(6)">
        <img class="thumb" src="https://i.postimg.cc/56cXb3FM/Screenshot-2026-08-01-10-59-17-930-com-miui-gallery.jpg" onclick="goToSlide(7)">
      </div>
    </div>

    <!-- CARTA -->
    <div class="letter-box">
      <div class="letter-text">
        <p>Desde a primeira vez que eu te vi aqui, já percebi que minha vida jamais seria a mesma. Cada momento com você do meu lado é uma bênção; cada sorriso, cada abraço, seu olhar ilumina minha vida.</p>
        <p>Enquanto para alguns a chuva serve apenas para molhar, com você é o momento perfeito para te amar. Você é o meu amor, minha paz, minha melhor amiga. O que na vida ninguém fez, você fez em menos de um mês. Espero ficar a vida toda com você.</p>
        <p>Te amo mais do que tudo. ❤️</p>
        <span class="letter-signature">Tchê tchê.</span>
      </div>
    </div>

    <div class="footer">
      <div class="footer-brand">
        <span>💜</span> DearYou
      </div>
      <div class="footer-tagline">Crie sua própria página de amor</div>
    </div>

  </div>

  <script>
    // Controle do Player de Música
    const music = document.getElementById('bgMusic');
    const playIcon = document.getElementById('playIcon');
    const btnText = document.getElementById('btnText');
    let isPlaying = false;

    function toggleMusic() {
      if (isPlaying) {
        music.pause();
        playIcon.textContent = "▷";
        btnText.textContent = "Ouvir nossa música";
        isPlaying = false;
      } else {
        music.play().then(() => {
          playIcon.textContent = "❚❚";
          btnText.textContent = "Pausar música";
          isPlaying = true;
        }).catch(e => {
          console.log("Erro ao tocar áudio:", e);
        });
      }
    }

    function updateClock() {
      const now = new Date();
      const hours = String(now.getHours()).padStart(2, '0');
      const minutes = String(now.getMinutes()).padStart(2, '0');
      const seconds = String(now.getSeconds()).padStart(2, '0');
      document.getElementById('live-clock').textContent = `${hours} : ${minutes} : ${seconds}`;
    }
    setInterval(updateClock, 1000);
    updateClock();

    let currentIndex = 0;
    const slides = document.querySelectorAll('.carousel-slide');
    const thumbs = document.querySelectorAll('.thumb');
    const badge = document.getElementById('badge');
    const dotsContainer = document.getElementById('dotsContainer');

    slides.forEach((_, i) => {
      const dot = document.createElement('div');
      dot.classList.add('dot');
      if (i === 0) dot.classList.add('active');
      dotsContainer.appendChild(dot);
    });

    const dots = document.querySelectorAll('.dot');

    function updateCarousel() {
      slides.forEach((slide, index) => {
        slide.classList.toggle('active', index === currentIndex);
      });

      thumbs.forEach((thumb, index) => {
        thumb.classList.toggle('active', index === currentIndex);
      });

      dots.forEach((dot, index) => {
        dot.classList.toggle('active', index === currentIndex);
      });

      badge.textContent = `${currentIndex + 1} / ${slides.length}`;
    }

    function changeSlide(direction) {
      currentIndex = (currentIndex + direction + slides.length) % slides.length;
      updateCarousel();
    }

    function goToSlide(index) {
      currentIndex = index;
      updateCarousel();
    }
  </script>

</body>
</html>

Your JavaScript

-

Your CSS

-

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions