index.html

<section class="hero">
  <div>
    <div class="blurb">
      <h1>Nix Camp</h1>
      <p>
	Nix Camp 2024 is a week long event from September 2nd to September 9th. A time
	to come together and learn about Nix whilst living near to the
	Welsh/British countryside, surrounded by nature and friends. There are
	no formal talks, training sessions or workshops; though attendees are
	encouraged to give informal talks to eachother. A week
	of living, breathing, learning and sometimes sleeping, with
	Nix.
      </p>
      <p>
	This is the <emph>fourth Nix Camp.</emph>
      </p>
      <div class="button-tray">
        <a class="button -primary" href="#tickets-and-booking">Tickets/Booking Information</a>
        <a class="button" href="https://tickets.nix.camp/nix.camp/2024/" target="_blank">Buy a Ticket</a>
        <a class="button" href="https://www.google.com/maps/place/Bidston+Observatory/@53.400884,-3.074189,106m/data=!3m1!1e3!4m9!3m8!1s0x487b26499a4fffff:0x320df8ee12638eff!5m2!4m1!1i2!8m2!3d53.400611!4d-3.0742279!16s%2Fg%2F11s9tnk7rq!5m1!1e4?entry=ttu" target="_blank">View on Google Maps</a>
        <a class="button" href="https://nix.how/blog/nixcamp-2021-to-2022">Read the 2022 Blog Post!</a>
        <a class="button" href="https://nix.how/blog/nixcamp-2023">Read the 2023 Blog Post!</a>
      </div>
    </div>
  </div>
</section>
<section class="info">
  <div style="margin: auto; width: 50%; padding: 10px;">
    <h2 style="text-align:center" id="spaces">Nix Camp 2024 is On!</h2>
      <p style="text-align:center">
        <br>
        <a href="https://discourse.nixos.org/t/nix-camp-2024-is-on/49287">Read the NixOS Discourse Announcement here!</a>
        <br>
  You can join our Matrix Space <a href="https://matrix.to/#/#nix-camp:matrix.org">by clicking here.</a>
      </p>
  </div>
</section>
<section class="info">
  <div>
    <h2 id="tickets-and-booking">Tickets/Booking</h2>
    <p>
      The Nix Camp 2024 dates are <emph>September 2nd until September 9th</emph>.
      Tickets are priced at <emph>£300 per person</emph>. This covers
      accomodation and attendance. An AirBNB ticket is also available, and
			priced at £200 per person if you are able to find your own
			accomodation
		</p>
    <p>
      Nix Camp is a 1 week long event.
    </p>
    <p>
			Nix Camp is proudly using the <a href="https://search.nixos.org/options?channel=unstable&show=services.pretix.enable&from=0&size=50&sort=relevance&type=packages&query=pretix">NixOS module for
			pretix</a> with stripe integration to manage ticketing this
			year, as well as the <a href="https://gitlab.com/simple-nixos-mailserver/nixos-mailserver">simple-nixos-mailserver</a> for mail
			services:

			<pre><code>services.pretix.enable = true</code></pre>
			<pre><code>mailserver.enable = true</code></pre>
    </p>
  </div>
</section>
<section class="info">
  <div>
    <h2 id="accommodation">Venue & Accommodation
    <div style="text-decoration:none; display: flex; justify-content: center; overflow:hidden;height:500px;"><div id="gmap-canvas" style="height:100%; width:100%;max-width:100%;"><iframe style="height: 100%; width: 100%; border: 0px; currentcolor;" frameborder="0" src="https://www.google.com/maps/embed/v1/place?q=Bidston+Observatory&amp;key=AIzaSyBFw0Qbyq9zTFTd-tUY6dZWTgaQzuU17R8"></iframe></div>
    </h2>
    <p>

      Accommodation will be provided by the <a href="https://bidstonobservatory.org/">BOARC</a>, an artistic research center that
      promotes creativity, collaboration and innovation located in Birkenhead, Wirral, Merseyside, England.

      <emph>Wilding Way, Birkenhead, Prenton CH43 7RA</emph>

      Practical information about how to arrive at the venue and more can be found at https://bidstonobservatory.org/practical-info

      <blockquote>
        <i>
        Bidston Observatory Artistic Research Centre (BOARC) is a self-organising,
        communal study site. It is a not-for-profit project that focuses on
        providing individual users and groups with a low cost, temporary place
        to work and stay together; to develop projects that require time and
        space in a flexible, non-pressured environment.
        </i>
      </blockquote>

 <!-- Images used to open the lightbox -->
<div class="row" style="display: flex; justify-content: center;">
  <div class="column">
    <img src="https://cdn.sanity.io/images/j9dvtkb6/production/3ef2d28431700f15ba3ca30c2a7db5ea8faed304-2000x1334.jpg" onclick="openModal();currentSlide(1)" class="hover-shadow">
  </div>
  <div class="column">
    <img src="https://cdn.sanity.io/images/j9dvtkb6/production/a9acb79cee19f93fb13635015dddfdcb627272ed-1072x712.jpg" onclick="openModal();currentSlide(2)" class="hover-shadow">
  </div>
</div>
<div class="row" style="display: flex; justify-content: center;">
  <div class="column">
    <img src="https://cdn.sanity.io/images/j9dvtkb6/production/e7fc31d1db61f69b26016f5c730cb081033ba4e2-1072x712.jpg" onclick="openModal();currentSlide(3)" class="hover-shadow">
  </div>
  <div class="column">
    <img src="https://cdn.sanity.io/images/j9dvtkb6/production/34bf325d42a832881e856c79e007da6d20727faf-984x654.jpg" onclick="openModal();currentSlide(4)" class="hover-shadow">
  </div>
</div>

<!-- The Modal/Lightbox -->
<div id="myModal" class="modal">
  <span class="close cursor" onclick="closeModal()">&times;</span>
  <div class="modal-content">

    <div class="mySlides">
      <div class="numbertext">1 / 4</div>
      <img src="https://cdn.sanity.io/images/j9dvtkb6/production/3ef2d28431700f15ba3ca30c2a7db5ea8faed304-2000x1334.jpg" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">2 / 4</div>
      <img src="https://cdn.sanity.io/images/j9dvtkb6/production/a9acb79cee19f93fb13635015dddfdcb627272ed-1072x712.jpg" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">3 / 4</div>
      <img src="https://cdn.sanity.io/images/j9dvtkb6/production/e7fc31d1db61f69b26016f5c730cb081033ba4e2-1072x712.jpg" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">4 / 4</div>
      <img src="https://cdn.sanity.io/images/j9dvtkb6/production/34bf325d42a832881e856c79e007da6d20727faf-984x654.jpg" style="width:100%">
    </div>

    <!-- Next/previous controls -->
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>

    <!-- Caption text -->
    <div class="caption-container">
      <p id="caption"></p>
    </div>

    <!-- Thumbnail image controls -->
    <div class="column">
      <img class="demo" src="https://cdn.sanity.io/images/j9dvtkb6/production/3ef2d28431700f15ba3ca30c2a7db5ea8faed304-2000x1334.jpg" onclick="currentSlide(1)">
    </div>

    <div class="column">
      <img class="demo" src="https://cdn.sanity.io/images/j9dvtkb6/production/a9acb79cee19f93fb13635015dddfdcb627272ed-1072x712.jpg" onclick="currentSlide(2)">
    </div>

    <div class="column">
      <img class="demo" src="https://cdn.sanity.io/images/j9dvtkb6/production/e7fc31d1db61f69b26016f5c730cb081033ba4e2-1072x712.jpg" onclick="currentSlide(3)">
    </div>

    <div class="column">
      <img class="demo" src="https://cdn.sanity.io/images/j9dvtkb6/production/34bf325d42a832881e856c79e007da6d20727faf-984x654.jpg" onclick="currentSlide(4)">
    </div>
  </div>
</div>
    </p>
    <p>
      Food and accommodation is offered on-site for the duration of the event
      <emph>this cost is included in the ticket price.</emph> There are many
      AirBNB and hotel offerings available in the surrounding area if this
			arrangement does not suit you, or full accomodation tickets are out of
			stock.
    </p>
    <p>
      Food will still be provided to those who choose not to stay overnight at
      the venue, as this cost is included in the ticket price.
    </p>
  </div>
</section>

<section class="faq">
  <div class="item text">
    <h2>FAQ</h2>
    <ul>
      <li>
	<emph>Who is Organizing This?</emph> - This event is being organised by
	enthusiasts, for enthusiasts. Nix Camp 2024 is primarily organised by <a
	href="https://twitter.com/MatthewCroughan">Matthew Croughan</a> who is active
	within the NixOS community.
      </li>
      <li>
	<emph>Is this event sponsored?</emph> - We have not yet recieved any interest in sponsorship. If you would like to sponsor the camp, please email <a
	href="mailto:matthew@nix.camp">matthew@nix.camp</a>.
      </li>
      <li>
        <emph>Where can I get more information?</emph> -
        Please send questions to <a href="mailto:matthew@nix.camp">matthew@nix.camp</a>.
      </li>
    </ul>
  </div>
</section>

<script>
// Open the Modal
function openModal() {
  document.getElementById("myModal").style.display = "block";
}

// Close the Modal
function closeModal() {
  document.getElementById("myModal").style.display = "none";
}

var slideIndex = 1;
showSlides(slideIndex);

// Next/previous controls
function plusSlides(n) {
  showSlides(slideIndex += n);
}

// Thumbnail image controls
function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("demo");
  var captionText = document.getElementById("caption");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
  captionText.innerHTML = dots[slideIndex-1].alt;
}

</script>