first commit of portal user
This commit is contained in:
ghostter
57
assets/index.html
Normal file
57
assets/index.html
Normal file
@@ -0,0 +1,57 @@
|
||||
<!DOCTYPE>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="/css/style.css">
|
||||
<title>Signin</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- Header -->
|
||||
<header class="container">
|
||||
<hgroup>
|
||||
<h1> Portail des utilisateurs </h1>
|
||||
<h2> Gérez votre utilisateur sur kitoy.me </h2>
|
||||
</hgroup>
|
||||
<nav>
|
||||
<ul>
|
||||
<li>Theme:</li>
|
||||
<li><a href="#" data-theme-switcher="auto">Auto</a></li>
|
||||
<li><a href="#" data-theme-switcher="light">Light</a></li>
|
||||
<li><a href="#" data-theme-switcher="dark">Dark</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header><!-- ./ Header -->
|
||||
|
||||
|
||||
<main class="container">
|
||||
<h2> Page de login de kitoy.me</h2>
|
||||
|
||||
|
||||
<form method="POST">
|
||||
|
||||
|
||||
<!-- Markup example 2: input is after label -->
|
||||
<label for="Login"> Login </label>
|
||||
<input type="Login" id="Login" name="login" placeholder="Login" value="$login$" required>
|
||||
|
||||
<label for="Password"> Mot de passe </label>
|
||||
<input type="Password" id="Password" name="password" placeholder="Password" value="" required>
|
||||
|
||||
<!-- Button -->
|
||||
<button type="submit"> Se connecter </button>
|
||||
|
||||
</form>
|
||||
|
||||
|
||||
<p>message debug: $msg$</p>
|
||||
|
||||
</main>
|
||||
<!-- Minimal theme switcher -->
|
||||
<script src="/js/theme-switcher.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
|
||||
</html>
|
||||
15
assets/index.html~
Normal file
15
assets/index.html~
Normal file
@@ -0,0 +1,15 @@
|
||||
<!DOCTYPE>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="/css/style.css" type="text/css">
|
||||
<title>Salut connard!</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="content">
|
||||
<p>Ouais super ça marche !!!! SAY GENIAL !!</p>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
57
assets/signup.html
Normal file
57
assets/signup.html
Normal file
@@ -0,0 +1,57 @@
|
||||
<!DOCTYPE>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="/css/style.css">
|
||||
<title>Signup Page</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- Header -->
|
||||
<header class="container">
|
||||
<hgroup>
|
||||
<h1> Creation d'un utilisateur </h1>
|
||||
<h2> Gérez votre utilisateur sur kitoy.me </h2>
|
||||
</hgroup>
|
||||
<nav>
|
||||
<ul>
|
||||
<li>Theme:</li>
|
||||
<li><a href="#" data-theme-switcher="auto">Auto</a></li>
|
||||
<li><a href="#" data-theme-switcher="light">Light</a></li>
|
||||
<li><a href="#" data-theme-switcher="dark">Dark</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header><!-- ./ Header -->
|
||||
|
||||
|
||||
<main class="container">
|
||||
<h2> Page d'incription de Kitoy.me</h2>
|
||||
|
||||
|
||||
<form method="POST">
|
||||
|
||||
|
||||
<!-- Markup example 2: input is after label -->
|
||||
<label for="Login"> Login </label>
|
||||
<input type="Login" id="Login" name="login" placeholder="Login" value="$login$" required>
|
||||
|
||||
<label for="Password"> Mot de passe </label>
|
||||
<input type="Password" id="Password" name="password" placeholder="Password" value="" required>
|
||||
|
||||
<!-- Button -->
|
||||
<button type="submit"> Cree un compte </button>
|
||||
|
||||
</form>
|
||||
|
||||
|
||||
<p>message debug : $msg$</p>
|
||||
|
||||
</main>
|
||||
<!-- Minimal theme switcher -->
|
||||
<script src="/js/theme-switcher.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
|
||||
</html>
|
||||
2358
assets/style.css
Normal file
2358
assets/style.css
Normal file
File diff suppressed because it is too large
Load Diff
37
assets/theme-switcher.js
Normal file
37
assets/theme-switcher.js
Normal file
@@ -0,0 +1,37 @@
|
||||
/*!
|
||||
* Minimal theme switcher
|
||||
*
|
||||
* Pico.css - https://picocss.com
|
||||
* Copyright 2020 - Licensed under MIT
|
||||
*/
|
||||
|
||||
const themeSwitcher = {
|
||||
// Config
|
||||
buttonsTarget: "a[data-theme-switcher]",
|
||||
buttonAttribute: "data-theme-switcher",
|
||||
rootAttribute: "data-theme",
|
||||
|
||||
// Init
|
||||
init() {
|
||||
document.querySelectorAll(this.buttonsTarget).forEach(
|
||||
function (button) {
|
||||
button.addEventListener(
|
||||
"click",
|
||||
function (event) {
|
||||
event.preventDefault();
|
||||
document
|
||||
.querySelector("html")
|
||||
.setAttribute(
|
||||
this.rootAttribute,
|
||||
event.target.getAttribute(this.buttonAttribute)
|
||||
);
|
||||
}.bind(this),
|
||||
false
|
||||
);
|
||||
}.bind(this)
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
// Init
|
||||
themeSwitcher.init();
|
||||
106
assets/theme-switcher.js~
Normal file
106
assets/theme-switcher.js~
Normal file
@@ -0,0 +1,106 @@
|
||||
/*
|
||||
* Theme switcher
|
||||
*
|
||||
* Pico.css - https://picocss.com
|
||||
* Copyright 2019-2021 - Licensed under MIT
|
||||
*/
|
||||
|
||||
export const themeSwitcher = {
|
||||
// Config
|
||||
_scheme: 'auto',
|
||||
change: {
|
||||
light: '<i>Turn on dark mode</i>',
|
||||
dark: '<i>Turn off dark mode</i>',
|
||||
},
|
||||
buttonsTarget: '.theme-switcher',
|
||||
|
||||
// Init
|
||||
init() {
|
||||
this.scheme = this._scheme;
|
||||
this.initSwitchers();
|
||||
},
|
||||
|
||||
// Prefered color scheme
|
||||
get preferedColorScheme() {
|
||||
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
return 'dark';
|
||||
} else {
|
||||
return 'light';
|
||||
}
|
||||
},
|
||||
|
||||
// Init switchers
|
||||
initSwitchers() {
|
||||
const buttons = document.querySelectorAll(this.buttonsTarget);
|
||||
buttons.forEach(
|
||||
function (button) {
|
||||
button.addEventListener(
|
||||
'click',
|
||||
function (event) {
|
||||
if (this.scheme == 'dark') {
|
||||
this.scheme = 'light';
|
||||
} else {
|
||||
this.scheme = 'dark';
|
||||
}
|
||||
}.bind(this),
|
||||
false
|
||||
);
|
||||
}.bind(this)
|
||||
);
|
||||
},
|
||||
|
||||
// Add new button
|
||||
addButton(config) {
|
||||
// Insert Switcher
|
||||
let button = document.createElement(config.tag);
|
||||
button.className = config.class;
|
||||
document.querySelector(config.target).appendChild(button);
|
||||
},
|
||||
|
||||
// Set scheme
|
||||
set scheme(scheme) {
|
||||
if (scheme == 'auto') {
|
||||
if (this.preferedColorScheme == 'dark') {
|
||||
this._scheme = 'dark';
|
||||
} else {
|
||||
this._scheme = 'light';
|
||||
}
|
||||
}
|
||||
|
||||
// Set to Dark
|
||||
else if (scheme == 'dark' || scheme == 'light') {
|
||||
this._scheme = scheme;
|
||||
}
|
||||
|
||||
// Set to Apply theme
|
||||
this.applyScheme();
|
||||
},
|
||||
|
||||
// Get scheme
|
||||
get scheme() {
|
||||
return this._scheme;
|
||||
},
|
||||
|
||||
// Apply scheme
|
||||
applyScheme() {
|
||||
// Root attribute
|
||||
document.querySelector('html').setAttribute('data-theme', this.scheme);
|
||||
|
||||
// Buttons text
|
||||
const buttons = document.querySelectorAll(this.buttonsTarget);
|
||||
let text;
|
||||
buttons.forEach(
|
||||
function (button) {
|
||||
if (this.scheme == 'dark') {
|
||||
text = this.change.dark;
|
||||
} else {
|
||||
text = this.change.light;
|
||||
}
|
||||
button.innerHTML = text;
|
||||
button.setAttribute('aria-label', text.replace(/<[^>]*>?/gm, ''));
|
||||
}.bind(this)
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
export default themeSwitcher;
|
||||
Reference in New Issue
Block a user