mirror of https://github.com/01-edu/public.git
lee
1 year ago
committed by
LEEDASILVA
30 changed files with 883 additions and 855 deletions
@ -0,0 +1,61 @@ |
|||||||
|
|
||||||
|
:root { |
||||||
|
--background: hsl(0, 0%, 12%); |
||||||
|
--text: hsl(0, 0%, 80%); |
||||||
|
--clear: hsl(0, 0%, 65%); |
||||||
|
--disabled: hsl(0, 0%, 35%); |
||||||
|
--purple: #bb73e6; |
||||||
|
} |
||||||
|
|
||||||
|
* { |
||||||
|
margin: 0; |
||||||
|
padding: 0; |
||||||
|
box-sizing: border-box; |
||||||
|
} |
||||||
|
|
||||||
|
body { |
||||||
|
font-family: sans-serif; |
||||||
|
letter-spacing: 1.5px; |
||||||
|
background: var(--background); |
||||||
|
display: flex; |
||||||
|
flex-wrap: wrap; |
||||||
|
align-content: flex-end; |
||||||
|
height: 100vh; |
||||||
|
color: var(--text); |
||||||
|
padding: 10vh 36.5vw; |
||||||
|
} |
||||||
|
|
||||||
|
div { |
||||||
|
text-align: center; |
||||||
|
font-size: 10px; |
||||||
|
width: 9vw; |
||||||
|
display: inline-flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
height: 4.44vh; |
||||||
|
background: linear-gradient(-25deg, var(--clear) 30%, var(--disabled) 90%); |
||||||
|
} |
||||||
|
|
||||||
|
#tools { |
||||||
|
position: fixed; |
||||||
|
right: 100px; |
||||||
|
font-size: 80px; |
||||||
|
cursor: pointer; |
||||||
|
user-select: none; |
||||||
|
} |
||||||
|
|
||||||
|
[data-repaired='true'] { |
||||||
|
color: hsl(275, 100%, 50%); |
||||||
|
} |
||||||
|
|
||||||
|
[data-repaired='true']:after { |
||||||
|
content: '-repaired'; |
||||||
|
} |
||||||
|
|
||||||
|
[data-repaired='in progress'] { |
||||||
|
color: black; |
||||||
|
} |
||||||
|
|
||||||
|
[data-repaired='in progress']:after { |
||||||
|
content: '-in progress'; |
||||||
|
} |
@ -1,108 +1,49 @@ |
|||||||
<!DOCTYPE html> |
<!DOCTYPE html> |
||||||
<html> |
<html> |
||||||
|
|
||||||
<head> |
<head> |
||||||
<title>Build brick and break</title> |
<title>Build brick and break</title> |
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
||||||
<link id="fav" rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;,"> |
<link id="fav" rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;,"> |
||||||
<style type="text/css"> |
<link rel="stylesheet" type="text/css" href="./build-brick-and-break.css"> |
||||||
:root { |
|
||||||
--background: hsl(0, 0%, 12%); |
|
||||||
--text: hsl(0, 0%, 80%); |
|
||||||
--clear: hsl(0, 0%, 65%); |
|
||||||
--disabled: hsl(0, 0%, 35%); |
|
||||||
--purple: #bb73e6; |
|
||||||
} |
|
||||||
|
|
||||||
* { |
|
||||||
margin: 0; |
|
||||||
padding: 0; |
|
||||||
box-sizing: border-box; |
|
||||||
} |
|
||||||
|
|
||||||
body { |
|
||||||
font-family: sans-serif; |
|
||||||
letter-spacing: 1.5px; |
|
||||||
background: var(--background); |
|
||||||
display: flex; |
|
||||||
flex-wrap: wrap; |
|
||||||
align-content: flex-end; |
|
||||||
height: 100vh; |
|
||||||
color: var(--text); |
|
||||||
padding: 10vh 36.5vw; |
|
||||||
} |
|
||||||
|
|
||||||
div { |
|
||||||
text-align: center; |
|
||||||
font-size: 10px; |
|
||||||
width: 9vw; |
|
||||||
display: inline-flex; |
|
||||||
justify-content: center; |
|
||||||
align-items: center; |
|
||||||
height: 4.44vh; |
|
||||||
background: linear-gradient(-25deg, var(--clear) 30%, var(--disabled) 90%); |
|
||||||
} |
|
||||||
|
|
||||||
#tools { |
|
||||||
position: fixed; |
|
||||||
right: 100px; |
|
||||||
font-size: 80px; |
|
||||||
cursor: pointer; |
|
||||||
user-select: none; |
|
||||||
} |
|
||||||
|
|
||||||
[data-repaired='true'] { |
|
||||||
color: hsl(275, 100%, 50%); |
|
||||||
} |
|
||||||
|
|
||||||
[data-repaired='true']:after { |
|
||||||
content: '-repaired'; |
|
||||||
} |
|
||||||
|
|
||||||
[data-repaired='in progress'] { |
|
||||||
color: black; |
|
||||||
} |
|
||||||
|
|
||||||
[data-repaired='in progress']:after { |
|
||||||
content: '-in progress'; |
|
||||||
} |
|
||||||
|
|
||||||
</style> |
|
||||||
</head> |
</head> |
||||||
|
|
||||||
<body> |
<body> |
||||||
<script type="module"> |
<script type="module"> |
||||||
import { build, repair, destroy } from './build-brick-and-break.js' |
import { build, repair, destroy } from './build-brick-and-break.js' |
||||||
|
|
||||||
build(54) |
build(54) |
||||||
|
|
||||||
const body = document.querySelector('body') |
const body = document.querySelector('body') |
||||||
|
|
||||||
const tools = document.createElement('section') |
const tools = document.createElement('section') |
||||||
tools.id = 'tools' |
tools.id = 'tools' |
||||||
body.append(tools) |
body.append(tools) |
||||||
|
|
||||||
const dynamite = document.createElement('span') |
const dynamite = document.createElement('span') |
||||||
dynamite.id = 'dynamite' |
dynamite.id = 'dynamite' |
||||||
dynamite.textContent = '🧨' |
dynamite.textContent = '🧨' |
||||||
dynamite.addEventListener('click', destroy) |
dynamite.addEventListener('click', destroy) |
||||||
|
|
||||||
const hammer = document.createElement('span') |
const hammer = document.createElement('span') |
||||||
hammer.id = 'hammer' |
hammer.id = 'hammer' |
||||||
hammer.textContent = '🔨' |
hammer.textContent = '🔨' |
||||||
hammer.addEventListener('click', () => repair(...reparations)) |
hammer.addEventListener('click', () => repair(...reparations)) |
||||||
|
|
||||||
tools.append(dynamite, hammer) |
tools.append(dynamite, hammer) |
||||||
|
|
||||||
const random = (min, max) => { |
const random = (min, max) => { |
||||||
min = Math.ceil(min) |
min = Math.ceil(min) |
||||||
max = Math.floor(max) |
max = Math.floor(max) |
||||||
return Math.floor(Math.random() * (max - min + 1)) + min |
return Math.floor(Math.random() * (max - min + 1)) + min |
||||||
} |
} |
||||||
|
|
||||||
const randomBricks = [...Array(15).keys()].map((e) => `brick-${random(1, 54)}`) |
const randomBricks = [...Array(15).keys()].map((e) => `brick-${random(1, 54)}`) |
||||||
const reparations = [...new Set(['brick-26', ...randomBricks])] |
const reparations = [...new Set(['brick-26', ...randomBricks])] |
||||||
|
|
||||||
body.dataset.reparations = reparations |
body.dataset.reparations = reparations |
||||||
|
|
||||||
</script> |
</script> |
||||||
</body> |
</body> |
||||||
|
|
||||||
</html> |
</html> |
@ -0,0 +1,35 @@ |
|||||||
|
|
||||||
|
:root { |
||||||
|
--background: hsl(0, 0%, 12%); |
||||||
|
--text: hsl(0, 0%, 80%); |
||||||
|
--clear: hsl(0, 0%, 65%); |
||||||
|
--disabled: hsl(0, 0%, 35%); |
||||||
|
--purple: #bb73e6; |
||||||
|
} |
||||||
|
|
||||||
|
* { |
||||||
|
margin: 0; |
||||||
|
padding: 0; |
||||||
|
box-sizing: border-box; |
||||||
|
} |
||||||
|
|
||||||
|
body { |
||||||
|
font-family: sans-serif; |
||||||
|
letter-spacing: 1.5px; |
||||||
|
background: var(--background); |
||||||
|
display: flex; |
||||||
|
flex-wrap: wrap; |
||||||
|
justify-content: center; |
||||||
|
align-content: center; |
||||||
|
width: 100vw; |
||||||
|
padding: 5rem; |
||||||
|
font-size: 12px; |
||||||
|
} |
||||||
|
|
||||||
|
div { |
||||||
|
cursor: pointer; |
||||||
|
width: 150px; |
||||||
|
height: 150px; |
||||||
|
margin: 20px; |
||||||
|
padding: 5px 8px; |
||||||
|
} |
@ -1,61 +1,28 @@ |
|||||||
<!DOCTYPE html> |
<!DOCTYPE html> |
||||||
<html> |
<html> |
||||||
|
|
||||||
<head> |
<head> |
||||||
<title>Fifty shades of cold</title> |
<title>Fifty shades of cold</title> |
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
||||||
<link id="fav" rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;,"> |
<link id="fav" rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;,"> |
||||||
<style> |
<link rel="stylesheet" type="text/css" href="./fifty-shades-of-cold.css"> |
||||||
|
|
||||||
:root { |
|
||||||
--background: hsl(0, 0%, 12%); |
|
||||||
--text: hsl(0, 0%, 80%); |
|
||||||
--clear: hsl(0, 0%, 65%); |
|
||||||
--disabled: hsl(0, 0%, 35%); |
|
||||||
--purple: #bb73e6; |
|
||||||
} |
|
||||||
|
|
||||||
* { |
|
||||||
margin: 0; |
|
||||||
padding: 0; |
|
||||||
box-sizing: border-box; |
|
||||||
} |
|
||||||
|
|
||||||
body { |
|
||||||
font-family: sans-serif; |
|
||||||
letter-spacing: 1.5px; |
|
||||||
background: var(--background); |
|
||||||
display: flex; |
|
||||||
flex-wrap: wrap; |
|
||||||
justify-content: center; |
|
||||||
align-content: center; |
|
||||||
width: 100vw; |
|
||||||
padding: 5rem; |
|
||||||
font-size: 12px; |
|
||||||
} |
|
||||||
|
|
||||||
div { |
|
||||||
cursor: pointer; |
|
||||||
width: 150px; |
|
||||||
height: 150px; |
|
||||||
margin: 20px; |
|
||||||
padding: 5px 8px; |
|
||||||
} |
|
||||||
|
|
||||||
</style> |
|
||||||
</head> |
</head> |
||||||
|
|
||||||
<body> |
<body> |
||||||
<script type="module"> |
<script type="module"> |
||||||
|
|
||||||
import { generateClasses, generateColdShades, choseShade } from './fifty-shades-of-cold.js' |
import { generateClasses, generateColdShades, choseShade } from './fifty-shades-of-cold.js' |
||||||
|
|
||||||
generateClasses() |
generateClasses() |
||||||
generateColdShades() |
generateColdShades() |
||||||
|
|
||||||
const divs = [...document.querySelectorAll('div')] |
const divs = [...document.querySelectorAll('div')] |
||||||
divs.map((d) => { |
divs.map((d) => { |
||||||
d.addEventListener('click', () => choseShade(d.textContent)) |
d.addEventListener('click', () => choseShade(d.textContent)) |
||||||
}) |
}) |
||||||
|
|
||||||
</script> |
</script> |
||||||
</body> |
</body> |
||||||
|
|
||||||
</html> |
</html> |
@ -0,0 +1,87 @@ |
|||||||
|
|
||||||
|
:root { |
||||||
|
--background: hsl(0, 0%, 12%); |
||||||
|
--text: hsl(0, 0%, 80%); |
||||||
|
--clear: hsl(0, 0%, 65%); |
||||||
|
--disabled: hsl(0, 0%, 35%); |
||||||
|
--purple: #bb73e6; |
||||||
|
} |
||||||
|
|
||||||
|
* { |
||||||
|
margin: 0; |
||||||
|
padding: 0; |
||||||
|
box-sizing: border-box; |
||||||
|
} |
||||||
|
|
||||||
|
body { |
||||||
|
font-family: sans-serif; |
||||||
|
letter-spacing: 1.5px; |
||||||
|
background: var(--background); |
||||||
|
display: flex; |
||||||
|
flex-wrap: wrap; |
||||||
|
padding: 100px; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
font-size: 15px; |
||||||
|
margin-top: 150px; |
||||||
|
} |
||||||
|
|
||||||
|
button { |
||||||
|
outline: none; |
||||||
|
border: none; |
||||||
|
} |
||||||
|
|
||||||
|
#buttons { |
||||||
|
position: fixed; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
width: 100%; |
||||||
|
top: 0; |
||||||
|
height: 150px; |
||||||
|
background: var(--background); |
||||||
|
box-shadow: 0 0 50px black; |
||||||
|
} |
||||||
|
|
||||||
|
#buttons * { |
||||||
|
margin: 0 20px; |
||||||
|
padding: 10px 20px; |
||||||
|
background: var(--clear); |
||||||
|
border-radius: 20px; |
||||||
|
cursor: pointer; |
||||||
|
user-select: none; |
||||||
|
width: 200px; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
|
||||||
|
.disabled { |
||||||
|
pointer-events: none; |
||||||
|
opacity: 0.3; |
||||||
|
} |
||||||
|
|
||||||
|
a, |
||||||
|
span { |
||||||
|
min-width: 110px; |
||||||
|
min-height: 110px; |
||||||
|
width: 5vw; |
||||||
|
height: 5vw; |
||||||
|
border-radius: 50%; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
flex-direction: column; |
||||||
|
text-align: center; |
||||||
|
border: solid 1px var(--clear); |
||||||
|
line-height: 22px; |
||||||
|
padding: 10px; |
||||||
|
color: var(--clear); |
||||||
|
margin: 30px; |
||||||
|
} |
||||||
|
|
||||||
|
.found { |
||||||
|
box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.6), |
||||||
|
-10px -10px 15px rgba(255, 255, 255, 0.074); |
||||||
|
border: none; |
||||||
|
background: var(--purple); |
||||||
|
color: var(--background); |
||||||
|
} |
@ -1,179 +1,93 @@ |
|||||||
<!DOCTYPE html> |
<!DOCTYPE html> |
||||||
<html> |
<html> |
||||||
|
|
||||||
<head> |
<head> |
||||||
<title>Get them all</title> |
<title>Get them all</title> |
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
||||||
<link id="fav" rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;,"> |
<link id="fav" rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;,"> |
||||||
<style> |
<link rel="stylesheet" type="text/css" href="./get-them-all.css"> |
||||||
|
|
||||||
:root { |
|
||||||
--background: hsl(0, 0%, 12%); |
|
||||||
--text: hsl(0, 0%, 80%); |
|
||||||
--clear: hsl(0, 0%, 65%); |
|
||||||
--disabled: hsl(0, 0%, 35%); |
|
||||||
--purple: #bb73e6; |
|
||||||
} |
|
||||||
|
|
||||||
* { |
|
||||||
margin: 0; |
|
||||||
padding: 0; |
|
||||||
box-sizing: border-box; |
|
||||||
} |
|
||||||
|
|
||||||
body { |
|
||||||
font-family: sans-serif; |
|
||||||
letter-spacing: 1.5px; |
|
||||||
background: var(--background); |
|
||||||
display: flex; |
|
||||||
flex-wrap: wrap; |
|
||||||
padding: 100px; |
|
||||||
justify-content: center; |
|
||||||
align-items: center; |
|
||||||
font-size: 15px; |
|
||||||
margin-top: 150px; |
|
||||||
} |
|
||||||
|
|
||||||
button { |
|
||||||
outline: none; |
|
||||||
border: none; |
|
||||||
} |
|
||||||
|
|
||||||
#buttons { |
|
||||||
position: fixed; |
|
||||||
display: flex; |
|
||||||
justify-content: center; |
|
||||||
align-items: center; |
|
||||||
width: 100%; |
|
||||||
top: 0; |
|
||||||
height: 150px; |
|
||||||
background: var(--background); |
|
||||||
box-shadow: 0 0 50px black; |
|
||||||
} |
|
||||||
|
|
||||||
#buttons * { |
|
||||||
margin: 0 20px; |
|
||||||
padding: 10px 20px; |
|
||||||
background: var(--clear); |
|
||||||
border-radius: 20px; |
|
||||||
cursor: pointer; |
|
||||||
user-select: none; |
|
||||||
width: 200px; |
|
||||||
text-align: center; |
|
||||||
} |
|
||||||
|
|
||||||
.disabled { |
|
||||||
pointer-events: none; |
|
||||||
opacity: 0.3; |
|
||||||
} |
|
||||||
|
|
||||||
a, |
|
||||||
span { |
|
||||||
min-width: 110px; |
|
||||||
min-height: 110px; |
|
||||||
width: 5vw; |
|
||||||
height: 5vw; |
|
||||||
border-radius: 50%; |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
justify-content: center; |
|
||||||
flex-direction: column; |
|
||||||
text-align: center; |
|
||||||
border: solid 1px var(--clear); |
|
||||||
line-height: 22px; |
|
||||||
padding: 10px; |
|
||||||
color: var(--clear); |
|
||||||
margin: 30px; |
|
||||||
} |
|
||||||
|
|
||||||
.found { |
|
||||||
box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.6), |
|
||||||
-10px -10px 15px rgba(255, 255, 255, 0.074); |
|
||||||
border: none; |
|
||||||
background: var(--purple); |
|
||||||
color: var(--background); |
|
||||||
} |
|
||||||
|
|
||||||
</style> |
|
||||||
</head> |
</head> |
||||||
|
|
||||||
<body> |
<body> |
||||||
<script type="module"> |
<script type="module"> |
||||||
|
|
||||||
import { people } from './get-them-all.data.js' |
import { people } from './get-them-all.data.js' |
||||||
import { |
import { |
||||||
getBonannoPisano, |
getBonannoPisano, |
||||||
getActive, |
getActive, |
||||||
getArchitects, |
getArchitects, |
||||||
getClassical, |
getClassical, |
||||||
} from './get-them-all.js' |
} from './get-them-all.js' |
||||||
|
|
||||||
const body = document.querySelector('body') |
const body = document.querySelector('body') |
||||||
|
|
||||||
const shuffle = (array) => { |
const shuffle = (array) => { |
||||||
const test = array.length - 1 |
const test = array.length - 1 |
||||||
for (let i = test; i > 0; i--) { |
for (let i = test; i > 0; i--) { |
||||||
const j = Math.floor(Math.random() * i) |
const j = Math.floor(Math.random() * i) |
||||||
const temp = array[i] |
const temp = array[i] |
||||||
array[i] = array[j] |
array[i] = array[j] |
||||||
array[j] = temp |
array[j] = temp |
||||||
} |
} |
||||||
return array |
return array |
||||||
} |
|
||||||
|
|
||||||
shuffle(people).map(({ id, classe, address, plans, tag, active }) => { |
|
||||||
const people = document.createElement(tag) |
|
||||||
people.id = id |
|
||||||
people.textContent = 'Someone' |
|
||||||
people.className = `${classe} ${active ? 'active' : ''}` |
|
||||||
body.append(people) |
|
||||||
}) |
|
||||||
|
|
||||||
const buttonsContainer = document.createElement('div') |
|
||||||
buttonsContainer.id = 'buttons' |
|
||||||
body.append(buttonsContainer) |
|
||||||
|
|
||||||
const buttons = [ |
|
||||||
{ name: 'Architect', action: getArchitects }, |
|
||||||
{ name: 'Classical', action: getClassical }, |
|
||||||
{ name: 'Active', action: getActive }, |
|
||||||
{ name: 'Bonanno', action: getBonannoPisano }, |
|
||||||
] |
|
||||||
|
|
||||||
buttons.forEach(({ name, action }, i) => { |
|
||||||
const btn = document.createElement('button') |
|
||||||
btn.id = `btn${name}` |
|
||||||
btn.textContent = `Get ${name}${i === 0 ? 's' : ''}` |
|
||||||
|
|
||||||
if (i > 0) { |
|
||||||
btn.className = 'disabled' |
|
||||||
} |
|
||||||
|
|
||||||
btn.addEventListener('click', () => { |
|
||||||
const [targetted, others] = action() |
|
||||||
|
|
||||||
if (name === 'Bonanno') { |
|
||||||
targetted.textContent = targetted.id.replace('P', ' P') |
|
||||||
targetted.classList.add('found') |
|
||||||
} else { |
|
||||||
targetted.forEach((t) => { |
|
||||||
t.textContent = name |
|
||||||
}) |
|
||||||
} |
} |
||||||
|
|
||||||
others.forEach((o) => { |
shuffle(people).map(({ id, classe, address, plans, tag, active }) => { |
||||||
o.style.opacity = 0.2 |
const people = document.createElement(tag) |
||||||
|
people.id = id |
||||||
|
people.textContent = 'Someone' |
||||||
|
people.className = `${classe} ${active ? 'active' : ''}` |
||||||
|
body.append(people) |
||||||
}) |
}) |
||||||
|
|
||||||
btn.className = 'disabled' |
const buttonsContainer = document.createElement('div') |
||||||
|
buttonsContainer.id = 'buttons' |
||||||
const last = i + 1 === buttons.length |
body.append(buttonsContainer) |
||||||
if (last) return |
|
||||||
const next = document.getElementById(`btn${buttons[i + 1].name}`) |
const buttons = [ |
||||||
next.classList.remove('disabled') |
{ name: 'Architect', action: getArchitects }, |
||||||
}) |
{ name: 'Classical', action: getClassical }, |
||||||
|
{ name: 'Active', action: getActive }, |
||||||
|
{ name: 'Bonanno', action: getBonannoPisano }, |
||||||
|
] |
||||||
|
|
||||||
|
buttons.forEach(({ name, action }, i) => { |
||||||
|
const btn = document.createElement('button') |
||||||
|
btn.id = `btn${name}` |
||||||
|
btn.textContent = `Get ${name}${i === 0 ? 's' : ''}` |
||||||
|
|
||||||
|
if (i > 0) { |
||||||
|
btn.className = 'disabled' |
||||||
|
} |
||||||
|
|
||||||
|
btn.addEventListener('click', () => { |
||||||
|
const [targetted, others] = action() |
||||||
|
|
||||||
|
if (name === 'Bonanno') { |
||||||
|
targetted.textContent = targetted.id.replace('P', ' P') |
||||||
|
targetted.classList.add('found') |
||||||
|
} else { |
||||||
|
targetted.forEach((t) => { |
||||||
|
t.textContent = name |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
others.forEach((o) => { |
||||||
|
o.style.opacity = 0.2 |
||||||
|
}) |
||||||
|
|
||||||
|
btn.className = 'disabled' |
||||||
|
|
||||||
|
const last = i + 1 === buttons.length |
||||||
|
if (last) return |
||||||
|
const next = document.getElementById(`btn${buttons[i + 1].name}`) |
||||||
|
next.classList.remove('disabled') |
||||||
|
}) |
||||||
|
|
||||||
buttonsContainer.append(btn) |
buttonsContainer.append(btn) |
||||||
}) |
}) |
||||||
|
|
||||||
</script> |
</script> |
||||||
</body> |
</body> |
||||||
|
|
||||||
</html> |
</html> |
@ -0,0 +1,115 @@ |
|||||||
|
|
||||||
|
:root { |
||||||
|
--background: hsl(0, 0%, 12%); |
||||||
|
--text: hsl(0, 0%, 80%); |
||||||
|
--clear: hsl(0, 0%, 65%); |
||||||
|
--disabled: hsl(0, 0%, 35%); |
||||||
|
--purple: #bb73e6; |
||||||
|
} |
||||||
|
|
||||||
|
* { |
||||||
|
margin: 0; |
||||||
|
padding: 0; |
||||||
|
box-sizing: border-box; |
||||||
|
} |
||||||
|
|
||||||
|
body { |
||||||
|
font-family: sans-serif; |
||||||
|
letter-spacing: 1.5px; |
||||||
|
background: var(--background); |
||||||
|
display: flex; |
||||||
|
flex-wrap: wrap; |
||||||
|
justify-content: center; |
||||||
|
width: 100vw; |
||||||
|
height: 100vh; |
||||||
|
padding: 10rem; |
||||||
|
align-items: flex-start; |
||||||
|
} |
||||||
|
|
||||||
|
.gossip { |
||||||
|
background: hsl(280, 50%, 50%); |
||||||
|
margin: 20px; |
||||||
|
width: 250px; |
||||||
|
padding: 20px 25px; |
||||||
|
line-height: 30px; |
||||||
|
font-size: 20px; |
||||||
|
word-break: break-word; |
||||||
|
color: white; |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
flex-direction: column; |
||||||
|
} |
||||||
|
|
||||||
|
.gossip:first-letter { |
||||||
|
text-transform: uppercase; |
||||||
|
} |
||||||
|
|
||||||
|
.ranges { |
||||||
|
position: fixed; |
||||||
|
top: 5rem; |
||||||
|
display: flex; |
||||||
|
} |
||||||
|
|
||||||
|
.range { |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
color: var(--clear); |
||||||
|
font-family: monospace; |
||||||
|
} |
||||||
|
|
||||||
|
.range label, |
||||||
|
.range span { |
||||||
|
width: 100px; |
||||||
|
} |
||||||
|
|
||||||
|
.range label { |
||||||
|
text-align: right; |
||||||
|
} |
||||||
|
|
||||||
|
input { |
||||||
|
margin: 20px 25px; |
||||||
|
} |
||||||
|
|
||||||
|
textarea { |
||||||
|
height: 100%; |
||||||
|
width: 100%; |
||||||
|
max-width: 100%; |
||||||
|
outline: none; |
||||||
|
border: none; |
||||||
|
font-family: inherit; |
||||||
|
font-size: inherit; |
||||||
|
line-height: inherit; |
||||||
|
letter-spacing: inherit; |
||||||
|
color: inherit; |
||||||
|
background-color: transparent; |
||||||
|
padding: 0; |
||||||
|
margin: 0; |
||||||
|
resize: none; |
||||||
|
} |
||||||
|
|
||||||
|
textarea::placeholder { |
||||||
|
color: rgba(255, 255, 255, 0.5); |
||||||
|
} |
||||||
|
|
||||||
|
button { |
||||||
|
margin-top: 20px; |
||||||
|
text-align: right; |
||||||
|
border: solid 1px white; |
||||||
|
align-self: flex-end; |
||||||
|
padding: 5px 15px; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
|
||||||
|
.fade-in { |
||||||
|
animation: fade-in 0.75s; |
||||||
|
} |
||||||
|
|
||||||
|
@keyframes fade-in { |
||||||
|
from { |
||||||
|
opacity: 0%; |
||||||
|
} |
||||||
|
to { |
||||||
|
opacity: 100%; |
||||||
|
} |
||||||
|
} |
@ -1,135 +1,21 @@ |
|||||||
<!DOCTYPE html> |
<!DOCTYPE html> |
||||||
<html> |
<html> |
||||||
|
|
||||||
<head> |
<head> |
||||||
<title>Gossip grid</title> |
<title>Gossip grid</title> |
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
||||||
<link id="fav" rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;,"> |
<link id="fav" rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;,"> |
||||||
<style> |
<link rel="stylesheet" type="text/css" href="./gossip-grid.css"> |
||||||
|
|
||||||
:root { |
|
||||||
--background: hsl(0, 0%, 12%); |
|
||||||
--text: hsl(0, 0%, 80%); |
|
||||||
--clear: hsl(0, 0%, 65%); |
|
||||||
--disabled: hsl(0, 0%, 35%); |
|
||||||
--purple: #bb73e6; |
|
||||||
} |
|
||||||
|
|
||||||
* { |
|
||||||
margin: 0; |
|
||||||
padding: 0; |
|
||||||
box-sizing: border-box; |
|
||||||
} |
|
||||||
|
|
||||||
body { |
|
||||||
font-family: sans-serif; |
|
||||||
letter-spacing: 1.5px; |
|
||||||
background: var(--background); |
|
||||||
display: flex; |
|
||||||
flex-wrap: wrap; |
|
||||||
justify-content: center; |
|
||||||
width: 100vw; |
|
||||||
height: 100vh; |
|
||||||
padding: 10rem; |
|
||||||
align-items: flex-start; |
|
||||||
} |
|
||||||
|
|
||||||
.gossip { |
|
||||||
background: hsl(280, 50%, 50%); |
|
||||||
margin: 20px; |
|
||||||
width: 250px; |
|
||||||
padding: 20px 25px; |
|
||||||
line-height: 30px; |
|
||||||
font-size: 20px; |
|
||||||
word-break: break-word; |
|
||||||
color: white; |
|
||||||
display: flex; |
|
||||||
justify-content: space-between; |
|
||||||
flex-direction: column; |
|
||||||
} |
|
||||||
|
|
||||||
.gossip:first-letter { |
|
||||||
text-transform: uppercase; |
|
||||||
} |
|
||||||
|
|
||||||
.ranges { |
|
||||||
position: fixed; |
|
||||||
top: 5rem; |
|
||||||
display: flex; |
|
||||||
} |
|
||||||
|
|
||||||
.range { |
|
||||||
display: flex; |
|
||||||
justify-content: center; |
|
||||||
align-items: center; |
|
||||||
color: var(--clear); |
|
||||||
font-family: monospace; |
|
||||||
} |
|
||||||
|
|
||||||
.range label, |
|
||||||
.range span { |
|
||||||
width: 100px; |
|
||||||
} |
|
||||||
|
|
||||||
.range label { |
|
||||||
text-align: right; |
|
||||||
} |
|
||||||
|
|
||||||
input { |
|
||||||
margin: 20px 25px; |
|
||||||
} |
|
||||||
|
|
||||||
textarea { |
|
||||||
height: 100%; |
|
||||||
width: 100%; |
|
||||||
max-width: 100%; |
|
||||||
outline: none; |
|
||||||
border: none; |
|
||||||
font-family: inherit; |
|
||||||
font-size: inherit; |
|
||||||
line-height: inherit; |
|
||||||
letter-spacing: inherit; |
|
||||||
color: inherit; |
|
||||||
background-color: transparent; |
|
||||||
padding: 0; |
|
||||||
margin: 0; |
|
||||||
resize: none; |
|
||||||
} |
|
||||||
|
|
||||||
textarea::placeholder { |
|
||||||
color: rgba(255, 255, 255, 0.5); |
|
||||||
} |
|
||||||
|
|
||||||
button { |
|
||||||
margin-top: 20px; |
|
||||||
text-align: right; |
|
||||||
border: solid 1px white; |
|
||||||
align-self: flex-end; |
|
||||||
padding: 5px 15px; |
|
||||||
cursor: pointer; |
|
||||||
} |
|
||||||
|
|
||||||
.fade-in { |
|
||||||
animation: fade-in 0.75s; |
|
||||||
} |
|
||||||
|
|
||||||
@keyframes fade-in { |
|
||||||
from { |
|
||||||
opacity: 0%; |
|
||||||
} |
|
||||||
to { |
|
||||||
opacity: 100%; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
</style> |
|
||||||
</head> |
</head> |
||||||
|
|
||||||
<body> |
<body> |
||||||
<script type="module"> |
<script type="module"> |
||||||
|
|
||||||
import { grid } from './gossip-grid.js' |
import { grid } from './gossip-grid.js' |
||||||
|
|
||||||
grid() |
grid() |
||||||
|
|
||||||
</script> |
</script> |
||||||
</body> |
</body> |
||||||
|
|
||||||
</html> |
</html> |
@ -0,0 +1,37 @@ |
|||||||
|
|
||||||
|
:root { |
||||||
|
--background: hsl(0, 0%, 12%); |
||||||
|
--text: hsl(0, 0%, 80%); |
||||||
|
--clear: hsl(0, 0%, 65%); |
||||||
|
--disabled: hsl(0, 0%, 35%); |
||||||
|
--purple: #bb73e6; |
||||||
|
} |
||||||
|
|
||||||
|
* { |
||||||
|
margin: 0; |
||||||
|
padding: 0; |
||||||
|
box-sizing: border-box; |
||||||
|
} |
||||||
|
|
||||||
|
body { |
||||||
|
font-family: sans-serif; |
||||||
|
letter-spacing: 1.5px; |
||||||
|
background: var(--background); |
||||||
|
display: flex; |
||||||
|
flex-wrap: wrap; |
||||||
|
justify-content: center; |
||||||
|
align-content: center; |
||||||
|
width: 100vw; |
||||||
|
padding: 5rem; |
||||||
|
font-size: 12px; |
||||||
|
} |
||||||
|
|
||||||
|
div { |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
margin: 5px; |
||||||
|
width: 200px; |
||||||
|
height: 200px; |
||||||
|
color: white; |
||||||
|
} |
@ -1,57 +1,21 @@ |
|||||||
<!DOCTYPE html> |
<!DOCTYPE html> |
||||||
<html> |
<html> |
||||||
|
|
||||||
<head> |
<head> |
||||||
<title>Harder, bigger, bolder, stronger</title> |
<title>Harder, bigger, bolder, stronger</title> |
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
||||||
<link id="fav" rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;,"> |
<link id="fav" rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;,"> |
||||||
<style> |
<link rel="stylesheet" type="text/css" href="./build-brick-and-break.css"> |
||||||
|
|
||||||
:root { |
|
||||||
--background: hsl(0, 0%, 12%); |
|
||||||
--text: hsl(0, 0%, 80%); |
|
||||||
--clear: hsl(0, 0%, 65%); |
|
||||||
--disabled: hsl(0, 0%, 35%); |
|
||||||
--purple: #bb73e6; |
|
||||||
} |
|
||||||
|
|
||||||
* { |
|
||||||
margin: 0; |
|
||||||
padding: 0; |
|
||||||
box-sizing: border-box; |
|
||||||
} |
|
||||||
|
|
||||||
body { |
|
||||||
font-family: sans-serif; |
|
||||||
letter-spacing: 1.5px; |
|
||||||
background: var(--background); |
|
||||||
display: flex; |
|
||||||
flex-wrap: wrap; |
|
||||||
justify-content: center; |
|
||||||
align-content: center; |
|
||||||
width: 100vw; |
|
||||||
padding: 5rem; |
|
||||||
font-size: 12px; |
|
||||||
} |
|
||||||
|
|
||||||
div { |
|
||||||
display: flex; |
|
||||||
justify-content: center; |
|
||||||
align-items: center; |
|
||||||
margin: 5px; |
|
||||||
width: 200px; |
|
||||||
height: 200px; |
|
||||||
color: white; |
|
||||||
} |
|
||||||
|
|
||||||
</style> |
|
||||||
</head> |
</head> |
||||||
|
|
||||||
<body> |
<body> |
||||||
<script type="module"> |
<script type="module"> |
||||||
|
|
||||||
import { generateLetters } from './harder-bigger-bolder-stronger.js' |
import { generateLetters } from './harder-bigger-bolder-stronger.js' |
||||||
|
|
||||||
generateLetters() |
generateLetters() |
||||||
|
|
||||||
</script> |
</script> |
||||||
</body> |
</body> |
||||||
|
|
||||||
</html> |
</html> |
@ -0,0 +1,37 @@ |
|||||||
|
|
||||||
|
:root { |
||||||
|
--background: hsl(0, 0%, 12%); |
||||||
|
--text: hsl(0, 0%, 80%); |
||||||
|
--clear: hsl(0, 0%, 65%); |
||||||
|
--disabled: hsl(0, 0%, 35%); |
||||||
|
--purple: #bb73e6; |
||||||
|
} |
||||||
|
|
||||||
|
* { |
||||||
|
margin: 0; |
||||||
|
padding: 0; |
||||||
|
box-sizing: border-box; |
||||||
|
} |
||||||
|
|
||||||
|
body { |
||||||
|
font-family: sans-serif; |
||||||
|
letter-spacing: 1.5px; |
||||||
|
background: var(--background); |
||||||
|
display: flex; |
||||||
|
flex-wrap: wrap; |
||||||
|
width: 100vw; |
||||||
|
height: 100vh; |
||||||
|
} |
||||||
|
|
||||||
|
.note { |
||||||
|
width: 100%; |
||||||
|
flex: 1 1 80px; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
text-align: center; |
||||||
|
padding: 15px; |
||||||
|
font-size: 40px; |
||||||
|
color: white; |
||||||
|
transition: all 0.2s ease-in-out; |
||||||
|
} |
@ -1,57 +1,22 @@ |
|||||||
<!DOCTYPE html> |
<!DOCTYPE html> |
||||||
<html> |
<html> |
||||||
|
|
||||||
<head> |
<head> |
||||||
<title>Keycodes symphony</title> |
<title>Keycodes symphony</title> |
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
||||||
<link id="fav" rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;,"> |
<link id="fav" rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;,"> |
||||||
<style> |
<link rel="stylesheet" type="text/css" href="./keycodes-symphony.css"> |
||||||
|
|
||||||
:root { |
|
||||||
--background: hsl(0, 0%, 12%); |
|
||||||
--text: hsl(0, 0%, 80%); |
|
||||||
--clear: hsl(0, 0%, 65%); |
|
||||||
--disabled: hsl(0, 0%, 35%); |
|
||||||
--purple: #bb73e6; |
|
||||||
} |
|
||||||
|
|
||||||
* { |
|
||||||
margin: 0; |
|
||||||
padding: 0; |
|
||||||
box-sizing: border-box; |
|
||||||
} |
|
||||||
|
|
||||||
body { |
|
||||||
font-family: sans-serif; |
|
||||||
letter-spacing: 1.5px; |
|
||||||
background: var(--background); |
|
||||||
display: flex; |
|
||||||
flex-wrap: wrap; |
|
||||||
width: 100vw; |
|
||||||
height: 100vh; |
|
||||||
} |
|
||||||
|
|
||||||
.note { |
|
||||||
width: 100%; |
|
||||||
flex: 1 1 80px; |
|
||||||
display: flex; |
|
||||||
justify-content: center; |
|
||||||
align-items: center; |
|
||||||
text-align: center; |
|
||||||
padding: 15px; |
|
||||||
font-size: 40px; |
|
||||||
color: white; |
|
||||||
transition: all 0.2s ease-in-out; |
|
||||||
} |
|
||||||
|
|
||||||
</style> |
|
||||||
</head> |
</head> |
||||||
|
|
||||||
<body> |
<body> |
||||||
<script type="module"> |
<script type="module"> |
||||||
|
|
||||||
import { compose } from './keycodes-symphony.js' |
import { compose } from './keycodes-symphony.js' |
||||||
|
|
||||||
compose() |
compose() |
||||||
|
|
||||||
</script> |
</script> |
||||||
</body> |
</body> |
||||||
|
|
||||||
</html> |
</html> |
@ -0,0 +1,42 @@ |
|||||||
|
|
||||||
|
:root { |
||||||
|
--background: hsl(0, 0%, 12%); |
||||||
|
--text: hsl(0, 0%, 80%); |
||||||
|
--clear: hsl(0, 0%, 65%); |
||||||
|
--disabled: hsl(0, 0%, 35%); |
||||||
|
--purple: #bb73e6; |
||||||
|
} |
||||||
|
|
||||||
|
* { |
||||||
|
margin: 0; |
||||||
|
padding: 0; |
||||||
|
box-sizing: border-box; |
||||||
|
} |
||||||
|
|
||||||
|
body { |
||||||
|
font-family: sans-serif; |
||||||
|
letter-spacing: 1.5px; |
||||||
|
background: var(--background); |
||||||
|
display: flex; |
||||||
|
flex-wrap: wrap; |
||||||
|
justify-content: center; |
||||||
|
align-content: center; |
||||||
|
width: 100vw; |
||||||
|
height: 100vh; |
||||||
|
padding: 5rem; |
||||||
|
font-size: 12px; |
||||||
|
} |
||||||
|
|
||||||
|
.circle { |
||||||
|
width: 50px; |
||||||
|
height: 50px; |
||||||
|
border-radius: 50%; |
||||||
|
position: absolute; |
||||||
|
opacity: 0.75; |
||||||
|
} |
||||||
|
|
||||||
|
.box { |
||||||
|
width: 25vw; |
||||||
|
height: 25vh; |
||||||
|
border: solid 1px var(--clear); |
||||||
|
} |
@ -1,63 +1,23 @@ |
|||||||
<!DOCTYPE html> |
<!DOCTYPE html> |
||||||
<html> |
<html> |
||||||
|
|
||||||
<head> |
<head> |
||||||
<title>Mouse trap</title> |
<title>Mouse trap</title> |
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
||||||
<link id="fav" rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;,"> |
<link id="fav" rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;,"> |
||||||
<style> |
<link rel="stylesheet" type="text/css" href="./mouse-trap.css"> |
||||||
:root { |
|
||||||
--background: hsl(0, 0%, 12%); |
|
||||||
--text: hsl(0, 0%, 80%); |
|
||||||
--clear: hsl(0, 0%, 65%); |
|
||||||
--disabled: hsl(0, 0%, 35%); |
|
||||||
--purple: #bb73e6; |
|
||||||
} |
|
||||||
|
|
||||||
* { |
|
||||||
margin: 0; |
|
||||||
padding: 0; |
|
||||||
box-sizing: border-box; |
|
||||||
} |
|
||||||
|
|
||||||
body { |
|
||||||
font-family: sans-serif; |
|
||||||
letter-spacing: 1.5px; |
|
||||||
background: var(--background); |
|
||||||
display: flex; |
|
||||||
flex-wrap: wrap; |
|
||||||
justify-content: center; |
|
||||||
align-content: center; |
|
||||||
width: 100vw; |
|
||||||
height: 100vh; |
|
||||||
padding: 5rem; |
|
||||||
font-size: 12px; |
|
||||||
} |
|
||||||
|
|
||||||
.circle { |
|
||||||
width: 50px; |
|
||||||
height: 50px; |
|
||||||
border-radius: 50%; |
|
||||||
position: absolute; |
|
||||||
opacity: 0.75; |
|
||||||
} |
|
||||||
|
|
||||||
.box { |
|
||||||
width: 25vw; |
|
||||||
height: 25vh; |
|
||||||
border: solid 1px var(--clear); |
|
||||||
} |
|
||||||
|
|
||||||
</style> |
|
||||||
</head> |
</head> |
||||||
|
|
||||||
<body> |
<body> |
||||||
<script type="module"> |
<script type="module"> |
||||||
|
|
||||||
import { setBox, createCircle, moveCircle } from './mouse-trap.js' |
import { setBox, createCircle, moveCircle } from './mouse-trap.js' |
||||||
|
|
||||||
setBox() |
setBox() |
||||||
createCircle() |
createCircle() |
||||||
moveCircle() |
moveCircle() |
||||||
|
|
||||||
</script> |
</script> |
||||||
</body> |
</body> |
||||||
|
|
||||||
</html> |
</html> |
@ -0,0 +1,66 @@ |
|||||||
|
|
||||||
|
:root { |
||||||
|
--background: hsl(0, 0%, 12%); |
||||||
|
--text: hsl(0, 0%, 80%); |
||||||
|
--clear: hsl(0, 0%, 65%); |
||||||
|
--disabled: hsl(0, 0%, 35%); |
||||||
|
--purple: #bb73e6; |
||||||
|
} |
||||||
|
|
||||||
|
* { |
||||||
|
margin: 0; |
||||||
|
padding: 0; |
||||||
|
box-sizing: border-box; |
||||||
|
} |
||||||
|
|
||||||
|
body { |
||||||
|
font-family: sans-serif; |
||||||
|
letter-spacing: 1.5px; |
||||||
|
background: var(--background); |
||||||
|
display: flex; |
||||||
|
flex-wrap: wrap; |
||||||
|
justify-content: center; |
||||||
|
align-content: center; |
||||||
|
width: 100vw; |
||||||
|
height: 100vh; |
||||||
|
padding: 5rem; |
||||||
|
cursor: crosshair; |
||||||
|
} |
||||||
|
|
||||||
|
svg { |
||||||
|
filter: invert(100%); |
||||||
|
position: fixed; |
||||||
|
width: 100vw; |
||||||
|
height: 100vh; |
||||||
|
top: 0; |
||||||
|
left: 0; |
||||||
|
} |
||||||
|
|
||||||
|
svg line { |
||||||
|
stroke-width: 0.6px; |
||||||
|
stroke: grey; |
||||||
|
} |
||||||
|
|
||||||
|
.text { |
||||||
|
position: fixed; |
||||||
|
filter: invert(100%); |
||||||
|
font-size: 50px; |
||||||
|
cursor: pointer; |
||||||
|
white-space: pre-wrap; |
||||||
|
} |
||||||
|
|
||||||
|
.hsl { |
||||||
|
filter: invert(100%); |
||||||
|
font-size: 17px; |
||||||
|
} |
||||||
|
|
||||||
|
.hue { |
||||||
|
top: 100px; |
||||||
|
right: 100px; |
||||||
|
text-align: right; |
||||||
|
} |
||||||
|
|
||||||
|
.luminosity { |
||||||
|
bottom: 100px; |
||||||
|
left: 100px; |
||||||
|
} |
@ -1,86 +1,21 @@ |
|||||||
<!DOCTYPE html> |
<!DOCTYPE html> |
||||||
<html> |
<html> |
||||||
|
|
||||||
<head> |
<head> |
||||||
<title>Pick & click</title> |
<title>Pick & click</title> |
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
||||||
<link id="fav" rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;,"> |
<link id="fav" rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;,"> |
||||||
<style> |
<link rel="stylesheet" type="text/css" href="./pick-and-click.css"> |
||||||
|
|
||||||
:root { |
|
||||||
--background: hsl(0, 0%, 12%); |
|
||||||
--text: hsl(0, 0%, 80%); |
|
||||||
--clear: hsl(0, 0%, 65%); |
|
||||||
--disabled: hsl(0, 0%, 35%); |
|
||||||
--purple: #bb73e6; |
|
||||||
} |
|
||||||
|
|
||||||
* { |
|
||||||
margin: 0; |
|
||||||
padding: 0; |
|
||||||
box-sizing: border-box; |
|
||||||
} |
|
||||||
|
|
||||||
body { |
|
||||||
font-family: sans-serif; |
|
||||||
letter-spacing: 1.5px; |
|
||||||
background: var(--background); |
|
||||||
display: flex; |
|
||||||
flex-wrap: wrap; |
|
||||||
justify-content: center; |
|
||||||
align-content: center; |
|
||||||
width: 100vw; |
|
||||||
height: 100vh; |
|
||||||
padding: 5rem; |
|
||||||
cursor: crosshair; |
|
||||||
} |
|
||||||
|
|
||||||
svg { |
|
||||||
filter: invert(100%); |
|
||||||
position: fixed; |
|
||||||
width: 100vw; |
|
||||||
height: 100vh; |
|
||||||
top: 0; |
|
||||||
left: 0; |
|
||||||
} |
|
||||||
|
|
||||||
svg line { |
|
||||||
stroke-width: 0.6px; |
|
||||||
stroke: grey; |
|
||||||
} |
|
||||||
|
|
||||||
.text { |
|
||||||
position: fixed; |
|
||||||
filter: invert(100%); |
|
||||||
font-size: 50px; |
|
||||||
cursor: pointer; |
|
||||||
white-space: pre-wrap; |
|
||||||
} |
|
||||||
|
|
||||||
.hsl { |
|
||||||
filter: invert(100%); |
|
||||||
font-size: 17px; |
|
||||||
} |
|
||||||
|
|
||||||
.hue { |
|
||||||
top: 100px; |
|
||||||
right: 100px; |
|
||||||
text-align: right; |
|
||||||
} |
|
||||||
|
|
||||||
.luminosity { |
|
||||||
bottom: 100px; |
|
||||||
left: 100px; |
|
||||||
} |
|
||||||
|
|
||||||
</style> |
|
||||||
</head> |
</head> |
||||||
|
|
||||||
<body> |
<body> |
||||||
<script type="module"> |
<script type="module"> |
||||||
|
|
||||||
import { pick } from './pick-and-click.js' |
import { pick } from './pick-and-click.js' |
||||||
|
|
||||||
pick() |
pick() |
||||||
|
|
||||||
</script> |
</script> |
||||||
</body> |
</body> |
||||||
|
|
||||||
</html> |
</html> |
@ -0,0 +1,154 @@ |
|||||||
|
|
||||||
|
:root { |
||||||
|
--background: hsl(0, 0%, 12%); |
||||||
|
--text: hsl(0, 0%, 80%); |
||||||
|
--clear: hsl(0, 0%, 65%); |
||||||
|
--disabled: hsl(0, 0%, 35%); |
||||||
|
--purple: #bb73e6; |
||||||
|
} |
||||||
|
|
||||||
|
* { |
||||||
|
margin: 0; |
||||||
|
padding: 0; |
||||||
|
box-sizing: border-box; |
||||||
|
} |
||||||
|
|
||||||
|
body { |
||||||
|
font-family: sans-serif; |
||||||
|
letter-spacing: 1.5px; |
||||||
|
background: var(--background); |
||||||
|
display: flex; |
||||||
|
flex-wrap: wrap; |
||||||
|
justify-content: center; |
||||||
|
align-content: center; |
||||||
|
width: 100vw; |
||||||
|
height: 100vh; |
||||||
|
color: var(--text); |
||||||
|
padding: 2.5rem 0; |
||||||
|
} |
||||||
|
|
||||||
|
button { |
||||||
|
user-select: none; |
||||||
|
letter-spacing: 0; |
||||||
|
color: white; |
||||||
|
outline: none; |
||||||
|
border: none; |
||||||
|
} |
||||||
|
|
||||||
|
.button:first-letter { |
||||||
|
text-transform: uppercase; |
||||||
|
} |
||||||
|
|
||||||
|
.button.unpimp:before { |
||||||
|
content: 'Un'; |
||||||
|
} |
||||||
|
|
||||||
|
.button { |
||||||
|
background: var(--background); |
||||||
|
font-family: serif; |
||||||
|
width: 70%; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
|
||||||
|
.one { |
||||||
|
font-size: 75px; |
||||||
|
} |
||||||
|
|
||||||
|
.two { |
||||||
|
font-family: sans-serif; |
||||||
|
} |
||||||
|
|
||||||
|
.three { |
||||||
|
letter-spacing: 15px; |
||||||
|
} |
||||||
|
|
||||||
|
.four { |
||||||
|
padding: 20px 40px; |
||||||
|
border: solid 1px var(--clear); |
||||||
|
} |
||||||
|
|
||||||
|
.five { |
||||||
|
border-radius: 100px; |
||||||
|
} |
||||||
|
|
||||||
|
.six { |
||||||
|
border: none; |
||||||
|
box-shadow: 8px 8px 15px rgba(255, 255, 255, 0.075), |
||||||
|
-10px -10px 15px rgba(0, 0, 0, 0.3); |
||||||
|
} |
||||||
|
|
||||||
|
.seven { |
||||||
|
color: var(--purple); |
||||||
|
} |
||||||
|
|
||||||
|
.eight { |
||||||
|
border: solid 0.5px var(--purple); |
||||||
|
} |
||||||
|
|
||||||
|
.nine { |
||||||
|
background: var(--purple); |
||||||
|
color: white; |
||||||
|
position: relative; |
||||||
|
box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.8); |
||||||
|
} |
||||||
|
|
||||||
|
.ten:after { |
||||||
|
position: absolute; |
||||||
|
content: ''; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
padding: 15px; |
||||||
|
top: -16px; |
||||||
|
left: -16px; |
||||||
|
border-radius: 100px; |
||||||
|
border: solid 1px var(--clear); |
||||||
|
} |
||||||
|
|
||||||
|
.eleven:after { |
||||||
|
position: absolute; |
||||||
|
content: ''; |
||||||
|
padding: 30px; |
||||||
|
top: -31px; |
||||||
|
left: -31px; |
||||||
|
background: white; |
||||||
|
z-index: -1; |
||||||
|
} |
||||||
|
|
||||||
|
.twelve { |
||||||
|
color: var(--background); |
||||||
|
} |
||||||
|
|
||||||
|
.thirteen { |
||||||
|
text-decoration: underline; |
||||||
|
} |
||||||
|
|
||||||
|
.fourteen { |
||||||
|
animation: animation 1.5s linear infinite; |
||||||
|
background: linear-gradient( |
||||||
|
to right, |
||||||
|
var(--purple) 0%, |
||||||
|
white 48%, |
||||||
|
white 52%, |
||||||
|
var(--purple) 100% |
||||||
|
); |
||||||
|
background-size: 500px 640px; |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
|
||||||
|
@keyframes animation { |
||||||
|
0% { |
||||||
|
background-position: 0 0; |
||||||
|
} |
||||||
|
100% { |
||||||
|
background-position: 500px 0; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.fifteen { |
||||||
|
height: 100vh; |
||||||
|
width: 100vw; |
||||||
|
border-radius: 0; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
} |
@ -1,181 +1,28 @@ |
|||||||
<!DOCTYPE html> |
<!DOCTYPE html> |
||||||
<html> |
<html> |
||||||
|
|
||||||
<head> |
<head> |
||||||
<title>Pimp my style</title> |
<title>Pimp my style</title> |
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
||||||
<link id="fav" rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;,"> |
<link id="fav" rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;,"> |
||||||
<style> |
<link rel="stylesheet" type="text/css" href="./pimp-my-style.css"> |
||||||
|
|
||||||
:root { |
|
||||||
--background: hsl(0, 0%, 12%); |
|
||||||
--text: hsl(0, 0%, 80%); |
|
||||||
--clear: hsl(0, 0%, 65%); |
|
||||||
--disabled: hsl(0, 0%, 35%); |
|
||||||
--purple: #bb73e6; |
|
||||||
} |
|
||||||
|
|
||||||
* { |
|
||||||
margin: 0; |
|
||||||
padding: 0; |
|
||||||
box-sizing: border-box; |
|
||||||
} |
|
||||||
|
|
||||||
body { |
|
||||||
font-family: sans-serif; |
|
||||||
letter-spacing: 1.5px; |
|
||||||
background: var(--background); |
|
||||||
display: flex; |
|
||||||
flex-wrap: wrap; |
|
||||||
justify-content: center; |
|
||||||
align-content: center; |
|
||||||
width: 100vw; |
|
||||||
height: 100vh; |
|
||||||
color: var(--text); |
|
||||||
padding: 2.5rem 0; |
|
||||||
} |
|
||||||
|
|
||||||
button { |
|
||||||
user-select: none; |
|
||||||
letter-spacing: 0; |
|
||||||
color: white; |
|
||||||
outline: none; |
|
||||||
border: none; |
|
||||||
} |
|
||||||
|
|
||||||
.button:first-letter { |
|
||||||
text-transform: uppercase; |
|
||||||
} |
|
||||||
|
|
||||||
.button.unpimp:before { |
|
||||||
content: 'Un'; |
|
||||||
} |
|
||||||
|
|
||||||
.button { |
|
||||||
background: var(--background); |
|
||||||
font-family: serif; |
|
||||||
width: 70%; |
|
||||||
text-align: center; |
|
||||||
} |
|
||||||
|
|
||||||
.one { |
|
||||||
font-size: 75px; |
|
||||||
} |
|
||||||
|
|
||||||
.two { |
|
||||||
font-family: sans-serif; |
|
||||||
} |
|
||||||
|
|
||||||
.three { |
|
||||||
letter-spacing: 15px; |
|
||||||
} |
|
||||||
|
|
||||||
.four { |
|
||||||
padding: 20px 40px; |
|
||||||
border: solid 1px var(--clear); |
|
||||||
} |
|
||||||
|
|
||||||
.five { |
|
||||||
border-radius: 100px; |
|
||||||
} |
|
||||||
|
|
||||||
.six { |
|
||||||
border: none; |
|
||||||
box-shadow: 8px 8px 15px rgba(255, 255, 255, 0.075), |
|
||||||
-10px -10px 15px rgba(0, 0, 0, 0.3); |
|
||||||
} |
|
||||||
|
|
||||||
.seven { |
|
||||||
color: var(--purple); |
|
||||||
} |
|
||||||
|
|
||||||
.eight { |
|
||||||
border: solid 0.5px var(--purple); |
|
||||||
} |
|
||||||
|
|
||||||
.nine { |
|
||||||
background: var(--purple); |
|
||||||
color: white; |
|
||||||
position: relative; |
|
||||||
box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.8); |
|
||||||
} |
|
||||||
|
|
||||||
.ten:after { |
|
||||||
position: absolute; |
|
||||||
content: ''; |
|
||||||
width: 100%; |
|
||||||
height: 100%; |
|
||||||
padding: 15px; |
|
||||||
top: -16px; |
|
||||||
left: -16px; |
|
||||||
border-radius: 100px; |
|
||||||
border: solid 1px var(--clear); |
|
||||||
} |
|
||||||
|
|
||||||
.eleven:after { |
|
||||||
position: absolute; |
|
||||||
content: ''; |
|
||||||
padding: 30px; |
|
||||||
top: -31px; |
|
||||||
left: -31px; |
|
||||||
background: white; |
|
||||||
z-index: -1; |
|
||||||
} |
|
||||||
|
|
||||||
.twelve { |
|
||||||
color: var(--background); |
|
||||||
} |
|
||||||
|
|
||||||
.thirteen { |
|
||||||
text-decoration: underline; |
|
||||||
} |
|
||||||
|
|
||||||
.fourteen { |
|
||||||
animation: animation 1.5s linear infinite; |
|
||||||
background: linear-gradient( |
|
||||||
to right, |
|
||||||
var(--purple) 0%, |
|
||||||
white 48%, |
|
||||||
white 52%, |
|
||||||
var(--purple) 100% |
|
||||||
); |
|
||||||
background-size: 500px 640px; |
|
||||||
position: relative; |
|
||||||
} |
|
||||||
|
|
||||||
@keyframes animation { |
|
||||||
0% { |
|
||||||
background-position: 0 0; |
|
||||||
} |
|
||||||
100% { |
|
||||||
background-position: 500px 0; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.fifteen { |
|
||||||
height: 100vh; |
|
||||||
width: 100vw; |
|
||||||
border-radius: 0; |
|
||||||
display: flex; |
|
||||||
justify-content: center; |
|
||||||
align-items: center; |
|
||||||
} |
|
||||||
|
|
||||||
</style> |
|
||||||
</head> |
</head> |
||||||
|
|
||||||
<body> |
<body> |
||||||
<script type="module"> |
<script type="module"> |
||||||
|
|
||||||
import { pimp } from './pimp-my-style.js' |
import { pimp } from './pimp-my-style.js' |
||||||
|
|
||||||
const body = document.querySelector('body') |
const body = document.querySelector('body') |
||||||
|
|
||||||
const button = document.createElement('button') |
const button = document.createElement('button') |
||||||
button.className = 'button' |
button.className = 'button' |
||||||
button.textContent = 'pimp my style' |
button.textContent = 'pimp my style' |
||||||
body.append(button) |
body.append(button) |
||||||
|
|
||||||
button.addEventListener('click', pimp) |
button.addEventListener('click', pimp) |
||||||
|
|
||||||
</script> |
</script> |
||||||
</body> |
</body> |
||||||
</html> |
|
||||||
|
</html> |
@ -0,0 +1,56 @@ |
|||||||
|
|
||||||
|
:root { |
||||||
|
--background: hsl(0, 0%, 12%); |
||||||
|
--text: hsl(0, 0%, 80%); |
||||||
|
--clear: hsl(0, 0%, 65%); |
||||||
|
--disabled: hsl(0, 0%, 35%); |
||||||
|
--purple: #bb73e6; |
||||||
|
} |
||||||
|
|
||||||
|
* { |
||||||
|
margin: 0; |
||||||
|
padding: 0; |
||||||
|
box-sizing: border-box; |
||||||
|
} |
||||||
|
|
||||||
|
body { |
||||||
|
font-family: sans-serif; |
||||||
|
letter-spacing: 1.5px; |
||||||
|
background: var(--background); |
||||||
|
} |
||||||
|
|
||||||
|
section { |
||||||
|
height: 100vh; |
||||||
|
width: 100vw; |
||||||
|
} |
||||||
|
|
||||||
|
a { |
||||||
|
text-decoration: none; |
||||||
|
} |
||||||
|
|
||||||
|
.location { |
||||||
|
position: fixed; |
||||||
|
top: 0; |
||||||
|
color: white; |
||||||
|
width: 100vw; |
||||||
|
height: 100vh; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
font-size: 100px; |
||||||
|
line-height: 130px; |
||||||
|
white-space: pre-wrap; |
||||||
|
text-align: center; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
|
||||||
|
.direction { |
||||||
|
position: fixed; |
||||||
|
right: 100px; |
||||||
|
top: 100px; |
||||||
|
text-align: center; |
||||||
|
font-size: 40px; |
||||||
|
line-height: 60px; |
||||||
|
color: white; |
||||||
|
white-space: pre-wrap; |
||||||
|
} |
@ -1,72 +1,19 @@ |
|||||||
<!DOCTYPE html> |
<!DOCTYPE html> |
||||||
<html> |
<html> |
||||||
|
|
||||||
<head> |
<head> |
||||||
<title>Where do we go?</title> |
<title>Where do we go?</title> |
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
||||||
<link id="fav" rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;,"> |
<link id="fav" rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;,"> |
||||||
<style> |
<link rel="stylesheet" type="text/css" href="./where-do-we-go.css"> |
||||||
:root { |
|
||||||
--background: hsl(0, 0%, 12%); |
|
||||||
--text: hsl(0, 0%, 80%); |
|
||||||
--clear: hsl(0, 0%, 65%); |
|
||||||
--disabled: hsl(0, 0%, 35%); |
|
||||||
--purple: #bb73e6; |
|
||||||
} |
|
||||||
|
|
||||||
* { |
|
||||||
margin: 0; |
|
||||||
padding: 0; |
|
||||||
box-sizing: border-box; |
|
||||||
} |
|
||||||
|
|
||||||
body { |
|
||||||
font-family: sans-serif; |
|
||||||
letter-spacing: 1.5px; |
|
||||||
background: var(--background); |
|
||||||
} |
|
||||||
|
|
||||||
section { |
|
||||||
height: 100vh; |
|
||||||
width: 100vw; |
|
||||||
} |
|
||||||
|
|
||||||
a { |
|
||||||
text-decoration: none; |
|
||||||
} |
|
||||||
|
|
||||||
.location { |
|
||||||
position: fixed; |
|
||||||
top: 0; |
|
||||||
color: white; |
|
||||||
width: 100vw; |
|
||||||
height: 100vh; |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
justify-content: center; |
|
||||||
font-size: 100px; |
|
||||||
line-height: 130px; |
|
||||||
white-space: pre-wrap; |
|
||||||
text-align: center; |
|
||||||
cursor: pointer; |
|
||||||
} |
|
||||||
|
|
||||||
.direction { |
|
||||||
position: fixed; |
|
||||||
right: 100px; |
|
||||||
top: 100px; |
|
||||||
text-align: center; |
|
||||||
font-size: 40px; |
|
||||||
line-height: 60px; |
|
||||||
color: white; |
|
||||||
white-space: pre-wrap; |
|
||||||
} |
|
||||||
</style> |
|
||||||
</head> |
</head> |
||||||
|
|
||||||
<body> |
<body> |
||||||
<script type="module"> |
<script type="module"> |
||||||
import { explore } from './where-do-we-go.js' |
import { explore } from './where-do-we-go.js' |
||||||
|
|
||||||
explore() |
explore() |
||||||
</script> |
</script> |
||||||
</body> |
</body> |
||||||
|
|
||||||
</html> |
</html> |
Loading…
Reference in new issue