Executando verificação de segurança...
6
wil01
3 min de leitura ·

Pedido De Namoro🌹♥️💘 (estilo-programador);

CodeOfLove 💻❤️

Descrição

Olá! Se você está aqui, provavelmente se deparou com o título intrigante deste post e está se perguntando sobre o que se trata essa loucura, certo? 😄 Não se preocupe, se estivesse no seu lugar, também faria a mesma pergunta. Mas, aqui vai uma pergunta para você: já pensou em sair da frente da tela do computador para pedir a pessoa amada em namoro? 😏

Bem, claro que para isso você não precisa sair da frente do seu PC. E é por isso que estamos aqui!

O software abaixo é simples, mas o que realmente importa é a intenção, hehe 😊. Você pode personalizá-lo ainda mais, deixando-o do jeito que preferir, então a imaginação é o limite!

Repositório para baixar os arquivos: Clique aqui

Resultado: CodeOfLove 💻❤️

Resultado

Código HTML

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" href="./assets/img/logo-site.png">
    <title>Namora comigo?</title>
    <link rel="stylesheet" href="./assets//css/app.css" />
    <script src="./assets/js/app.js" defer></script>
  </head>
  <body>
    <div class="background-1"></div>
    <div class="background-2"></div>
    <div class="background-3">
      <div class="cta">
        <button class="btn" id="yes">
          <span class="btn-text-one">Sim</span>
          <span class="btn-text-two">Eita! 💕</span>
        </button>
        <button class="btn no">
          <span class="btn-text-one">Não</span>
          <span class="btn-text-two">😅</span>
        </button>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  </body>
</html>

Código CSS

@import url("https://fonts.googleapis.com/css?family=Montserrat&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Montserrat", sans-serif;
  font-weight: bold;
}
:root {
  --main-color: #fd052f;
  --body-color: #020202;
  --text-primary-color: #fff;
  --hover-color: #252323;
}
body {
  display: flex;
  flex-direction: column;
  background-color: var(--body-color);
  height: auto;
  width: 100%;
}
.background-1 {
  height: 100vh;
  width: 100%;
  background: center / cover no-repeat url("../img/background-1.png");
}
.background-2 {
  height: 100vh;
  width: 100%;
  background: center / cover no-repeat url("../img/background-2.png");
  background-attachment: fixed;
}
.background-3 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
  background: center / cover no-repeat url("../img/background-3.png");
}
.cta {
  gap: 20px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.btn {
  width: 140px;
  height: 50px;
  background: linear-gradient(to top, #fd052e53, #fd052e75, #fd052f);
  color: var(--text-primary-color);
  border-radius: 50px;
  border: none;
  outline: none;
  cursor: pointer;
  position: relative;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
.btn span {
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: top 0.5s;
}
.btn-text-one {
  position: absolute;
  width: 100%;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.btn-text-two {
  position: absolute;
  width: 100%;
  top: 150%;
  left: 0;
  transform: translateY(-50%);
}
.btn:hover {
  background: #fff;
  color: var(--main-color);
}
.btn:hover .btn-text-one {
  top: -100%;
}
.btn:hover .btn-text-two {
  top: 50%;
}
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-thumb {
  background-color: var(--main-color);
  border-radius: 20px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::selection {
  background-color: var(--main-color);
}

Código JS

var btn = document.querySelector(".no");
var position = 0;
var isAnimating = false;

btn.addEventListener("click", function() {
    if (!isAnimating) {
        isAnimating = true;
        position = position === 0 ? 150 : 0;
        btn.style.transform = `translate(0px, ${position}px)`;
        btn.style.transition = "all 0.2s ease";

        setTimeout(function() {
            isAnimating = false;
        }, 200);
    }
});

btn.addEventListener("mouseover", function() {
    if (!isAnimating) {
        isAnimating = true;
        position = position === 0 ? 150 : 0;
        btn.style.transform = `translate(0px, ${position}px)`;
        btn.style.transition = "all 0.2s ease";

        setTimeout(function() {
            isAnimating = false;
        }, 200);
    }
});

const sim = document.getElementById('yes');

sim.addEventListener("click", () => {

let timerInterval
Swal.fire({
  title: 'Obrigado 😍',
  html: 'Prometo lhe fazer feliz. 💘',
  timer: 2000,
  timerProgressBar: true,
  didOpen: () => {
    Swal.showLoading()
    const b = Swal.getHtmlContainer().querySelector('b')
    timerInterval = setInterval(() => {
      b.textContent = Swal.getTimerLeft()
    }, 100)
  },
  willClose: () => {
    clearInterval(timerInterval)
  }
}).then((result) => {
  if (result.dismiss === Swal.DismissReason.timer) {
    console.log('I was closed by the timer')
  }
})
});

Tem mais uma coisinha que não contei antes, com este código JS vai ser um pouco difícil ela recusar, pois ele não permite que o mouse fique em cima do botão nem que seja clicado, caso o usuário seja mobile hehe 🤠.

alert('Abraço!');

Repositório para baixar os arquivos: Clique aqui

Resultado: CodeOfLove 💻❤️

3
felipet65

Gostei bastante!

Fiz algumas alterações no texto e enviei pra minha namorada!
Hospedei no S3 da AWS e enviei o link pra ela, ela amou!

<!DOCTYPE html>
 <html lang="pt-BR">
 <head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Casa comigo?</title>
 </head>
 <header>
  <div class="cabeçalho">
   <h3>Não aceito "não" como resposta 😔</h3>
  </div>
</header>
<body>
  <h1>Você aceita casar comigo?</h1>
  <div class="yes-or-no">
  <button class="yes" onclick="tanks()">Sim :)</button>
  <button class="no" onclick="not()">Não :(</button>
  </div>
</body>
<script src="script.js"></script>
</html>

E deixei interativo para celular também.

var btn = document.querySelector(".no");
var position

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
    btn.addEventListener("touchstart", function() {
        position ? (position = 0) : (position = 150);
        btn.style.transform = `translate(${position}px,0px)`;
        btn.style.transition = "all 0.3s ease";
      });
      
      btn.addEventListener("touchend", function() {
        position ? (position = 0) : (position = 150);
        btn.style.transform = `translate(${position}px,0px)`;
        btn.style.transition = "all 0.3s ease";
      });
  } else {
    btn.addEventListener("mouseover", function() {
        position ? (position = 0) : (position = 150);
        btn.style.transform = `translate(${position}px,0px)`;
        btn.style.transition = "all 0.3s ease";
        });
  }

function tanks() {
alert("Eu também te amo e aceito casar com vc! :)")
}  

function not() {
alert("Você nem ta maluca de não aceitar, volte lá e clique no sim! :/")
}

Aqui eu deixei o texto mais responsivo pra tela de celular.

body {
    margin: 0;
    padding: 0;
    background: rgb(241, 23, 23);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 100vh;
    font-family: Arial, Helvetica, sans-serif;
    }
    
    header {
    position: fixed;
    top: 0;
    padding: 5px;
    align-items: center;
    text-align: center;
    background: #121212;
    color: white;
    width: 50%;
    font-size: 1rem;
    font-weight: bold;
    }
    
    .yes-or-no {
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    }
    
    .yes-or-no .yes {
    font-weight: bold;
    margin-right: 5px;
    background: rgb(132, 207, 132);
    color: white;
    font-size: 1rem;
    border: 2px solid black;
    border-radius: 8px;
    padding: 5px;
    text-transform: uppercase;
    }
    
    .yes-or-no .no {
    margin-left: 5px;
    font-weight: bold;
    background: rgb(216, 106, 106);
    color: white;
    font-size: 1rem;
    border-radius: 8px;
    border: 2px solid black;
    padding: 5px;
    text-transform: uppercase;
    }
    
    
    h1 {
    color: #fff;
    display: block;
    font-size: 2em;
    margin-block-start: 0.67em;
    margin-block-end: 0.67em;
    margin-inline-start: 10%;
    margin-inline-end: 10%;
    font-weight: bold;
    }
1
1
BrunoCamargo

nao conhecia addEventListener("touchend" vivendo e aprendendo kakakak eu tambem fiz algumas modificações quando peguei esse codigo.. vou adpatar ele pra mobile tambem agora.

1
1
0
1
wil01
Autor
Autor

Olá felipe , vi que você atualizou o código JS para ter melhor interação com celulares touch e testei ele,ficou muito bom sinal!
Porém está com um erro de position ao carregar o alerta , como se tivesse um reload na página,por isso atualizei o codigo anterior e deixarei aqui para você testar com o celular. Abraço!!

add um id no botão que está escrito não chamado "

Js

var btn = document.querySelector(".no");
var position
btn.addEventListener("click", function() {
position ? (position = 0) : (position =     150);
btn.style.transform =    `translate(${position}px,0px)`;
btn.style.transition = "all 0.3s ease";
});
function tanks() {
alert("tanks :)")
}  
function not() {
document.getElementsByClassName('no').style.translateX = ("150px");
}
1
1
1
1
wil01
Autor
Autor

boa noite, só você rodar o código fonte na sua máquina, não sabe como? me chama no Discord e compartilha a tela "pit_pranks"

1
0
1
1
1
0
1
1
1
1
1
1
vickyy

Opa, queria saber como faço pra executar esses codigos no vscode, nao sei nada de programação mas achei super legal esse pedido e queria tentar, por favor me ajudar

1
wil01
Autor
Autor

boa noite, você por acaso teria DISCORD?
Se sim, envie-me pedido lá para que eu possa ajudar: "PIT#9875"

1
1
1
1
1
1
1
0
2
2
1
1
0
1
gaguta123

Olá, tudo bem? Eu queria mudar a frase do pedido de namoro e fazer refletir num linkzinho como você fez do datemew.netlify.app. Como eu faço isso? Tentei rodar de algumas formas no VSCode, mas não consigo gerar um link e refletir em web.

1
1
-1
-1
-1
-1
-1