diff --git a/README.md b/README.md index b13e8cc..badb828 100644 --- a/README.md +++ b/README.md @@ -24,6 +24,9 @@ Visit the [life demo](sirpixiejerry.github.io/dop-eye/) to try it yourself. - [x] change element color - [x] rewind to original color - [x] scroll steps -- [ ] improve scroll steps feature and cleanup event listeners -- [ ] add user menu +- [x] add pause button +- [x] add undo button +- [x] add redo button +- [x] add info button +- [ ] add save button - [ ] optimization for mobile devices diff --git a/src/css/style.css b/src/css/style.css index 2a5c446..a49a773 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -31,6 +31,7 @@ body { width: 300px; height: 300px; background-color: rgb(53, 45, 106); + transform: translateX(30px); } svg { @@ -125,3 +126,62 @@ path { transform: translate(-45px, -45px); background-color: yellow; } + +button { + width: 40px; + height: 40px; + border-radius: 8px; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + margin-bottom: 4px; + border: none; + background-color: white; + position: relative; + overflow: hidden; +} + +button:hover { + background-color: rgb(242, 242, 242); +} + +img { + height: 25px; + width: 25px; +} + +#menu { + display: flex; + flex-direction: column; + transform: translate(40px, -150px); +} + +button span { + position: absolute; + border-radius: 8px; + background-color: rgba(0, 0, 0, 0.2); + width: 40px; + height: 40px; + animation: ripple 1s; + opacity: 0; +} + +@keyframes ripple { + from { + opacity: 1; + transform: scale(0); + } + to { + opacity: 0; + transform: scale(10); + } +} + +.active { + background-color: rgb(236, 236, 236); +} + +.active:hover { + background-color: rgb(226, 226, 226); +} diff --git a/src/icons/square-arrow-left-svgrepo-com.svg b/src/icons/square-arrow-left-svgrepo-com.svg new file mode 100644 index 0000000..50e5a78 --- /dev/null +++ b/src/icons/square-arrow-left-svgrepo-com.svg @@ -0,0 +1,13 @@ + + + \ No newline at end of file diff --git a/src/icons/square-arrow-right-svgrepo-com.svg b/src/icons/square-arrow-right-svgrepo-com.svg new file mode 100644 index 0000000..fed1cb9 --- /dev/null +++ b/src/icons/square-arrow-right-svgrepo-com.svg @@ -0,0 +1,13 @@ + + + \ No newline at end of file diff --git a/src/icons/square-pause-svgrepo-com.svg b/src/icons/square-pause-svgrepo-com.svg new file mode 100644 index 0000000..3e8c8c1 --- /dev/null +++ b/src/icons/square-pause-svgrepo-com.svg @@ -0,0 +1,13 @@ + + + \ No newline at end of file diff --git a/src/index.html b/src/index.html index 7c5bf08..3495eae 100644 --- a/src/index.html +++ b/src/index.html @@ -35,6 +35,17 @@ +