experiments/bees-knees
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Implement simple floating button

Browse source
This commit is contained in:
Marty Oehme 2025-06-08 17:44:49 +02:00
parent 48c345c53a
commit 66311c36ae
Signed by: Marty
GPG key ID: 4E535BC19C61886E
2 changed files with 116 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

73
static/style.css
View file

@ -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;
}

43
templates/index.html
View file

@ -3,6 +3,8 @@
<head>
<title>The Pollen Prophet</title>
<script src="https://unpkg.com/htmx.org@1.6.1"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
<link href="static/style.css" rel="stylesheet" />
</head>
<body>
@ -14,5 +16,46 @@
hx-trigger="load"
id="content"
></div>
<div class="fab-holder">
<div class="main-btn fab-icon-holder">
<div class="icon">
<i class="fas fa-info"></i>
</div>
</div>
<ul class="fab-options">
<li>
<span class="fab-label">Show Originals</span>
<div class="option-btn fab-icon-holder">
<div class="icon">
<i class="fas fa-file-alt"></i>
</div>
</div>
</li>
<li>
<span class="fab-label">About</span>
<div class="option-btn fab-icon-holder">
<div class="icon">
<i class="fas fa-question"></i>
</div>
</div>
</li>
<li>
<span class="fab-label">Feedback</span>
<div class="option-btn fab-icon-holder">
<div class="icon">
<i class="fas fa-comment-alt"></i>
</div>
</div>
</li>
<!-- <li> -->
<!-- <span class="fab-label">Something else</span> -->
<!-- <div class="option-btn fab-icon-holder"> -->
<!-- <div class="icon"> -->
<!-- <i class="fas fa-question"></i> -->
<!-- </div> -->
<!-- </div> -->
<!-- </li> -->
</ul>
</div>
</body>
</html>