update experiments

This commit is contained in:
Pouya Saadeghi 2022-04-01 00:31:43 +04:30
parent a8ad7fe63e
commit 78d56f3ac5
14 changed files with 112 additions and 3983 deletions

View File

@ -1 +0,0 @@
/node_modules

View File

@ -1,43 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Sign in</title>
<link href="output.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/theme-change@2.0.2/index.js"></script>
</head>
<body class="grid place-content-center min-h-screen">
<button class="btn btn-square btn-ghost top-2 right-2 absolute" data-toggle-theme="dark" data-act-class="ACTIVECLASS">
<svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path d="M12,18V6C15.31,6 18,8.69 18,12C18,15.31 15.31,18 12,18M20,15.31L23.31,12L20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31Z" /></svg>
</button>
<main class="w-72 text-center">
<img src="https://raw.githubusercontent.com/saadeghi/files/main/daisyui/logo-4.svg" alt="" width="120" height="57" class="mx-auto mb-4" />
<div class="mb-3 text-2xl font-semibold">Please sign in</div>
<div class="form-control mb-2">
<label class="label" for="email-input">
<span class="label-text">Email</span>
</label>
<input id="email-input" type="text" placeholder="email" class="input input-bordered" />
</div>
<div class="form-control mb-2">
<label class="label" for="password-input">
<span class="label-text">Password</span>
</label>
<input id="password-input" type="text" placeholder="password" class="input input-bordered" />
</div>
<div class="form-control mb-2">
<div class="label justify-start gap-3">
<input type="checkbox" class="toggle toggle-sm" id="rememberme" />
<label for="rememberme" class="label-text">Remember me</label>
</div>
</div>
<div class="form-control">
<input type="button" value="Sign in" class="btn btn-primary" />
</div>
<p class="mt-5 text-base-content text-opacity-50">&copy; 20172021</p>
</main>
</body>
</html>

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

View File

@ -1,10 +0,0 @@
{
"scripts": {
"dev": "tailwindcss -o output.css --watch",
"prod": "tailwindcss -o output.css --minify"
},
"dependencies": {
"daisyui": "^2.13.3",
"tailwindcss": "^3.0.23"
}
}

View File

@ -1,12 +0,0 @@
module.exports = {
content: ['./*.html'],
daisyui: {
themes: [
'light',
'dark',
],
},
plugins: [
require('daisyui'),
],
}

View File

@ -9,33 +9,33 @@
</head>
<body class="grid place-content-center min-h-screen">
<button class="btn btn-square btn-ghost top-2 right-2 absolute" data-toggle-theme="dark" data-act-class="ACTIVECLASS">
<button class="d-btn d-btn-square d-btn-ghost top-2 right-2 absolute" data-toggle-theme="dark" data-act-class="ACTIVECLASS">
<svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path d="M12,18V6C15.31,6 18,8.69 18,12C18,15.31 15.31,18 12,18M20,15.31L23.31,12L20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31Z" /></svg>
</button>
<main class="w-72 text-center">
<img src="https://raw.githubusercontent.com/saadeghi/files/main/daisyui/logo-4.svg" alt="" width="120" height="57" class="mx-auto mb-4" />
<div class="mb-3 text-2xl font-semibold">Please sign in</div>
<div class="form-control mb-2">
<label class="label" for="email-input">
<span class="label-text">Email</span>
<div class="d-form-control mb-2">
<label class="d-label" for="email-input">
<span class="d-label-text">Email</span>
</label>
<input id="email-input" type="text" placeholder="email" class="input input-bordered" />
<input id="email-input" type="text" placeholder="email" class="d-input d-input-bordered" />
</div>
<div class="form-control mb-2">
<label class="label" for="password-input">
<span class="label-text">Password</span>
<div class="d-form-control mb-2">
<label class="d-label" for="password-input">
<span class="d-label-text">Password</span>
</label>
<input id="password-input" type="text" placeholder="password" class="input input-bordered" />
<input id="password-input" type="text" placeholder="password" class="d-input d-input-bordered" />
</div>
<div class="form-control mb-2">
<div class="label justify-start gap-3">
<input type="checkbox" class="toggle toggle-sm" id="rememberme" />
<label for="rememberme" class="label-text">Remember me</label>
<div class="d-form-control mb-2">
<div class="d-label justify-start gap-3">
<input type="checkbox" class="d-toggle d-toggle-sm" id="rememberme" />
<label for="rememberme" class="label-text text-sm">Remember me</label>
</div>
</div>
<div class="form-control">
<input type="button" value="Sign in" class="btn btn-primary" />
<div class="d-form-control">
<input type="button" value="Sign in" class="d-btn d-btn-primary" />
</div>
<p class="mt-5 text-base-content text-opacity-50">&copy; 20172021</p>
</main>

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

View File

@ -1,15 +1,10 @@
{
"scripts": {
"dev": "postcss node_modules/tailwindcss/tailwind.css -o output.css -w",
"prod": "NODE_ENV=production postcss node_modules/tailwindcss/tailwind.css -o output.css"
"dev": "tailwindcss -o output.css --watch",
"prod": "tailwindcss -o output.css --minify"
},
"dependencies": {
"@fullhuman/postcss-purgecss": "^4.1.3",
"cssnano": "^5.1.5",
"daisyui": "^2.13.3",
"postcss": "^8.4.12",
"postcss-cli": "^9.1.0",
"purgecss": "^4.1.3",
"tailwindcss": "^3.0.23"
}
}
}

View File

@ -1,14 +0,0 @@
module.exports = {
plugins: [
require('tailwindcss'),
require('@fullhuman/postcss-purgecss')({
content: ['./index.html'],
keyframes: true,
variables: true,
safelist: [
'data-theme'
],
}),
process.env.NODE_ENV === 'production' && require('cssnano'),
]
}

View File

@ -5,6 +5,7 @@ module.exports = {
'light',
'dark',
],
prefix: 'd-',
},
plugins: [
require('daisyui'),

View File

@ -8,7 +8,7 @@
<script src="theme-change.js"></script>
</head>
<body class="bg-gray-100 dark:bg-gray-800 text-black dark:text-gray-300 grid place-content-center min-h-screen">
<body class="dark:bg-gray-800 dark:text-gray-300 grid place-content-center min-h-screen">
<button class="w-12 h-12 px-4 py-3 uppercase transition duration-200 ease-in-out rounded-md cursor-pointer hover:bg-black/5 top-2 right-2 absolute" onclick="toggleDarkmode()">
<svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path d="M12,18V6C15.31,6 18,8.69 18,12C18,15.31 15.31,18 12,18M20,15.31L23.31,12L20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31Z" /></svg>
</button>
@ -20,25 +20,25 @@
<label class="label" for="email-input">
<span class="text-sm block text-left mb-2 px-1">Email</span>
</label>
<input id="email-input" type="text" placeholder="email" class="w-full text-sm h-12 p-4 rounded-lg border bg-gray-100 dark:bg-gray-900 border-gray-300 dark:border-gray-700 focus:outline-gray-300 focus:outline focus:outline-offset-2 dark:focus:outline-gray-700 outline-2" />
<input id="email-input" type="text" placeholder="email" class="w-full text-sm h-12 p-4 rounded-lg border dark:bg-gray-800 border-gray-300 dark:border-gray-700 focus:outline-gray-300 focus:outline focus:outline-offset-2 dark:focus:outline-gray-700 outline-2" />
</div>
<div class="mb-4">
<label class="label" for="password-input">
<span class="text-sm block text-left mb-2 px-1">Password</span>
</label>
<input id="password-input" type="text" placeholder="password" class="w-full text-sm h-12 p-4 rounded-lg border bg-gray-100 dark:bg-gray-900 border-gray-300 dark:border-gray-700 focus:outline-gray-300 focus:outline focus:outline-offset-2 dark:focus:outline-gray-700 outline-2" />
<input id="password-input" type="text" placeholder="password" class="w-full text-sm h-12 p-4 rounded-lg border dark:bg-gray-800 border-gray-300 dark:border-gray-700 focus:outline-gray-300 focus:outline focus:outline-offset-2 dark:focus:outline-gray-700 outline-2" />
</div>
<div class="flex gap-3 mb-3">
<div class="relative">
<input id="rememberme" type="checkbox" class="peer appearance-none cursor-pointer border border-gray-300 dark:border-gray-900 bg-white dark:bg-gray-900 rounded-full checked:border-gray-900 w-8 h-5" />
<span class="peer-checked:left-4 peer-checked:bg-gray-900 dark:peer-checked:bg-gray-300 transition-all duration-200 pointer-events-none w-3 h-3 block absolute top-1 left-1 rounded-full bg-gray-300 dark:bg-gray-700"></span>
<input id="rememberme" type="checkbox" class="peer appearance-none cursor-pointer border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 rounded-full checked:border-gray-900 dark:checked:border-gray-400 w-8 h-5 focus-visible:outline focus-visible:outline-2 focus-visible:outline-gray-900 dark:focus-visible:outline-gray-400 focus-visible:outline-offset-2" />
<span class="peer-checked:left-4 peer-checked:bg-gray-900 dark:peer-checked:bg-gray-400 transition-all duration-200 pointer-events-none w-3 h-3 block absolute top-1 left-1 rounded-full bg-gray-300 dark:bg-gray-700"></span>
</div>
<label for="rememberme" class="text-sm">Remember me</label>
</div>
<div class="mb-2">
<input type="button" value="Sign in" class="w-full h-12 px-4 py-3 text-sm font-semibold text-center text-white uppercase transition duration-200 ease-in-out bg-indigo-600 rounded-md cursor-pointer hover:bg-indigo-700" />
<input type="button" value="Sign in" class="w-full h-12 px-4 py-3 text-sm font-semibold text-center text-white uppercase transition duration-200 ease-in-out bg-indigo-600 rounded-md cursor-pointer hover:bg-indigo-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-indigo-600 focus-visible:outline-offset-2" />
</div>
<p class="mt-5 text-gray-400">&copy; 20172021</p>
</main>

File diff suppressed because one or more lines are too long