diff --git a/.gitignore b/.gitignore index b439b67..a7a5cec 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,3 @@ .vscode/ +node_modules/ note.txt \ No newline at end of file diff --git a/TODO.md b/TODO.md index 58a8d91..b053e1b 100644 --- a/TODO.md +++ b/TODO.md @@ -1,9 +1,17 @@ # ToDo -- [ ] Colorspace selection. -- [ ] Add Aspect ratio awareness. -- [ ] Move download buttons to preview area. +- [W] Colorspace selection. +- [X] Add Aspect ratio awareness. +- [X] Move download buttons to preview area. - [ ] Add Impressum, Datenschutzerklärung and About page. - [ ] Mention trianglify. -- [ ] Randomly generate Pattern intensity, Triangle variance and Cell size. -- [ ] Add random color button as buttongroup next to "regenerate pattern" button. -- [ ] Switch to a js package manager and deliver js without external cdns. +- [X] Randomly generate Pattern intensity, Triangle variance and Cell size. +- [X] Add random color button as buttongroup next to "regenerate pattern" button. +- [X] Switch to a js package manager and deliver js without external cdns. +- [ ] Investigate size issue +#- [ ] Use datasets for all values +#- [ ] x, y color allow to set both(buttongroup to switch axis) default for y axis = match +- [ ] Concept to not overload the UI while preserving all features +#- [ ] Predefinded resolution picker(1080p, 1440p..) +- [ ] Add api via get parameters +- [ ] share link (api?) + diff --git a/css/style.css b/css/style.css index 995506d..1c05d09 100644 --- a/css/style.css +++ b/css/style.css @@ -27,10 +27,59 @@ main { transition-duration: .2s; } - -#svg-center { +.svg-center { -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); align-self: center; } + +.preview { + flex: 1 1 auto; + z-index: 1; + position: relative; +} + +.preview_content { + box-sizing: border-box; + position: relative; + display: flex; + align-items: center; + justify-content: center; + height: 100%; + padding: 15px; /* TOP, RIGHT, BOTTOM, LEFT */ +} + +.preview canvas { + z-index: 1000000; + max-height: 100%; + max-width: 100%; + flex: 1 1 auto; + height: auto; + width: auto; + object-fit: contain; + filter: drop-shadow(2px 2px 8px rgba(0, 0, 0, .2)) +} + +.preview-float { + position: absolute !important; + z-index: 1000001; + bottom: 10px; + width: 100%; + display: flex; + justify-content: center; +} + +#colorpattern.active { + box-sizing: border-box; + outline: 3px cyan solid; + transform: scale(1.025); + transition-duration: .2s; +} + +.opacity { + opacity: 0.5; +} +.opacity:hover { + opacity: 1.0; +} diff --git a/index.html b/index.html index 271b153..a0250ca 100644 --- a/index.html +++ b/index.html @@ -8,45 +8,52 @@ - + +