mirror of
https://github.com/seigler/drawing-prompt
synced 2025-07-26 01:06:13 +00:00
working well
This commit is contained in:
parent
9a4336dacd
commit
940b015a0e
5 changed files with 43 additions and 15 deletions
BIN
public/brush-stroke.png
Normal file
BIN
public/brush-stroke.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 58 KiB |
BIN
public/helsinki-webfont.woff
Normal file
BIN
public/helsinki-webfont.woff
Normal file
Binary file not shown.
34
src/App.css
34
src/App.css
|
@ -1,21 +1,45 @@
|
|||
:root {
|
||||
background: url(data:image/bmp;base64,Qk1aBAAAAAAAADYAAAAoAAAABAAAAAMAAAABABgAAAAAACQAAAATCwAAEwsAAAAAAAAAAAAAYoKGcJCTdI2QZHp3X3h/cYyNeYuOZXp5RmNkZnt3c3p2U2xo);
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'helsinkiregular';
|
||||
src: url('helsinki-webfont.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
#root {
|
||||
max-width: 1280px;
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
font-family: 'helsinkiregular', sans-serif;
|
||||
}
|
||||
|
||||
#root::before {
|
||||
z-index: -1;
|
||||
content: '';
|
||||
position: absolute;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: gray;
|
||||
mask-image: url('brush-stroke.jpg');
|
||||
margin: auto;
|
||||
height: min(100vh, 50rem);
|
||||
background-color: #FFF;
|
||||
mask-image: url('brush-stroke.png');
|
||||
mask-size: cover;
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
}
|
||||
|
||||
.prompt {
|
||||
font-size: min(3rem, 10vmin);
|
||||
text-shadow: 0 0 0.1em white, 0 0 0.25em white, 0 0 0.5em white, 0 0 1em white;
|
||||
width: min(80vmax, calc(100vw - 2rem));
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#regenerate {
|
||||
position: fixed;
|
||||
bottom: 1rem;
|
||||
left: 1rem;
|
||||
}
|
|
@ -31,9 +31,9 @@ function App() {
|
|||
|
||||
return (
|
||||
<>
|
||||
<h1>Your Prompt:</h1>
|
||||
<div>You should draw {['a','e','i','o','u'].includes(suggestion().charAt(0)) ? 'an' : 'a'}</div>
|
||||
<div class="prompt">{suggestion()}</div>
|
||||
<button on:click={() => {
|
||||
<button id="regenerate" on:click={() => {
|
||||
setSuggestion(getPrompt())
|
||||
}}>
|
||||
↻
|
||||
|
|
|
@ -92,19 +92,21 @@
|
|||
"aquatic",
|
||||
"ancient",
|
||||
"future",
|
||||
"super"
|
||||
"superpowered"
|
||||
],
|
||||
"animal": [
|
||||
"albatross",
|
||||
"alligator",
|
||||
"antelope",
|
||||
"arctic",
|
||||
"arctic fox",
|
||||
"armadillo",
|
||||
"baboon",
|
||||
"badger",
|
||||
"bat",
|
||||
"beagle",
|
||||
"bear",
|
||||
"brown bear",
|
||||
"black bear",
|
||||
"polar bear",
|
||||
"beaver",
|
||||
"bison",
|
||||
"blue whale",
|
||||
|
@ -120,7 +122,7 @@
|
|||
"cheetah",
|
||||
"chihuahua",
|
||||
"chimpanzee",
|
||||
"chinchillas",
|
||||
"chinchilla",
|
||||
"cobra",
|
||||
"cow",
|
||||
"crab",
|
||||
|
@ -196,7 +198,7 @@
|
|||
"rhinoceros",
|
||||
"salamander",
|
||||
"salmon",
|
||||
"sardines",
|
||||
"sardine",
|
||||
"shark",
|
||||
"sheep",
|
||||
"sloth",
|
||||
|
@ -269,7 +271,7 @@
|
|||
"craftsperson",
|
||||
"curator",
|
||||
"customer experience designer",
|
||||
"customer service",
|
||||
"customer service representative",
|
||||
"data analyst",
|
||||
"data architect",
|
||||
"data scientist",
|
||||
|
@ -287,7 +289,7 @@
|
|||
"engineer",
|
||||
"entrepreneur",
|
||||
"environmental engineer",
|
||||
"environmental science",
|
||||
"environmental scientist",
|
||||
"epidemiologist",
|
||||
"equipment operator",
|
||||
"event planner",
|
||||
|
@ -346,9 +348,11 @@
|
|||
"mental health counselor",
|
||||
"midwife",
|
||||
"miner",
|
||||
"monk",
|
||||
"musician",
|
||||
"nanny",
|
||||
"network administrator",
|
||||
"nun",
|
||||
"nurse",
|
||||
"occupational health & safety specialist",
|
||||
"occupational therapist",
|
||||
|
@ -408,7 +412,7 @@
|
|||
"systems analyst",
|
||||
"tailor",
|
||||
"teacher",
|
||||
"technical support",
|
||||
"technical support representative",
|
||||
"technical writer",
|
||||
"technician",
|
||||
"technology architect",
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue