Skip to content

Commit

Permalink
initial commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@kartofelek007
kartofelek007 committed Mar 6, 2020
1 parent 0cdae12 commit ceb680b
Show file tree
Hide file tree
Showing 26 changed files with 2,384 additions and 84 deletions.
2 changes: 2 additions & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
@@ -1 +1,3 @@
node_modules
dist
.idea
1 change: 1 addition & 0 deletions colors.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
{"colors":["#EFDC05","#f1865e","#58C9B9","#D1B6E1","#FFEEE4","#F17F42","#CE6D39","#000000","#30A9DE","#519D9E","#090707","#A593E0","#E0E3DA","#FFFFF3","#FBFFB9","#F6B352","#383A3F","#1F2124","#D7FFF1","#FDD692","#EC7357","#754F44","#F68657","#C5E99B","#8FBC94","#548687","#D499B9","#56445D","#E71D36","#2EC4B6","#EFFFE9","#011627","#DE6449","#791E94","#FFFFF2","#5CAB7D","#5A9367","#3F4B3B","#FFBC42","#D81159","#8F2D56","#218380","#E3E36A","#C16200","#881600","#49010F","#4F86C6","#6C49B8","#67D5B5","#EE7785","#C89EC4","#84B1ED","#F16B6F","#C5C6B6","#AACD6E","#3C3530","#6E7783","#D8E6E7","#9DC3C1","#AF4034","#3E4348","#C65146","#EC6A5C","#DE7E73","#CFAA9E","#D4DFE6","#8EC0E4","#CADBE9","#6AAFE6","#FADAD8","#56A902","#9B8281","#3B4E32","#F0E5DE","#ABD0CE","#7C7877","#D9D4CF","#AAABD3","#F8FAFF","#CBA6C3","#353866","#75D701","#F8F8FF","#1b995c","#007ac8","#000000","#de654a","#ffffff","#fee890"]}
12 changes: 12 additions & 0 deletions css/pick-color.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
body {
margin: 0;
}
#mainCanvas, #optCanvas {
cursor: none;
position: absolute;
left: 0;
top: 0;
}
#optCanvas {
pointer-events: none;
}
223 changes: 223 additions & 0 deletions css/style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,223 @@
body {
background: #1E1F1C;
padding-top: 0px;
font-family: sans-serif;
}

.menu {
display: flex;
justify-content: flex-end;
padding: 15px 0;
}
.menu-element {
padding: 0 8px;
position: relative;
}
.menu-btn {
cursor: pointer;
opacity: 0.4;
transition: 0.2s;
}
.menu-btn svg {
width: 25px;
height: 25px;
fill: #fff;
stroke: none;
transition: 0.2s;
}
.menu-btn:hover {
opacity: 1;
}
.menu-btn.active {
opacity: 1;
}
.menu-btn.active svg {
fill: dodgerblue;
}
.menu-submenu {
color: #aaa;
display: none;
padding: 0 0 10px 0;
}
.menu-submenu input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
width: 18px;
height: 18px;
border-radius: 2px;
border: 1px solid rgba(255,255,255,0.4);
outline: none;
display: flex;
justify-content: center;
align-items: center;
transition: 0.2s;
}
.menu-submenu input[type="checkbox"] + span {
transition: 0.2s color;
}
.menu-submenu input[type="checkbox"]::before {
content: "";
width: 8px;
height: 8px;
background: dodgerblue;
display: block;
transform: scale(0.5);
opacity: 0;
transition: 0.2s;
}
.menu-submenu input[type="checkbox"]:checked {
border: 1px solid dodgerblue;
}
.menu-submenu input[type="checkbox"]:checked::before {
transform: scale(1);
opacity: 1;
}
.menu-submenu input[type="checkbox"]:checked + span {
color: dodgerblue;
}
.menu-submenu.show {
display: block;
}
.menu-submenu-element {
margin-bottom: 5px;
}
.menu-submenu-element:last-child {
margin-bottom: 0;
}
.menu-submenu-label {
display: flex;
align-items: center;
white-space: nowrap;
font-size: 12px;
cursor: pointer;
}
.menu-submenu-label input {
margin-right: 6px;
}

.selected-colors {
background: rgba(0,0,0,0.8);
border-radius: 0 0 20px 0;
z-index: 200;
position: fixed;
top:0;
left:0;
transition: 0.5s;
display: flex;
flex-direction: column;
/* border-radius: 0 0 5px 0; */
box-shadow: 0 0 4px rgba(0,0,0,0.7);
}
.selected-colors div {
cursor: pointer;
border-radius: 50%;
box-shadow: 0 0 0 1px rgba(0,0,0,0.1);
margin: 5px;
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
}
.selected-colors div span {
display: block;
width: 18px;
height: 18px;
}
.selected-colors div svg {
width: 18px;
height: 18px;
fill: #fff;
opacity: 0.8;
}


.palette {
display:grid;
grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
grid-gap: 6px;
}
.palette-element {
border-radius: 2px;
height:50px;
display: flex;
font-size: 14px;
justify-content: center;
align-items: center;
color:#fff;
font-family: sans-serif;
transition:0.1s all;
position: relative;
cursor: pointer;
font-weight: bold;
box-shadow: 0 0 0 1px rgba(255,255,255,0.1);
-webkit-text-fill-color: white;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: rgba(0,0,0,0.4);
}
.palette-element:hover {
z-index: 2;
box-shadow:
inset 0 0 0 3px rgba(255,255,255,1),
inset 0 0 0 2px rgba(0,0,0,1)
}
.palette-element-delete {
position: absolute;
right: 5px;
top: 5px;
background: transparent;
width: 20px;
height: 20px;
cursor: pointer;
display: none;
}
.palette-element-delete svg {
width: 20px;
height: 20px;
opacity: 0.8;
fill: #fff;
}
.palette-manage .palette-element-delete {
display: block;
}

.palette-element-add {
cursor: pointer;
--color: rgba(255,255,255,0.5);
border: 1px solid var(--color);
color: var(--color);
display: flex;
justify-content: center;
align-items: center;
border-radius: 3px;
}
.palette-element-add svg {
fill: var(--color);
}

.selected {
animation: anim 0.2s 0s 1 alternate;
}
@keyframes anim {
100% {
transform:scale(1.1);
}
}
.popup {
position: fixed;
top:10px;
left:50%;
transform: translate(-50%, 0);
display: inline-block;
width:200px;
height:50px;
background: rgba(0,0,0,0.8);
color:#fff;
display: flex;
justify-content: center;
align-items: center;
font-family: sans-serif;
text-transform: uppercase;
border-radius: 4px;
z-index: 1000;
}
Binary file added icon-assets/icon.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/dropper-icon.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/icon.ico
View file
Binary file not shown.
Binary file added images/icon.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
44 changes: 30 additions & 14 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,35 @@
<!DOCTYPE html>
<html>
<head>
<head>
<meta charset="UTF-8">
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
We are using Node.js <span id="node-version"></span>,
Chromium <span id="chrome-version"></span>,
and Electron <span id="electron-version"></span>.
<title>Colors</title>
<link rel="stylesheet" href="css/style.css">
</head>

<!-- You can also require other files to run in this process -->
<script src="./renderer.js"></script>
</body>
</html>
<body>
<div id="menu" class="menu">
<div class="menu-element">
<div class="menu-add menu-btn" id="menuAdd">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M15.584 10.001L13.998 8.417 5.903 16.512 5.374 18.626 7.488 18.097z"/><path d="M4.03,15.758l-1,4c-0.086,0.341,0.015,0.701,0.263,0.949C3.482,20.896,3.738,21,4,21c0.081,0,0.162-0.01,0.242-0.03l4-1 c0.176-0.044,0.337-0.135,0.465-0.263l8.292-8.292l1.294,1.292l1.414-1.414l-1.294-1.292L21,7.414 c0.378-0.378,0.586-0.88,0.586-1.414S21.378,4.964,21,4.586L19.414,3c-0.756-0.756-2.072-0.756-2.828,0l-2.589,2.589l-1.298-1.296 l-1.414,1.414l1.298,1.296l-8.29,8.29C4.165,15.421,4.074,15.582,4.03,15.758z M5.903,16.512l8.095-8.095l1.586,1.584 l-8.096,8.096l-2.114,0.529L5.903,16.512z"/></svg>
</div>
</div>
<div class="menu-element">
<div class="menu-manage menu-btn" id="menuCopySetup">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M13 5H22V7H13zM2 7L9 7 9 9 11 9 11 3 9 3 9 5 2 5zM9 17H22V19H9zM19 11H22V13H19zM17 15L17 9.012 15 9.012 15 11 2 11 2 13 15 13 15 15zM7 21L7 15 5 15 5 17 2 17 2 19 5 19 5 21z"/></svg>
</div>
</div>
<div class="menu-element">
<div class="menu-btn" id="menuManage">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M4 11h6c.553 0 1-.447 1-1V4c0-.553-.447-1-1-1H4C3.447 3 3 3.447 3 4v6C3 10.553 3.447 11 4 11zM4 21h6c.553 0 1-.447 1-1v-6c0-.553-.447-1-1-1H4c-.553 0-1 .447-1 1v6C3 20.553 3.447 21 4 21zM14 21h6c.553 0 1-.447 1-1v-6c0-.553-.447-1-1-1h-6c-.553 0-1 .447-1 1v6C13 20.553 13.447 21 14 21zM21.293 6.293l-3.586-3.586c-.391-.391-1.023-.391-1.414 0l-3.586 3.586c-.391.391-.391 1.023 0 1.414l3.586 3.586c.391.391 1.023.391 1.414 0l3.586-3.586C21.684 7.316 21.684 6.684 21.293 6.293z"/></svg>
</div>
</div>
</div>
<div class="menu-submenu" id="optionsSubmenu">
</div>
<div class="selected-colors" id="selectedColors"></div>
<div class="palette" id="palette"></div>
<script src="./renderer.js" type="module"></script>
</body>

</html>
Loading

0 comments on commit ceb680b

Please sign in to comment.