diff --git a/static/style.css b/static/style.css index 9821602..b9c65be 100644 --- a/static/style.css +++ b/static/style.css @@ -20,3 +20,76 @@ body { font-size: 24px; margin-bottom: 5px; } + +.fab-holder { + position: fixed; + bottom: 50px; + right: 50px; + z-index: 999; + cursor: pointer; +} + +.fab-icon-holder { + width: 50px; + height: 50px; + border-radius: 100%; + background: #016fb9; + box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2); +} + +.fab-icon-holder:hover { + opacity: 0.8; +} + +.fab-icon-holder .icon { + display: flex; + align-items: center; + justify-content: center; + height: 100%; + font-style: 25px; + color: #ffffff; +} + +.main-btn { + width: 60px; + height: 60px; + background: #df73ff; +} + +.fab-options { + list-style-type: none; + margin: 0; + position: absolute; + bottom: 70px; + right: 0; + + opacity: 0; + transition: all 0.3s ease; + transform: scale(0); + transform-origin: 85% bottom; +} + +.main-btn:hover + .fab-options, +.fab-options:hover { + opacity: 1; + transform: scale(1); +} + +.fab-options li { + display: flex; + justify-content: flex-end; + padding: 5px; +} + +.fab-label { + padding: 2px 5px; + align-self: center; + user-select: none; + white-space: nowrap; + border-radius: 3px; + font-size: 16px; + background-color: #666666; + color: #ffffff; + box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2); + margin-right: 10px; +} diff --git a/templates/index.html b/templates/index.html index 8116d04..78eb690 100644 --- a/templates/index.html +++ b/templates/index.html @@ -3,6 +3,8 @@ The Pollen Prophet + + @@ -14,5 +16,46 @@ hx-trigger="load" id="content" > +
+
+
+ +
+
+ +