Implement simple floating button

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

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>