From 85522e7e591586f15fd0c965d9e47536eb619314 Mon Sep 17 00:00:00 2001
From: Tigranuhi-A <tigranuhy.alaverdyan@gmail.com>
Date: Thu, 18 Dec 2025 19:27:34 +0400
Subject: [PATCH] Redesign DemoWeb About Page to Show Framework Commands

---
 .../Templates/DemoWeb/assets/css/custom.css   | 73 +++++++++++++++++++
 .../Templates/DemoWeb/assets/js/custom.js     | 32 ++++++++
 .../DemoWeb/src/Views/pages/about.php.tpl     | 42 ++++++++---
 3 files changed, 136 insertions(+), 11 deletions(-)

diff --git a/src/Module/Templates/DemoWeb/assets/css/custom.css b/src/Module/Templates/DemoWeb/assets/css/custom.css
index b5d43a094..fe9032992 100644
--- a/src/Module/Templates/DemoWeb/assets/css/custom.css
+++ b/src/Module/Templates/DemoWeb/assets/css/custom.css
@@ -871,4 +871,77 @@ div.polaroid {
     .show-on-medium-and-up-header-avatar-box{
         display: none;
     }
+}
+
+.cli-list {
+    text-align: center;
+    display: flex;
+    justify-content: unset;
+    flex-direction: column;
+    width: 60%;
+    margin: 0 auto;
+    margin-top: 32px;
+}
+
+.cli-item {
+    margin-bottom: 18px;
+}
+
+.cli-desc {
+    text-align: justify;
+    margin-bottom: 6px;
+}
+
+.cli-command {
+    background: rgba(255, 255, 255, 0.15);
+    border-radius: 6px;
+    padding: 10px 14px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.cli-command code {
+    color: white;
+    font-size: 0.95rem;
+    white-space: nowrap;
+}
+
+.copy-btn {
+    background: transparent;
+    border: none;
+    color: #b2dfdb;
+    cursor: pointer;
+    font-size: 1.1rem;
+    position: relative;
+}
+
+.copy-btn,
+.copy-btn:focus,
+.copy-btn:active,
+.copy-btn:hover {
+    background-color: transparent !important;
+    box-shadow: none !important;
+    outline: none !important;
+}
+
+.copy-tooltip {
+    position: absolute;
+    background: #333;
+    color: #fff;
+    padding: 6px 9px;
+    font-size: 12px;
+    border-radius: 4px;
+    top: -24px;
+    left: 141%;
+    transform: translateX(-50%);
+    white-space: nowrap;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.3s;
+    z-index: 10;
+}
+
+.copy-tooltip.show {
+    opacity: 1;
 }
\ No newline at end of file
diff --git a/src/Module/Templates/DemoWeb/assets/js/custom.js b/src/Module/Templates/DemoWeb/assets/js/custom.js
index d8b72f2b5..0737ee7c4 100644
--- a/src/Module/Templates/DemoWeb/assets/js/custom.js
+++ b/src/Module/Templates/DemoWeb/assets/js/custom.js
@@ -65,11 +65,43 @@ class Custom {
         $('.material-alert').remove();
     }
 
+    copyCommand(event) {
+        let button = jQuery(event.currentTarget);
+        let container = button.closest('.cli-command');
+        let codeElement = container.find('code');
+        let codeText = codeElement.text().trim();
+
+        navigator.clipboard.writeText(codeText)
+            .then(() => {
+                button.find('.copy-content').hide();
+                button.find('.done-icon').show();
+
+                setTimeout(() => {
+                    button.find('.done-icon').hide();
+                    button.find('.copy-content').show();
+                }, 2000);
+
+                let tooltip = $('<span class="copy-tooltip">Copied!</span>');
+                button.append(tooltip);
+                setTimeout(() => {
+                    tooltip.addClass('show');
+                }, 10);
+
+                setTimeout(() => {
+                    tooltip.remove();
+                }, 1500);
+            })
+            .catch(err => {
+                console.error("Failed to copy:", err);
+            });
+    }
+
     events() {
         $(document).on('click', '.modal-trigger', this.modalTrigger.bind(this));
         $(document).on('click', '.visibility-icon', this.visibilityIcon.bind(this));
         $(document).on('input', '.search-bar', this.search.bind(this));
         $(document).on('click', '.account-tabs .tab', this.tabSwitcher.bind(this));
+        $(document).on('click', '.copy-btn', this.copyCommand.bind(this));
     }
 }
 
diff --git a/src/Module/Templates/DemoWeb/src/Views/pages/about.php.tpl b/src/Module/Templates/DemoWeb/src/Views/pages/about.php.tpl
index bfc6e2e22..9d3111297 100644
--- a/src/Module/Templates/DemoWeb/src/Views/pages/about.php.tpl
+++ b/src/Module/Templates/DemoWeb/src/Views/pages/about.php.tpl
@@ -9,18 +9,38 @@
                 <h4><?php _t('common.version'); ?></h4>
                 <h6><?php _t('common.current_version', env('APP_VERSION')); ?></h6>
 
+               <h4 class="mt-4">Quantum CLI Commands</h4>
 
-                <h4><?php _t('common.installation'); ?></h4>
-                <ul class="step-list">
-                    <li>
-                        <h6><?php _t('common.create_project'); ?></h6>
-                        <code>&gt; composer create-project quantum/project [project name]</code>
-                    </li>
-                    <li>
-                        <h6><?php _t('common.run_server'); ?></h6>
-                        <code>&gt; php qt serve</code>
-                    </li>
-                </ul>
+                <div class="cli-list">
+
+                    <?php
+                    $commands = [
+                        ['Install debug toolbar integration', 'php qt install:debugbar'],
+                        ['Install developer toolkit', 'php qt install:toolkit'],
+                        ['Generate application key', 'php qt app:key'],
+                        ['Generate .env file', 'php qt app:env'],
+                        ['Show framework version', 'php qt app:version'],
+                        ['Show all available commands', 'php qt list'],
+                    ];
+                    ?>
+
+                    <?php foreach ($commands as [$desc, $cmd]): ?>
+                        <div class="cli-item">
+                            <div class="cli-desc white-text">
+                                <?= $desc ?>
+                            </div>
+
+                            <div class="cli-command">
+                                <code><?= $cmd ?></code>
+                                <button class="copy-btn tooltipped" title="Copy" data-command="<?= $cmd ?>">
+                                    <i class="material-icons copy-content">content_copy</i>
+                                    <i class="material-icons done-icon" style="display:none;">done</i>
+                                </button>
+                            </div>
+                        </div>
+                    <?php endforeach; ?>
+
+                </div>
             </div>
         </div>
     </div>