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 💻❤️

felipet65 há 2 anos

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;
    }

kaylane ano passado

Oláa, alguem pode me ajudar é a primeira vez que tento algo do tipo kkkk

BrunoCamargo há 2 anos

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.

wil01 há 2 anos

hehe, aprendendo sempre, programação é isso 💘

BrunoCamargo há 2 anos

peguei a ideia desse post e fiz um projeto bem elaborado, Muito bom

wil01 há 2 anos

show Bruno 🥳

wil01 há 2 anos

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"); }

washpess ano passado

como faço para executar os códigos pelo vscode, sou novo nisso. pode ajudar?

vickyy ano passado

Eu tambem queria saber, nao consegui achar nenhum video que explicasse. Se alguem souber por favor me ajudar tambem

davidev1987 há 15 dias

Olá gostei muito da ideia, mas sou bem iniciante, alguem pode me ajudar. eu colei no vscode mas não funcionou

Katsudouki há 14 dias

copiando e colando o codigo vai faltar arquivos para funcionar , baixe aqui o zip com tudo pronto [https://github.com/devpit/CodeOfLove/archive/refs/heads/main.zip](https://github.com/devpit/CodeOfLove/archive/refs/heads/main.zip)

juhCavalcante há 11 meses

oi, eu quero fazer um pro meu namorado, pedindo ele em casamento, como q faço?

wil01 há 11 meses

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"

tiagolofi há 2 anos

ih já lansou a braba meu nobre kkkkkkkk

wil01 há 2 anos

😜

Centaurus há 2 anos

o JS matou a pau! É a parte mais valiosa do projeto.

wil01 há 2 anos

com certeza :)

CristianoSword há 2 anos

hauhauhauh que top isso. O lance do mouse é o toque de mestre :v

wil01 há 2 anos

🥳

washpess ano passado

como faço para executar os códigos pelo vscode, sou novo nisso. pode ajudar?

wil01 ano passado

tem discord? cola na call que ajudo

washpess ano passado

tenho sim mano. WashPess #6850 pessanha950@gmail.com

wil01 ano passado

chama manda pedido,estou online PIT#9875

washpess ano passado

so chamar la. to on

vickyy ano passado

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

wil01 ano passado

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

vickyy ano passado

tenho sim, ! Vicky#3081

procurandocoisas ano passado

OlAa alguem poderia me ajudarr, queria fazer algo assim so que mais detalhado, e poder mudar essas frases que estao..é pro dia dos namorads <3

wil01 ano passado

Olá, por acaso teria "DISCORD" ? Se sim, me chame lá para que possa lhe ajudar 'PIT#9875'.

procurandocoisas ano passado

opa tudo bem te add ai,o meu é PMLuhhh ^^#9791 amanha a tarde depois de meio dia tou em casa, vou te agradecer muito por me ajudar nisso <3

pedrooooooo há 2 anos

o meu deu erro no html

wil01 há 2 anos

🤔🤔 não tem como ter dado erro, você importou tudo certinho?

pedrooooooo há 2 anos

sim Just HTML that goes in the goes here

wil01 há 2 anos

https://datemew.netlify.app/ pega o código fonte por aqui

pedrooooooo há 2 anos

vlw agora uma duvida para eu colocar que isso lek ao em vez de thanks como ficaria?

wil01 há 2 anos

😎🤘🏽

pedrooooooo há 2 anos

agora uma duvida para eu colocar que isso lek ao em vez de thanks como ficaria?

wil01 há 2 anos

alerta do js,muda lá

pedrooooooo há 2 anos

vlw

gaguta123 ano passado

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.

wil01 ano passado

opa, tem discord? me adiciona lá que te ajudo 😸 PIT#9875

gaguta123 ano passado

Acabei de te mandar!

Santmylla há 28 dias

opa,amigo como faço isso funcionar,eu sou leiga nisso,mais queria pedir uma moça em namoro pela web,me ajuda ?

Lonewolf há 4 meses

preciso de ajuda, n consegui fazer😔💔

Math484823 há 2 anos

GÊNIO

wil01 há 2 anos

show :)

Higordacosta há 2 anos

que genio cara kkakakakkakakka vou salva pra quando precisar..... kkkkkk

wil01 há 2 anos