2023-10-12 07:46:57 -04:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
2023-10-13 05:22:19 -04:00
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
<title>Code Ninjas | Langley Dojo</title>
|
|
|
|
|
<meta name="description" content="Code Ninjas Langley | Landing Page">
|
|
|
|
|
<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
|
|
|
|
|
<link rel="stylesheet" href="https://unpkg.com/tailwindcss@1.2.0/dist/tailwind.min.css">
|
|
|
|
|
<link rel="stylesheet" href="/css/styles.css">
|
2023-10-12 07:46:57 -04:00
|
|
|
</head>
|
2023-10-13 05:22:19 -04:00
|
|
|
<body class="" style="background-color: #1d0c37;">
|
|
|
|
|
<!-- bg-black -->
|
|
|
|
|
<div class="title mt-5 text-center justify-center items-center" style="text-align:-webkit-center;">
|
|
|
|
|
<img src="/img/logo-cn-langley.png" class="justify-center" width="80" alt="">
|
|
|
|
|
<h2 class="text-white text-lg">Welcome to Code Ninjas Langley!</h2>
|
2023-10-12 07:46:57 -04:00
|
|
|
</div>
|
2023-10-13 05:22:19 -04:00
|
|
|
<!-- min-h-screen -->
|
|
|
|
|
<main class="text-white flex items-center justify-center" x-data="carouselFilter()">
|
|
|
|
|
<div class="container grid grid-cols-1">
|
|
|
|
|
<div class="flex py-12 justify-center">
|
|
|
|
|
<a class="px-2 text-lg uppercase font-bold tracking-widest hover:text-white" :class="{ 'text-gray-800': active != 0 }" href="#" @click.prevent="changeActive(0)">CREATE</a>
|
|
|
|
|
<a class="px-2 text-lg uppercase font-bold tracking-widest hover:text-white" :class="{ 'text-gray-700': active != 1 }" href="#" @click.prevent="changeActive(1)">JUNIOR</a>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="row-start-2 col-start-1"
|
|
|
|
|
x-show="active == 0"
|
|
|
|
|
x-transition:enter="transition ease-out duration-300"
|
|
|
|
|
x-transition:enter-start="opacity-0 transform scale-90"
|
|
|
|
|
x-transition:enter-end="opacity-100 transform scale-100"
|
|
|
|
|
x-transition:leave="transition ease-in duration-300"
|
|
|
|
|
x-transition:leave-start="opacity-100 transform scale-100"
|
|
|
|
|
x-transition:leave-end="opacity-0 transform scale-90"
|
|
|
|
|
>
|
|
|
|
|
<div class="grid grid-cols-1 grid-rows-1" x-data="carousel()" x-init="init()">
|
|
|
|
|
<!-- <div class="col-start-1 row-start-1 relative z-20 flex items-center justify-center pointer-events-none">
|
|
|
|
|
|
|
|
|
|
<h1 class="absolute text-5xl uppercase font-black tracking-widest"
|
|
|
|
|
x-show="active == 0"
|
|
|
|
|
x-transition:enter="transition ease-out duration-300"
|
|
|
|
|
x-transition:enter-start="opacity-0 transform translate-y-12"
|
|
|
|
|
x-transition:enter-end="opacity-100 transform translate-y-0"
|
|
|
|
|
x-transition:leave="transition ease-out duration-300"
|
|
|
|
|
x-transition:leave-start="opacity-100 transform translate-y-0"
|
|
|
|
|
x-transition:leave-end="opacity-0 transform -translate-y-12"
|
|
|
|
|
>Create</h1>
|
|
|
|
|
<h1 class="absolute text-5xl uppercase font-black tracking-widest"
|
|
|
|
|
x-show="active == 1"
|
|
|
|
|
x-transition:enter="transition ease-out duration-300"
|
|
|
|
|
x-transition:enter-start="opacity-0 transform translate-y-12"
|
|
|
|
|
x-transition:enter-end="opacity-100 transform translate-y-0"
|
|
|
|
|
x-transition:leave="transition ease-out duration-300"
|
|
|
|
|
x-transition:leave-start="opacity-100 transform translate-y-0"
|
|
|
|
|
x-transition:leave-end="opacity-0 transform -translate-y-12"
|
|
|
|
|
>Avocado</h1>
|
|
|
|
|
<h1 class="absolute text-5xl uppercase font-black tracking-widest"
|
|
|
|
|
x-show="active == 2"
|
|
|
|
|
x-transition:enter="transition ease-out duration-300"
|
|
|
|
|
x-transition:enter-start="opacity-0 transform translate-y-12"
|
|
|
|
|
x-transition:enter-end="opacity-100 transform translate-y-0"
|
|
|
|
|
x-transition:leave="transition ease-out duration-300"
|
|
|
|
|
x-transition:leave-start="opacity-100 transform translate-y-0"
|
|
|
|
|
x-transition:leave-end="opacity-0 transform -translate-y-12"
|
|
|
|
|
>Mango</h1>
|
|
|
|
|
<h1 class="absolute text-5xl uppercase font-black tracking-widest"
|
|
|
|
|
x-show="active == 3"
|
|
|
|
|
x-transition:enter="transition ease-out duration-300"
|
|
|
|
|
x-transition:enter-start="opacity-0 transform translate-y-12"
|
|
|
|
|
x-transition:enter-end="opacity-100 transform translate-y-0"
|
|
|
|
|
x-transition:leave="transition ease-out duration-300"
|
|
|
|
|
x-transition:leave-start="opacity-100 transform translate-y-0"
|
|
|
|
|
x-transition:leave-end="opacity-0 transform -translate-y-12"
|
|
|
|
|
>Orange</h1>
|
|
|
|
|
</div> -->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="carousel col-start-1 row-start-1" x-ref="carousel">
|
|
|
|
|
<div class="w-3/5 px-2">
|
|
|
|
|
<img class="options" data-href="https://impact.codeninjas.com" src="/img/options/create-impact.png" loading="lazy">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="w-3/5 px-2">
|
|
|
|
|
<img class="options" data-href="https://dojo.code.ninja/welcome/cn-langley-brk-uk/" src="/img/options/create-gdp.png" loading="lazy">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="w-3/5 px-2">
|
|
|
|
|
<img class="options"
|
|
|
|
|
data-href="https://codeninjaslangley.co.uk/gdp/functions.html"
|
|
|
|
|
src="/img/options/create-gdp-docs.png"
|
|
|
|
|
loading="lazy">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="w-3/5 px-2">
|
|
|
|
|
<img class="options"
|
|
|
|
|
data-href="https://arcade.makecode.com/"
|
|
|
|
|
src="/img/options/dojo-makecode.png"
|
|
|
|
|
loading="lazy">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="w-3/5 px-2">
|
|
|
|
|
<img class="options"
|
|
|
|
|
data-href="https://forms.codeninjas.com/gamejamuk"
|
|
|
|
|
src="/img/options/dojo-gamejam.png"
|
|
|
|
|
loading="lazy">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="row-start-2 col-start-1"
|
|
|
|
|
x-show="active == 1"
|
|
|
|
|
x-transition:enter="transition ease-out duration-300"
|
|
|
|
|
x-transition:enter-start="opacity-0 transform scale-90"
|
|
|
|
|
x-transition:enter-end="opacity-100 transform scale-100"
|
|
|
|
|
x-transition:leave="transition ease-in duration-300"
|
|
|
|
|
x-transition:leave-start="opacity-100 transform scale-100"
|
|
|
|
|
x-transition:leave-end="opacity-0 transform scale-90"
|
|
|
|
|
>
|
|
|
|
|
<div class="grid grid-cols-1 grid-rows-1" x-data="carousel()" x-init="init()">
|
|
|
|
|
<!-- <div class="col-start-1 row-start-1 relative z-20 flex items-center justify-center pointer-events-none">
|
|
|
|
|
|
|
|
|
|
<h1 class="absolute text-5xl uppercase font-black tracking-widest"
|
|
|
|
|
x-show="active == 0"
|
|
|
|
|
x-transition:enter="transition ease-out duration-300"
|
|
|
|
|
x-transition:enter-start="opacity-0 transform translate-y-12"
|
|
|
|
|
x-transition:enter-end="opacity-100 transform translate-y-0"
|
|
|
|
|
x-transition:leave="transition ease-out duration-300"
|
|
|
|
|
x-transition:leave-start="opacity-100 transform translate-y-0"
|
|
|
|
|
x-transition:leave-end="opacity-0 transform -translate-y-12"
|
|
|
|
|
>Beth</h1>
|
|
|
|
|
<h1 class="absolute text-5xl uppercase font-black tracking-widest"
|
|
|
|
|
x-show="active == 1"
|
|
|
|
|
x-transition:enter="transition ease-out duration-300"
|
|
|
|
|
x-transition:enter-start="opacity-0 transform translate-y-12"
|
|
|
|
|
x-transition:enter-end="opacity-100 transform translate-y-0"
|
|
|
|
|
x-transition:leave="transition ease-out duration-300"
|
|
|
|
|
x-transition:leave-start="opacity-100 transform translate-y-0"
|
|
|
|
|
x-transition:leave-end="opacity-0 transform -translate-y-12"
|
|
|
|
|
>Lee</h1>
|
|
|
|
|
<h1 class="absolute text-5xl uppercase font-black tracking-widest"
|
|
|
|
|
x-show="active == 2"
|
|
|
|
|
x-transition:enter="transition ease-out duration-300"
|
|
|
|
|
x-transition:enter-start="opacity-0 transform translate-y-12"
|
|
|
|
|
x-transition:enter-end="opacity-100 transform translate-y-0"
|
|
|
|
|
x-transition:leave="transition ease-out duration-300"
|
|
|
|
|
x-transition:leave-start="opacity-100 transform translate-y-0"
|
|
|
|
|
x-transition:leave-end="opacity-0 transform -translate-y-12"
|
|
|
|
|
>Jade</h1>
|
|
|
|
|
<h1 class="absolute text-5xl uppercase font-black tracking-widest"
|
|
|
|
|
x-show="active == 3"
|
|
|
|
|
x-transition:enter="transition ease-out duration-300"
|
|
|
|
|
x-transition:enter-start="opacity-0 transform translate-y-12"
|
|
|
|
|
x-transition:enter-end="opacity-100 transform translate-y-0"
|
|
|
|
|
x-transition:leave="transition ease-out duration-300"
|
|
|
|
|
x-transition:leave-start="opacity-100 transform translate-y-0"
|
|
|
|
|
x-transition:leave-end="opacity-0 transform -translate-y-12"
|
|
|
|
|
>Drew</h1>
|
|
|
|
|
</div> -->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="carousel col-start-1 row-start-1" x-ref="carousel">
|
|
|
|
|
<div class="w-3/5 px-2">
|
|
|
|
|
<img class="options"
|
|
|
|
|
data-href="https://scratch.mit.edu/"
|
|
|
|
|
src="/img/options/jr-scratch.png"
|
|
|
|
|
loading="lazy">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="w-3/5 px-2">
|
|
|
|
|
<img class="options"
|
|
|
|
|
data-href="https://www.roomrecess.com/games/DragonDrop/play.html"
|
|
|
|
|
src="/img/options/jr-dragon-drop.png"
|
|
|
|
|
loading="lazy">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="w-3/5 px-2">
|
|
|
|
|
<img class="options"
|
|
|
|
|
data-href="https://www.bbc.co.uk/bitesize/topics/zf2f9j6/articles/z3c6tfr"
|
|
|
|
|
src="/img/options/jr-dance-mat-typing.png"
|
|
|
|
|
loading="lazy">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="w-3/5 px-2">
|
|
|
|
|
<img class="options"
|
|
|
|
|
data-href="https://thisissand.com/"
|
|
|
|
|
src="/img/options/jr-thisissand.png"
|
|
|
|
|
loading="lazy">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</main>
|
|
|
|
|
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"></script>
|
2023-10-12 07:46:57 -04:00
|
|
|
</body>
|
2023-10-13 05:22:19 -04:00
|
|
|
<script>
|
|
|
|
|
function carousel() {
|
|
|
|
|
return {
|
|
|
|
|
active: 0,
|
|
|
|
|
init() {
|
|
|
|
|
var flkty = new Flickity(this.$refs.carousel, {
|
|
|
|
|
wrapAround: true
|
|
|
|
|
});
|
|
|
|
|
flkty.on('change', i => this.active = i);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function carouselFilter() {
|
|
|
|
|
return {
|
|
|
|
|
active: 0,
|
|
|
|
|
changeActive(i) {
|
|
|
|
|
this.active = i;
|
|
|
|
|
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
let flkty = Flickity.data( this.$el.querySelectorAll('.carousel')[i] );
|
|
|
|
|
flkty.resize();
|
|
|
|
|
|
|
|
|
|
console.log(flkty);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function openFullscreen() {
|
|
|
|
|
elem = document.body;
|
|
|
|
|
if (elem.requestFullscreen) {
|
|
|
|
|
elem.requestFullscreen();
|
|
|
|
|
} else if (elem.webkitRequestFullscreen) { /* Safari */
|
|
|
|
|
elem.webkitRequestFullscreen();
|
|
|
|
|
} else if (elem.msRequestFullscreen) { /* IE11 */
|
|
|
|
|
elem.msRequestFullscreen();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Array.from(document.querySelectorAll('img.options')).forEach((ele)=>{
|
|
|
|
|
ele.addEventListener('click',()=>{
|
|
|
|
|
// openFullscreen();
|
|
|
|
|
abc = window.open(ele.dataset.href,'_blank',`height=${screen.height},width=${screen.width}`);
|
|
|
|
|
// setTimeout(()=>{
|
|
|
|
|
// abc.location.reload();
|
|
|
|
|
// },2000)
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
</html>
|
