TFC/tfcconnection-zola
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

add camp-form

Browse source
This commit is contained in:
Chris Cochrun 2023-03-21 15:09:19 -05:00
parent 42497fb4c5
commit eae2232537
7 changed files with 384 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

179
assets/css/compiled/main.css
View file

@ -929,14 +929,21 @@ select {
color: var(--tw-prose-code);
font-weight: 600;
font-size: 0.875em;
background-color: rgba(var(--color-neutral-50), 1);
padding-top: 3px;
padding-bottom: 3px;
padding-left: 5px;
padding-right: 5px;
}
.prose :where(code):not(:where([class~="not-prose"] *))::before {
content: "`";
display: none;
}
.prose :where(code):not(:where([class~="not-prose"] *))::after {
content: "`";
display: none;
}
.prose :where(a code):not(:where([class~="not-prose"] *)) {
@ -1204,6 +1211,14 @@ select {
border-radius: 0.12rem;
}
.prose :where(p):not(:where([class~="not-prose"] *))::before {
display: none;
}
.prose :where(p):not(:where([class~="not-prose"] *))::after {
display: none;
}
.prose-sm :where(.prose > ul > li p):not(:where([class~="not-prose"] *)) {
margin-top: 0.5714286em;
margin-bottom: 0.5714286em;
@ -1537,11 +1552,38 @@ select {
left: 0px;
}
.inset-0\.5 {
top: 0.125rem;
right: 0.125rem;
bottom: 0.125rem;
left: 0.125rem;
}
.inset-x-0 {
left: 0px;
right: 0px;
}
.inset-x-0\.5 {
left: 0.125rem;
right: 0.125rem;
}
.inset-x-full {
left: 100%;
right: 100%;
}
.inset-x-auto {
left: auto;
right: auto;
}
.inset-x-1\/2 {
left: 50%;
right: 50%;
}
.top-\[100vh\] {
top: 100vh;
}
@ -1554,6 +1596,18 @@ select {
top: calc(100vh - 5.5rem);
}
.bottom-4 {
bottom: 1rem;
}
.right-1\/2 {
right: 50%;
}
.left-1\/2 {
left: 50%;
}
.top-0 {
top: 0px;
}
@ -1586,14 +1640,14 @@ select {
margin: auto;
}
.m-4 {
margin: 1rem;
}
.m-2 {
margin: 0.5rem;
}
.m-4 {
margin: 1rem;
}
.m-0 {
margin: 0px;
}
@ -1607,16 +1661,16 @@ select {
margin-bottom: 1rem;
}
.my-8 {
margin-top: 2rem;
margin-bottom: 2rem;
}
.my-10 {
margin-top: 2.5rem;
margin-bottom: 2.5rem;
}
.my-8 {
margin-top: 2rem;
margin-bottom: 2rem;
}
.my-0 {
margin-top: 0px;
margin-bottom: 0px;
@ -1679,6 +1733,14 @@ select {
margin-top: 0.75rem;
}
.mt-4 {
margin-top: 1rem;
}
.mt-8 {
margin-top: 2rem;
}
.mt-20 {
margin-top: 5rem;
}
@ -1691,14 +1753,6 @@ select {
margin-right: 1rem;
}
.mt-8 {
margin-top: 2rem;
}
.mt-4 {
margin-top: 1rem;
}
.-mr-2 {
margin-right: -0.5rem;
}
@ -1911,6 +1965,14 @@ select {
width: 1.5rem;
}
.w-44 {
width: 11rem;
}
.w-40 {
width: 10rem;
}
.min-w-0 {
min-width: 0px;
}
@ -1955,6 +2017,12 @@ select {
max-width: 48rem;
}
.max-w-fit {
max-width: -webkit-fit-content;
max-width: -moz-fit-content;
max-width: fit-content;
}
.max-w-\[64rem\] {
max-width: 64rem;
}
@ -2129,6 +2197,11 @@ select {
border-bottom-left-radius: 0.5rem;
}
.rounded-r {
border-top-right-radius: 0.25rem;
border-bottom-right-radius: 0.25rem;
}
.border {
border-width: 1px;
}
@ -2184,6 +2257,11 @@ select {
background-color: rgba(var(--color-neutral-500), var(--tw-bg-opacity));
}
.bg-primary-500 {
--tw-bg-opacity: 1;
background-color: rgba(var(--color-primary-500), var(--tw-bg-opacity));
}
.bg-primary-700 {
--tw-bg-opacity: 1;
background-color: rgba(var(--color-primary-700), var(--tw-bg-opacity));
@ -2226,6 +2304,11 @@ select {
background-color: rgba(var(--color-primary-600), var(--tw-bg-opacity));
}
.bg-primary-300 {
--tw-bg-opacity: 1;
background-color: rgba(var(--color-primary-300), var(--tw-bg-opacity));
}
.bg-gradient-to-t {
background-image: linear-gradient(to top, var(--tw-gradient-stops));
}
@ -2292,14 +2375,14 @@ select {
padding: 1rem;
}
.p-2 {
padding: 0.5rem;
}
.p-3 {
padding: 0.75rem;
}
.p-2 {
padding: 0.5rem;
}
.p-0 {
padding: 0px;
}
@ -2457,6 +2540,10 @@ select {
vertical-align: text-bottom;
}
.align-sub {
vertical-align: sub;
}
.align-super {
vertical-align: super;
}
@ -2584,16 +2671,16 @@ select {
color: rgba(var(--color-neutral-50), var(--tw-text-opacity));
}
.text-\[\#fca5a5\] {
--tw-text-opacity: 1;
color: rgb(252 165 165 / var(--tw-text-opacity));
}
.text-\[\#f39\] {
--tw-text-opacity: 1;
color: rgb(255 51 153 / var(--tw-text-opacity));
}
.text-\[\#fca5a5\] {
--tw-text-opacity: 1;
color: rgb(252 165 165 / var(--tw-text-opacity));
}
.text-primary-300 {
--tw-text-opacity: 1;
color: rgba(var(--color-primary-300), var(--tw-text-opacity));
@ -2634,6 +2721,11 @@ select {
color: rgba(var(--color-primary-800), var(--tw-text-opacity));
}
.text-neutral-100 {
--tw-text-opacity: 1;
color: rgba(var(--color-neutral-100), var(--tw-text-opacity));
}
.\!no-underline {
text-decoration-line: none !important;
}
@ -2664,14 +2756,14 @@ select {
opacity: 0;
}
.opacity-30 {
opacity: 0.3;
}
.opacity-70 {
opacity: 0.7;
}
.opacity-30 {
opacity: 0.3;
}
.mix-blend-normal {
mix-blend-mode: normal;
}
@ -2680,6 +2772,12 @@ select {
mix-blend-mode: multiply;
}
.shadow {
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-xl {
--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
@ -2698,6 +2796,12 @@ select {
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.backdrop-blur {
--tw-backdrop-blur: blur(8px);
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
@ -3564,6 +3668,11 @@ body:has(#menu-controller:checked) {
background-color: rgba(var(--color-primary-500), var(--tw-bg-opacity)) !important;
}
.hover\:bg-primary-300:hover {
--tw-bg-opacity: 1;
background-color: rgba(var(--color-primary-300), var(--tw-bg-opacity));
}
.hover\:text-primary-600:hover {
--tw-text-opacity: 1;
color: rgba(var(--color-primary-600), var(--tw-text-opacity));
@ -3605,6 +3714,12 @@ body:has(#menu-controller:checked) {
text-underline-offset: 2px;
}
.hover\:shadow-xl:hover {
--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:file\:bg-primary-300::file-selector-button:hover {
--tw-bg-opacity: 1;
background-color: rgba(var(--color-primary-300), var(--tw-bg-opacity));
@ -3947,6 +4062,10 @@ body:has(#menu-controller:checked) {
background-color: rgba(var(--color-secondary-400), 1);
}
.dark .dark\:prose-invert :where(code):not(:where([class~="not-prose"] *)) {
background-color: rgba(var(--color-neutral-700), 1);
}
.dark .dark\:text-neutral {
--tw-text-opacity: 1;
color: rgba(var(--color-neutral), var(--tw-text-opacity));

3
assets/icons/chevron-down.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 290 B

13
content/_index.md
View file

@ -7,13 +7,14 @@ showHeadingAnchors: false
Teens For Christ Connection (TFC) is a rural ministry reaching out to the mission field of teenagers in rural communities across Northwest Kansas and Southwest Nebraska. In rural communities where youth ministry programs and resources are limited, TFC desires to partner with churches to meet this need. Whether this is through providing community youth groups, coaching those already working with youth, or supplying resources and extra curricular activities for area ministries, TFC desires to connect teens with the truth of Jesus Christ and equip them to live out the Great Commission.
## Mission Trip Signups Closed!
Signing up for mission trip is now over, however if you still need to fill out a health form or a reference form, you may still fill those out here!
## Camp Is Here!
TFC Camp signups have started! If you'd like to go please click the button below!
- [Health Form](/health-form)
- [Parent Reference Form](/mt-parent-form)
- [Church Related Reference Form](/mt-church-form)
- [Teacher Reference Form](/mt-teacher-form)
{{< button href="/camp-form" target="_self" >}}
Sign up now!
{{< /button >}}
If you need to fill out a health form, please do so [here](/health-form).
## Our Vision
Our vision is to change the world from the heart of America by providing disciple making opportunities that serve communities where student ministries are limited.

31
content/camp-form.md Normal file
View file

@ -0,0 +1,31 @@
---
title: "Camp Form"
omit_header_text: true
layout: simple
sharingLinks: false
---
{{< floating-button icon="chevron-down" text="To the form!" link="#form" >}}
{{< pt src="https://videos.tfcconnection.org/videos/embed/30c22854-51ab-4c10-a5a2-034b0e506abf" width="700" height="576">}}
We hope you are as excited about camp as we are! If there is anything we can do to answer your questions and help you to get signed up for camp, please let us know! You can email any of us by going to [Contact](/contact).
## Dates
- Week 1 - July 17 - July 21
- Week 2 - July 24 - July 28
## Cost
We have an early bird registration, so if you register by certain dates, you'll save some money!
- By May 3: $65 with registration plus $100 due at camp and a free t shirt!
- By June 23: $85 with registration plus $100 due at camp and a free t shirt!
- After June 23: $85 with registration plus $100 due at camp... _NO FREE T SHIRT!!!_
## Location
Camp Joy in Alma, NE
{{< camp-form >}}
## Meet the Interns!
### Cameron Hendryx
Hello! My name is Cameron Hendryx! I am a student at Kansas State University studying personal financial planning. I am from Russell, KS, but I attended the Thunder Ridge TFC group. I cannot tell you all how excited I am for camp! I told Lavonne about 3 years ago that I would like to become a TFC summer intern, now God has allowed that to happen, and I am excited to see how he uses me in this season of life. When I was young, my favorite thing to do was to play football. I remember many times playing football with friends at the elementary school park, or on the sidelines while my dad coached. Football was definitely my favorite thing to do, and it’s been cool to see how God has used football in my life. In high school, all I wanted to do was to play football, but God had other plans. Each year I had to sit on the sidelines with crutches or a sling. After getting hurt again my junior year, it hit me that God wanted me to use football to grow closer to Him. While I couldn’t play, God has used that love for the game to put me in a place I never imagined. Next year I will be a student coach for the K-State Football Team! The one thing that I can dwell on through this is how God has constantly provided for me and he truly does have plans to give me hope and a future! Just as God has been providing for me, I cannot wait to see where God brings you at camp this summer!

2
content/ministries/camp/index.md
View file

@ -11,4 +11,4 @@ weight: 40
After attending large youth camps in the Kansas City area for several years in the late 70’s and early 80’s, the ministry leadership decided to begin designing their own camp experience locally in Southern Nebraska. TFC Camp happens over a two-week period each summer at the Camp Joy campground east of Alma, NE. During wild and wacky games, water fun and special events the teenagers develop long-term friendships with other area teens. Spiritual growth occurs through devotions, seminars and messages which encourage campers to take the next step in growing in their relationship with Jesus Christ. TFC Camp provides solid opportunities for teens to grow in the disciple-making process as they are integrated into student leadership positions through a variety of intentional leadership development steps.
{{< pt src="https://videos.tfcconnection.org/videos/embed/e8fd7110-8a5d-48f8-b7e8-45b5d6098381" width="700" height="400">}}
{{< pt src="https://videos.tfcconnection.org/videos/embed/30c22854-51ab-4c10-a5a2-034b0e506abf" width="700" height="576">}}

179
layouts/shortcodes/camp-form.html Normal file
View file

@ -0,0 +1,179 @@
{{ $formClasses := "bg-neutral-500 text-neutral-50 placeholder-neutral-300 focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 focus:ring-offset-transparent m-2 p-3 rounded-lg hover:bg-neutral-500 checked:text-neutral-500" }}
{{ $requiredField := "<span class='inline-block text-[#f39] text-sm align-super'>* required</span>" }}
<script>
function submitForm(e) {
e.preventDefault();
const form = document.getElementById('form');
const data = new FormData(form);
console.log(data.get("birthdate"));
const birthdate = new Date(data.get("birthdate"));
const age = calculate_age(birthdate);
data.append("age", age);
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// Logic directing where to send the user after form submission based on results.
// This is how to send them. window.location.href = '/thankyou/';
var payment = document.getElementById('registration').value;
window.location.href = '/camp-health-form?registration=' + payment;
// Need to eventually get the user here: https://secure.myvanco.com/L-Z772/campaign/C-13DM3
}
};
/* xhr.open("POST", "https://n8n.tfcconnection.org/webhook/mt-application"); */
xhr.open("POST", "https://n8n.tfcconnection.org/webhook-test/camp-form");
xhr.send(data);
console.log(data);
console.log("Hallo!");
/* return false; */
}
function calculate_age(dob) {
var diff_ms = Date.now() - dob.getTime();
var age_dt = new Date(diff_ms);
return Math.abs(age_dt.getUTCFullYear() - 1970);
}
function process() {
/* document.getElementById('mt-form').hidden = false */
}
document.addEventListener('DOMContentLoaded', process);
</script>
<div id="mt-form" class="form text-lg w-full">
<form id='form' onsubmit="submitForm(event)" autocomplete="on" method="post" target="_parent" class="w-full items-center flex flex-wrap">
<h3 class="basis-full">Camp Form</h3>
<div class="basis-full flex flex-wrap my-4">
<label for="firstname" class="basis-full">What is your first and last name? <span class='inline-block text-[#f39] text-sm align-sub'>* required</span></label>
<br/>
<input type="text" id="firstname" name="firstname"
placeholder="First Name" class="flex-1 form-input {{ $formClasses }}">
<input type="text" id="lastname" name="lastname"
placeholder="Last Name" class="flex-1 form-input {{ $formClasses }}">
</div>
<div class="basis-full flex flex-wrap my-4">
<label for="parentfirstname" class="basis-full">What is your guardian's first and last name? <span class='inline-block text-[#f39] text-sm align-sub'>* required</span></label>
<input type="text" id="parentfirstname" name="parentfirstname"
class="flex-1 form-input {{ $formClasses }}"
placeholder="First Name">
<input type="text" id="parentlastname" name="parentlastname"
class="flex-1 form-input {{ $formClasses }}"
placeholder="Last Name">
</div>
<label for="birthdate" class="basis-full">When were you born? <span class='inline-block text-[#f39] text-sm align-sub'>* required</span></label>
<input type="date" id="birthdate" name="birthdate"
class="basis-full form-date {{ $formClasses }}">
<label for="gender" class="basis-full">Gender <span class='inline-block text-[#f39] text-sm align-sub'>* required</span></label>
<select id="gender" name="gender" class="basis-full form-select {{ $formClasses }}">
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
<div class="basis-full flex flex-wrap my-4">
<label for="street" class="basis-full">What is your address? <span class='inline-block text-[#f39] text-sm align-sub'>* required</span></label>
<input type="text" id="street" name="street"
class="basis-full form-input {{ $formClasses }}"
placeholder="Street Address" required>
<input type="text" id="city" name="city"
class="flex-auto form-input {{ $formClasses }}"
placeholder="City" required>
<input type="text" id="state" name="state"
class="flex-auto form-input {{ $formClasses }}"
placeholder="State" required>
<input type="text" id="zip" name="zip"
class="flex-auto form-input {{ $formClasses }}"
placeholder="Zip Code" required>
</div>
<div class="basis-full my-4">
<label for="grade" class="">Grade <span class='inline-block text-[#f39] text-sm align-sub'>* required</span></label>
<br/>
<input type="radio" id="grade" name="grade" value="8"
class="form-input {{ $formClasses }}" checked>
<label for="grade" class="">8th</label>
<br/>
<input type="radio" id="grade" name="grade" value="freshman"
class="form-input {{ $formClasses }}">
<label for="grade" class="">Freshman</label>
<br/>
<input type="radio" id="grade" name="grade" value="sophomore"
class="form-input {{ $formClasses }}">
<label for="grade" class="">Sophomore</label>
<br/>
<input type="radio" id="grade" name="grade" value="junior"
class="form-input {{ $formClasses }}">
<label for="grade" class="">Junior</label>
<br/>
<input type="radio" id="grade" name="grade" value="senior"
class="form-input {{ $formClasses }}">
<label for="grade" class="">Senior</label>
</div>
<label for="homephone" class="basis-full">Guardian's phone <span class='inline-block text-[#f39] text-sm align-sub'>* required</span></label>
<input type="tel" id="homephone" name="homephone"
class="basis-full form-input {{ $formClasses }}">
<label for="parentemail" class="basis-full">Guardian's Email</label>
<input type="parentemail" id="parentemail" name="parentemail"
pattern="^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$"
class="basis-full form-input {{ $formClasses }}">
<label for="allergies" class="basis-full">Do you have any food allergies?</label>
<input type="text" id="allergies" name="allergies"
class="basis-full form-input {{ $formClasses }}">
<label for="week" class="basis-full">My Camp Plan <span class='inline-block text-[#f39] text-sm align-sub'>* required</span></label>
<select id="week" name="tfcgroup" class="flex-auto form-select {{ $formClasses }}">
<option value="week1">Week 1: July 17-21</option>
<option value="week2">Week 2: July 24-28</option>
</select>
<label for="shirt" class="basis-full">T-Shirt Size</label>
<select id="shirt" name="shirt" class="flex-auto form-select {{ $formClasses }}">
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="large">Large</option>
<option value="xl">XL</option>
<option value="xxl">2XL</option>
<option value="xxxl">3XL</option>
</select>
<div class="basis-full my-10">
<label for="final-agreement">
I understand that in order for my registration to be complete I need to have this form, a health form, and the $65 registration fee.
</label>
<div class="my-4">
<input type="radio" value="yes" id="final-agreement" name="final-agreement"
class="form-input {{ $formClasses }}" required>
<label for="final-agreement" class="mt-4">
I understand <span class='inline-block text-[#f39] text-sm align-sub'>* required</span>
</label>
</div>
</div>
<label for="registration" class="basis-full">
Would you like to pay the registration fee now or later? <span class='inline-block text-[#f39] text-sm align-sub'>* required</span>
</label>
<div class="basis-full">
<input type="radio" value="now" id="registration" name="registration"
class="form-input {{ $formClasses }}" checked>
<label for="registration" class="">
Now - $65
</label>
</div>
<div class="basis-full">
<input type="radio" value="later" id="registration" name="registration"
class="form-input {{ $formClasses }}">
<label for="registration" class="">
Later - Send $65 to the TFC Office
</label>
</div>
<div class="basis-full mt-8">
<button type="submit" class="content-right rounded-lg bg-primary-700 h-12 w-24 focus:bg-primary-900 focus:ring focus:ring-primary-700 hover:bg-primary-900 float-right">Submit</button>
</div>
</form>
</div>

14
layouts/shortcodes/floating-button.html Normal file
View file

@ -0,0 +1,14 @@
{{ $icon := resources.Get (printf "icons/%s.svg" ($.Get "icon")) }}
{{ $text := .Get "text" -}}
{{ $link := .Get "link" -}}
<a href="{{ $link }}" class="bg-primary-600 w-40 h-12 hover:bg-primary-900 shadow-md hover:shadow-xl hover:!rounded-full text-neutral-300 rounded-full fixed bottom-4 inset-x-1/2 text-center">
<i class="hover:rounded-full">{{ $text }}</i>
{{ if $icon }}
<span class="relative inline-block align-sub icon">
{{ $icon.Content | safeHTML }}
</span>
{{ else }}
{{ errorf `[BLOWFISH] Shortcode "icon" error in "%s": Resource "%s" not found. Check the path is correct or remove the shortcode.` .Page.Path (printf "icons/%s.svg" ($.Get 0)) }}
{{ end }}
</a>