HMC
/
hmc_site_source
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add countdown timer for tickets

main
Abner Coimbre 2025-04-03 11:37:03 -07:00
parent f8129de5a9
commit b00a81551b
2 changed files with 110 additions and 254 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

260
content/english/tickets/index.md
View File

@ -1,256 +1,8 @@
---
title: "Tickets"
meta_title: "Handmade Cities Tickets"
description: "Handmade Cities Tickets"
draft: false
layout: "under_construction"
features:
- title: "Conference Tickets"
title_class: "text-center text-white mt-2 md:mt-8 lg:mt-8 xl:mt-8 2xl:mt-8"
side: "center"
content_class: "mt-16 pt-0 pb-0 text-white"
image: "/images/hmc/cities-dark-mode.svg"
bg_img:
parallax: true
img: "/images/devon_starfield.png"
end_img: "/images/software-15.png"
end_img_class: "relative h-96 bg-contain bg-bottom bg-repeat-x"
description_class: "mt-4 mb-20"
description: |
Handmade Seattle is a fully-hybrid conference, and both physical and online tickets are available. Buying a ticket supports the conference and gains you access to the private chat server used for speaker Q&A, the virtual job fair, and more.
tickets:
- title: "Physical Track"
title_class: "text-white"
subtitle: "Available now"
subtitle_class: "text-white"
section_class: "text-white"
options:
# - name: "Handmade Boston"
# title: "Masterclasses"
# title_class: "text-white"
# name_class: "boston-color"
# original_price: "$299"
# price_class: "text-orange-500"
# price: "249"
# button:
# title: "Register"
# class: "bg-transparent border border-orange-500 rounded-md cursor-pointer hover:bg-orange-500 hover:border-orange-500 hover:text-white focus-within:bg-orange-500 focus-within:border-orange-500 focus-within:text-white"
# url: "https://buy.stripe.com/6oE4gq69t7X75lSeVo"
# alt_url: "https://google.com/"
# alt_title: "PayPal"
# alt_class: "text-sm hover:underline mt-4"
# features_class: "text-white"
# features:
# - text: "General Admission"
# text_class: "font-bold"
# - text: "Aug 9-10th, 2024"
# - text: "JFK Presidential Library"
# - text: "In-Person Masterclasses"
# - text: "Kings Dining After-Party"
- name: "Handmade Seattle"
title: "Standard"
title_class: "text-white"
name_class: "seattle-color"
price_class: "text-orange-500"
price: "249"
original_price: "$299"
button:
title: "Register"
button_class: "seattle-bg"
class: "bg-transparent border border-orange-500 rounded-md cursor-pointer hover:bg-orange-500 hover:border-orange-500 hover:text-white focus-within:bg-orange-500 focus-within:border-orange-500 focus-within:text-white"
url: "https://buy.stripe.com/9AQ8wG0P9a5fg0wfZr"
alt_title: "PayPal"
alt_paypal_id: "paypal-physical-ticket"
alt_class: "text-sm hover:underline mt-4"
features_class: "text-white text-center"
features:
- text: "General Admission"
text_class: "font-black"
- text: "Nov 20-22nd, 2024"
- text: "Seattle Center"
- text: "All Online Track Benefits"
- text: "New Talks & Demos"
- text: "Chat Server Access"
- text: "Trade Show"
- text: "Job Fair"
- name: "Handmade Seattle"
title: "Premium"
title_class: "text-white text-center"
name_class: "seattle-color"
price_class: "text-green-500"
price: "349"
original_price: "$399"
features_class: "text-white"
button:
title: "Register"
class: "bg-transparent border border-orange-500 rounded-md cursor-pointer hover:bg-green-500 hover:border-green-500 hover:text-white focus-within:bg-green-500 focus-within:border-green-500 focus-within:text-white"
url: "https://buy.stripe.com/dR63cmeFZ1yJ7u0fZx"
alt_title: "PayPal"
alt_paypal_id: "paypal-physical-ticket-premium"
alt_class: "text-sm hover:underline mt-4"
features:
- text: "If you want to support the conference"
text_class: "font-black"
- text: "Easy to Gift or Transfer"
- text: "Retains All Benefits"
- title: ""
title_class: "mb-20 text-center"
image: ""
side: "center"
section_class: "text-black dark:text-white"
content_class: "text-black dark:text-white"
transition:
start: "/images/transition.svg"
start_class: "mb-5 pt-4"
start_color: "#fff"
start_style: "mask-repeat: repeat-x;mask-position:center;"
end_style: "mask-repeat:repeat-x;mask-position:top;"
start_dark: "/images/transition.svg"
start_dark_color: "#fff"
end: "/images/transition.svg"
end_class: "mt-20 transform -scale-y-100 -scale-x-100"
end_color: "#000"
end_dark: "/images/transition.svg"
end_dark_color: "#000"
tickets:
- title: "Online Track"
title_class: "text-black dark:text-white"
subtitle: "Available now"
subtitle_class: "text-black dark:text-white"
section_class: "text-black dark:text-white"
options:
- name: "Handmade Seattle"
title: "Standard"
title_class: "text-black dark:text-white"
name_class: "seattle-color"
ticket_class: "border-black dark:border-white"
original_price: ""
price_class: "text-orange-500"
price: "74"
button:
title: "Register"
class: "bg-transparent border border-orange-500 rounded-md cursor-pointer hover:bg-orange-500 hover:border-orange-500 hover:text-white focus-within:bg-orange-500 focus-within:border-orange-500 focus-within:text-white"
url: "https://buy.stripe.com/aEU3cm7dxa5f9C8fZu"
alt_title: "PayPal"
alt_paypal_id: "paypal-online-ticket"
alt_class: "text-sm hover:underline mt-4"
features_class: "text-black dark:text-white"
features:
- text: "General Admission"
text_class: "font-black"
- text: "New Talks & Demos"
- text: "Chat Server Access"
- text: "Live Q&A"
- text: "Virtual Job Fair"
- text: "Access to Speakers"
- name: "Handmade Seattle"
title: "Premium"
title_class: "text-black dark:text-white"
name_class: "seattle-color"
price_class: "text-green-500"
ticket_class: "border-black dark:border-white"
price: "99"
original_price: ""
button:
title: "Register"
class: "bg-transparent border border-orange-500 rounded-md cursor-pointer hover:bg-green-500 hover:border-green-500 hover:text-white focus-within:bg-green-500 focus-within:border-green-500 focus-within:text-white"
url: "https://buy.stripe.com/dR6bISdBVgtD9C8dRs"
alt_title: "PayPal"
alt_paypal_id: "paypal-online-ticket-premium"
alt_class: "text-sm hover:underline mt-4"
features_class: "text-black dark:text-white"
features:
- text: "If you want to support the conference"
text_class: "font-black"
- text: "Easy to Gift or Transfer"
- text: "All Benefits of Standard"
# - name: "Boston + Seattle"
# title: "Combined Ticket"
# title_class: "text-black dark:text-white text-center"
# name_class: "meetups-color"
# price_class: "text-green-500"
# price: "119"
# original_price: ""
# features_class: "text-black dark:text-white"
# button:
# title: "Register"
# class: "bg-transparent border border-orange-500 rounded-md cursor-pointer hover:bg-green-500 hover:border-green-500 dark:text-white text-black hover:text-white focus-within:bg-green-500 focus-within:border-green-500 focus-within:text-white"
# url: "https://buy.stripe.com/aEU3cmgO7dhr6pWeVp"
# alt_url: "https://google.com/"
# alt_title: "PayPal"
# alt_class: "text-sm hover:underline mt-4"
# features:
# - text: "General Admission"
# text_class: "font-bold"
# - text: "Discounted Tickets"
# - text: "Easy to Gift or Transfer Them"
# - text: "All Benefits of Standard"
- title: "Frequently Asked Questions"
title_class: "mb-20 text-center text-white"
image: ""
side: "center"
section_class: "text-dark pt-24"
content_class: "mt-8 text-white bg-[rgba(0,0,0,0.8)] pb-24"
transition:
end: "/images/transition4.svg"
end_class: "mb-5 pt-4 2xl:pt-32 scale-y-100"
end_color: "#fff"
end_dark: "/images/transition4.svg"
end_dark_color: "#150e31"
end_style: "mask-repeat:repeat-x;mask-position: bottom;"
bg_img:
parallax: true
img: "/images/devon_starfield.png"
qa:
- question: "What is a premium ticket?"
question_class: "mt-12 mb-4 text-2xl text-white"
answer: "Consider this ticket if your employer pays for, or reimburses your ticket, or if you want to support the conference. The benefits are exactly the same as the standard ticket."
answer_class: ""
- question: "How do I upgrade my ticket?"
question_class: "mt-12 mb-4 text-2xl text-white"
answer: "To upgrade from the online track to a physical one send us an email: [support@handmadecities.com](mailto:support@handmadecities.com)<br><br>_P.S. Upgrading is only possible if there’s still physical tickets._"
- question: "I'm financially disadvantaged."
question_class: "mt-12 mb-4 text-2xl text-white"
answer: "If you’re a student or financially struggling send us an [email](mailto:support@handmadecities.com) and tell your story. We typically do one of two things:<br><br>1. Generate a ticket with a meaningful discount<br>2. Award a free seat thanks to someone who sponsors it<br><br>_P.S. We ask those who can afford our tickets to not abuse this system of trust._"
answer_class: ""
- question: "I want to sponsor a ticket."
question_class: "mt-12 mb-4 text-2xl text-white"
answer: "Your kindness will not go unnoticed! You can go about this in a couple of ways:<br><br>- **Sponsor directly:** Our tickets already include a transfer button. You can gift them to someone you know.<br>- **Donate to sponsor pool:** If you trust us to handle it, use our [Donorbox](https://donorbox.org/handmadecities) and in the comments type _“I want to sponsor”_<br><br>We use this pool to award free seats to those in need."
- question: "Are refunds available?"
question_class: "mt-12 mb-4 text-2xl text-white"
answer: "We don’t process refunds. The physical track is a superset of the online one, so if you can’t attend in person anymore you can join us virtually."
- question: "When do I receive my fundraiser perk?"
question_class: "mt-12 mb-4 text-2xl text-white"
answer: "If you participated in our fundraiser, you should’ve received a Donorbox receipt and a confirmation email from Abner. Perks started to roll out in March 2024 and will continue throughout the year."
- title: "Word on the Street"
title_class: "text-center"
image: ""
side: "center"
section_class: "text-dark pb-12"
content_class: "mt-8 pt-12"
testimonials:
- name: "Quade Zaban, Independent game designer"
title: "Bravo all, looking forward to next time!"
link: "https://twitter.com/QuadeZaban/status/1593991041430196225"
avatar: "/images/people/quade.jpg"
content: |
Has been a joy watching this conference grow, and this one may have been the best so far in my books!
- name: "Hadjar Homaei, CTO [@compdem](https://twitter.com/compdem)"
title: "Huge thanks to Abner Coimbre for making this possible! We appreciate you!"
link: "https://twitter.com/xeegeex/status/1594056776508637184"
avatar: "/images/people/hadjar.jpg"
content: |
I had such a wonderful time at Handmade Seattle this week connecting with an amazing community of people who passionately love the craft of software development!
- name: "Alasdair Monk, VP of Design ▲ [@vercel](https://twitter.com/vercel)"
title: "My first Handmade Seattle was so great."
link: "https://twitter.com/almonk/status/1593439527351484416"
avatar: "/images/people/alasdair.jpg"
content: |
Abner Coimbre is a fantastic host & organiser with an important vision for building better software that benefits all of us, in his words: "reclaiming user value"
title: "Early Bird Sale"
subtitle: "Handmade Conferences (2025)"
countdown_date: "2025-04-05T14:00:00-07:00" # Set your actual ticket release date/time
enable_notification: false # Set to false if you don't want the email form
image: "/images/hmc/ticket.png" # Optional custom image
layout: "countdown"
---

104
layouts/_default/countdown.html Normal file
View File

@ -0,0 +1,104 @@
{{ define "main" }}
<div class="bg-[url('/images/devon_starfield.png')] bg-cover bg-fixed min-h-screen flex flex-col items-center justify-center p-4">
<div class="text-center max-w-3xl mx-auto">
<figure class="flex justify-center items-center mb-8">
{{ $constructionBanner := "/images/under-construction.svg" }}
{{ if .Params.Image }}
{{ $constructionBanner = .Params.Image }}
{{ end }}
{{ partial "image" (dict "Src" $constructionBanner "Alt" "Banner" "Class" "w-1/2 md:w-1/3" ) }}
</figure>
<h1 class="text-3xl md:text-5xl font-bold text-white mb-4">{{ .Title | default "Tickets Coming Soon" }}</h1>
<p class="text-lg text-white text-center mb-12">{{ .Params.subtitle | default "We're preparing something special. Stay tuned!" }}</p>
<!-- Countdown Timer -->
<div class="countdown-container bg-black bg-opacity-50 backdrop-blur-sm p-6 rounded-xl shadow-lg mb-12">
<h2 class="text-xl md:text-2xl font-semibold text-white mb-6">Discounted Tickets Begin In:</h2>
<div class="grid grid-cols-4 gap-4 text-center" id="countdown">
<div class="bg-gray-900 bg-opacity-70 p-4 rounded-lg">
<div id="days" class="text-2xl md:text-4xl font-bold text-white">00</div>
<div class="text-xs md:text-sm text-gray-300 uppercase tracking-wide">Days</div>
</div>
<div class="bg-gray-900 bg-opacity-70 p-4 rounded-lg">
<div id="hours" class="text-2xl md:text-4xl font-bold text-white">00</div>
<div class="text-xs md:text-sm text-gray-300 uppercase tracking-wide">Hours</div>
</div>
<div class="bg-gray-900 bg-opacity-70 p-4 rounded-lg">
<div id="minutes" class="text-2xl md:text-4xl font-bold text-white">00</div>
<div class="text-xs md:text-sm text-gray-300 uppercase tracking-wide">Minutes</div>
</div>
<div class="bg-gray-900 bg-opacity-70 p-4 rounded-lg">
<div id="seconds" class="text-2xl md:text-4xl font-bold text-white">00</div>
<div class="text-xs md:text-sm text-gray-300 uppercase tracking-wide">Seconds</div>
</div>
</div>
</div>
<!-- Notification Form -->
{{ if .Params.enable_notification }}
<div class="bg-black bg-opacity-50 backdrop-blur-sm p-6 rounded-xl shadow-lg max-w-md mx-auto">
<h3 class="text-xl font-semibold text-white mb-4">Get Notified When Tickets Go Live</h3>
<form id="notification-form" class="space-y-4">
<div>
<input type="email" placeholder="Your email address" class="w-full px-4 py-2 rounded-md bg-gray-800 border border-gray-700 text-white focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<button type="submit" class="w-full px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-md transition-colors">
Notify Me
</button>
</form>
</div>
{{ end }}
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Set the date we're counting down to
// Format: Year, Month (0-11), Day, Hour, Minute, Second
const countDownDate = new Date("{{ .Params.countdown_date | default "2025-06-01T09:00:00-07:00" }}").getTime();
// Update the countdown every 1 second
const x = setInterval(function() {
// Get current date and time
const now = new Date().getTime();
// Find the distance between now and the countdown date
const distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
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 result
document.getElementById("days").innerHTML = days.toString().padStart(2, '0');
document.getElementById("hours").innerHTML = hours.toString().padStart(2, '0');
document.getElementById("minutes").innerHTML = minutes.toString().padStart(2, '0');
document.getElementById("seconds").innerHTML = seconds.toString().padStart(2, '0');
// If the countdown is finished, show expired message
if (distance < 0) {
clearInterval(x);
document.getElementById("countdown").innerHTML = "<div class='col-span-4 text-2xl font-bold text-white'>Tickets are now available!</div>";
// Optional: redirect to ticket page
// window.location.href = "/tickets";
}
}, 1000);
// Optional: Handle notification form submission
const form = document.getElementById('notification-form');
if (form) {
form.addEventListener('submit', function(e) {
e.preventDefault();
// Here you would typically send this to your backend
const email = e.target.querySelector('input[type="email"]').value;
console.log('Email submitted:', email);
// Replace form with success message
form.innerHTML = '<div class="text-green-400 text-center py-4">Thanks! We\'ll notify you when tickets are available.</div>';
});
}
});
</script>
</div>
{{ end }}