Skip to content

Commit

Permalink
Merge pull request #3 from php-piaui/develop
Browse files Browse the repository at this point in the history
Develop
  • Loading branch information
BdsOliveira authored Oct 31, 2023
2 parents 74e26b5 + 39474c1 commit a0e3fbf
Show file tree
Hide file tree
Showing 2 changed files with 97 additions and 47 deletions.
37 changes: 35 additions & 2 deletions assets/js/index.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,38 @@
const links = document.querySelectorAll('#link-inscricao');
const links = document.querySelectorAll("#link-inscricao");

links.forEach((link) => {
link.setAttribute('href', 'https://www.sympla.com.br/lancamento-das-comunidades-de-php-do-estado-do-piaui__2207864');
link.setAttribute(
"href",
"https://www.sympla.com.br/lancamento-das-comunidades-de-php-do-estado-do-piaui__2207864"
);
});

function startCounter(targetDate) {
const timeCounter = document.getElementById("time-counter");
const targetDateTimestamp = new Date(targetDate).getTime();

function updateCounter() {
const now = new Date().getTime();
const difference = targetDateTimestamp - now;

if (difference <= 0) {
clearInterval(counter);
timeCounter.innerText = "Date Reached!";
} else {
const days = Math.floor(difference / (1000 * 60 * 60 * 24));
const hours = Math.floor(
(difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
);
const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((difference % (1000 * 60)) / 1000);

timeCounter.innerText = `Tempo Restante: ${days}d ${hours}h ${minutes}m ${seconds}s`;
}
}

const counter = setInterval(updateCounter, 1000);
}

window.onload = () => {
startCounter("2023-11-10T00:00:00");
};
107 changes: 62 additions & 45 deletions index.html
Original file line number Diff line number Diff line change
@@ -1,57 +1,74 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>PHP Piauí - Comunidade</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
</head>

<body>
<body class="flex flex-col h-screen">
<!-- This Design is based on columns -->
<div class="bg-purple-950 text-white w-screen h-screen flex justify-center">
<div class="flex flex-col justify-center min-h-screen">
<!-- This represents a column -->
<div class="flex justify-center">
<!-- note: you can add as many columns as you want -->
</div>
<!-- This represents another column -->
<div class="flex justify-center">
<a id="link-inscricao"
class="px-3 hidden md:flex w-1/2">
<img src="assets/img/lancamento-phpi.jpg" alt="Inscrições PHPi">
</a>
<a id="link-inscricao"
class="px-3 md:hidden flex">
<img src="assets/img/lancamento-phpi-mobile.jpg" alt="Inscrições PHPi">
</a>
<div class="flex flex-col justify-center min-h-screen">
<!-- This represents a column -->
<div class="flex justify-center">
<!-- note: you can add as many columns as you want -->
</div>
<!-- This represents another column -->
<div class="flex justify-center">
<a id="link-inscricao" class="px-3 hidden md:flex w-1/2">
<img src="assets/img/lancamento-phpi.jpg" alt="Inscrições PHPi" />
</a>
<a id="link-inscricao" class="px-3 md:hidden flex">
<img
src="assets/img/lancamento-phpi-mobile.jpg"
alt="Inscrições PHPi"
/>
</a>
</div>
<!-- Every time you wanna add a colomn item, duplicate this -->
<div class="flex justify-center">
<div class="flex flex-col justify-center">
<div class="text-center">
<a href="https://bit.ly/phppiaui-whatsapp">
<button
type="button"
class="border border-purple-500 bg-purple-500 text-white rounded-md px-4 py-2 m-2 transition duration-500 ease select-none hover:bg-purple-600 focus:outline-none focus:shadow-outline"
>
#JunteSeAManada
<img
src="assets/img/whatsapp-svgrepo-com.svg"
class="inline-block"
width="15"
alt=""
srcset=""
/>
</button>
</a>
</div>
<!-- Every time you wanna add a colomn item, duplicate this -->
<div class="flex justify-center">
<div class="flex flex-col justify-center">
<div class="text-center">
<a href="https://bit.ly/phppiaui-whatsapp">
<button type="button"
class="border border-purple-500 bg-purple-500 text-white rounded-md px-4 py-2 m-2 transition duration-500 ease select-none hover:bg-purple-600 focus:outline-none focus:shadow-outline">
#JunsteSeAManada
<img src="assets/img/whatsapp-svgrepo-com.svg" class="inline-block" width="15" alt="" srcset="">
</button>
</a>
</div>
<div class="text-center">
<a id="link-inscricao">
<button type="button"
class="border border-purple-500 bg-purple-500 text-white rounded-md px-4 py-2 m-2 transition duration-500 ease select-none hover:bg-purple-600 focus:outline-none focus:shadow-outline">
Inscreva-se
</button>
</a>
</div>
</div>
<div class="text-center">
<a id="link-inscricao">
<button
type="button"
class="border border-purple-500 bg-purple-500 text-white rounded-md px-4 py-2 m-2 transition duration-500 ease select-none hover:bg-purple-600 focus:outline-none focus:shadow-outline"
>
Inscreva-se
</button>
</a>
</div>
</div>
</div>
<div class="text-center text-white mt-4">
<p id="time-counter">Tempo Restante: 00:00:00</p>
</div>
</div>
</div>
<div
class="bg-purple-950 sticky top-[80vh] text-white text-center py-4 bottom-0 w-ful"
>
<p>&copy; 2023 PHPi. Todos os direitos reservados.</p>
</div>
<script src="assets/js/index.js" defer></script>
</body>

</html>
</body>
</html>

0 comments on commit a0e3fbf

Please sign in to comment.