added under construction timer theme part

resources/views/segments/index/TimerEvent/TimerEvent.js

@@ -5,7 +5,6 @@ function startCountdown(unixTimestamp) {
         const remainingTime = unixTimestamp - now;
 
         if (remainingTime <= 0) {
-            countdownElement.innerHTML = "Time's up!";
             clearInterval(interval);
         } else {
             const seconds = remainingTime % 60;

resources/views/segments/under/SimpleUnderConstruction/SimpleUnderConstruction.scss

@@ -4,6 +4,7 @@
     background: rgb(254,255,0);
     background: radial-gradient(circle, rgba(254,255,0,1) 0%, rgba(251,111,25,1) 100%);
     text-align: center;
+    color: #000;
 
     h1,h2{
         font-weight: 200;

resources/views/segments/under/TimerUnderConstruction/TimerUnderConstruction.blade.php

@@ -0,0 +1,41 @@
+<section class="TimerUnderConstruction live-setting" data-live="{{$data->area_name.'_'.$data->part}}" >
+    <div class="container">
+        <h1>
+            {{$title}}
+        </h1>
+        <h2>
+            {{getSetting('desc')}}
+        </h2>
+        <img src="{{asset('assets/default/under-construction.svg')}}" alt="under-construction">
+        <div id="under-countdown">
+            <div id="udcd" data-text="{{__("Day(s)")}}">0</div>
+            <div id="uhcd" data-text="{{__("Hour(s)")}}">0</div>
+            <div id="umcd" data-text="{{__("Minute(s)")}}">0</div>
+            <div id="uscd" data-text="{{__("Second(s)")}}">0</div>
+        </div>
+        <div class="my-3">
+            {!! getSetting($data->area_name.'_'.$data->part.'_text') !!}
+        </div>
+        <ul class="social-list">
+            @foreach(getSettingsGroup('social_')??[] as $k => $social)
+                <li>
+                    <a href="{{$social}}">
+                        <i class="ri-{{$k}}-line"></i>
+                    </a>
+                </li>
+            @endforeach
+            <li>
+                <a href="tel:{{getSetting('tel')}}">
+                    <i class="ri-phone-line"></i>
+                </a>
+            </li>
+            <li>
+                <a href="mailto:{{getSetting('email')}}">
+                    <i class="ri-mail-line"></i>
+                </a>
+            </li>
+        </ul>
+    </div>
+    <input type="hidden" id="under-count-down-time-timestamp" value="{{ getSetting($data->area_name.'_'.$data->part.'_date')}}">
+
+</section>

resources/views/segments/under/TimerUnderConstruction/TimerUnderConstruction.js

@@ -0,0 +1,37 @@
+function startCountdownUnder(unixTimestamp) {
+
+    function updateCountdown() {
+        const now = Math.floor(Date.now() / 1000); // Current time in seconds
+        const remainingTime = unixTimestamp - now;
+
+        if (remainingTime <= 0) {
+            clearInterval(interval);
+        } else {
+            const seconds = remainingTime % 60;
+            const minutes = Math.floor((remainingTime / 60) % 60);
+            const hours = Math.floor((remainingTime / 3600) % 24);
+            const days = Math.floor(remainingTime / 86400);
+
+            document.querySelector('#udcd').innerText = numFixer(days);
+            document.querySelector('#uhcd').innerText = numFixer(hours);
+            document.querySelector('#umcd').innerText = numFixer(minutes);
+            document.querySelector('#uscd').innerText = numFixer(seconds);
+        }
+    }
+
+    updateCountdown(); // Initial call to display immediately
+    const interval = setInterval(updateCountdown, 1000);
+}
+
+function numFixer(x) {
+    if (x < 10) {
+        return '0' + x;
+    }
+    return x.toString();
+}
+
+window.addEventListener('load', function () {
+    if  (document.querySelector('#under-count-down-time-timestamp') != null){
+        startCountdownUnder(parseInt(document.querySelector('#under-count-down-time-timestamp').value));
+    }
+});

resources/views/segments/under/TimerUnderConstruction/TimerUnderConstruction.json

@@ -0,0 +1,10 @@
+{
+    "name": "TimerUnderConstruction",
+    "version": "1.0",
+    "author": "xStack",
+    "email": "[email protected]",
+    "license": "GPL-3.0-or-later",
+    "url": "https:\/\/xstack.ir",
+    "author_url": "https:\/\/4xmen.ir",
+    "packages": []
+}

resources/views/segments/under/TimerUnderConstruction/TimerUnderConstruction.php

@@ -0,0 +1,41 @@
+<?php
+
+namespace Resources\Views\Segments;
+
+use App\Models\Part;
+use App\Models\Setting;
+
+class TimerUnderConstruction
+{
+    public static function onAdd(Part $part = null)
+    {
+        $setting = new Setting();
+        $setting->section = 'theme';
+        $setting->key = $part->area_name . '_' . $part->part.'_date';
+        $setting->value = strtotime('next friday');
+        $setting->type = 'DATETIME';
+        $setting->size = 12;
+        $setting->title =  $part->area_name . ' ' . $part->part.' up time';
+        $setting->save();
+
+        $setting = new Setting();
+        $setting->section = 'theme';
+        $setting->key = $part->area_name . '_' . $part->part.'_text';
+        $setting->value = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate dignissimos dolores
+                        doloribus eaque expedita facilis ipsa itaque maiores minus nam neque, porro ratione sapiente
+                        sint unde ut vero voluptatibus voluptatum.';
+        $setting->size = 12;
+        $setting->title =  $part->area_name . ' ' . $part->part. ' last content';
+        $setting->type = 'EDITOR';
+        $setting->save();
+
+    }
+    public static function onRemove(Part $part = null)
+    {
+
+    }
+    public static function onMount(Part $part = null)
+    {
+        return $part;
+    }
+}

resources/views/segments/under/TimerUnderConstruction/TimerUnderConstruction.scss

@@ -0,0 +1,102 @@
+.TimerUnderConstruction {
+    height: 100vh;
+    width: 100%;
+    background: rgb(254,255,0);
+    background: radial-gradient(circle, rgba(254,255,0,1) 0%, rgba(251,111,25,1) 100%);
+    text-align: center;
+    color: #000;
+    &:before,&:after{
+        background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDAiIGhlaWdodD0iMTAwIiB2aWV3Qm94PSIwIDAgNTIuOTE3IDI2LjQ1OCI+PHBhdGggZD0iTS0uMTQzLS4wMTRoNTMuMTM4djI2LjYzMkgtLjE0M3oiIHN0eWxlPSJmaWxsOiNmYzA7ZmlsbC1vcGFjaXR5Oi45OTg5MzE7c3Ryb2tlLXdpZHRoOi4xMzU4OTYiLz48cGF0aCBkPSJNMTIuODA1LTIxLjI2M2gyNi45Mzd2NDMuMzQxSDEyLjgwNXoiIHN0eWxlPSJmaWxsOiMwMDA7ZmlsbC1vcGFjaXR5Oi45OTg5MzE7c3Ryb2tlLXdpZHRoOi4yMzg3MjMiIHRyYW5zZm9ybT0ibWF0cml4KC44NzA3NSAuNDkxNzIgLS4zOTQ2OCAuOTE4ODIgMCAwKSIvPjwvc3ZnPg==");
+        position: absolute;
+        left: 0;
+        right: 0;
+        height: 100px;
+        content: ' ';
+    }
+
+    &:before{
+        top: 0;
+    }
+
+    &:after{
+        bottom: 0;
+    }
+
+    h1,h2{
+        font-weight: 200;
+    }
+
+    .container{
+        padding-top: 130px;
+        padding-bottom: 130px;
+        position: relative;
+
+
+    }
+
+    img{
+        height: 30vh;
+    }
+
+    .social-list{
+        list-style: none;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        max-width: 500px;
+        margin: 1rem auto;
+        a{
+
+            color: black;
+
+            i{
+                font-size: 35px;
+            }
+        }
+    }
+
+    #udcd,#uhcd,#umcd,#uscd{
+        background: #ffffff44;
+        padding: 1rem;
+        backdrop-filter: blur(11px);
+        margin-bottom: 2rem;
+        font-size: 60px;
+        font-weight: 200;
+        width: 20%;
+        position: relative;
+        border-radius: 7px;
+
+
+
+        &:after{
+            font-size: 20px;
+            right: 0;
+            left: 0;
+            position: absolute;
+            bottom: -15px;
+            font-weight: 300;
+        }
+    }
+    #udcd:after{
+        content: attr(data-text);
+    }
+    #uhcd:after{
+        content: attr(data-text);
+
+    }
+    #umcd:after{
+        content: attr(data-text);
+
+    }
+    #uscd:after{
+        content: attr(data-text);
+
+    }
+
+    #under-countdown{
+        padding-top: 1rem;
+        display: flex;
+        align-items: center;
+        justify-content: space-evenly;
+    }
+}