CINXE.COM
Home - Raildays
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Home - Raildays</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link rel="stylesheet" type="text/css" href="/assets/css/tailwind.css"> <link rel="stylesheet" type="text/css" href="/assets/css/splide/splide.min.css"> <link rel="stylesheet" type="text/css" href="/assets/css/calendar/caleandar.css"> <link rel="stylesheet" type="text/css" href="/assets/css/leaflet/leaflet.css"> <script type="text/javascript" src="/assets/js/leaflet/leaflet.js"></script> <script type="text/javascript" src="/assets/js/splide/splide.min.js"></script> <script type="text/javascript" src="/assets/js/calendar/caleandar.js"></script> <link rel="stylesheet" type="text/css" href="/assets/css/main.css"> <script src="//unpkg.com/alpinejs" defer></script> </head> <body id="body"> <div class="min-h-screen flex flex-col"> <header id="header" class="fixed left-0 top-0 w-full shadow-lg"> <div x-data="{open:false}" class="relative bg-white"> <div class=""> <div class="flex justify-between items-center"> <div class="flex justify-start lg:w-0 lg:flex-1"> <a href="/" class="flex items-center"> <img class="h-full" src="/assets/logo.svg" alt=""> <span class="logo-text">RAILDAYS</span> </a> </div> <div class="mr-4 flex md:hidden"> <button @click="open = !open" type="button" class="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500" aria-expanded="false"> <span class="sr-only">Open menu</span> <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /> </svg> </button> </div> <nav class="hidden md:flex shrink-0"> <a href="/" class="tracking-wide uppercase px-3 font-medium"> <span class="rounded px-6 py-3 bg-brand text-gray-900">Home</span> </a> <a href="/railways" class="tracking-wide uppercase px-3 font-medium"> <span class="rounded px-6 py-3 text-gray-500 hover:text-gray-900">Railways</span> </a> <a href=" /events" class="tracking-wide uppercase px-3 font-medium"> <span class="rounded px-6 py-3 text-gray-500 hover:text-gray-900">Events</span> </a> <a href=" /experiences" class="tracking-wide uppercase px-3 font-medium"> <span class="rounded px-6 py-3 text-gray-500 hover:text-gray-900">Experiences</span> </a> </nav> <div class="pr-10 hidden lg:flex items-center justify-end md:flex-1 lg:w-0" style="line-height: initial;"> <form method="GET" action="/search" class="relative"> <input type="text" name="search" class="rounded-lg -ml-px relative inline-flex items-center px-6 py-3 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500" placeholder="Search..." value=""> <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-gray-400"> <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" /> </svg> </div> <button type="submit" class="hidden">Search</button> </form> </div> </div> </div> <div x-show="open" x-transition:enter="transition ease-out duration-100 transform" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-75 transform" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" class="absolute top-0 inset-x-0 p-2 transition transform origin-top md:hidden"> <div class="rounded-lg bg shadow-md ring-1 ring-black ring-opacity-5 overflow-hidden"> <div class="px-5 pt-4 flex items-center justify-between"> <div> <a href="/" class="flex items-center"> <span class="logo-text-mobile">RAILDAYS</span> </a> </div> <div class="-mr-2"> <button @click="open = !open" type="button" class="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-600"> <span class="sr-only">Close menu</span> <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /> </svg> </button> </div> </div> <div class="pt-5 pb-6"> <div class="px-2 space-y-1" style="line-height: 20px!important;"> <a href="/" class="block px-3 py-2 rounded-md font-medium text-gray-900 hover:bg-gray-50">Home</a> <a href="/railways" class="block px-3 py-2 rounded-md font-medium text-gray-900 hover:bg-gray-50">Railways</a> <a href="/events" class="block px-3 py-2 rounded-md font-medium text-gray-900 hover:bg-gray-50">Events</a> <a href="/experiences" class="block px-3 py-2 rounded-md font-medium text-gray-900 hover:bg-gray-50">Experiences</a> </div> </div> </div> </div> </div> </header> <main class="flex-grow m-4 md:m-10"> <div class="bg-white rounded-md p-2 mb-4 md:mb-10"> <section class="splide" aria-label="Raildays"> <div class="splide__track"> <ul class="splide__list"> <li class="splide__slide"><img alt="A young boy walks down a train corridor making a thumbs-up sign" style="max-height: 600px;" class="h-full rounded w-full object-cover" src="/images/photo1.jpeg" /></li> <li class="splide__slide"><img alt="A family waves at the crew of a steam locomotive" style="max-height: 600px;" class="h-full rounded w-full object-cover" src="/images/photo2.jpeg" /></li> <li class="splide__slide"><img alt="The crew of a steam locomotive wave at a family" style="max-height: 600px;" class="h-full rounded w-full object-cover" src="/images/photo3.jpeg" /></li> <li class="splide__slide"><img alt="A young girl looks out the window of a heritage train coach" style="max-height: 600px;" class="h-full rounded w-full object-cover" src="/images/photo4.jpeg" /></li> <li class="splide__slide"><img alt="A happy family sit in a heritage train coach" style="max-height: 600px;" class="h-full rounded w-full object-cover" src="/images/photo5.jpeg" /></li> <li class="splide__slide"><img alt="A young family sit on a bench on a platform and wave at a train" style="max-height: 600px;" class="h-full rounded w-full object-cover" src="/images/photo6.jpeg" /></li> <li class="splide__slide"><img alt="A young family smile at a ticket collector on a train" style="max-height: 600px;" class="h-full rounded w-full object-cover" src="/images/photo7.jpeg" /></li> </ul> </div> </section> </div> <div class="rounded-md relative overflow-hidden mb-4 md:mb-10"> <section class="md:grid grid-cols-5"> <img alt="Raildays App Screenshot #1" src="/assets/screenshot1.jpeg"> <img alt="Raildays App Screenshot #2" src="/assets/screenshot2.jpeg"> <img alt="Raildays App Screenshot #3" src="/assets/screenshot3.jpeg"> <img alt="Raildays App Screenshot #4" src="/assets/screenshot4.jpeg"> <img alt="Raildays App Screenshot #5" src="/assets/screenshot5.jpeg"> </section> </div> <div class="rounded-md relative overflow-hidden mb-4 md:mb-10"> <div class="bg-gold px-5 py-2 text-center font-bold text-white text-2xl">Events for every interest!</div> <section class="md:grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6 bg-brand"> <a href="/events?type=steam-gala" class="hover:opacity-75 text-white flex flex-col justify-center" style="background: #9acce7"> <img src="https://www.heritage-ops.org.uk/clipart/raildays/event_type_images/1" class="h-48 object-cover" /> <div style="height: 80px; overflow:hidden;" class="px-10 flex items-center justify-center text-center font-bold text-lg">Steam Gala. (10)</div> </a> <a href="/events?type=diesel-gala" class="hover:opacity-75 text-white flex flex-col justify-center" style="background: #9acce7"> <img src="https://www.heritage-ops.org.uk/clipart/raildays/event_type_images/3" class="h-48 object-cover" /> <div style="height: 80px; overflow:hidden;" class="px-10 flex items-center justify-center text-center font-bold text-lg">Diesel Gala (8)</div> </a> <a href="/events?type=children-s-event" class="hover:opacity-75 text-white flex flex-col justify-center" style="background: #9acce7"> <img src="https://www.heritage-ops.org.uk/clipart/raildays/event_type_images/7" class="h-48 object-cover" /> <div style="height: 80px; overflow:hidden;" class="px-10 flex items-center justify-center text-center font-bold text-lg">Children's Event (19)</div> </a> <a href="/events?type=days-out-with-thomas" class="hover:opacity-75 text-white flex flex-col justify-center" style="background: #9acce7"> <img src="https://www.heritage-ops.org.uk/clipart/raildays/event_type_images/4" class="h-48 object-cover" /> <div style="height: 80px; overflow:hidden;" class="px-10 flex items-center justify-center text-center font-bold text-lg">Days out with Thomas (5)</div> </a> <a href="/events?type=beer-ale-event" class="hover:opacity-75 text-white flex flex-col justify-center" style="background: #9acce7"> <img src="https://www.heritage-ops.org.uk/clipart/raildays/event_type_images/21" class="h-48 object-cover" /> <div style="height: 80px; overflow:hidden;" class="px-10 flex items-center justify-center text-center font-bold text-lg">Beer / Ale Event (2)</div> </a> <a href="/events?type=vintage-vehicles" class="hover:opacity-75 text-white flex flex-col justify-center" style="background: #9acce7"> <img src="https://www.heritage-ops.org.uk/clipart/raildays/event_type_images/18" class="h-48 object-cover" /> <div style="height: 80px; overflow:hidden;" class="px-10 flex items-center justify-center text-center font-bold text-lg">Vintage Vehicles (6)</div> </a> <a href="/events?type=1940s-event" class="hover:opacity-75 text-white flex flex-col justify-center" style="background: #9acce7"> <img src="https://www.heritage-ops.org.uk/clipart/raildays/event_type_images/19" class="h-48 object-cover" /> <div style="height: 80px; overflow:hidden;" class="px-10 flex items-center justify-center text-center font-bold text-lg">1940s Event (1)</div> </a> <a href="/events?type=model-railways-event" class="hover:opacity-75 text-white flex flex-col justify-center" style="background: #9acce7"> <img src="https://www.heritage-ops.org.uk/clipart/raildays/event_type_images/22" class="h-48 object-cover" /> <div style="height: 80px; overflow:hidden;" class="px-10 flex items-center justify-center text-center font-bold text-lg">Model Railways Event (1)</div> </a> <a href="/events?type=demonstration-goods-workings" class="hover:opacity-75 text-white flex flex-col justify-center" style="background: #9acce7"> <img src="https://www.heritage-ops.org.uk/clipart/raildays/event_type_images/16" class="h-48 object-cover" /> <div style="height: 80px; overflow:hidden;" class="px-10 flex items-center justify-center text-center font-bold text-lg">Demonstration Goods Workings (4)</div> </a> <a href="/events?type=halloween-event" class="hover:opacity-75 text-white flex flex-col justify-center" style="background: #9acce7"> <img src="https://www.heritage-ops.org.uk/clipart/raildays/event_type_images/24" class="h-48 object-cover" /> <div style="height: 80px; overflow:hidden;" class="px-10 flex items-center justify-center text-center font-bold text-lg">Halloween Event (1)</div> </a> <a href="/events?type=christmas-event" class="hover:opacity-75 text-white flex flex-col justify-center" style="background: #9acce7"> <img src="https://www.heritage-ops.org.uk/clipart/raildays/event_type_images/6" class="h-48 object-cover" /> <div style="height: 80px; overflow:hidden;" class="px-10 flex items-center justify-center text-center font-bold text-lg">Christmas Event (50)</div> </a> <a href="/events?type=illuminated-train" class="hover:opacity-75 text-white flex flex-col justify-center" style="background: #9acce7"> <img src="https://www.heritage-ops.org.uk/clipart/raildays/event_type_images/23" class="h-48 object-cover" /> <div style="height: 80px; overflow:hidden;" class="px-10 flex items-center justify-center text-center font-bold text-lg">Illuminated Train (13)</div> </a> </section> </div> <div class="rounded-md relative overflow-hidden bg-brand"> <div class="absolute top-0 bottom-0 left-0 w-full h-full flex"> <div class="w-1/2 flex flex-col justify-end"> <div class="w-full"> <img style="margin-left: -1px;" class=" object-contain" src="/assets/raildays-footer-1.png"> </div> </div> <div class="w-1/2 flex flex-col justify-end"> <div class="w-full"> <img class="float-right object-contain" src="/assets/raildays-footer-2.png"> </div> </div> </div> <div class="pt-10 pb-10 md:pt-32 md:pb-48 relative"> <div class="max-w-4xl px-5 md:px-10 mx-auto"> <h2 class="text-center text-3xl mb-16">Over 150 UK railway venues for a great family Railday out!</h2> <section class="flex justify-center gap-10"> <a class="max-w-xs" href="https://apps.apple.com/gb/app/id1569791008" title="Raildays on App Store"> <img alt="Available on the App Store" src="/assets/astore.png"> </a> <a class="max-w-xs" href="https://play.google.com/store/apps/details?id=com.raildays.android" title="Raildays on Google Play"> <img alt="Get it on Google Play" src="/assets/gplay.png"> </a> </section> <div class="home-white-opacity p-5 md:p-10 rounded mt-16 mx-auto text-center"> <div class="text-xl mb-6">Raildays is a mobile app which contains information and events from the UK's rich heritage railway scene.</div> <div class="text-xl">Whether you're local, a family, a tourist, or a railway enthusiast, Raildays is the app for you!</div> </div> </div> </div> </div> </main> <footer id="footer" class="bg-white"> <div class="max-w-7xl mx-auto py-12 px-4 overflow-hidden sm:px-6 lg:px-8"> <div class="flex justify-center items-center mb-16"> <img src="/assets/icon.png" style="height: 250px;" /> </div> <nav class=" -mx-5 -my-2 text-center md:flex flex-wrap justify-center" aria-label="Footer"> <div class="px-5 py-2"> <a href="/" class="font-bold text-gray-900"> Home </a> </div> <div class="px-5 py-2"> <a href="/railways" class="text-gray-500 hover:text-gray-900"> Railways </a> </div> <div class="px-5 py-2"> <a href="/events" class="text-gray-500 hover:text-gray-900"> Events </a> </div> <div class="px-5 py-2"> <a href="/experiences" class="text-gray-500 hover:text-gray-900"> Experiences </a> </div> <div class="px-5 py-2"> <a href="/contact" class="text-gray-500 hover:text-gray-900"> Contact, Terms & Privacy </a> </div> </nav> <p class="mt-8 text-center text-gray-400">© 2024 Raildays. All rights reserved.</p> </div> </footer> </div> <script> var items = document.getElementsByClassName('splide'); if (items.length) { document.addEventListener('DOMContentLoaded', function() { var splide = new Splide('.splide'); splide.mount(); }); } var header = document.getElementById("header"); window.onscroll = function() { if (window.pageYOffset > 50) { header.classList.add("scrolled"); } else { header.classList.remove("scrolled"); } }; var rmts = document.getElementsByClassName('read-more'); for (i = 0; i < rmts.length; ++i) { rmts[i].addEventListener('click', function (e) { this.classList.toggle('open'); this.classList.remove('read-more'); }); } function getLocation(redirect) { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { let lat = position.coords.latitude; let lng = position.coords.longitude; let location = { lat: lat, lng: lng } var xhttp = new XMLHttpRequest(); xhttp.open("POST", "/api/location", true); xhttp.setRequestHeader("Content-Type", "application/json"); xhttp.send(JSON.stringify(location)); if (redirect) { window.location = window.location; } }, function(error) { console.log(error); }); } } //getLocation(false); var calendar = document.getElementById('calendar'); if (calendar && _EVENTS) { var calendar_obj = caleandar(calendar, _EVENTS); } var timetable_calendar = document.getElementById('timetable-calendar'); if (timetable_calendar && _TIMETABLES) { var timetable_calendar = caleandar(timetable_calendar, _TIMETABLES); } </script> </body> </html>