From 0108d5fa77a1d0f9ab9250864149dfff9f2aa68d Mon Sep 17 00:00:00 2001
From: Nick Retel <nick.retel@gmail.com>
Date: Thu, 7 Dec 2023 21:52:47 +0100
Subject: [PATCH] wip

---
 dist/output.css                               | 233 ++++++------------
 .../views/components/logo-ohdear.blade.php    |   2 +-
 resources/views/uptime.blade.php              |  20 +-
 3 files changed, 95 insertions(+), 160 deletions(-)

diff --git a/dist/output.css b/dist/output.css
index 92518a3..ac3c9c9 100644
--- a/dist/output.css
+++ b/dist/output.css
@@ -98,20 +98,28 @@
   --tw-backdrop-sepia:  
 }
 
-#ohdear :is(.mt-2) {
-  margin-top: 0.5rem
+#ohdear :is(.absolute) {
+  position: absolute
+}
+
+#ohdear :is(.relative) {
+  position: relative
+}
+
+#ohdear :is(.right-0) {
+  right: 0px
 }
 
-#ohdear :is(.-mt-1) {
-  margin-top: -0.25rem
+#ohdear :is(.top-0) {
+  top: 0px
 }
 
-#ohdear :is(.mr-1) {
-  margin-right: 0.25rem
+#ohdear :is(.z-0) {
+  z-index: 0
 }
 
-#ohdear :is(.mr-1\.5) {
-  margin-right: 0.375rem
+#ohdear :is(.mt-2) {
+  margin-top: 0.5rem
 }
 
 #ohdear :is(.mt-4) {
@@ -138,72 +146,52 @@
   height: 0.5rem
 }
 
-#ohdear :is(.h-4) {
-  height: 1rem
-}
-
-#ohdear :is(.h-6) {
-  height: 1.5rem
+#ohdear :is(.h-32) {
+  height: 8rem
 }
 
 #ohdear :is(.h-full) {
   height: 100%
 }
 
-#ohdear :is(.w-\[20\%\]) {
-  width: 20%
-}
-
-#ohdear :is(.w-\[29\%\]) {
-  width: 29%
-}
-
-#ohdear :is(.w-\[35\%\]) {
-  width: 35%
-}
-
-#ohdear :is(.w-full) {
-  width: 100%
+#ohdear :is(.w-10) {
+  width: 2.5rem
 }
 
-#ohdear :is(.w-4) {
-  width: 1rem
+#ohdear :is(.w-32) {
+  width: 8rem
 }
 
-#ohdear :is(.w-6) {
-  width: 1.5rem
+#ohdear :is(.w-5) {
+  width: 1.25rem
 }
 
-#ohdear :is(.w-8) {
-  width: 2rem
+#ohdear :is(.w-\[10\%\]) {
+  width: 10%
 }
 
-#ohdear :is(.w-10) {
-  width: 2.5rem
+#ohdear :is(.w-\[20\%\]) {
+  width: 20%
 }
 
 #ohdear :is(.w-\[25\%\]) {
   width: 25%
 }
 
-#ohdear :is(.w-\[10\%\]) {
-  width: 10%
+#ohdear :is(.w-\[29\%\]) {
+  width: 29%
 }
 
-#ohdear :is(.w-\[30\%\]) {
-  width: 30%
+#ohdear :is(.w-\[35\%\]) {
+  width: 35%
 }
 
 #ohdear :is(.w-\[40\%\]) {
   width: 40%
 }
 
-#ohdear :is(.w-5) {
-  width: 1.25rem
-}
-
-#ohdear :is(.max-w-\[1px\]) {
-  max-width: 1px
+#ohdear :is(.w-full) {
+  width: 100%
 }
 
 #ohdear :is(.max-w-\[25\%\]) {
@@ -214,12 +202,12 @@
   table-layout: fixed
 }
 
-#ohdear :is(.grid-cols-3) {
-  grid-template-columns: repeat(3, minmax(0, 1fr))
+#ohdear :is(.grid-cols-1) {
+  grid-template-columns: repeat(1, minmax(0, 1fr))
 }
 
-#ohdear :is(.grid-cols-2) {
-  grid-template-columns: repeat(2, minmax(0, 1fr))
+#ohdear :is(.grid-cols-3) {
+  grid-template-columns: repeat(3, minmax(0, 1fr))
 }
 
 #ohdear :is(.flex-col) {
@@ -242,14 +230,14 @@
   gap: 0.75rem
 }
 
-#ohdear :is(.gap-6) {
-  gap: 1.5rem
-}
-
 #ohdear :is(.gap-4) {
   gap: 1rem
 }
 
+#ohdear :is(.gap-6) {
+  gap: 1.5rem
+}
+
 #ohdear :is(.space-x-2 > :not([hidden]) ~ :not([hidden])) {
   --tw-space-x-reverse: 0;
   margin-right: calc(0.5rem * var(--tw-space-x-reverse));
@@ -284,6 +272,10 @@
   border-radius: 0.5rem
 }
 
+#ohdear :is(.rounded-tr-lg) {
+  border-top-right-radius: 0.5rem
+}
+
 #ohdear :is(.bg-amber-100) {
   --tw-bg-opacity: 1;
   background-color: rgb(254 243 199 / var(--tw-bg-opacity))
@@ -294,6 +286,11 @@
   background-color: rgb(209 250 229 / var(--tw-bg-opacity))
 }
 
+#ohdear :is(.bg-emerald-300) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(110 231 183 / var(--tw-bg-opacity))
+}
+
 #ohdear :is(.bg-gray-200) {
   --tw-bg-opacity: 1;
   background-color: rgb(229 231 235 / var(--tw-bg-opacity))
@@ -334,14 +331,9 @@
   background-color: rgb(254 249 195 / var(--tw-bg-opacity))
 }
 
-#ohdear :is(.bg-gray-100) {
+#ohdear :is(.bg-emerald-700) {
   --tw-bg-opacity: 1;
-  background-color: rgb(243 244 246 / var(--tw-bg-opacity))
-}
-
-#ohdear :is(.bg-gray-700) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(55 65 81 / var(--tw-bg-opacity))
+  background-color: rgb(4 120 87 / var(--tw-bg-opacity))
 }
 
 #ohdear :is(.bg-gray-800) {
@@ -349,24 +341,9 @@
   background-color: rgb(31 41 55 / var(--tw-bg-opacity))
 }
 
-#ohdear :is(.bg-emerald-500) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(16 185 129 / var(--tw-bg-opacity))
-}
-
-#ohdear :is(.bg-emerald-800) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(6 95 70 / var(--tw-bg-opacity))
-}
-
-#ohdear :is(.bg-emerald-200) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(167 243 208 / var(--tw-bg-opacity))
-}
-
-#ohdear :is(.bg-emerald-300) {
+#ohdear :is(.bg-emerald-400) {
   --tw-bg-opacity: 1;
-  background-color: rgb(110 231 183 / var(--tw-bg-opacity))
+  background-color: rgb(52 211 153 / var(--tw-bg-opacity))
 }
 
 #ohdear :is(.px-1) {
@@ -422,6 +399,11 @@
   text-align: right
 }
 
+#ohdear :is(.text-2xl) {
+  font-size: 1.5rem;
+  line-height: 2rem
+}
+
 #ohdear :is(.text-base) {
   font-size: 1rem;
   line-height: 1.5rem
@@ -437,16 +419,6 @@
   line-height: 1rem
 }
 
-#ohdear :is(.text-sm) {
-  font-size: 0.875rem;
-  line-height: 1.25rem
-}
-
-#ohdear :is(.text-2xl) {
-  font-size: 1.5rem;
-  line-height: 2rem
-}
-
 #ohdear :is(.font-bold) {
   font-weight: 700
 }
@@ -478,6 +450,11 @@
   color: rgb(4 120 87 / var(--tw-text-opacity))
 }
 
+#ohdear :is(.text-emerald-900) {
+  --tw-text-opacity: 1;
+  color: rgb(6 78 59 / var(--tw-text-opacity))
+}
+
 #ohdear :is(.text-gray-400) {
   --tw-text-opacity: 1;
   color: rgb(156 163 175 / var(--tw-text-opacity))
@@ -548,58 +525,9 @@
   color: rgb(161 98 7 / var(--tw-text-opacity))
 }
 
-#ohdear :is(.text-brand) {
-  --tw-text-opacity: 1;
-  color: rgb(255 57 0 / var(--tw-text-opacity))
-}
-
-#ohdear :is(.text-emerald-500) {
-  --tw-text-opacity: 1;
-  color: rgb(16 185 129 / var(--tw-text-opacity))
-}
-
-#ohdear :is(.text-gray-300) {
-  --tw-text-opacity: 1;
-  color: rgb(209 213 219 / var(--tw-text-opacity))
-}
-
-#ohdear :is(.text-emerald-400) {
-  --tw-text-opacity: 1;
-  color: rgb(52 211 153 / var(--tw-text-opacity))
-}
-
-#ohdear :is(.text-emerald-800) {
-  --tw-text-opacity: 1;
-  color: rgb(6 95 70 / var(--tw-text-opacity))
-}
-
-#ohdear :is(.text-emerald-900) {
+#ohdear :is(.text-emerald-200) {
   --tw-text-opacity: 1;
-  color: rgb(6 78 59 / var(--tw-text-opacity))
-}
-
-#ohdear :is(.text-black\/50) {
-  color: rgb(0 0 0 / 0.5)
-}
-
-#ohdear :is(.text-black) {
-  --tw-text-opacity: 1;
-  color: rgb(0 0 0 / var(--tw-text-opacity))
-}
-
-#ohdear :is(.text-white\/50) {
-  color: rgb(255 255 255 / 0.5)
-}
-
-#ohdear :is(.text-emerald-600) {
-  --tw-text-opacity: 1;
-  color: rgb(5 150 105 / var(--tw-text-opacity))
-}
-
-#ohdear :is(.transition-opacity) {
-  transition-property: opacity;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms
+  color: rgb(167 243 208 / var(--tw-text-opacity))
 }
 
 #ohdear :is(.transition-colors) {
@@ -612,20 +540,11 @@
   height: 0px
 }
 
-#ohdear :is(.hover\:text-white:hover) {
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity))
-}
-
 #ohdear :is(.hover\:text-brand:hover) {
   --tw-text-opacity: 1;
   color: rgb(255 57 0 / var(--tw-text-opacity))
 }
 
-#ohdear :is(.dark .dark\:bg-orange-700\/50) {
-  background-color: rgb(194 65 12 / 0.5)
-}
-
 #ohdear :is(.dark .dark\:bg-emerald-700\/50) {
   background-color: rgb(4 120 87 / 0.5)
 }
@@ -635,6 +554,15 @@
   background-color: rgb(6 95 70 / var(--tw-bg-opacity))
 }
 
+#ohdear :is(.dark .dark\:bg-orange-700\/50) {
+  background-color: rgb(194 65 12 / 0.5)
+}
+
+#ohdear :is(.dark .dark\:text-emerald-200) {
+  --tw-text-opacity: 1;
+  color: rgb(167 243 208 / var(--tw-text-opacity))
+}
+
 #ohdear :is(.dark .dark\:text-gray-100) {
   --tw-text-opacity: 1;
   color: rgb(243 244 246 / var(--tw-text-opacity))
@@ -660,20 +588,15 @@
   color: rgb(254 215 170 / var(--tw-text-opacity))
 }
 
-#ohdear :is(.dark .dark\:text-emerald-200) {
+#ohdear :is(.dark .dark\:text-white) {
   --tw-text-opacity: 1;
-  color: rgb(167 243 208 / var(--tw-text-opacity))
+  color: rgb(255 255 255 / var(--tw-text-opacity))
 }
 
 #ohdear :is(.dark .dark\:text-white\/50) {
   color: rgb(255 255 255 / 0.5)
 }
 
-#ohdear :is(.dark .dark\:text-white) {
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity))
-}
-
 #ohdear :is(.dark .dark\:hover\:text-brand:hover) {
   --tw-text-opacity: 1;
   color: rgb(255 57 0 / var(--tw-text-opacity))
diff --git a/resources/views/components/logo-ohdear.blade.php b/resources/views/components/logo-ohdear.blade.php
index dbfb46c..ded2652 100644
--- a/resources/views/components/logo-ohdear.blade.php
+++ b/resources/views/components/logo-ohdear.blade.php
@@ -1,4 +1,4 @@
-<svg {{ $attributes->merge(['class' => 'text-brand']) }}  viewBox="0 0 1000 600" fill="none" xmlns="http://www.w3.org/2000/svg" alt="Oh Dear — The all-in-one monitoring tool for your entire website">
+<svg {{ $attributes->merge(['class' => 'text-gray-600 hover:text-brand']) }}  viewBox="0 0 1000 600" fill="none" xmlns="http://www.w3.org/2000/svg" alt="Oh Dear — The all-in-one monitoring tool for your entire website">
 <path d="M310.242 277.026H263.879L263.879 0L310.242 0V101.088C324.537 84.4968 350.036 70.607 385.194 70.607C441.602 70.607 473.283 109.962 473.283 166.679L473.283 277.026H426.92L426.92 174.395C426.92 138.513 408.375 113.048 370.899 113.048C331.491 113.048 310.242 137.742 310.242 175.167L310.242 277.026Z" fill="currentColor"></path>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M0 175.939C0 113.048 51.385 70.607 115.906 70.607C180.041 70.607 231.426 113.048 231.426 175.939C231.426 238.829 180.041 281.27 115.906 281.27C51.385 281.27 0 238.829 0 175.939ZM44.4306 175.939C44.4306 217.223 76.1116 241.53 115.906 241.53C155.314 241.53 186.995 217.223 186.995 175.939C186.995 134.655 155.314 110.348 115.906 110.348C76.1116 110.348 44.4306 134.655 44.4306 175.939Z" fill="currentColor"></path>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M263.997 570.291V595.756H310.359V318.73H263.997V419.046C249.315 403.226 222.271 389.337 185.181 389.337C115.251 389.337 73.9111 437.18 73.9111 494.668C73.9111 552.157 115.251 600 185.181 600C222.271 600 249.315 586.11 263.997 570.291ZM266.315 496.212C266.315 533.251 233.861 561.417 191.749 561.417C151.954 561.417 117.955 537.495 117.955 494.668C117.955 451.841 151.954 427.92 191.749 427.92C233.861 427.92 266.315 456.085 266.315 493.125V496.212Z" fill="currentColor"></path>
diff --git a/resources/views/uptime.blade.php b/resources/views/uptime.blade.php
index a2fe2c5..230ea1a 100644
--- a/resources/views/uptime.blade.php
+++ b/resources/views/uptime.blade.php
@@ -2,8 +2,20 @@
     use Illuminate\Support\Str;
 @endphp
 
+@push('scripts')
+<script>
+    console.log("This is the script from the uptime card.");
+</script>
+@endpush
+
+
 <x-pulse::card id="ohdear" :cols="$cols" :rows="$rows" :class="$class">
-    <div class="flex items-center justify-between space-x-2">
+    <div class="absolute top-0 right-0 z-0 w-32 h-32 rounded-tr-lg pattern-wavy pattern-blue-500 pattern-bg-transparent pattern-size-16 pattern-opacity-2"></div>
+    <div class="relative flex items-center justify-between space-x-2">
+        <div class="absolute top-0 flex justify-center w-full">
+            <div class="px-2 text-gray-900 rounded-full bg-emerald-400">online</div>
+        </div>
+
         <div class="flex items-center space-x-2">
             <x-ohdear-pulse::logo>
                 <x-ohdear-pulse::logo-uptime  />
@@ -19,15 +31,15 @@
         </div>
     </div>
 
-    <div class="grid h-full grid-cols-2 gap-4 mt-4">
-        <div class="flex flex-col items-center justify-center space-y-2 rounded-lg bg-emerald-300 dark:bg-emerald-800 ">
+    <div class="relative grid h-full grid-cols-1 gap-4 mt-4" id="performance">
+        {{-- <div class="flex flex-col items-center justify-center space-y-2 rounded-lg bg-emerald-300 dark:bg-emerald-800 ">
             <span class="text-2xl font-bold text-emerald-900 dark:text-white">{{ $status }}</span>
             <span class="text-xs font-medium tracking-wider uppercase text-emerald-700 dark:text-white/50 ">Status</span>
         </div>
         <div class="flex flex-col items-center justify-center space-y-2 rounded-lg bg-emerald-300 dark:bg-emerald-800">
             <span class="text-2xl font-bold text-emerald-900 dark:text-white">{{ $performance }}</span>
             <span class="text-xs font-medium tracking-wider uppercase text-emerald-700 dark:text-white/50 ">Performance</span>
-        </div>
+        </div> --}}
     </div>