A!leys Galerie

<?php
/**
 * Plugin Name: Smart Maintenance Mode with Social Share
 * Description: Displays a stylish countdown during maintenance with social sharing options
 * Version: 1.0
 * Author: Ailey
 * Author URI: https://github.com/ailey
 * License: GPL2
 */

if (!defined('ABSPATH')) exit; // Exit if accessed directly

class SmartMaintenanceMode {

    private $maintenance_time;
    private $time_left;

    public function __construct() {
        $this->maintenance_time = get_option('smart_maintenance_end', time() + 3600); // Default 1 hour
        $this->time_left = max(0, $this->maintenance_time - time());

        if ($this->time_left > 0) {
            add_action('wp_head', [$this, 'add_maintenance_styles']);
            add_action('wp_footer', [$this, 'add_maintenance_scripts']);
            remove_action('wp_head', 'wp_generator'); // Hide WordPress version
        }
    }

    public function add_maintenance_styles() {
        echo '<style>
            #maintenance-mode {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: linear-gradient(135deg, #2c3e50, #34495e);
                color: white;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                z-index: 9999;
                text-align: center;
                font-family: \'Helvetica Neue\', Arial, sans-serif;
            }
            #maintenance-logo {
                font-size: 3rem;
                margin-bottom: 1rem;
                animation: pulse 2s infinite;
            }
            @keyframes pulse {
                0% { opacity: 1; }
                50% { opacity: 0.7; }
                100% { opacity: 1; }
            }
            #countdown-timer {
                font-size: 2.5rem;
                margin-bottom: 2rem;
                font-weight: bold;
            }
            #maintenance-message {
                font-size: 1.5rem;
                max-width: 800px;
                line-height: 1.6;
                margin-bottom: 2rem;
            }
            .share-buttons {
                display: flex;
                gap: 1rem;
                justify-content: center;
                flex-wrap: wrap;
            }
            .share-btn {
                background: #3498db;
                color: white;
                border: none;
                padding: 0.8rem 1.5rem;
                border-radius: 5px;
                font-size: 1rem;
                cursor: pointer;
                transition: background 0.3s;
            }
            .share-btn:hover {
                background: #2980b9;
            }
            #maintenance-footer {
                position: absolute;
                bottom: 20px;
                font-size: 0.9rem;
                color: #bdc3c7;
            }
        </style>';
    }

    public function add_maintenance_scripts() {
        echo '<div id="maintenance-mode">
            <div id="maintenance-logo">🛠️</div>
            <div id="countdown-timer">
                <span id="days">0</span> Days
                <span id="hours">0</span> Hours
                <span id="minutes">0</span> Minutes
                <span id="seconds">0</span> Seconds
            </div>
            <div id="maintenance-message">
                We\'re making our website better! Please come back soon.
                <br>
                Meanwhile, share this page with your friends - we\'ll appreciate it!
            </div>
            <div class="share-buttons">
                <button class="share-btn" onclick="shareTwitter()">Share on Twitter</button>
                <button class="share-btn" onclick="shareFacebook()">Share on Facebook</button>
                <button class="share-btn" onclick="shareLinkedIn()">Share on LinkedIn</button>
                <button class="share-btn" onclick="shareEmail()">Email to Friend</button>
            </div>
            <div id="maintenance-footer">
                Maintenance mode will end: ' . date('F j, Y H:i', $this->maintenance_time) . '
            </div>
        </div>

        <script>
            function updateCountdown() {
                const totalSeconds = ' . $this->time_left . ';
                const days = Math.floor(totalSeconds / 86400);
                const hours = Math.floor((totalSeconds % 86400) / 3600);
                const minutes = Math.floor((totalSeconds % 3600) / 60);
                const seconds = totalSeconds % 60;

                document.getElementById("days").textContent = days;
                document.getElementById("hours").textContent = hours;
                document.getElementById("minutes").textContent = minutes;
                document.getElementById("seconds").textContent = seconds;
            }

            function shareTwitter() {
                const url = encodeURIComponent(window.location.href);
                const text = encodeURIComponent("Check out this website during maintenance! It'll be back soon - please share if you can!");
                window.open(`https://twitter.com/intent/tweet?url=${url}&text=${text}`, "_blank");
            }

            function shareFacebook() {
                const url = encodeURIComponent(window.location.href);
                const title = encodeURIComponent("Website Maintenance Notice");
                const description = encodeURIComponent("This website is temporarily down for maintenance. Please share if you can!");
                window.open(`https://www.facebook.com/sharer/sharer.php?u=${url}&quote=${title}&caption=${description}`, "_blank");
            }

            function shareLinkedIn() {
                const url = encodeURIComponent(window.location.href);
                const title = encodeURIComponent("Website Maintenance Notice");
                const text = encodeURIComponent("This website is temporarily down for maintenance. Please share if you can!");
                window.open(`https://www.linkedin.com/shareArticle?mini=true&url=${url}&title=${title}&summary=${text}`, "_blank");
            }

            function shareEmail() {
                window.open(`mailto:?subject=Check%20this%20website&body=${window.location.href}%0D%0AThis%20website%20is%20temporarily%20down%20for%20maintenance.%20Please%20share%20if%20you%20can!`, "_blank");
            }

            setInterval(updateCountdown, 1000);
            updateCountdown();
        </script>';
    }

    public function admin_maintenance_page() {
        if (!current_user_can('manage_options')) return;

        echo '<div class="wrap">
            <h1>Smart Maintenance Mode Settings</h1>
            <form method="post" action="options.php">
                <input type="hidden" name="option_page" value="smart_maintenance_mode">
                <?php settings_fields('smart_maintenance_mode_options'); ?>
                <table class="form-table">
                    <tr>
                        <th>Maintenance Mode Duration</th>
                        <td>
                            <input type="text" name="maintenance_duration" value="' . esc_attr(get_option('maintenance_duration', '3600')) . '" placeholder="Seconds (default: 3600)" />
                            <p class="description">Enter the duration in seconds for maintenance mode (0 for unlimited)</p>
                        </td>
                    </tr>
                </table>
                <p class="submit">
                    <input type="submit" class="button-primary" value="Save Settings" />
                </p>
            </form>
        </div>';
    }

    public function register_settings() {
        register_setting('smart_maintenance_mode_options', 'maintenance_duration', ['type' => 'string', 'sanitize_callback' => 'sanitize_text_field']);
    }
}

$smart_maintenance = new SmartMaintenanceMode();

// For WordPress admin menu
add_action('admin_menu', function() {
    add_submenu_page(
        'tools.php',
        'Maintenance Mode',
        'Maintenance Mode',
        'manage_options',
        'maintenance-mode',
        [$smart_maintenance, 'admin_maintenance_page']
    );
});

// For Joomla compatibility (if needed)
if (!defined('JPATH_BASE')) {
    // This check helps identify if the plugin is loaded in Joomla
    // In a real Joomla plugin, this would be a different structure
    $this->add_maintenance_styles();
    $this->add_maintenance_scripts();
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Markdown Live Preview</title>
    <style>
        :root {
            --primary-color: #4a6fa5;
            --secondary-color: #166088;
            --accent-color: #4fc3f7;
            --bg-color: #f5f7fa;
            --editor-bg: #ffffff;
            --preview-bg: #f9f9f9;
            --text-color: #333333;
            --border-color: #e0e0e0;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background-color: var(--bg-color);
            color: var(--text-color);
            line-height: 1.6;
            padding: 20px;
            min-height: 100vh;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;
        }

        header {
            width: 100%;
            padding: 15px 0;
            border-bottom: 1px solid var(--border-color);
            margin-bottom: 20px;
        }

        h1 {
            color: var(--secondary-color);
            font-weight: 600;
            font-size: 2.2rem;
        }

        .editor-container, .preview-container {
            width: 100%;
            display: flex;
            flex-direction: column;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }

        .split-pane {
            display: flex;
            flex-direction: row;
            height: 60vh;
            min-height: 500px;
            width: 100%;
            gap: 5px;
        }

        .editor-pane, .preview-pane {
            flex: 1;
            display: flex;
            flex-direction: column;
            position: relative;
            background-color: var(--editor-bg);
        }

        .preview-pane {
            background-color: var(--preview-bg);
        }

        textarea {
            flex: 1;
            padding: 15px;
            border: none;
            background-color: transparent;
            font-size: 14px;
            resize: none;
            outline: none;
            line-height: 1.5;
            font-family: 'Courier New', Courier, monospace;
        }

        .preview-content {
            flex: 1;
            padding: 15px;
            overflow-y: auto;
            background-color: var(--preview-bg);
        }

        .toolbar {
            padding: 10px 15px;
            background-color: var(--editor-bg);
            border-bottom: 1px solid var(--border-color);
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }

        .toolbar button {
            padding: 8px 12px;
            border: none;
            background-color: var(--primary-color);
            color: white;
            border-radius: 4px;
            cursor: pointer;
            font-size: 12px;
            font-weight: 500;
            transition: background-color 0.2s;
        }

        .toolbar button:hover {
            background-color: var(--secondary-color);
        }

        .toolbar button.active {
            background-color: var(--accent-color);
        }

        .previews-tabs {
            display: flex;
            background-color: var(--preview-bg);
            border-bottom: 1px solid var(--border-color);
        }

        .previews-tabs button {
            padding: 10px 15px;
            border: none;
            background: none;
            color: var(--text-color);
            cursor: pointer;
            font-size: 12px;
            font-weight: 500;
            border-bottom: 3px solid transparent;
            transition: all 0.2s;
        }

        .previews-tabs button:hover {
            color: var(--primary-color);
        }

        .previews-tabs button.active {
            color: var(--accent-color);
            border-bottom-color: var(--accent-color);
        }

        .title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 10px;
            color: var(--secondary-color);
        }

        .preview-pane .title {
            color: var(--primary-color);
        }

        .preview Content h1, .preview Content h2, .preview Content h3 {
            margin: 15px 0 10px 0;
            line-height: 1.2;
        }

        .preview Content h1 {
            font-size: 2rem;
            color: var(--secondary-color);
            border-bottom: 2px solid var(--border-color);
            padding-bottom: 5px;
        }

        .preview Content h2 {
            font-size: 1.5rem;
            color: var(--primary-color);
        }

        .preview Content h3 {
            font-size: 1.25rem;
            color: #555;
        }

        .preview Content p {
            margin-bottom: 10px;
        }

        .preview Content ul, .preview Content ol {
            margin: 10px 0 10px 20px;
        }

        .preview Content li {
            margin-bottom: 5px;
        }

        .preview Content blockquote {
            border-left: 3px solid var(--accent-color);
            padding-left: 15px;
            margin: 10px 0;
            color: #555;
            font-style: italic;
        }

        .preview Content img {
            max-width: 100%;
            height: auto;
            margin: 10px 0;
            border-radius: 4px;
        }

        .preview Content table {
            width: 100%;
            border-collapse: collapse;
            margin: 10px 0;
        }

        .preview Content th, .preview Content td {
            border: 1px solid var(--border-color);
            padding: 8px;
            text-align: left;
        }

        .preview Content th {
            background-color: var(--editor-bg);
        }

        .preview Content code {
            background-color: #f0f0f0;
            padding: 2px 4px;
            border-radius: 3px;
            font-family: 'Courier New', Courier, monospace;
        }

        .preview Content pre {
            background-color: #f5f5f5;
            padding: 15px;
            border-radius: 4px;
            overflow-x: auto;
            margin: 10px 0;
        }

        .preview Content pre code {
            background-color: transparent;
            padding: 0;
        }

        .markdown-shortcuts {
            margin-top: 20px;
            font-size: 12px;
            color: #666;
            max-width: 800px;
        }

        .markdown-shortcuts h3 {
            color: var(--secondary-color);
            margin-bottom: 5px;
        }

        .markdown-shortcuts ul {
            list-style-type: none;
            padding-left: 0;
        }

        .markdown-shortcuts li {
            margin-bottom: 3px;
        }

        .markdown-shortcuts a {
            color: var(--primary-color);
            text-decoration: none;
        }

        .markdown-shortcuts a:hover {
            text-decoration: underline;
        }

        .brightness-slider-container {
            margin-top: 15px;
        }

        .brightness-slider-container label {
            display: block;
            margin-bottom: 5px;
            font-size: 12px;
        }

        .brightness-slider-container input {
            width: 100%;
            height: 5px;
            -webkit-appearance: none;
            background: #ddd;
            border-radius: 5px;
            outline: none;
        }

        .brightness-slider-container input::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 15px;
            height: 15px;
            background: var(--primary-color);
            border-radius: 50%;
            cursor: pointer;
        }

        .brightness-slider-container input::-moz-range-thumb {
            width: 15px;
            height: 15px;
            background: var(--primary-color);
            border-radius: 50%;
            cursor: pointer;
            border: none;
        }

        @media (max-width: 768px) {
            .split-pane {
                flex-direction: column;
                height: auto;
            }

            .preview-content {
                height: 30vh;
            }

            .title {
                font-size: 16px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>Markdown Live Preview</h1>
        </header>

        <div class="editor-container">
            <div class="toolbar">
                <button class="active" data-format="markdown">Markdown</button>
                <button data-format="html">HTML</button>
                <button data-format="plain">Plain Text</button>
                <button data-format="pdf">PDF Export</button>
                <button data-format="word">Word Export</button>
                <button data-format="copy">Copy to Clipboard</button>
            </div>
            <div class="split-pane">
                <div class="editor-pane">
                    <textarea id="markdown-editor" placeholder="Write your Markdown here..."># Hello World!

This is a **Markdown** live preview editor.

## Features

- Split-pane design with live preview
- Multiple output formats
- Syntax highlighting
- Responsive layout
- Export to PDF and Word
- Copy to clipboard

## How to use

Type Markdown in the left pane and see the rendered output in the right pane.

### Code example