|
|
@@ -86,6 +86,8 @@ def get_status():
|
|
|
|
|
|
@app.route("/page")
|
|
|
def get_status_page():
|
|
|
+ # JS adapted from
|
|
|
+ # https://stackoverflow.com/questions/6152522/how-can-i-make-a-paragraph-bounce-around-in-a-div
|
|
|
return render_template_string("""
|
|
|
<!doctype html>
|
|
|
<title>Teamspeak Server Status</title>
|
|
|
@@ -104,30 +106,70 @@ def get_status_page():
|
|
|
margin-top: 0;
|
|
|
margin-bottom: 0;
|
|
|
}
|
|
|
+ #bounceBox {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ }
|
|
|
+ #bouncer {
|
|
|
+ position: absolute;
|
|
|
+ }
|
|
|
</style>
|
|
|
- {% if scrolling %}
|
|
|
- <marquee direction="up" style="height 600px" behavior="alternate">
|
|
|
- <marquee direction="right" style="width 600px" behavior="alternate">
|
|
|
- {% endif %}
|
|
|
- <div class="page">
|
|
|
- <h1>TeamSpeak Server Status</h1>
|
|
|
- {% if users|length == 0 %}
|
|
|
- No one in teamspeak!
|
|
|
- {% elif users|length == 1 %}
|
|
|
- Only {{ users[0] }}
|
|
|
- {% else %}
|
|
|
- <ul>
|
|
|
- {% for user in users %}
|
|
|
- <li>{{ user }}</li>
|
|
|
- {% endfor %}
|
|
|
- </ul>
|
|
|
- {% endif %}
|
|
|
- </div>
|
|
|
- {% if scrolling %}
|
|
|
- </marquee>
|
|
|
- </marquee>
|
|
|
- {% endif %}
|
|
|
- """, scrolling=True, users=sorted(get_users()))
|
|
|
+ <script>
|
|
|
+ let vx = 5;
|
|
|
+ let vy = 3;
|
|
|
+ const buffer = 5;
|
|
|
+
|
|
|
+ const hitLR = (el, bounding) => {
|
|
|
+ if (el.offsetLeft <= buffer && vx < 0) {
|
|
|
+ vx = -1 * vx;
|
|
|
+ }
|
|
|
+ if ((el.offsetLeft + el.offsetWidth) >= (bounding.offsetWidth - buffer)) {
|
|
|
+ vx = -1 * vx;
|
|
|
+ }
|
|
|
+ if (el.offsetTop <= buffer && vy < 0) {
|
|
|
+ vy = -1 * vy;
|
|
|
+ }
|
|
|
+ if ((el.offsetTop + el.offsetHeight) >= (bounding.offsetHeight - buffer)) {
|
|
|
+ vy = -1 * vy;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ const mover = (el, bounding) => {
|
|
|
+ hitLR(el, bounding);
|
|
|
+ el.style.left = el.offsetLeft + vx + 'px';
|
|
|
+ el.style.top = el.offsetTop + vy + 'px';
|
|
|
+ setTimeout(function() {
|
|
|
+ mover(el, bounding);
|
|
|
+ }, 50);
|
|
|
+ }
|
|
|
+
|
|
|
+ setTimeout(() => mover(
|
|
|
+ document.getElementById("bouncer"),
|
|
|
+ document.getElementById("bounceBox")
|
|
|
+ ), 50);
|
|
|
+ </script>
|
|
|
+ <body>
|
|
|
+ <div id="bounceBox">
|
|
|
+ <div id="bouncer">
|
|
|
+ <h1>TeamSpeak Server Status</h1>
|
|
|
+ {% if users|length == 0 %}
|
|
|
+ No one in teamspeak!
|
|
|
+ {% elif users|length == 1 %}
|
|
|
+ Only {{ users[0] }}
|
|
|
+ {% else %}
|
|
|
+ <ul>
|
|
|
+ {% for user in users %}
|
|
|
+ <li>{{ user }}</li>
|
|
|
+ {% endfor %}
|
|
|
+ </ul>
|
|
|
+ {% endif %}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </body>
|
|
|
+ """, users=sorted(get_users()))
|
|
|
|
|
|
|
|
|
if __name__ == "__main__":
|
