mirror of
https://github.com/codeninjasuk/dojo.git
synced 2024-11-22 07:27:50 -05:00
Revampped UI
This commit is contained in:
elvistony
parent
342a31e85b
commit
f2025a44f8
15 changed files with 295 additions and 26 deletions
20
css/styles.css
Normal file
20
css/styles.css
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
.flickity-viewport {
|
||||
height: 250px !important;
|
||||
}
|
||||
|
||||
.flickity-slider >div > img{
|
||||
opacity: 0.5;
|
||||
transition: 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.flickity-slider > div > img:hover{
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.title > h2{
|
||||
font-size: 1.5rem;
|
||||
font-variant: petite-caps;
|
||||
font-weight: 600;
|
||||
margin-top: 20px;
|
||||
}
|
||||
BIN
img/logo-cn-langley.png
Normal file
BIN
img/logo-cn-langley.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 90 KiB |
BIN
img/options/create-gdp-docs.png
Normal file
BIN
img/options/create-gdp-docs.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 283 KiB |
BIN
img/options/create-gdp.png
Normal file
BIN
img/options/create-gdp.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 278 KiB |
BIN
img/options/create-impact.png
Normal file
BIN
img/options/create-impact.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 398 KiB |
BIN
img/options/dojo-gamejam.png
Normal file
BIN
img/options/dojo-gamejam.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
BIN
img/options/dojo-makecode.png
Normal file
BIN
img/options/dojo-makecode.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 191 KiB |
BIN
img/options/jr-dance-mat-typing.png
Normal file
BIN
img/options/jr-dance-mat-typing.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 717 KiB |
BIN
img/options/jr-dragon-drop.png
Normal file
BIN
img/options/jr-dragon-drop.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 639 KiB |
BIN
img/options/jr-mouse-house-games.png
Normal file
BIN
img/options/jr-mouse-house-games.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 336 KiB |
BIN
img/options/jr-scratch.png
Normal file
BIN
img/options/jr-scratch.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 309 KiB |
BIN
img/options/jr-thisissand.png
Normal file
BIN
img/options/jr-thisissand.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 MiB |
265
index.html
265
index.html
|
|
@ -1,31 +1,246 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
|
||||
<meta http-equiv="Pragma" content="no-cache">
|
||||
<meta http-equiv="Expires" content="0">
|
||||
<title>CN Langley | Dojo</title>
|
||||
<!--<base href="/">--><base href=".">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="icon" type="image/png" href="https://impact.codeninjas.com/favicon.ico">
|
||||
<meta name="theme-color" content="#1976d2">
|
||||
<link rel="stylesheet" href="/css/style.css">
|
||||
<link rel="stylesheet" href="/css/other.css">
|
||||
<link rel="stylesheet" href="/css/extra.css">
|
||||
<style></style>
|
||||
<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">
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="title" style="margin-top: 100px;">Welcome to Code Ninjas Langley!</h1>
|
||||
<h5 class="title" style="margin-top: 20px;">Choose your curriculum!</h5>
|
||||
<div class="main-menu">
|
||||
<div class="option">
|
||||
<button data-href="https://impact.codeninjas.com/"><img class="impact-logo" src="/img/impact-logo.png" alt="Impact Logo"></button>
|
||||
<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>
|
||||
</div>
|
||||
<div class="option">
|
||||
<button data-href="https://dojo.code.ninja/welcome/cn-langley-brk-uk/"><img class="impact-logo" src="/img/gdp-logo.png" alt="Impact Logo"></button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 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>
|
||||
</body>
|
||||
<script src="/js/fullscreen.js"></script>
|
||||
</html>
|
||||
<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>
|
||||
|
|
@ -14,7 +14,10 @@ function openFullscreen() {
|
|||
Array.from(document.querySelectorAll('.option>button')).forEach((ele)=>{
|
||||
ele.addEventListener('click',()=>{
|
||||
// openFullscreen();
|
||||
window.open(ele.dataset.href,'_blank',`height=${screen.height},width=${screen.width}`);
|
||||
abc = window.open(ele.dataset.href,'_blank',`height=${screen.height},width=${screen.width}`);
|
||||
setTimeout(()=>{
|
||||
abc.location.reload();
|
||||
},2000)
|
||||
})
|
||||
})
|
||||
|
||||
|
|
|
|||
31
old.html
Normal file
31
old.html
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
|
||||
<meta http-equiv="Pragma" content="no-cache">
|
||||
<meta http-equiv="Expires" content="0">
|
||||
<title>CN Langley | Dojo</title>
|
||||
<!--<base href="/">--><base href=".">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="icon" type="image/png" href="https://impact.codeninjas.com/favicon.ico">
|
||||
<meta name="theme-color" content="#1976d2">
|
||||
<link rel="stylesheet" href="/css/style.css">
|
||||
<link rel="stylesheet" href="/css/other.css">
|
||||
<link rel="stylesheet" href="/css/extra.css">
|
||||
<style></style>
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="title" style="margin-top: 100px;">Welcome to Code Ninjas Langley!</h1>
|
||||
<h5 class="title" style="margin-top: 20px;">Choose your curriculum!</h5>
|
||||
<div class="main-menu">
|
||||
<div class="option">
|
||||
<button data-href="https://impact.codeninjas.com/"><img class="impact-logo" src="/img/impact-logo.png" alt="Impact Logo"></button>
|
||||
</div>
|
||||
<div class="option">
|
||||
<button data-href="https://dojo.code.ninja/welcome/cn-langley-brk-uk/"><img class="impact-logo" src="/img/gdp-logo.png" alt="Impact Logo"></button>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script src="/js/fullscreen.js"></script>
|
||||
</html>
|
||||
Loading…
Reference in a new issue