Part 1. (Design ~70%)

This commit is contained in:
CodeKyana 2024-07-31 16:23:31 +02:00
parent 20c6230ff5
commit 3fb8df47cd
62 changed files with 1793 additions and 32 deletions

1393
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -16,16 +16,25 @@
"@sveltejs/kit": "^2.0.0", "@sveltejs/kit": "^2.0.0",
"@sveltejs/vite-plugin-svelte": "^3.0.0", "@sveltejs/vite-plugin-svelte": "^3.0.0",
"@types/eslint": "^9.6.0", "@types/eslint": "^9.6.0",
"autoprefixer": "^10.4.19",
"eslint": "^9.0.0", "eslint": "^9.0.0",
"eslint-config-prettier": "^9.1.0", "eslint-config-prettier": "^9.1.0",
"eslint-plugin-svelte": "^2.36.0", "eslint-plugin-svelte": "^2.36.0",
"globals": "^15.0.0", "globals": "^15.0.0",
"postcss": "^8.4.40",
"prettier": "^3.1.1", "prettier": "^3.1.1",
"prettier-plugin-svelte": "^3.1.2", "prettier-plugin-svelte": "^3.1.2",
"svelte": "^4.2.7", "svelte": "^4.2.7",
"svelte-check": "^3.6.0", "svelte-check": "^3.6.0",
"tailwindcss": "^3.4.7",
"typescript": "^5.0.0", "typescript": "^5.0.0",
"vite": "^5.0.3" "vite": "^5.0.3"
}, },
"type": "module" "type": "module",
"dependencies": {
"@popperjs/core": "^2.11.8",
"flowbite": "^2.4.1",
"flowbite-svelte": "^0.46.15",
"tailwind-merge": "^2.4.0"
}
} }

6
postcss.config.js Normal file
View File

@ -0,0 +1,6 @@
export default {
plugins: {
tailwindcss: {},
autoprefixer: {}
}
};

View File

@ -2,11 +2,43 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" /> <link
rel="apple-touch-icon"
sizes="144x144"
href="%sveltekit.assets%/assets/images/favicons/apple-touch-icon.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="%sveltekit.assets%/assets/images/favicons/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="%sveltekit.assets%/assets/images/favicons/favicon-16x16.png"
/>
<link rel="manifest" href="%sveltekit.assets%/site.webmanifest" />
<link
rel="mask-icon"
href="%sveltekit.assets%/assets/images/favicons/safari-pinned-tab.svg"
color="#da532c"
/>
<link rel="shortcut icon" href="%sveltekit.assets%/assets/images/favicons/favicon.ico" />
<meta name="apple-mobile-web-app-title" content="Ninjin: DB" />
<meta name="application-name" content="Ninjin: DB" />
<meta name="msapplication-TileColor" content="#da532c" />
<meta
name="msapplication-TileImage"
content="%sveltekit.assets%/assets/images/favicons/mstile-144x144.png"
/>
<meta name="msapplication-config" content="%sveltekit.assets%/browserconfig.xml" />
<meta name="theme-color" content="#da532c" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head% %sveltekit.head%
</head> </head>
<body data-sveltekit-preload-data="hover"> <body data-sveltekit-preload-data="hover" class="min-h-screen">
<div style="display: contents">%sveltekit.body%</div> <div style="display: contents">%sveltekit.body%</div>
</body> </body>
</html> </html>

View File

@ -0,0 +1,71 @@
<script>
import logoDiscord from '$lib/assets/images/logo_discord.png';
import logoYoutube from '$lib/assets/images/logo_youtube.png';
import logoNinjin from '$lib/assets/images/logo_ninjin.png';
var currentYears = new Date().getFullYear();
const iconLinks = [
{
name: 'Rejoindre notre Discord',
url: '/api/redirect?to=discord',
icon: logoDiscord
},
{
name: 'Regarder nous sur YouTube',
url: '/api/redirect?to=youtube',
icon: logoYoutube
},
{
name: 'Télécharger le Launcher',
url: '/api/redirect?to=launcher-download',
icon: logoNinjin
}
];
</script>
<div class="mt-[5vh]">
<footer
class="fixed bottom-0 left-0 z-20 w-full p-2 bg-[#191e14] text-neutral-200 shadow md:flex md:items-center md:justify-between md:p-2"
>
<span class="text-sm sm:text-center">
<small>
{currentYears} ©
<a
href="/api/redirect?to=github-dev"
title="Voir le Profil GitHub"
target="_blank"
rel="noopener"
class="hover:underline"
>
AnotherFrench
</a>
pour
<a
href="/api/redirect?to=github&repo=web-v2"
title="Voir le Repo GitHub"
target="_blank"
rel="noopener"
class="hover:underline"
>
Ninjin
</a> - Tous les droits sont réservés à leurs détenteurs.
</small>
</span>
<ul class="flex flex-wrap items-center mt-3 text-sm font-medium sm:mt-0">
{#each iconLinks as iLink}
<a
href={iLink.url}
title={iLink.name}
rel="noopener"
target="_self"
class="border-b-2 border-transparent mx-1.5 sm:mx-2"
>
<div class="w-5 h-5 fill-current">
<img src={iLink.icon} alt={iLink.name} draggable="false" />
</div>
</a>
{/each}
</ul>
</footer>
</div>

View File

@ -0,0 +1,85 @@
<script>
// @ts-nocheck
import { page } from '$app/stores';
import {
Button,
Dropdown,
DropdownItem,
Avatar,
DropdownHeader,
DropdownDivider
} from 'flowbite-svelte';
import logoNinjin from '$lib/assets/images/logo_ninjin.png';
const links = [
{
name: 'Accueil',
url: '/'
},
{
name: 'Rejoindre',
url: '/join'
},
{
name: 'Features',
url: '/features'
},
{
name: 'Map',
url: '/map'
},
{
name: 'Règles',
url: '/rules'
}
];
</script>
<header>
<nav class="bg-[#191e14] shadow">
<div class="container flex items-center justify-center p-3.5 mx-auto capitalize">
<div class="large-screen hidden md:block">
{#each links as link}
<a
href={link.url}
title={link.name}
rel="noopener"
target="_self"
class={`mx-1.5 sm:mx-6 ${
link.url === $page.url.pathname
? 'text-transparent bg-clip-text bg-gradient-to-r from-red-500 to-yellow-400 hover:from-red-300 hover:to-yellow-200'
: 'text-neutral-300 hover:text-neutral-100'
}`}
>
{link.name}
</a>
{/each}
</div>
<div class="small-screen sm:block md:hidden">
<Button pill color="#191e14" id="small_screen_navbar" class="!p-1">
<Avatar src={logoNinjin} class="me-2" />
Menu
</Button>
<Dropdown inline triggeredBy="#small_screen_navbar" class="bg-[#191e14]">
{#each links as link}
<DropdownItem
href={link.url}
title={link.name}
rel="noopener"
target="_self"
class={`font-medium py-2 px-4 text-sm hover:bg-[#192809] ${
link.url === $page.url.pathname
? 'text-transparent bg-clip-text bg-gradient-to-r from-red-500 to-yellow-400 hover:from-red-300 hover:to-yellow-200'
: 'text-neutral-300 hover:text-neutral-100'
}`}
>
{link.name}
</DropdownItem>
{/each}
</Dropdown>
</div>
</div>
</nav>
</header>

View File

@ -0,0 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 522 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 755 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 609 KiB

28
src/routes/+layout.svelte Normal file
View File

@ -0,0 +1,28 @@
<script>
import '$lib/assets/css/tailwind.css';
import Header from '../components/Header.svelte';
import Footer from '../components/Footer.svelte';
import logoHeader from '$lib/assets/images/logo_header.png';
</script>
<div class="container mx-auto px-4">
<Header />
<main class="text-center mt-4">
<img src={logoHeader} alt="Ninjin Logo" class="w-full max-w-2xl mx-auto" draggable="false" />
<section class="bg-green-800 bg-opacity-70 border-8 border-black mx-10 my-4 p-6 rounded-lg">
<slot />
</section>
</main>
</div>
<Footer />
<style lang="postcss">
:global(body) {
background-image: url('/assets/images/background.png'), url('/assets/images/background_end.png');
background-repeat: no-repeat, repeat;
background-size: contain;
font-family: 'Olney', Verdana, sans-serif;
color: white;
}
</style>

View File

@ -0,0 +1,24 @@
<div
class="flex min-h-[50dvh] flex-col items-center justify-center bg-background px-4 py-12 sm:px-6 lg:px-8"
>
<div class="mx-auto max-w-md text-center">
<div class="mx-auto h-12 w-12 text-primary" />
<h1 class="mt-4 text-6xl font-bold tracking-tight text-foreground sm:text-7xl">404</h1>
<p class="mt-4 text-muted-foreground">
Oups, il semble que la page que vous recherchez n'existe pas.
</p>
<div class="mt-6">
<a
href="/"
class="inline-flex items-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow-sm transition-colors hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
>
<button
type="button"
class="text-black bg-gradient-to-br from-red-500 to-yellow-400 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-pink-200 dark:focus:ring-pink-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 mb-2"
>
Retourner à l'Accueil
</button>
</a>
</div>
</div>
</div>

View File

@ -0,0 +1,30 @@
import { redirect } from '@sveltejs/kit';
/** @type {import('./$types').PageLoad} */
export function load({ params, url }) {
let goTo = url.searchParams.get('to');
let repository = url.searchParams.get('repo');
switch (goTo) {
case 'discord':
redirect(302, `https://discord.gg/JcbAENk`);
case 'youtube':
redirect(302, `https://www.youtube.com/channel/UCRQcMWRLBLC-jj1XvyCv7yA`);
case 'github-dev':
redirect(302, `https://github.com/anotherfrench`);
case 'github':
switch (repository) {
case 'web-v2':
redirect(302, `https://github.com/NinjinMC/Ninjin.Web.v2`);
default:
redirect(302, `https://github.com/NinjinMC`);
}
case 'launcher-download':
redirect(
302,
`https://github.com/NinjinMC/Ninjin/raw/master/download/NinjinLauncherBootstrap.jar`
);
default:
redirect(302, `/`);
}
}

View File

View File

View File

@ -0,0 +1,11 @@
<script>
import map from '$lib/assets/images/ninjin_map.png';
</script>
<h2 class="text-center text-4xl">Map</h2>
<p class="text-center text-lg mt-4">
Voici la map du serveur, les dimensions sont 10000x8000 blocks.
</p>
<div class="flex justify-center mt-6">
<img src={map} alt="map" draggable="false" class="w-full max-w-3xl h-auto rounded-lg" />
</div>

View File

Binary file not shown.

After

Width:  |  Height:  |  Size: 690 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

View File

@ -0,0 +1,26 @@
# Your Favicon Package
This package was generated with [RealFaviconGenerator](https://realfavicongenerator.net/) [v0.16](https://realfavicongenerator.net/change_log#v0.16)
## Install instructions
To install this package:
Extract this package in <code>&lt;web site&gt;/%sveltekit.assets%/assets/images/favicon/</code>. If your site is <code>http://www.example.com</code>, you should be able to access a file named <code>http://www.example.com/%sveltekit.assets%/assets/images/favicon/favicon.ico</code>.
Insert the following code in the `head` section of your pages:
<link rel="apple-touch-icon" sizes="144x144" href="%sveltekit.assets%/assets/images/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="%sveltekit.assets%/assets/images/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="%sveltekit.assets%/assets/images/favicon/favicon-16x16.png">
<link rel="manifest" href="%sveltekit.assets%/assets/images/favicon/site.webmanifest">
<link rel="mask-icon" href="%sveltekit.assets%/assets/images/favicon/safari-pinned-tab.svg" color="#da532c">
<link rel="shortcut icon" href="%sveltekit.assets%/assets/images/favicon/favicon.ico">
<meta name="apple-mobile-web-app-title" content="Ninjin: DB">
<meta name="application-name" content="Ninjin: DB">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-TileImage" content="%sveltekit.assets%/assets/images/favicon/mstile-144x144.png">
<meta name="msapplication-config" content="%sveltekit.assets%/assets/images/favicon/browserconfig.xml">
<meta name="theme-color" content="#da532c">
*Optional* - Check your favicon with the [favicon checker](https://realfavicongenerator.net/favicon_checker)

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

View File

@ -0,0 +1,12 @@
<link rel="apple-touch-icon" sizes="144x144" href="%sveltekit.assets%/assets/images/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="%sveltekit.assets%/assets/images/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="%sveltekit.assets%/assets/images/favicon/favicon-16x16.png">
<link rel="manifest" href="%sveltekit.assets%/assets/images/favicon/site.webmanifest">
<link rel="mask-icon" href="%sveltekit.assets%/assets/images/favicon/safari-pinned-tab.svg" color="#da532c">
<link rel="shortcut icon" href="%sveltekit.assets%/assets/images/favicon/favicon.ico">
<meta name="apple-mobile-web-app-title" content="Ninjin: DB">
<meta name="application-name" content="Ninjin: DB">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-TileImage" content="%sveltekit.assets%/assets/images/favicon/mstile-144x144.png">
<meta name="msapplication-config" content="%sveltekit.assets%/assets/images/favicon/browserconfig.xml">
<meta name="theme-color" content="#da532c">

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.9 KiB

View File

@ -0,0 +1,19 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="150.000000pt" height="150.000000pt" viewBox="0 0 150.000000 150.000000"
preserveAspectRatio="xMidYMid meet">
<metadata>
Created by potrace 1.14, written by Peter Selinger 2001-2017
</metadata>
<g transform="translate(0.000000,150.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M544 1470 c-240 -63 -434 -244 -510 -477 -27 -82 -29 -99 -29 -248 0
-156 1 -162 33 -250 27 -73 33 -103 32 -162 l-1 -73 45 0 46 0 0 -50 0 -50 58
0 c50 -1 65 -6 117 -40 64 -43 134 -72 229 -97 45 -11 96 -14 210 -11 137 4
159 8 233 35 188 68 328 193 416 368 82 165 95 412 31 589 -15 39 -29 86 -31
104 -3 17 -11 32 -17 32 -7 0 -27 20 -44 45 -26 37 -32 56 -32 95 l0 50 -49 0
c-40 0 -59 7 -102 36 -71 48 -147 82 -238 105 -101 26 -297 25 -397 -1z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 971 B

12
static/browserconfig.xml Normal file
View File

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="/assets/images/favicons/mstile-70x70.png"/>
<square150x150logo src="/assets/images/favicons/mstile-150x150.png"/>
<square310x310logo src="/assets/images/favicons/mstile-310x310.png"/>
<wide310x150logo src="/assets/images/favicons/mstile-310x150.png"/>
<TileColor>#da532c</TileColor>
</tile>
</msapplication>
</browserconfig>

BIN
static/favicon.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

View File

@ -0,0 +1,4 @@
{
"version": "4.0.1",
"url": "http://hedaoxninjin.ddns.net:20234/versions/4.0.1.jar"
}

35
static/site.webmanifest Normal file
View File

@ -0,0 +1,35 @@
{
"name": "Ninjin: DB",
"short_name": "Ninjin: DB",
"icons": [
{
"src": "/assets/images/favicons/android-chrome-36x36.png",
"sizes": "36x36",
"type": "image/png"
},
{
"src": "/assets/images/favicons/android-chrome-48x48.png",
"sizes": "48x48",
"type": "image/png"
},
{
"src": "/assets/images/favicons/android-chrome-72x72.png",
"sizes": "72x72",
"type": "image/png"
},
{
"src": "/assets/images/favicons/android-chrome-96x96.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "/assets/images/favicons/android-chrome-144x144.png",
"sizes": "144x144",
"type": "image/png"
}
],
"theme_color": "#da532c",
"background_color": "#da532c",
"start_url": "https://ninjin.eu.org",
"display": "standalone"
}

View File

@ -1,13 +1,11 @@
import adapter from '@sveltejs/adapter-auto'; import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
/** @type {import('@sveltejs/kit').Config} */ /** @type {import('@sveltejs/kit').Config} */
const config = { const config = {
kit: { kit: {
// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
// See https://kit.svelte.dev/docs/adapters for more information about adapters.
adapter: adapter() adapter: adapter()
} },
preprocess: vitePreprocess()
}; };
export default config; export default config;

11
tailwind.config.js Normal file
View File

@ -0,0 +1,11 @@
/** @type {import('tailwindcss').Config} */
export default {
content: [
'./src/**/*.{html,js,svelte,ts}',
'./node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}'
],
theme: {
extend: {}
},
plugins: [require('flowbite/plugin')]
};