Ceas Analog Apple în Bara Laterală WordPress (Ora Bruxelles)

---

🕰 Ceas Analog Apple în Bara Laterală WordPress (Ora Bruxelles)

🧩 Acest plugin WordPress adaugă un ceas analog elegant, în stil Apple, în bara laterală a site-ului tău. Arată ora în timp real pentru Bruxelles și afișează automat numele site-ului tău.

---

🎯 Ce face acest plugin?

Acest widget personalizat creează un ceas analog animat care:

• Afișează ora actuală în fuzul orar Europe/Brussels
• Este stilizat în stilul Apple – curat, modern și elegant
• Include numele site-ului tău WordPress în centru
• Rulează în timp real folosind doar HTML, CSS și JavaScript (fără resurse externe)

---

🇷🇴 De ce apare numele site-ului?

Folosim funcția WordPress get_bloginfo('name') pentru a extrage dinamic numele site-ului tău, astfel încât ceasul să fie personalizat automat. Numele site-ului apare:

• În titlul widgetului
• În centrul ceasului, direct pe interfață

Acest lucru oferă o notă profesională și întărește identitatea vizuală a brandului tău.

---

📜 Codul complet al pluginului (versiune română)

Creează un fișier apple-clock-sidebar.php în folderul wp-content/plugins/apple-clock-sidebar/ și inserează următorul cod:

<?php
/**
 * Plugin Name: Apple Analog Clock Sidebar Widget (Brussels Time)
 * Description: Displays an Apple-style analog clock in the sidebar with Brussels time and site branding.
 * Version: 1.0
 * Author: HelpZone
 */

class Apple_Analog_Clock_Widget extends WP_Widget {

    public function __construct() {
        parent::__construct(
            'apple_analog_clock_widget',
            __('🕰 Apple Analog Clock (Brussels Time)', 'text_domain'),
            array('description' => __('Apple-style analog clock with Brussels time for sidebars.', 'text_domain'))
        );
    }

    public function widget($args, $instance) {
        $site_name = get_bloginfo('name');
        echo $args['before_widget'];
        ?>
        <style>
            .hz-clock {
                width: 200px;
                height: 200px;
                background: #fff;
                border: 6px solid #000;
                border-radius: 50%;
                box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
                position: relative;
                margin: 0 auto 10px;
            }

            .hz-clock .center {
                width: 8px;
                height: 8px;
                background: #000;
                border-radius: 50%;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                z-index: 10;
            }

            .hz-hand {
                position: absolute;
                bottom: 50%;
                left: 50%;
                transform-origin: bottom;
            }

            .hz-hand.hour { height: 45px; width: 4px; background: #000; z-index: 4; }
            .hz-hand.minute { height: 65px; width: 3px; background: #555; z-index: 3; }
            .hz-hand.second { height: 70px; width: 1px; background: #d00; z-index: 2; }

            .hz-tick {
                position: absolute;
                width: 3px;
                height: 8px;
                background: #000;
                top: 6px;
                left: 50%;
                transform-origin: center 94px;
                transform: translateX(-50%) rotate(0deg);
            }

            .hz-brand-text {
                position: absolute;
                top: 40px;
                left: 50%;
                transform: translateX(-50%);
                font-size: 16px;
                color: #000;
                font-weight: bold;
                font-family: "Arial", sans-serif;
                white-space: nowrap;
                text-align: center;
            }
        </style>

        <div class="hz-clock" id="hz-clock-widget">
            <div class="center"></div>
            <div class="hz-hand hour" id="hz-hourHand-widget"></div>
            <div class="hz-hand minute" id="hz-minuteHand-widget"></div>
            <div class="hz-hand second" id="hz-secondHand-widget"></div>
            <div class="hz-brand-text"><?php echo esc_html($site_name); ?></div>
        </div>

        <script>
        (function(){
            const clock = document.getElementById('hz-clock-widget');
            for (let i = 0; i < 12; i++) {
                const tick = document.createElement('div');
                tick.className = 'hz-tick';
                tick.style.transform = `translateX(-50%) rotate(${i * 30}deg)`;
                clock.appendChild(tick);
            }

            const hourHand = document.getElementById('hz-hourHand-widget');
            const minuteHand = document.getElementById('hz-minuteHand-widget');
            const secondHand = document.getElementById('hz-secondHand-widget');

            function updateClock() {
                const now = new Date();
                const brusselsTime = new Date(now.toLocaleString("en-US", {timeZone: "Europe/Brussels"}));

                const sec = brusselsTime.getSeconds();
                const min = brusselsTime.getMinutes();
                const hr = brusselsTime.getHours();

                const secDeg = sec * 6;
                const minDeg = min * 6 + sec * 0.1;
                const hrDeg = ((hr % 12) + min / 60) * 30;

                secondHand.style.transform = `rotate(${secDeg}deg)`;
                minuteHand.style.transform = `rotate(${minDeg}deg)`;
                hourHand.style.transform = `rotate(${hrDeg}deg)`;
            }

            setInterval(updateClock, 1000);
            updateClock();
        })();
        </script>
        <?php
        echo $args['after_widget'];
    }
}

function register_apple_analog_clock_widget() {
    register_widget('Apple_Analog_Clock_Widget');
}
add_action('widgets_init', 'register_apple_analog_clock_widget');

▶️ (sau descarcă direct versiunea ZIP de mai jos)

---

---

Cum se vede pe bara laterală

---

🧰 Cum se instalează (pas cu pas)

1. Descarcă și dezarhivează fișierul ZIP sau copiază codul de mai sus într-un fișier PHP
2. Creează un folder nou: wp-content/plugins/apple-clock-sidebar
3. Salvează fișierul apple-clock-sidebar.php în acel folder
4. În panoul de administrare WordPress → Mergi la Pluginuri → Adaugă Plugin → Încarcă plugin
5. Activează pluginul
6. Mergi la Aspect → Widgeturi și adaugă widgetul „🕰 Apple Analog Clock (Brussels Time)” în bara laterală

---

🔧 Personalizare

• Schimbă fusul orar modificând Europe/Brussels în orice fus orar valid (de exemplu, Europe/Bucharest)
• Poți modifica culorile, dimensiunile și fontul din CSS-ul inclus

---

🧭 Gânduri Finale

Acest plugin simplu și elegant adaugă o notă profesională site-ului tău. Este perfect pentru bloguri, ziare, reviste, agenții sau orice website care dorește un element vizual funcțional și stilizat în bara laterală.

---

🔔 Pentru mai multe tutoriale ca acesta, abonează-te la blogul nostru.
📩 Ai întrebări sau sugestii? Lasă un comentariu sau contactează-ne!
🏷️ Etichete: plugin WordPress, ceas analog, widget bară laterală, branding site, ceas Bruxelles, ceas JavaScript, frontend widget, WP_Widget, ceas în timp real, personalizare UI
📢 Hashtags: #WordPressRomania, #CeasAnalog, #PluginuriWordPress, #BrusselsTime, #CeasLive, #WPWidget, #SidebarDesign, #PluginUtil, #FrontendWidgets, #HelpZoneRo