diff --git a/app/controllers/bootcamp_controller.rb b/app/controllers/bootcamp_controller.rb index 41223e9b0d..121d70c88f 100644 --- a/app/controllers/bootcamp_controller.rb +++ b/app/controllers/bootcamp_controller.rb @@ -7,12 +7,20 @@ class BootcampController < ApplicationController before_action :setup_pricing! def index - if @bootcamp_data # rubocop:disable Style/GuardClause + if @bootcamp_data @bootcamp_data.num_views += 1 @bootcamp_data.last_viewed_at = Time.current @bootcamp_data.ppp_country = @country_code_2 if @country_code_2 @bootcamp_data.save end + + difference_in_seconds = Time.utc(2025, 1, 8, 13, 0o0, 0o0) - Time.current + + # Convert to days, hours, minutes, and seconds + @days = (difference_in_seconds / (24 * 60 * 60)).to_i + @hours = (difference_in_seconds % (24 * 60 * 60) / (60 * 60)).to_i + @minutes = (difference_in_seconds % (60 * 60) / 60).to_i + @seconds = (difference_in_seconds % 60).to_i end def start_enrolling @@ -130,7 +138,7 @@ def retrieve_user_bootcamp_data_from_session end def lookup_country_code_from_ip - return "IN" unless Rails.env.production? + return "MX" unless Rails.env.production? data = JSON.parse(RestClient.get("https://vpnapi.io/api/#{request.remote_ip}?key=#{Exercism.secrets.vpnapi_key}").body) return "VPN" if data.dig("security", "vpn") diff --git a/app/css/packs/bootcamp.css b/app/css/packs/bootcamp.css index 6ef9a3ab6a..34e30956d8 100644 --- a/app/css/packs/bootcamp.css +++ b/app/css/packs/bootcamp.css @@ -58,7 +58,27 @@ body { } #discount-bar { + @apply px-16 py-12; + @apply block mx-auto; + @apply relative z-[10]; + @apply rounded-8 mb-20; + @apply border-4 border-purple text-purple text-center; + @apply text-[19px]; + @apply bg-lightPurple; + + .flag { + @apply inline-flex align-middle; + @apply text-[32px] leading-[100%] mr-4; + } + @apply font-medium; + strong { + @apply font-semibold; + } +} + +#countdown-bar { @apply bg-[var(--purple)] text-white text-center; + @apply border-b-1 border-[#843eff]; @apply px-16 py-8; @apply block mx-auto; @apply relative z-[10]; diff --git a/app/views/bootcamp/index.html.haml b/app/views/bootcamp/index.html.haml index fa59142213..920cecbeeb 100644 --- a/app/views/bootcamp/index.html.haml +++ b/app/views/bootcamp/index.html.haml @@ -1,10 +1,12 @@ -- if @has_discount - #discount-bar - .flag= flag_for_country_code(@country_code_2) - - if @hello.present? - %strong #{@hello}! - Everyone in #{@country_name} gets a - %strong.inline #{@discount_percentage}% discount! + +#countdown-bar + %span.inline-block + %strong First live session + in + #js-countdown-time.inline>= " #{@days} days, #{@hours} hours, #{@minutes} minutes" + #js-countdown-seconds{ class: "hidden md:inline" }> , #{@seconds} seconds + \. + %strong.inline-block Only a few places remaining. #nav .lg-container.flex.flex-row.gap-8.items-center = image_tag "bootcamp/exercism-face-light.svg", class: 'exercism-face' @@ -425,6 +427,13 @@ Choose your Journey %p.intro.text-balance Depending on whether you want to learn web development or some other speciality such as data science, we have two different options. + - if @has_discount + #discount-bar + .flag= flag_for_country_code(@country_code_2) + - if @hello.present? + %strong #{@hello}! + Everyone in #{@country_name} gets a + %strong.inline #{@discount_percentage}% discount! .grid.md:grid-cols-2.grid-cols-1.gap-40 .container .header @@ -641,3 +650,35 @@ is a registered %strong not-for-profit organisation. %span.whitespace-nowrap © #{Date.current.year} Exercism + +:javascript + const targetDate = new Date("2025-01-08T13:00:00").getTime(); + const timeElem = document.getElementById("js-countdown-time") + const secondsElem = document.getElementById("js-countdown-seconds") + + function updateCountdown() { + const now = new Date().getTime(); + const distance = targetDate - now; + + if (distance < 0) { + timeElem.innerText = "Countdown Finished!"; + secondsElem.style.display = "none" + return; + } + + // Calculate time components + const days = Math.floor(distance / (1000 * 60 * 60 * 24)); + const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); + const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); + const seconds = Math.floor((distance % (1000 * 60)) / 1000); + + // Display the countdown + timeElem.innerText = ` ${days} days, ${hours} hours, ${minutes} minutes`; + secondsElem.innerText = `, ${seconds} seconds` + } + + // Update the countdown every second + setInterval(updateCountdown, 1000); + + // Initialize the countdown + updateCountdown();