├── .babelrc ├── preview.jpg ├── .gitignore ├── .postcssrc ├── readme.md ├── docs ├── index.html ├── icons │ ├── arrowDown.svg │ ├── arrowUp.svg │ └── remove.svg ├── objects │ ├── objectsSeatBall.svg │ ├── accessoriesShoeFlatPointy.svg │ ├── objectsSeatCube.svg │ ├── accessoriesShoeFlatSimple.svg │ ├── objectsSeatCube2.svg │ ├── headFrontNoHair.svg │ ├── sceneHomeHangingLamp.svg │ ├── accessoriesShoeFlatSneaker.svg │ ├── headFrontCaesar.svg │ ├── headFrontShort1.svg │ ├── sceneHomeClock.svg │ ├── bottomStandingSkinnyJeans.svg │ ├── headFrontTop.svg │ ├── headFrontShort2.svg │ ├── sceneHomeTable.svg │ ├── sceneHomeLamp.svg │ ├── bottomStandingSkinnyJeansWalk.svg │ ├── headFrontAfro.svg │ ├── headFrontLong.svg │ ├── headFrontPony.svg │ ├── headFrontShortBeard.svg │ ├── bodyPregnant.svg │ ├── headFrontTurban1.svg │ ├── bodyPointingForward.svg │ ├── bodyLongSleeve.svg │ ├── bottomStandingSweatpants.svg │ ├── bodyJacket2.svg │ ├── bodyTurtleNeck.svg │ ├── bodyPointingUp.svg │ ├── bodyLabCoat.svg │ ├── bodyJacket.svg │ ├── bodyHoodie.svg │ ├── scenePlantMaceta.svg │ ├── headFrontAiry.svg │ ├── bottomStandingShorts.svg │ ├── headFrontWavy.svg │ ├── headFrontHijab2.svg │ ├── headFrontChongo.svg │ ├── bottomStandingBaggyPants.svg │ ├── headFrontTurban2.svg │ ├── bottomStandingJogging.svg │ ├── bottomStandingSprint.svg │ ├── bottomSittingSkinnyJeans1.svg │ ├── bottomStandingSkirt.svg │ ├── bottomSittingBaggyPants.svg │ ├── bottomSittingSweatPants.svg │ ├── bodyTrenchCoat.svg │ ├── headFrontHijab1.svg │ ├── scenePlantTopLeaves.svg │ ├── headFrontRad.svg │ ├── headFrontCurly.svg │ ├── sceneHomePlant.svg │ ├── sceneHomeBigLeafPlant.svg │ ├── scenePlantPlantLeft.svg │ └── scenePlantPlantRight.svg └── src.d40f3234.css ├── src ├── index.html ├── objectsList.js ├── style.scss └── index.jsx ├── package.json └── license /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["env", "react"] 3 | } 4 | -------------------------------------------------------------------------------- /preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ozgrozer/hdt/HEAD/preview.jpg -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .cache 3 | dist 4 | node_modules 5 | yarn-error.log 6 | -------------------------------------------------------------------------------- /.postcssrc: -------------------------------------------------------------------------------- 1 | { 2 | "modules": false, 3 | "plugins": { 4 | "autoprefixer": { 5 | "browsers": [">1%", "last 4 versions"] 6 | } 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # Humaaans Design Tool 2 | 3 | [https://ozgrozer.github.io/hdt/](https://ozgrozer.github.io/hdt/) 4 | 5 | ![](preview.jpg?v=4) 6 | 7 | ## License 8 | 9 | [MIT](license) 10 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | Humaaans Design Tool
-------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Humaaans Design Tool 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /docs/icons/arrowDown.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/icons/arrowUp.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/objects/objectsSeatBall.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /docs/icons/remove.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/objects/accessoriesShoeFlatPointy.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /docs/objects/objectsSeatCube.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /docs/objects/accessoriesShoeFlatSimple.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /docs/objects/objectsSeatCube2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /docs/objects/headFrontNoHair.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hdt", 3 | "version": "1.1.1", 4 | "scripts": { 5 | "start": "parcel ./src/index.html --out-dir ./docs --public-url / --port 1140", 6 | "prebuild": "cd docs && pwd && find . -maxdepth 1 ! -name 'objects' ! -name 'icons' -type f -exec rm -rf {} +", 7 | "build": "parcel build ./src/index.html --out-dir ./docs --public-url ./ --no-source-maps" 8 | }, 9 | "license": "MIT", 10 | "dependencies": { 11 | "html2canvas": "^1.0.0-alpha.12", 12 | "react": "^16.6.3", 13 | "react-dom": "^16.6.3", 14 | "react-rnd": "^9.0.4" 15 | }, 16 | "devDependencies": { 17 | "autoprefixer": "^9.4.0", 18 | "babel-core": "^6.26.3", 19 | "babel-preset-env": "^1.7.0", 20 | "babel-preset-react": "^6.24.1", 21 | "parcel-bundler": "^1.10.3", 22 | "sass": "^1.15.1" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /docs/objects/sceneHomeHangingLamp.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /license: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Ozgur Ozer 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /docs/objects/accessoriesShoeFlatSneaker.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /docs/objects/headFrontCaesar.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /docs/objects/headFrontShort1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /docs/objects/sceneHomeClock.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /docs/objects/bottomStandingSkinnyJeans.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /docs/objects/headFrontTop.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /docs/objects/headFrontShort2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /docs/objects/sceneHomeTable.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /docs/objects/sceneHomeLamp.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /docs/objects/bottomStandingSkinnyJeansWalk.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/objectsList.js: -------------------------------------------------------------------------------- 1 | module.exports = [ 2 | 'accessoriesShoeFlatPointy', 3 | 'accessoriesShoeFlatSimple', 4 | 'accessoriesShoeFlatSneaker', 5 | 'bodyHoodie', 6 | 'bodyJacket', 7 | 'bodyJacket2', 8 | 'bodyLabCoat', 9 | 'bodyLongSleeve', 10 | 'bodyPointingForward', 11 | 'bodyPointingUp', 12 | 'bodyPregnant', 13 | 'bodyTrenchCoat', 14 | 'bodyTurtleNeck', 15 | 'bottomSittingBaggyPants', 16 | 'bottomSittingSkinnyJeans1', 17 | 'bottomSittingSweatPants', 18 | 'bottomStandingBaggyPants', 19 | 'bottomStandingJogging', 20 | 'bottomStandingShorts', 21 | 'bottomStandingSkinnyJeans', 22 | 'bottomStandingSkinnyJeansWalk', 23 | 'bottomStandingSkirt', 24 | 'bottomStandingSprint', 25 | 'bottomStandingSweatpants', 26 | 'headFrontAfro', 27 | 'headFrontAiry', 28 | 'headFrontCaesar', 29 | 'headFrontChongo', 30 | 'headFrontCurly', 31 | 'headFrontHijab2', 32 | 'headFrontHijab1', 33 | 'headFrontLong', 34 | 'headFrontNoHair', 35 | 'headFrontPony', 36 | 'headFrontRad', 37 | 'headFrontShort1', 38 | 'headFrontShort2', 39 | 'headFrontShortBeard', 40 | 'headFrontTop', 41 | 'headFrontTurban2', 42 | 'headFrontTurban1', 43 | 'headFrontWavy', 44 | 'objectsSeatBall', 45 | 'objectsSeatCube', 46 | 'objectsSeatCube2', 47 | 'sceneHomePlant', 48 | 'sceneHomeTable', 49 | 'sceneHomeBigLeafPlant', 50 | 'sceneHomeLamp', 51 | 'sceneHomeHangingLamp', 52 | 'sceneHomeClock', 53 | 'scenePlantTopLeaves', 54 | 'scenePlantMaceta', 55 | 'scenePlantPlantLeft', 56 | 'scenePlantPlantRight', 57 | ] 58 | -------------------------------------------------------------------------------- /docs/objects/headFrontAfro.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /docs/objects/headFrontLong.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /docs/objects/headFrontPony.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /docs/objects/headFrontShortBeard.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /docs/objects/bodyPregnant.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /docs/objects/headFrontTurban1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /docs/objects/bodyPointingForward.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /docs/objects/bodyLongSleeve.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /docs/objects/bottomStandingSweatpants.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /docs/objects/bodyJacket2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /docs/objects/bodyTurtleNeck.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /docs/objects/bodyPointingUp.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /docs/objects/bodyLabCoat.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /docs/objects/bodyJacket.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /docs/objects/bodyHoodie.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /docs/objects/scenePlantMaceta.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /docs/objects/headFrontAiry.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /docs/objects/bottomStandingShorts.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /docs/objects/headFrontWavy.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /docs/objects/headFrontHijab2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /docs/objects/headFrontChongo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /docs/objects/bottomStandingBaggyPants.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /docs/objects/headFrontTurban2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /docs/objects/bottomStandingJogging.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /docs/objects/bottomStandingSprint.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /docs/objects/bottomSittingSkinnyJeans1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /docs/objects/bottomStandingSkirt.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /docs/objects/bottomSittingBaggyPants.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /docs/objects/bottomSittingSweatPants.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /docs/objects/bodyTrenchCoat.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /docs/objects/headFrontHijab1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /docs/objects/scenePlantTopLeaves.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /docs/objects/headFrontRad.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/style.scss: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Raleway:400,500'); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | outline: none; 7 | box-sizing: border-box; 8 | } 9 | 10 | body { 11 | color: #555; 12 | padding: 40px 0; 13 | } 14 | 15 | body, input { 16 | font-family: 'Raleway', sans-serif; 17 | } 18 | 19 | $objectsAndSceneHeight: 562px; 20 | $objectsWidth: 200px; 21 | $sceneWidth: 1000px; 22 | $padding: 40px; 23 | $containerWidth: $objectsWidth + $sceneWidth + $padding; 24 | $borderRadius: 4px; 25 | $borderWidth: 3px; 26 | $borderColor: #f2f2f2; 27 | $objectsBackgroundColor: #fff; 28 | 29 | $blue: #037bff; 30 | $green: #29a745; 31 | $red: #dc3545; 32 | 33 | .blueButton { 34 | background-color: $blue; 35 | &:hover { 36 | background-color: darken($blue, 10%); 37 | } 38 | &:active { 39 | background-color: darken($blue, 20%); 40 | } 41 | } 42 | .greenButton { 43 | background-color: $green; 44 | &:hover { 45 | background-color: darken($green, 10%); 46 | } 47 | &:active { 48 | background-color: darken($green, 20%); 49 | } 50 | } 51 | .redButton { 52 | background-color: $red; 53 | &:hover { 54 | background-color: darken($red, 10%); 55 | } 56 | &:active { 57 | background-color: darken($red, 20%); 58 | } 59 | } 60 | 61 | #container { 62 | margin: auto; 63 | width: $containerWidth; 64 | 65 | #objects { 66 | float: left; 67 | position: relative; 68 | width: $objectsWidth; 69 | border-radius: $borderRadius; 70 | height: $objectsAndSceneHeight; 71 | border: $borderWidth solid $borderColor; 72 | 73 | #searchWrapper { 74 | padding: 5px; 75 | height: 40px; 76 | 77 | #search { 78 | width: 100%; 79 | height: 100%; 80 | border: none; 81 | padding: 10px; 82 | outline: none; 83 | border-radius: $borderRadius; 84 | border: $borderWidth solid $borderColor; 85 | &:focus { 86 | border-color: darken($borderColor, 5%); 87 | } 88 | } 89 | } 90 | 91 | #list { 92 | overflow-y: auto; 93 | padding: $padding; 94 | text-align: center; 95 | overflow-x: hidden; 96 | height: calc(100% - 40px); 97 | 98 | img { 99 | cursor: pointer; 100 | max-height: 100px; 101 | text-align: center; 102 | margin-top: $padding; 103 | display: inline-block; 104 | border-radius: $borderRadius; 105 | border: $borderWidth solid transparent; 106 | max-width: $objectsWidth - ($padding * 2); 107 | &:hover, &:active { 108 | border-color: darken($borderColor, 10%); 109 | } 110 | &:first-child { 111 | margin-top: 0; 112 | } 113 | } 114 | } 115 | 116 | #version { 117 | left: -3px; 118 | height: 30px; 119 | bottom: -38px; 120 | font-size: 12px; 121 | line-height: 30px; 122 | position: absolute; 123 | text-transform: uppercase; 124 | } 125 | } 126 | 127 | #sceneWrapper { 128 | float: left; 129 | width: $sceneWidth; 130 | position: relative; 131 | margin-left: $padding; 132 | border-radius: $borderRadius; 133 | height: $objectsAndSceneHeight; 134 | border: $borderWidth solid $borderColor; 135 | 136 | #scene { 137 | width: 100%; 138 | height: 100%; 139 | .react-draggable { 140 | border-radius: $borderRadius; 141 | border: $borderWidth solid transparent; 142 | &:hover, &:active { 143 | z-index: 999999999999 !important; 144 | border: $borderWidth solid darken($borderColor, 10%); 145 | 146 | .moveToBack, .moveToFront, .remove { 147 | top: 0; 148 | width: 20px; 149 | height: 20px; 150 | display: block; 151 | cursor: pointer; 152 | position: absolute; 153 | border-radius: $borderRadius; 154 | &.moveToBack { 155 | right: 42px; 156 | @extend .blueButton; 157 | } 158 | &.moveToFront { 159 | right: 21px; 160 | @extend .greenButton; 161 | } 162 | &.remove { 163 | right: 0; 164 | @extend .redButton; 165 | } 166 | 167 | img { 168 | width: 14px; 169 | margin: 3px; 170 | height: 14px; 171 | } 172 | } 173 | } 174 | 175 | .moveToBack, .moveToFront, .remove { 176 | display: none; 177 | user-select: none; 178 | } 179 | 180 | >img { 181 | width: 100%; 182 | } 183 | } 184 | } 185 | 186 | .saveImage { 187 | color: #fff; 188 | height: 30px; 189 | border: none; 190 | bottom: -38px; 191 | cursor: pointer; 192 | padding: 0 20px; 193 | font-weight: 500; 194 | line-height: 30px; 195 | position: absolute; 196 | text-transform: uppercase; 197 | border-radius: $borderRadius; 198 | &.jpg { 199 | right: 98px; 200 | @extend .blueButton; 201 | } 202 | &.png { 203 | right: -3px; 204 | @extend .greenButton; 205 | } 206 | } 207 | } 208 | 209 | #footer1, #footer2 { 210 | float: left; 211 | padding: 10px 0; 212 | font-size: 14px; 213 | line-height: 25px; 214 | text-align: center; 215 | margin-top: $padding; 216 | border-radius: $borderRadius; 217 | border: $borderWidth solid $borderColor; 218 | width: ($containerWidth - $padding) / 2; 219 | &#footer2 { 220 | margin-left: $padding; 221 | } 222 | 223 | a { 224 | color: #555; 225 | font-weight: 500; 226 | text-decoration: none; 227 | border-bottom: 1px solid transparent; 228 | &:hover { 229 | color: darken(#555, 30%); 230 | border-bottom-color: darken(#555, 30%); 231 | } 232 | } 233 | } 234 | } 235 | -------------------------------------------------------------------------------- /src/index.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component, Fragment } from 'react' 2 | import ReactDOM from 'react-dom' 3 | import { Rnd } from 'react-rnd' 4 | import html2canvas from 'html2canvas' 5 | 6 | import packageJson from './../package.json' 7 | import './style.scss' 8 | import objectsList from './objectsList' 9 | 10 | class App extends Component { 11 | constructor () { 12 | super() 13 | 14 | this.state = { 15 | objects: [ 16 | { x: 399, y: 127, width: 118, zIndex: 1, name: 'headFrontAiry' }, 17 | { x: 390, y: 273, width: 220, zIndex: 1, name: 'bottomStandingJogging' }, 18 | { x: 427, y: 193, width: 156, zIndex: 1, name: 'bodyJacket' } 19 | ], 20 | objectsList 21 | } 22 | } 23 | 24 | addImage (opts) { 25 | const { objects } = this.state 26 | objects[objects.length] = { x: 10, y: 10, width: 100, zIndex: 1, name: opts.objectName } 27 | this.setState({ objects }) 28 | } 29 | 30 | removeImage (opts) { 31 | const { objects } = this.state 32 | delete objects[opts.key] 33 | this.setState({ objects }) 34 | } 35 | 36 | moveTo (opts) { 37 | const { objects } = this.state 38 | if (opts.direction === 'front') { 39 | objects[opts.key].zIndex = objects[opts.key].zIndex + 1 40 | } else if (opts.direction === 'back') { 41 | objects[opts.key].zIndex = objects[opts.key].zIndex > 1 ? objects[opts.key].zIndex - 1 : 1 42 | } 43 | this.setState({ objects }) 44 | } 45 | 46 | saveImage (opts) { 47 | const backgroundColor = opts.format === 'png' ? null : '#fff' 48 | 49 | html2canvas(document.getElementById('scene'), { backgroundColor }).then(function (canvas) { 50 | const a = document.createElement('a') 51 | a.href = canvas.toDataURL(`image/${opts.format}`).replace(`image/${opts.format}`, 'image/octet-stream') 52 | a.download = `humaaans.${opts.format}` 53 | a.click() 54 | }) 55 | } 56 | 57 | search (e) { 58 | const searchTerm = e.target.value 59 | 60 | let filteredResults = [] 61 | 62 | if (searchTerm) { 63 | objectsList.map((object) => { 64 | if (object.toLowerCase().includes(searchTerm.toLowerCase())) { 65 | filteredResults.push(object) 66 | } 67 | }) 68 | } else { 69 | filteredResults = objectsList 70 | } 71 | 72 | this.setState({ 73 | objectsList: filteredResults 74 | }) 75 | } 76 | 77 | render () { 78 | return ( 79 |
80 |
81 |
82 | 83 |
84 | 85 |
86 | { 87 | this.state.objectsList.map((objectName, key) => { 88 | return ( 89 | 90 | {objectName} 95 |
96 | 97 | ) 98 | }) 99 | } 100 |
101 | 102 |
Version: {packageJson.version}
103 |
104 | 105 |
106 |
107 | { 108 | this.state.objects.map((object, key) => { 109 | return ( 110 | 117 | {object.name} 118 | 119 |
123 | 124 |
125 |
129 | 130 |
131 |
135 | 136 |
137 | 138 | ) 139 | }) 140 | } 141 |
142 | 143 | 149 | 155 |
156 | 157 |
158 | Click on the illustrations you want to add to the scene from the left side. 159 |
160 | Move/resize/remove your illustrations to make your design. 161 |
162 | Hit the save button to save your image. 163 |
164 | 165 |
166 | Source of this tool: github.com/ozgrozer/hdt 167 |
168 | Original illustrations: humaaans.com 169 |
170 | Me: twitter.com/ozgrozer 171 |
172 |
173 | ) 174 | } 175 | } 176 | 177 | ReactDOM.render(, document.getElementById('root')) 178 | -------------------------------------------------------------------------------- /docs/src.d40f3234.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css?family=Raleway:400,500");*{margin:0;padding:0;outline:none;-webkit-box-sizing:border-box;box-sizing:border-box}body{color:#555;padding:40px 0}body,input{font-family:Raleway,sans-serif}#container #sceneWrapper #scene .react-draggable:active .moveToBack.moveToBack,#container #sceneWrapper #scene .react-draggable:hover .moveToBack.moveToBack,#container #sceneWrapper .saveImage.jpg,.blueButton{background-color:#037bff}#container #sceneWrapper #scene .react-draggable:active .moveToBack:hover,#container #sceneWrapper #scene .react-draggable:hover .moveToBack:hover,#container #sceneWrapper .saveImage.jpg:hover,.blueButton:hover{background-color:#0063cf}#container #sceneWrapper #scene .react-draggable:active .moveToBack:active,#container #sceneWrapper #scene .react-draggable:hover .moveToBack:active,#container #sceneWrapper .saveImage.jpg:active,.blueButton:active{background-color:#004a9c}#container #sceneWrapper #scene .react-draggable:active .moveToFront.moveToFront,#container #sceneWrapper #scene .react-draggable:hover .moveToFront.moveToFront,#container #sceneWrapper .saveImage.png,.greenButton{background-color:#29a745}#container #sceneWrapper #scene .react-draggable:active .moveToFront:hover,#container #sceneWrapper #scene .react-draggable:hover .moveToFront:hover,#container #sceneWrapper .saveImage.png:hover,.greenButton:hover{background-color:#1f7e34}#container #sceneWrapper #scene .react-draggable:active .moveToFront:active,#container #sceneWrapper #scene .react-draggable:hover .moveToFront:active,#container #sceneWrapper .saveImage.png:active,.greenButton:active{background-color:#155523}#container #sceneWrapper #scene .react-draggable:active .remove.remove,#container #sceneWrapper #scene .react-draggable:hover .remove.remove,.redButton{background-color:#dc3545}#container #sceneWrapper #scene .react-draggable:active .remove:hover,#container #sceneWrapper #scene .react-draggable:hover .remove:hover,.redButton:hover{background-color:#bd2130}#container #sceneWrapper #scene .react-draggable:active .remove:active,#container #sceneWrapper #scene .react-draggable:hover .remove:active,.redButton:active{background-color:#921925}#container{margin:auto;width:1240px}#container #objects{float:left;position:relative;width:200px;border-radius:4px;height:562px;border:3px solid #f2f2f2}#container #objects #searchWrapper{padding:5px;height:40px}#container #objects #searchWrapper #search{width:100%;height:100%;padding:10px;outline:none;border-radius:4px;border:3px solid #f2f2f2}#container #objects #searchWrapper #search:focus{border-color:#e5e5e5}#container #objects #list{overflow-y:auto;padding:40px;text-align:center;overflow-x:hidden;height:calc(100% - 40px)}#container #objects #list img{cursor:pointer;max-height:100px;text-align:center;margin-top:40px;display:inline-block;border-radius:4px;border:3px solid transparent;max-width:120px}#container #objects #list img:active,#container #objects #list img:hover{border-color:#d9d9d9}#container #objects #list img:first-child{margin-top:0}#container #objects #version{left:-3px;height:30px;bottom:-38px;font-size:12px;line-height:30px;position:absolute;text-transform:uppercase}#container #sceneWrapper{float:left;width:1000px;position:relative;margin-left:40px;border-radius:4px;height:562px;border:3px solid #f2f2f2}#container #sceneWrapper #scene{width:100%;height:100%}#container #sceneWrapper #scene .react-draggable{border-radius:4px;border:3px solid transparent}#container #sceneWrapper #scene .react-draggable:active,#container #sceneWrapper #scene .react-draggable:hover{z-index:999999999999!important;border:3px solid #d9d9d9}#container #sceneWrapper #scene .react-draggable:active .moveToBack,#container #sceneWrapper #scene .react-draggable:active .moveToFront,#container #sceneWrapper #scene .react-draggable:active .remove,#container #sceneWrapper #scene .react-draggable:hover .moveToBack,#container #sceneWrapper #scene .react-draggable:hover .moveToFront,#container #sceneWrapper #scene .react-draggable:hover .remove{top:0;width:20px;height:20px;display:block;cursor:pointer;position:absolute;border-radius:4px}#container #sceneWrapper #scene .react-draggable:active .moveToBack.moveToBack,#container #sceneWrapper #scene .react-draggable:active .moveToFront.moveToBack,#container #sceneWrapper #scene .react-draggable:active .remove.moveToBack,#container #sceneWrapper #scene .react-draggable:hover .moveToBack.moveToBack,#container #sceneWrapper #scene .react-draggable:hover .moveToFront.moveToBack,#container #sceneWrapper #scene .react-draggable:hover .remove.moveToBack{right:42px}#container #sceneWrapper #scene .react-draggable:active .moveToBack.moveToFront,#container #sceneWrapper #scene .react-draggable:active .moveToFront.moveToFront,#container #sceneWrapper #scene .react-draggable:active .remove.moveToFront,#container #sceneWrapper #scene .react-draggable:hover .moveToBack.moveToFront,#container #sceneWrapper #scene .react-draggable:hover .moveToFront.moveToFront,#container #sceneWrapper #scene .react-draggable:hover .remove.moveToFront{right:21px}#container #sceneWrapper #scene .react-draggable:active .moveToBack.remove,#container #sceneWrapper #scene .react-draggable:active .moveToFront.remove,#container #sceneWrapper #scene .react-draggable:active .remove.remove,#container #sceneWrapper #scene .react-draggable:hover .moveToBack.remove,#container #sceneWrapper #scene .react-draggable:hover .moveToFront.remove,#container #sceneWrapper #scene .react-draggable:hover .remove.remove{right:0}#container #sceneWrapper #scene .react-draggable:active .moveToBack img,#container #sceneWrapper #scene .react-draggable:active .moveToFront img,#container #sceneWrapper #scene .react-draggable:active .remove img,#container #sceneWrapper #scene .react-draggable:hover .moveToBack img,#container #sceneWrapper #scene .react-draggable:hover .moveToFront img,#container #sceneWrapper #scene .react-draggable:hover .remove img{width:14px;margin:3px;height:14px}#container #sceneWrapper #scene .react-draggable .moveToBack,#container #sceneWrapper #scene .react-draggable .moveToFront,#container #sceneWrapper #scene .react-draggable .remove{display:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}#container #sceneWrapper #scene .react-draggable>img{width:100%}#container #sceneWrapper .saveImage{color:#fff;height:30px;border:none;bottom:-38px;cursor:pointer;padding:0 20px;font-weight:500;line-height:30px;position:absolute;text-transform:uppercase;border-radius:4px}#container #sceneWrapper .saveImage.jpg{right:98px}#container #sceneWrapper .saveImage.png{right:-3px}#container #footer1,#container #footer2{float:left;padding:10px 0;font-size:14px;line-height:25px;text-align:center;margin-top:40px;border-radius:4px;border:3px solid #f2f2f2;width:600px}#container #footer1#footer2,#container #footer2#footer2{margin-left:40px}#container #footer1 a,#container #footer2 a{color:#555;font-weight:500;text-decoration:none;border-bottom:1px solid transparent}#container #footer1 a:hover,#container #footer2 a:hover{color:#090909;border-bottom-color:#090909} -------------------------------------------------------------------------------- /docs/objects/headFrontCurly.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /docs/objects/sceneHomePlant.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /docs/objects/sceneHomeBigLeafPlant.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /docs/objects/scenePlantPlantLeft.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /docs/objects/scenePlantPlantRight.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | --------------------------------------------------------------------------------