From 0d7834a3413b0bb37bdbc73b5a065d6d39f75b2f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Filip=20Mel=C3=ADk?= <filip@melik.cz>
Date: Sat, 1 Feb 2025 13:00:05 +0100
Subject: [PATCH] Add UI

---
 application/views/widgets/on_air.php | 101 +++++++++++++++++++++++++++
 1 file changed, 101 insertions(+)
 create mode 100644 application/views/widgets/on_air.php
diff --git a/application/views/widgets/on_air.php b/application/views/widgets/on_air.php
new file mode 100644
index 000000000..40545391d
--- /dev/null
+++ b/application/views/widgets/on_air.php
@@ -0,0 +1,101 @@
+<!-- 
+ 
+This is an On-Air widget to place in your QRZ.com Bio or somewhere else. 
+
+To use this widget insert this Element:
+
+<iframe name="iframe" src="[YOUR WAVELOG URL]/widgets/on_air/[PUBLIC SLUG]" height="240" width="640" frameborder="0" align="top"></iframe> -->
+
+
+<!DOCTYPE html>
+<html lang="<?php echo $language['code']; ?>">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <link rel="stylesheet" href="<?php echo base_url(); ?>assets/css/<?php echo $theme; ?>/bootstrap.min.css">
+    <link rel="stylesheet" href="<?php echo base_url(); ?>assets/css/<?php echo $theme; ?>/overrides.css">
+    <link rel="stylesheet" href="<?php echo base_url(); ?>assets/css/general.css">
+
+    <title><?= "Wavelog On-Air widget"; ?></title>
+    <style>
+        .widget.container {
+            max-width: none;
+        }
+
+        .left-column {
+            width: 150px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            border-right: 1px solid #444;
+            padding: 10px;
+        }
+
+        .right-column {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            padding: 10px;
+        }
+
+        .top-right {
+            height: 60px;
+            display: flex;
+        }
+
+        .top-right,
+        .bottom-right {
+            border-bottom: 1px solid #444;
+            padding: 10px;
+        }
+
+        .bottom-right {
+            flex: 1;
+            border-bottom: none;
+        }
+
+        .widgetLogo {
+            width: 150px;
+            height: 150px;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="widget container d-flex">
+        <div class="left-column">
+            <img class="widgetLogo" src="<?php echo base_url(); ?>assets/logo/<?php echo $this->optionslib->get_logo('header_logo', $theme); ?>.png" alt="Logo" />
+        </div>
+        <div class="right-column">
+            <div class="top-right">
+                <p class="<?= $text_size_class ?>">
+                    <?php 
+                        if ($is_on_air === true) {
+                            printf("%s is ON-AIR", $user_callsign); 
+                        } else {
+                            printf("%s is OFF-AIR", $user_callsign); 
+                        }
+                    ?>
+                </p>
+            </div>
+            <div class="bottom-right mt-3">
+                <?php if ($is_on_air === true) { ?>
+                    <?php foreach ($radios_online as $radio_data) { ?>
+                        <p class="<?= $text_size_class ?>">
+                            <?= $radio_data->frequency_string; ?>
+                        </p>
+                    <?php } // end foreach ?>
+                <?php } else { ?>
+                    <p class="<?= $text_size_class ?>">
+                        <?= sprintf($last_seen_days_ago_string); ?>
+                    </p>
+                <?php } ?>                
+            </div>
+        </div>
+    </div>
+</body>
+
+</html>
