Ideone.com

fork download

copy

#!/usr/bin/perl
use strict;
use warnings;
use CGI qw(:standard);
 
# HTML Template
my $html_template = <<'HTML';
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table and Pie Chart with Tabs</title>
    <link rel="stylesheet" href="https://c...content-available-to-author-only...e.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <script src="https://c...content-available-to-author-only...r.net/npm/chart.js"></script>
    <script src="https://c...content-available-to-author-only...r.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
    <style>
        /* Default Light Mode */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
            color: #333;
            transition: all 0.3s ease;
        }
 
        header {
            width: 100%;
            text-align: center;
            padding: 20px 0;
            font-size: 24px;
            font-weight: bold;
            background-color: #fff;
            color: #333;
        }
 
        .container {
            display: flex;
            justify-content: space-between;
            padding: 20px;
        }
 
        .table-container {
            flex: 1;
            margin-right: 20px;
        }
 
        .chart-container {
            width: 400px;
            height: 400px;
        }
 
        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }
 
        table, th, td {
            border: 1px solid #ddd;
        }
 
        th, td {
            padding: 8px 12px;
            text-align: left;
        }
 
        th {
            background-color: #f4f4f4;
        }
 
        canvas {
            width: 200px;
            height: 200px;
        }
 
        .tabs {
            display: flex;
            margin-top: 20px;
            justify-content: center;
        }
 
        .tab {
            padding: 10px 20px;
            margin: 0 5px;
            cursor: pointer;
            border: 1px solid #ddd;
            border-radius: 5px;
            background-color: #f4f4f4;
            text-align: center;
        }
 
        .tab:hover {
            background-color: #ddd;
        }
 
        .tab-content {
            display: none;
            margin-top: 20px;
            padding: 20px;
            border: 1px solid #ddd;
            border-top: none;
        }
 
        .active-tab {
            background-color: #ccc;
        }
 
        .active-content {
            display: block;
        }
 
        .active-row {
            background-color: #e0f7fa;
        }
 
        /* Dark Mode Styles */
        .dark-mode {
            background-color: #333;
            color: #fff;
        }
 
        .dark-mode header {
            background-color: #444;
            color: #fff;
        }
 
        .dark-mode .tab {
            background-color: #444;
            color: #fff;
            border: 1px solid #555;
        }
 
        .dark-mode .tab:hover {
            background-color: #555;
        }
 
        .dark-mode table, .dark-mode th, .dark-mode td {
            border: 1px solid #555;
        }
 
        .dark-mode th {
            background-color: #666;
        }
 
        .dark-mode .tab-content {
            background-color: #444;
            color: #fff;
        }
 
        .dark-mode .active-row {
            background-color: #555;
        }
 
        /* Dark Mode Button (Icon version) */
        .dark-mode-toggle {
            position: absolute;
            top: 20px;
            right: 20px;
            background-color: transparent;
            border: none;
            cursor: pointer;
            font-size: 24px;
            color: #fff;
            transition: background-color 0.3s ease, color 0.3s ease;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            padding: 5px;
        }
 
        /* Light Mode Icon */
        .dark-mode-toggle.light-mode i {
            color: #ffeb3b;  /* Yellow sun icon for light mode */
        }
 
        /* Hover Effect for Light Mode (Sun) */
        .dark-mode-toggle.light-mode:hover {
            background-color: #fff;
        }
 
        .dark-mode-toggle.light-mode:hover i {
            color: #ffea00; /* Lighter yellow when hovered */
        }
 
        /* Dark Mode Icon (Moon) */
        .dark-mode-toggle.dark-mode i {
            color: #fff;  /* White crescent icon in dark mode */
        }
 
        /* Hover Effect for Dark Mode (Moon) */
        .dark-mode-toggle.dark-mode:hover {
            background-color: #444; /* Blends with the dark background */
        }
 
        .dark-mode-toggle.dark-mode:hover i {
            color: #fff;
        }
 
        /* Chart.js Legend Text (Dark Mode Fix) */
        .dark-mode .chartjs-legend li {
            color: #fff !important; /* Ensure legend text is visible in dark mode */
        }
 
        /* "Back to Top" Button */
        .back-to-top {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background-color: transparent;
            border: none;
            cursor: pointer;
            font-size: 24px;
            color: #fff;
            transition: background-color 0.3s ease, color 0.3s ease;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            padding: 5px;
            opacity: 0; /* Initially hidden */
            visibility: hidden; /* Initially hidden */
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }
 
        .back-to-top.show {
            opacity: 1;
            visibility: visible;
        }
 
        .back-to-top i {
            color: #00bcd4; /* Light cyan color for the arrow */
        }
 
        /* Hover Effect for "Back to Top" Button */
        .back-to-top:hover {
            background-color: #00bcd4;
            color: #fff;
        }
 
        .back-to-top:hover i {
            transform: scale(1.1);
        }
 
    </style>
</head>
<body>
 
    <header>Table and Pie Chart with Tab</header>
    <div class="container">
        <!-- Table Section -->
        <div class="table-container">
            <table>
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Name</th>
                        <th>Age</th>
                        <th>City</th>
                    </tr>
                </thead>
                <tbody>
                    %TABLE_ROWS%
                </tbody>
            </table>
        </div>
 
        <!-- Pie Chart Section -->
        <div class="chart-container">
            <canvas id="pieChart"></canvas>
        </div>
    </div>
 
    <!-- Tabs Section -->
    <div class="tabs">
        %TABS%
    </div>
 
    <!-- Tab Content -->
    %TAB_CONTENTS%
 
    <!-- Dark Mode Toggle Button -->
    <button id="darkModeToggle" class="dark-mode-toggle light-mode">
        <i class="fas fa-sun"></i>
    </button>
 
    <!-- Back to Top Button -->
    <button class="back-to-top" id="backToTopBtn">
        <i class="fas fa-arrow-up"></i>
    </button>
 
    <script>
      // Pie Chart Data
        const data = {
            labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple'],
            datasets: [{
                data: [300, 50, 100, 40, 120],
                hoverOffset: 4
            }]
        };
 
        const config = {
            type: 'pie',
            data: data,
            options: {
                responsive: true,
                maintainAspectRatio: false,
                animation: {
                    duration: 1500,
                    easing: 'easeInOutCubic',
                    animateRotate: true,
                    animateScale: true,
                },
                plugins: {
                    legend: {
                        position: 'top',
                        labels: {
                            color: '#333',
                        }
                    },
                    datalabels: {
                        anchor: 'center',
                        align: 'center',
                        font: {
                            weight: 'bold',
                            size: 14,
                        },
                        color: '#fff',
                        formatter: (value, context) => {
                            let total = context.dataset._meta[Object.keys(context.dataset._meta)[0]].total;
                            let percentage = ((value / total) * 100).toFixed(1);
                            return `${value} (${percentage}%)`;
                        }
                    }
                }
            }
        };
        const pieChart = new Chart(document.getElementById('pieChart'), config);
		// Dark Mode Fix for Chart.js Legend Text
		const updateChartLegendForDarkMode = () => {
			if (document.body.classList.contains('dark-mode')) {
				// Change the legend label color to white in dark mode
				pieChart.options.plugins.legend.labels.color = '#fff';
				pieChart.update();
			} else {
				// Reset the legend label color to black for light mode
				pieChart.options.plugins.legend.labels.color = '#333';
				pieChart.update();
			}
		};
 
        // Scroll to top functionality
        const backToTopBtn = document.getElementById('backToTopBtn');
 
        window.onscroll = () => {
            if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
                backToTopBtn.classList.add('show');
            } else {
                backToTopBtn.classList.remove('show');
            }
        };
 
        backToTopBtn.onclick = () => {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        };
 
        // Tab Switching Functionality with Table Row Sync
        const tabs = document.querySelectorAll('.tab');
        const contents = document.querySelectorAll('.tab-content');
        const tableRows = document.querySelectorAll('tbody tr');
 
        tabs.forEach(tab => {
            tab.addEventListener('click', () => {
                const targetTab = tab.getAttribute('data-tab');
                
                // Hide all tab contents
                contents.forEach(content => content.classList.remove('active-content'));
                tabs.forEach(tab => tab.classList.remove('active-tab'));
                tableRows.forEach(row => row.classList.remove('active-row'));
                
                // Show the clicked tab content
                document.getElementById(targetTab).classList.add('active-content');
                
                // Mark the clicked tab as active
                tab.classList.add('active-tab');
                
                // Highlight the corresponding table row
                const correspondingRow = document.querySelector(`tr[data-tab="${targetTab}"]`);
                correspondingRow.classList.add('active-row');
            });
        });
 
        // Table Row Click to Open Corresponding Tab
        tableRows.forEach(row => {
            row.addEventListener('click', () => {
                const targetTab = row.getAttribute('data-tab');
                const tab = document.querySelector(`.tab[data-tab="${targetTab}"]`);
 
                // Trigger the tab click to highlight the tab and row
                tab.click();
            });
        });
 
        // Dark Mode Toggle Functionality
        const toggleButton = document.getElementById('darkModeToggle');
        toggleButton.addEventListener('click', () => {
            document.body.classList.toggle('dark-mode');
			updateChartLegendForDarkMode();
            const icon = document.querySelector('.dark-mode-toggle i');
            if (document.body.classList.contains('dark-mode')) {
                icon.classList.remove('fa-sun');
                icon.classList.add('fa-moon');
                toggleButton.classList.remove('light-mode');
                toggleButton.classList.add('dark-mode');
            } else {
                icon.classList.remove('fa-moon');
                icon.classList.add('fa-sun');
                toggleButton.classList.remove('dark-mode');
                toggleButton.classList.add('light-mode');
            }
        });
    </script>
</body>
</html>
HTML
 
# Sample data for the table (can be dynamic)
my @table_data = (
    { id => 1, name => "John Doe", age => 28, city => "New York" },
    { id => 2, name => "Jane Smith", age => 34, city => "Los Angeles" },
    { id => 3, name => "Sam Johnson", age => 25, city => "Chicago" },
);
 
# Generate table rows
my $table_rows = '';
foreach my $row (@table_data) {
    $table_rows .= "<tr data-tab=\"tab$row->{id}\">\n";
    $table_rows .= "<td class=\"tab-id\">$row->{id}</td>\n";
    $table_rows .= "<td>$row->{name}</td>\n";
    $table_rows .= "<td>$row->{age}</td>\n";
    $table_rows .= "<td>$row->{city}</td>\n";
    $table_rows .= "</tr>\n";
}
 
# Generate tabs
my $tabs = '';
for (my $i = 1; $i <= 7; $i++) {
    $tabs .= "<div class=\"tab\" data-tab=\"tab$i\">Tab $i</div>\n";
}
 
# Generate tab contents
my $tab_contents = '';
for (my $i = 1; $i <= 7; $i++) {
    $tab_contents .= "<div class=\"tab-content\" id=\"tab$i\">\n";
    $tab_contents .= "<p>This is content for Tab $i.</p>\n";
    $tab_contents .= "</div>\n";
}
 
# Replace placeholders in the template
$html_template =~ s/%TABLE_ROWS%/$table_rows/g;
$html_template =~ s/%TABS%/$tabs/g;
$html_template =~ s/%TAB_CONTENTS%/$tab_contents/g;
 
# Output the final HTML
print header(-type => 'text/html', -charset => 'UTF-8');
print $html_template;

IyEvdXNyL2Jpbi9wZXJsCnVzZSBzdHJpY3Q7CnVzZSB3YXJuaW5nczsKdXNlIENHSSBxdyg6c3RhbmRhcmQpOwoKIyBIVE1MIFRlbXBsYXRlCm15ICRodG1sX3RlbXBsYXRlID0gPDwnSFRNTCc7CjwhRE9DVFlQRSBodG1sPgo8aHRtbCBsYW5nPSJlbiI+CjxoZWFkPgogICAgPG1ldGEgY2hhcnNldD0iVVRGLTgiPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiPgogICAgPHRpdGxlPlRhYmxlIGFuZCBQaWUgQ2hhcnQgd2l0aCBUYWJzPC90aXRsZT4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaHR0cHM6Ly9jLi4uY29udGVudC1hdmFpbGFibGUtdG8tYXV0aG9yLW9ubHkuLi5lLmNvbS9hamF4L2xpYnMvZm9udC1hd2Vzb21lLzUuMTUuMy9jc3MvYWxsLm1pbi5jc3MiPgogICAgPHNjcmlwdCBzcmM9Imh0dHBzOi8vYy4uLmNvbnRlbnQtYXZhaWxhYmxlLXRvLWF1dGhvci1vbmx5Li4uci5uZXQvbnBtL2NoYXJ0LmpzIj48L3NjcmlwdD4KICAgIDxzY3JpcHQgc3JjPSJodHRwczovL2MuLi5jb250ZW50LWF2YWlsYWJsZS10by1hdXRob3Itb25seS4uLnIubmV0L25wbS9jaGFydGpzLXBsdWdpbi1kYXRhbGFiZWxzQDIuMC4wIj48L3NjcmlwdD4KICAgIDxzdHlsZT4KICAgICAgICAvKiBEZWZhdWx0IExpZ2h0IE1vZGUgKi8KICAgICAgICBib2R5IHsKICAgICAgICAgICAgZm9udC1mYW1pbHk6IEFyaWFsLCBzYW5zLXNlcmlmOwogICAgICAgICAgICBtYXJnaW46IDA7CiAgICAgICAgICAgIHBhZGRpbmc6IDA7CiAgICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6ICNmNGY0ZjQ7CiAgICAgICAgICAgIGNvbG9yOiAjMzMzOwogICAgICAgICAgICB0cmFuc2l0aW9uOiBhbGwgMC4zcyBlYXNlOwogICAgICAgIH0KCiAgICAgICAgaGVhZGVyIHsKICAgICAgICAgICAgd2lkdGg6IDEwMCU7CiAgICAgICAgICAgIHRleHQtYWxpZ246IGNlbnRlcjsKICAgICAgICAgICAgcGFkZGluZzogMjBweCAwOwogICAgICAgICAgICBmb250LXNpemU6IDI0cHg7CiAgICAgICAgICAgIGZvbnQtd2VpZ2h0OiBib2xkOwogICAgICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmOwogICAgICAgICAgICBjb2xvcjogIzMzMzsKICAgICAgICB9CgogICAgICAgIC5jb250YWluZXIgewogICAgICAgICAgICBkaXNwbGF5OiBmbGV4OwogICAgICAgICAgICBqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWJldHdlZW47CiAgICAgICAgICAgIHBhZGRpbmc6IDIwcHg7CiAgICAgICAgfQoKICAgICAgICAudGFibGUtY29udGFpbmVyIHsKICAgICAgICAgICAgZmxleDogMTsKICAgICAgICAgICAgbWFyZ2luLXJpZ2h0OiAyMHB4OwogICAgICAgIH0KCiAgICAgICAgLmNoYXJ0LWNvbnRhaW5lciB7CiAgICAgICAgICAgIHdpZHRoOiA0MDBweDsKICAgICAgICAgICAgaGVpZ2h0OiA0MDBweDsKICAgICAgICB9CgogICAgICAgIHRhYmxlIHsKICAgICAgICAgICAgd2lkdGg6IDEwMCU7CiAgICAgICAgICAgIGJvcmRlci1jb2xsYXBzZTogY29sbGFwc2U7CiAgICAgICAgICAgIG1hcmdpbi1ib3R0b206IDIwcHg7CiAgICAgICAgfQoKICAgICAgICB0YWJsZSwgdGgsIHRkIHsKICAgICAgICAgICAgYm9yZGVyOiAxcHggc29saWQgI2RkZDsKICAgICAgICB9CgogICAgICAgIHRoLCB0ZCB7CiAgICAgICAgICAgIHBhZGRpbmc6IDhweCAxMnB4OwogICAgICAgICAgICB0ZXh0LWFsaWduOiBsZWZ0OwogICAgICAgIH0KCiAgICAgICAgdGggewogICAgICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjZjRmNGY0OwogICAgICAgIH0KCiAgICAgICAgY2FudmFzIHsKICAgICAgICAgICAgd2lkdGg6IDIwMHB4OwogICAgICAgICAgICBoZWlnaHQ6IDIwMHB4OwogICAgICAgIH0KCiAgICAgICAgLnRhYnMgewogICAgICAgICAgICBkaXNwbGF5OiBmbGV4OwogICAgICAgICAgICBtYXJnaW4tdG9wOiAyMHB4OwogICAgICAgICAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjsKICAgICAgICB9CgogICAgICAgIC50YWIgewogICAgICAgICAgICBwYWRkaW5nOiAxMHB4IDIwcHg7CiAgICAgICAgICAgIG1hcmdpbjogMCA1cHg7CiAgICAgICAgICAgIGN1cnNvcjogcG9pbnRlcjsKICAgICAgICAgICAgYm9yZGVyOiAxcHggc29saWQgI2RkZDsKICAgICAgICAgICAgYm9yZGVyLXJhZGl1czogNXB4OwogICAgICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjZjRmNGY0OwogICAgICAgICAgICB0ZXh0LWFsaWduOiBjZW50ZXI7CiAgICAgICAgfQoKICAgICAgICAudGFiOmhvdmVyIHsKICAgICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogI2RkZDsKICAgICAgICB9CgogICAgICAgIC50YWItY29udGVudCB7CiAgICAgICAgICAgIGRpc3BsYXk6IG5vbmU7CiAgICAgICAgICAgIG1hcmdpbi10b3A6IDIwcHg7CiAgICAgICAgICAgIHBhZGRpbmc6IDIwcHg7CiAgICAgICAgICAgIGJvcmRlcjogMXB4IHNvbGlkICNkZGQ7CiAgICAgICAgICAgIGJvcmRlci10b3A6IG5vbmU7CiAgICAgICAgfQoKICAgICAgICAuYWN0aXZlLXRhYiB7CiAgICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6ICNjY2M7CiAgICAgICAgfQoKICAgICAgICAuYWN0aXZlLWNvbnRlbnQgewogICAgICAgICAgICBkaXNwbGF5OiBibG9jazsKICAgICAgICB9CgogICAgICAgIC5hY3RpdmUtcm93IHsKICAgICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogI2UwZjdmYTsKICAgICAgICB9CgogICAgICAgIC8qIERhcmsgTW9kZSBTdHlsZXMgKi8KICAgICAgICAuZGFyay1tb2RlIHsKICAgICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogIzMzMzsKICAgICAgICAgICAgY29sb3I6ICNmZmY7CiAgICAgICAgfQoKICAgICAgICAuZGFyay1tb2RlIGhlYWRlciB7CiAgICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6ICM0NDQ7CiAgICAgICAgICAgIGNvbG9yOiAjZmZmOwogICAgICAgIH0KCiAgICAgICAgLmRhcmstbW9kZSAudGFiIHsKICAgICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogIzQ0NDsKICAgICAgICAgICAgY29sb3I6ICNmZmY7CiAgICAgICAgICAgIGJvcmRlcjogMXB4IHNvbGlkICM1NTU7CiAgICAgICAgfQoKICAgICAgICAuZGFyay1tb2RlIC50YWI6aG92ZXIgewogICAgICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjNTU1OwogICAgICAgIH0KCiAgICAgICAgLmRhcmstbW9kZSB0YWJsZSwgLmRhcmstbW9kZSB0aCwgLmRhcmstbW9kZSB0ZCB7CiAgICAgICAgICAgIGJvcmRlcjogMXB4IHNvbGlkICM1NTU7CiAgICAgICAgfQoKICAgICAgICAuZGFyay1tb2RlIHRoIHsKICAgICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogIzY2NjsKICAgICAgICB9CgogICAgICAgIC5kYXJrLW1vZGUgLnRhYi1jb250ZW50IHsKICAgICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogIzQ0NDsKICAgICAgICAgICAgY29sb3I6ICNmZmY7CiAgICAgICAgfQoKICAgICAgICAuZGFyay1tb2RlIC5hY3RpdmUtcm93IHsKICAgICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogIzU1NTsKICAgICAgICB9CgogICAgICAgIC8qIERhcmsgTW9kZSBCdXR0b24gKEljb24gdmVyc2lvbikgKi8KICAgICAgICAuZGFyay1tb2RlLXRvZ2dsZSB7CiAgICAgICAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTsKICAgICAgICAgICAgdG9wOiAyMHB4OwogICAgICAgICAgICByaWdodDogMjBweDsKICAgICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnQ7CiAgICAgICAgICAgIGJvcmRlcjogbm9uZTsKICAgICAgICAgICAgY3Vyc29yOiBwb2ludGVyOwogICAgICAgICAgICBmb250LXNpemU6IDI0cHg7CiAgICAgICAgICAgIGNvbG9yOiAjZmZmOwogICAgICAgICAgICB0cmFuc2l0aW9uOiBiYWNrZ3JvdW5kLWNvbG9yIDAuM3MgZWFzZSwgY29sb3IgMC4zcyBlYXNlOwogICAgICAgICAgICBkaXNwbGF5OiBmbGV4OwogICAgICAgICAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjsKICAgICAgICAgICAgYWxpZ24taXRlbXM6IGNlbnRlcjsKICAgICAgICAgICAgd2lkdGg6IDQwcHg7CiAgICAgICAgICAgIGhlaWdodDogNDBweDsKICAgICAgICAgICAgYm9yZGVyLXJhZGl1czogNTAlOwogICAgICAgICAgICBwYWRkaW5nOiA1cHg7CiAgICAgICAgfQoKICAgICAgICAvKiBMaWdodCBNb2RlIEljb24gKi8KICAgICAgICAuZGFyay1tb2RlLXRvZ2dsZS5saWdodC1tb2RlIGkgewogICAgICAgICAgICBjb2xvcjogI2ZmZWIzYjsgIC8qIFllbGxvdyBzdW4gaWNvbiBmb3IgbGlnaHQgbW9kZSAqLwogICAgICAgIH0KCiAgICAgICAgLyogSG92ZXIgRWZmZWN0IGZvciBMaWdodCBNb2RlIChTdW4pICovCiAgICAgICAgLmRhcmstbW9kZS10b2dnbGUubGlnaHQtbW9kZTpob3ZlciB7CiAgICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6ICNmZmY7CiAgICAgICAgfQoKICAgICAgICAuZGFyay1tb2RlLXRvZ2dsZS5saWdodC1tb2RlOmhvdmVyIGkgewogICAgICAgICAgICBjb2xvcjogI2ZmZWEwMDsgLyogTGlnaHRlciB5ZWxsb3cgd2hlbiBob3ZlcmVkICovCiAgICAgICAgfQoKICAgICAgICAvKiBEYXJrIE1vZGUgSWNvbiAoTW9vbikgKi8KICAgICAgICAuZGFyay1tb2RlLXRvZ2dsZS5kYXJrLW1vZGUgaSB7CiAgICAgICAgICAgIGNvbG9yOiAjZmZmOyAgLyogV2hpdGUgY3Jlc2NlbnQgaWNvbiBpbiBkYXJrIG1vZGUgKi8KICAgICAgICB9CgogICAgICAgIC8qIEhvdmVyIEVmZmVjdCBmb3IgRGFyayBNb2RlIChNb29uKSAqLwogICAgICAgIC5kYXJrLW1vZGUtdG9nZ2xlLmRhcmstbW9kZTpob3ZlciB7CiAgICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6ICM0NDQ7IC8qIEJsZW5kcyB3aXRoIHRoZSBkYXJrIGJhY2tncm91bmQgKi8KICAgICAgICB9CgogICAgICAgIC5kYXJrLW1vZGUtdG9nZ2xlLmRhcmstbW9kZTpob3ZlciBpIHsKICAgICAgICAgICAgY29sb3I6ICNmZmY7CiAgICAgICAgfQoKICAgICAgICAvKiBDaGFydC5qcyBMZWdlbmQgVGV4dCAoRGFyayBNb2RlIEZpeCkgKi8KICAgICAgICAuZGFyay1tb2RlIC5jaGFydGpzLWxlZ2VuZCBsaSB7CiAgICAgICAgICAgIGNvbG9yOiAjZmZmICFpbXBvcnRhbnQ7IC8qIEVuc3VyZSBsZWdlbmQgdGV4dCBpcyB2aXNpYmxlIGluIGRhcmsgbW9kZSAqLwogICAgICAgIH0KCiAgICAgICAgLyogIkJhY2sgdG8gVG9wIiBCdXR0b24gKi8KICAgICAgICAuYmFjay10by10b3AgewogICAgICAgICAgICBwb3NpdGlvbjogZml4ZWQ7CiAgICAgICAgICAgIGJvdHRvbTogMjBweDsKICAgICAgICAgICAgcmlnaHQ6IDIwcHg7CiAgICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6IHRyYW5zcGFyZW50OwogICAgICAgICAgICBib3JkZXI6IG5vbmU7CiAgICAgICAgICAgIGN1cnNvcjogcG9pbnRlcjsKICAgICAgICAgICAgZm9udC1zaXplOiAyNHB4OwogICAgICAgICAgICBjb2xvcjogI2ZmZjsKICAgICAgICAgICAgdHJhbnNpdGlvbjogYmFja2dyb3VuZC1jb2xvciAwLjNzIGVhc2UsIGNvbG9yIDAuM3MgZWFzZTsKICAgICAgICAgICAgZGlzcGxheTogZmxleDsKICAgICAgICAgICAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7CiAgICAgICAgICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7CiAgICAgICAgICAgIHdpZHRoOiA0MHB4OwogICAgICAgICAgICBoZWlnaHQ6IDQwcHg7CiAgICAgICAgICAgIGJvcmRlci1yYWRpdXM6IDUwJTsKICAgICAgICAgICAgcGFkZGluZzogNXB4OwogICAgICAgICAgICBvcGFjaXR5OiAwOyAvKiBJbml0aWFsbHkgaGlkZGVuICovCiAgICAgICAgICAgIHZpc2liaWxpdHk6IGhpZGRlbjsgLyogSW5pdGlhbGx5IGhpZGRlbiAqLwogICAgICAgICAgICB0cmFuc2l0aW9uOiBvcGFjaXR5IDAuM3MgZWFzZSwgdmlzaWJpbGl0eSAwLjNzIGVhc2U7CiAgICAgICAgfQoKICAgICAgICAuYmFjay10by10b3Auc2hvdyB7CiAgICAgICAgICAgIG9wYWNpdHk6IDE7CiAgICAgICAgICAgIHZpc2liaWxpdHk6IHZpc2libGU7CiAgICAgICAgfQoKICAgICAgICAuYmFjay10by10b3AgaSB7CiAgICAgICAgICAgIGNvbG9yOiAjMDBiY2Q0OyAvKiBMaWdodCBjeWFuIGNvbG9yIGZvciB0aGUgYXJyb3cgKi8KICAgICAgICB9CgogICAgICAgIC8qIEhvdmVyIEVmZmVjdCBmb3IgIkJhY2sgdG8gVG9wIiBCdXR0b24gKi8KICAgICAgICAuYmFjay10by10b3A6aG92ZXIgewogICAgICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjMDBiY2Q0OwogICAgICAgICAgICBjb2xvcjogI2ZmZjsKICAgICAgICB9CgogICAgICAgIC5iYWNrLXRvLXRvcDpob3ZlciBpIHsKICAgICAgICAgICAgdHJhbnNmb3JtOiBzY2FsZSgxLjEpOwogICAgICAgIH0KCiAgICA8L3N0eWxlPgo8L2hlYWQ+Cjxib2R5PgoKICAgIDxoZWFkZXI+VGFibGUgYW5kIFBpZSBDaGFydCB3aXRoIFRhYjwvaGVhZGVyPgogICAgPGRpdiBjbGFzcz0iY29udGFpbmVyIj4KICAgICAgICA8IS0tIFRhYmxlIFNlY3Rpb24gLS0+CiAgICAgICAgPGRpdiBjbGFzcz0idGFibGUtY29udGFpbmVyIj4KICAgICAgICAgICAgPHRhYmxlPgogICAgICAgICAgICAgICAgPHRoZWFkPgogICAgICAgICAgICAgICAgICAgIDx0cj4KICAgICAgICAgICAgICAgICAgICAgICAgPHRoPklEPC90aD4KICAgICAgICAgICAgICAgICAgICAgICAgPHRoPk5hbWU8L3RoPgogICAgICAgICAgICAgICAgICAgICAgICA8dGg+QWdlPC90aD4KICAgICAgICAgICAgICAgICAgICAgICAgPHRoPkNpdHk8L3RoPgogICAgICAgICAgICAgICAgICAgIDwvdHI+CiAgICAgICAgICAgICAgICA8L3RoZWFkPgogICAgICAgICAgICAgICAgPHRib2R5PgogICAgICAgICAgICAgICAgICAgICVUQUJMRV9ST1dTJQogICAgICAgICAgICAgICAgPC90Ym9keT4KICAgICAgICAgICAgPC90YWJsZT4KICAgICAgICA8L2Rpdj4KCiAgICAgICAgPCEtLSBQaWUgQ2hhcnQgU2VjdGlvbiAtLT4KICAgICAgICA8ZGl2IGNsYXNzPSJjaGFydC1jb250YWluZXIiPgogICAgICAgICAgICA8Y2FudmFzIGlkPSJwaWVDaGFydCI+PC9jYW52YXM+CiAgICAgICAgPC9kaXY+CiAgICA8L2Rpdj4KCiAgICA8IS0tIFRhYnMgU2VjdGlvbiAtLT4KICAgIDxkaXYgY2xhc3M9InRhYnMiPgogICAgICAgICVUQUJTJQogICAgPC9kaXY+CgogICAgPCEtLSBUYWIgQ29udGVudCAtLT4KICAgICVUQUJfQ09OVEVOVFMlCgogICAgPCEtLSBEYXJrIE1vZGUgVG9nZ2xlIEJ1dHRvbiAtLT4KICAgIDxidXR0b24gaWQ9ImRhcmtNb2RlVG9nZ2xlIiBjbGFzcz0iZGFyay1tb2RlLXRvZ2dsZSBsaWdodC1tb2RlIj4KICAgICAgICA8aSBjbGFzcz0iZmFzIGZhLXN1biI+PC9pPgogICAgPC9idXR0b24+CgogICAgPCEtLSBCYWNrIHRvIFRvcCBCdXR0b24gLS0+CiAgICA8YnV0dG9uIGNsYXNzPSJiYWNrLXRvLXRvcCIgaWQ9ImJhY2tUb1RvcEJ0biI+CiAgICAgICAgPGkgY2xhc3M9ImZhcyBmYS1hcnJvdy11cCI+PC9pPgogICAgPC9idXR0b24+CgogICAgPHNjcmlwdD4KICAgICAgLy8gUGllIENoYXJ0IERhdGEKICAgICAgICBjb25zdCBkYXRhID0gewogICAgICAgICAgICBsYWJlbHM6IFsnUmVkJywgJ0JsdWUnLCAnWWVsbG93JywgJ0dyZWVuJywgJ1B1cnBsZSddLAogICAgICAgICAgICBkYXRhc2V0czogW3sKICAgICAgICAgICAgICAgIGRhdGE6IFszMDAsIDUwLCAxMDAsIDQwLCAxMjBdLAogICAgICAgICAgICAgICAgaG92ZXJPZmZzZXQ6IDQKICAgICAgICAgICAgfV0KICAgICAgICB9OwoKICAgICAgICBjb25zdCBjb25maWcgPSB7CiAgICAgICAgICAgIHR5cGU6ICdwaWUnLAogICAgICAgICAgICBkYXRhOiBkYXRhLAogICAgICAgICAgICBvcHRpb25zOiB7CiAgICAgICAgICAgICAgICByZXNwb25zaXZlOiB0cnVlLAogICAgICAgICAgICAgICAgbWFpbnRhaW5Bc3BlY3RSYXRpbzogZmFsc2UsCiAgICAgICAgICAgICAgICBhbmltYXRpb246IHsKICAgICAgICAgICAgICAgICAgICBkdXJhdGlvbjogMTUwMCwKICAgICAgICAgICAgICAgICAgICBlYXNpbmc6ICdlYXNlSW5PdXRDdWJpYycsCiAgICAgICAgICAgICAgICAgICAgYW5pbWF0ZVJvdGF0ZTogdHJ1ZSwKICAgICAgICAgICAgICAgICAgICBhbmltYXRlU2NhbGU6IHRydWUsCiAgICAgICAgICAgICAgICB9LAogICAgICAgICAgICAgICAgcGx1Z2luczogewogICAgICAgICAgICAgICAgICAgIGxlZ2VuZDogewogICAgICAgICAgICAgICAgICAgICAgICBwb3NpdGlvbjogJ3RvcCcsCiAgICAgICAgICAgICAgICAgICAgICAgIGxhYmVsczogewogICAgICAgICAgICAgICAgICAgICAgICAgICAgY29sb3I6ICcjMzMzJywKICAgICAgICAgICAgICAgICAgICAgICAgfQogICAgICAgICAgICAgICAgICAgIH0sCiAgICAgICAgICAgICAgICAgICAgZGF0YWxhYmVsczogewogICAgICAgICAgICAgICAgICAgICAgICBhbmNob3I6ICdjZW50ZXInLAogICAgICAgICAgICAgICAgICAgICAgICBhbGlnbjogJ2NlbnRlcicsCiAgICAgICAgICAgICAgICAgICAgICAgIGZvbnQ6IHsKICAgICAgICAgICAgICAgICAgICAgICAgICAgIHdlaWdodDogJ2JvbGQnLAogICAgICAgICAgICAgICAgICAgICAgICAgICAgc2l6ZTogMTQsCiAgICAgICAgICAgICAgICAgICAgICAgIH0sCiAgICAgICAgICAgICAgICAgICAgICAgIGNvbG9yOiAnI2ZmZicsCiAgICAgICAgICAgICAgICAgICAgICAgIGZvcm1hdHRlcjogKHZhbHVlLCBjb250ZXh0KSA9PiB7CiAgICAgICAgICAgICAgICAgICAgICAgICAgICBsZXQgdG90YWwgPSBjb250ZXh0LmRhdGFzZXQuX21ldGFbT2JqZWN0LmtleXMoY29udGV4dC5kYXRhc2V0Ll9tZXRhKVswXV0udG90YWw7CiAgICAgICAgICAgICAgICAgICAgICAgICAgICBsZXQgcGVyY2VudGFnZSA9ICgodmFsdWUgLyB0b3RhbCkgKiAxMDApLnRvRml4ZWQoMSk7CiAgICAgICAgICAgICAgICAgICAgICAgICAgICByZXR1cm4gYCR7dmFsdWV9ICgke3BlcmNlbnRhZ2V9JSlgOwogICAgICAgICAgICAgICAgICAgICAgICB9CiAgICAgICAgICAgICAgICAgICAgfQogICAgICAgICAgICAgICAgfQogICAgICAgICAgICB9CiAgICAgICAgfTsKICAgICAgICBjb25zdCBwaWVDaGFydCA9IG5ldyBDaGFydChkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgncGllQ2hhcnQnKSwgY29uZmlnKTsKCQkvLyBEYXJrIE1vZGUgRml4IGZvciBDaGFydC5qcyBMZWdlbmQgVGV4dAoJCWNvbnN0IHVwZGF0ZUNoYXJ0TGVnZW5kRm9yRGFya01vZGUgPSAoKSA9PiB7CgkJCWlmIChkb2N1bWVudC5ib2R5LmNsYXNzTGlzdC5jb250YWlucygnZGFyay1tb2RlJykpIHsKCQkJCS8vIENoYW5nZSB0aGUgbGVnZW5kIGxhYmVsIGNvbG9yIHRvIHdoaXRlIGluIGRhcmsgbW9kZQoJCQkJcGllQ2hhcnQub3B0aW9ucy5wbHVnaW5zLmxlZ2VuZC5sYWJlbHMuY29sb3IgPSAnI2ZmZic7CgkJCQlwaWVDaGFydC51cGRhdGUoKTsKCQkJfSBlbHNlIHsKCQkJCS8vIFJlc2V0IHRoZSBsZWdlbmQgbGFiZWwgY29sb3IgdG8gYmxhY2sgZm9yIGxpZ2h0IG1vZGUKCQkJCXBpZUNoYXJ0Lm9wdGlvbnMucGx1Z2lucy5sZWdlbmQubGFiZWxzLmNvbG9yID0gJyMzMzMnOwoJCQkJcGllQ2hhcnQudXBkYXRlKCk7CgkJCX0KCQl9OwoJCQogICAgICAgIC8vIFNjcm9sbCB0byB0b3AgZnVuY3Rpb25hbGl0eQogICAgICAgIGNvbnN0IGJhY2tUb1RvcEJ0biA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdiYWNrVG9Ub3BCdG4nKTsKCiAgICAgICAgd2luZG93Lm9uc2Nyb2xsID0gKCkgPT4gewogICAgICAgICAgICBpZiAoZG9jdW1lbnQuYm9keS5zY3JvbGxUb3AgPiAxMDAgfHwgZG9jdW1lbnQuZG9jdW1lbnRFbGVtZW50LnNjcm9sbFRvcCA+IDEwMCkgewogICAgICAgICAgICAgICAgYmFja1RvVG9wQnRuLmNsYXNzTGlzdC5hZGQoJ3Nob3cnKTsKICAgICAgICAgICAgfSBlbHNlIHsKICAgICAgICAgICAgICAgIGJhY2tUb1RvcEJ0bi5jbGFzc0xpc3QucmVtb3ZlKCdzaG93Jyk7CiAgICAgICAgICAgIH0KICAgICAgICB9OwoKICAgICAgICBiYWNrVG9Ub3BCdG4ub25jbGljayA9ICgpID0+IHsKICAgICAgICAgICAgd2luZG93LnNjcm9sbFRvKHsKICAgICAgICAgICAgICAgIHRvcDogMCwKICAgICAgICAgICAgICAgIGJlaGF2aW9yOiAnc21vb3RoJwogICAgICAgICAgICB9KTsKICAgICAgICB9OwoKICAgICAgICAvLyBUYWIgU3dpdGNoaW5nIEZ1bmN0aW9uYWxpdHkgd2l0aCBUYWJsZSBSb3cgU3luYwogICAgICAgIGNvbnN0IHRhYnMgPSBkb2N1bWVudC5xdWVyeVNlbGVjdG9yQWxsKCcudGFiJyk7CiAgICAgICAgY29uc3QgY29udGVudHMgPSBkb2N1bWVudC5xdWVyeVNlbGVjdG9yQWxsKCcudGFiLWNvbnRlbnQnKTsKICAgICAgICBjb25zdCB0YWJsZVJvd3MgPSBkb2N1bWVudC5xdWVyeVNlbGVjdG9yQWxsKCd0Ym9keSB0cicpOwoKICAgICAgICB0YWJzLmZvckVhY2godGFiID0+IHsKICAgICAgICAgICAgdGFiLmFkZEV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgKCkgPT4gewogICAgICAgICAgICAgICAgY29uc3QgdGFyZ2V0VGFiID0gdGFiLmdldEF0dHJpYnV0ZSgnZGF0YS10YWInKTsKICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgLy8gSGlkZSBhbGwgdGFiIGNvbnRlbnRzCiAgICAgICAgICAgICAgICBjb250ZW50cy5mb3JFYWNoKGNvbnRlbnQgPT4gY29udGVudC5jbGFzc0xpc3QucmVtb3ZlKCdhY3RpdmUtY29udGVudCcpKTsKICAgICAgICAgICAgICAgIHRhYnMuZm9yRWFjaCh0YWIgPT4gdGFiLmNsYXNzTGlzdC5yZW1vdmUoJ2FjdGl2ZS10YWInKSk7CiAgICAgICAgICAgICAgICB0YWJsZVJvd3MuZm9yRWFjaChyb3cgPT4gcm93LmNsYXNzTGlzdC5yZW1vdmUoJ2FjdGl2ZS1yb3cnKSk7CiAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgIC8vIFNob3cgdGhlIGNsaWNrZWQgdGFiIGNvbnRlbnQKICAgICAgICAgICAgICAgIGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKHRhcmdldFRhYikuY2xhc3NMaXN0LmFkZCgnYWN0aXZlLWNvbnRlbnQnKTsKICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgLy8gTWFyayB0aGUgY2xpY2tlZCB0YWIgYXMgYWN0aXZlCiAgICAgICAgICAgICAgICB0YWIuY2xhc3NMaXN0LmFkZCgnYWN0aXZlLXRhYicpOwogICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAvLyBIaWdobGlnaHQgdGhlIGNvcnJlc3BvbmRpbmcgdGFibGUgcm93CiAgICAgICAgICAgICAgICBjb25zdCBjb3JyZXNwb25kaW5nUm93ID0gZG9jdW1lbnQucXVlcnlTZWxlY3RvcihgdHJbZGF0YS10YWI9IiR7dGFyZ2V0VGFifSJdYCk7CiAgICAgICAgICAgICAgICBjb3JyZXNwb25kaW5nUm93LmNsYXNzTGlzdC5hZGQoJ2FjdGl2ZS1yb3cnKTsKICAgICAgICAgICAgfSk7CiAgICAgICAgfSk7CgogICAgICAgIC8vIFRhYmxlIFJvdyBDbGljayB0byBPcGVuIENvcnJlc3BvbmRpbmcgVGFiCiAgICAgICAgdGFibGVSb3dzLmZvckVhY2gocm93ID0+IHsKICAgICAgICAgICAgcm93LmFkZEV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgKCkgPT4gewogICAgICAgICAgICAgICAgY29uc3QgdGFyZ2V0VGFiID0gcm93LmdldEF0dHJpYnV0ZSgnZGF0YS10YWInKTsKICAgICAgICAgICAgICAgIGNvbnN0IHRhYiA9IGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoYC50YWJbZGF0YS10YWI9IiR7dGFyZ2V0VGFifSJdYCk7CgogICAgICAgICAgICAgICAgLy8gVHJpZ2dlciB0aGUgdGFiIGNsaWNrIHRvIGhpZ2hsaWdodCB0aGUgdGFiIGFuZCByb3cKICAgICAgICAgICAgICAgIHRhYi5jbGljaygpOwogICAgICAgICAgICB9KTsKICAgICAgICB9KTsKCiAgICAgICAgLy8gRGFyayBNb2RlIFRvZ2dsZSBGdW5jdGlvbmFsaXR5CiAgICAgICAgY29uc3QgdG9nZ2xlQnV0dG9uID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2RhcmtNb2RlVG9nZ2xlJyk7CiAgICAgICAgdG9nZ2xlQnV0dG9uLmFkZEV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgKCkgPT4gewogICAgICAgICAgICBkb2N1bWVudC5ib2R5LmNsYXNzTGlzdC50b2dnbGUoJ2RhcmstbW9kZScpOwoJCQl1cGRhdGVDaGFydExlZ2VuZEZvckRhcmtNb2RlKCk7CiAgICAgICAgICAgIGNvbnN0IGljb24gPSBkb2N1bWVudC5xdWVyeVNlbGVjdG9yKCcuZGFyay1tb2RlLXRvZ2dsZSBpJyk7CiAgICAgICAgICAgIGlmIChkb2N1bWVudC5ib2R5LmNsYXNzTGlzdC5jb250YWlucygnZGFyay1tb2RlJykpIHsKICAgICAgICAgICAgICAgIGljb24uY2xhc3NMaXN0LnJlbW92ZSgnZmEtc3VuJyk7CiAgICAgICAgICAgICAgICBpY29uLmNsYXNzTGlzdC5hZGQoJ2ZhLW1vb24nKTsKICAgICAgICAgICAgICAgIHRvZ2dsZUJ1dHRvbi5jbGFzc0xpc3QucmVtb3ZlKCdsaWdodC1tb2RlJyk7CiAgICAgICAgICAgICAgICB0b2dnbGVCdXR0b24uY2xhc3NMaXN0LmFkZCgnZGFyay1tb2RlJyk7CiAgICAgICAgICAgIH0gZWxzZSB7CiAgICAgICAgICAgICAgICBpY29uLmNsYXNzTGlzdC5yZW1vdmUoJ2ZhLW1vb24nKTsKICAgICAgICAgICAgICAgIGljb24uY2xhc3NMaXN0LmFkZCgnZmEtc3VuJyk7CiAgICAgICAgICAgICAgICB0b2dnbGVCdXR0b24uY2xhc3NMaXN0LnJlbW92ZSgnZGFyay1tb2RlJyk7CiAgICAgICAgICAgICAgICB0b2dnbGVCdXR0b24uY2xhc3NMaXN0LmFkZCgnbGlnaHQtbW9kZScpOwogICAgICAgICAgICB9CiAgICAgICAgfSk7CiAgICA8L3NjcmlwdD4KPC9ib2R5Pgo8L2h0bWw+CkhUTUwKCiMgU2FtcGxlIGRhdGEgZm9yIHRoZSB0YWJsZSAoY2FuIGJlIGR5bmFtaWMpCm15IEB0YWJsZV9kYXRhID0gKAogICAgeyBpZCA9PiAxLCBuYW1lID0+ICJKb2huIERvZSIsIGFnZSA9PiAyOCwgY2l0eSA9PiAiTmV3IFlvcmsiIH0sCiAgICB7IGlkID0+IDIsIG5hbWUgPT4gIkphbmUgU21pdGgiLCBhZ2UgPT4gMzQsIGNpdHkgPT4gIkxvcyBBbmdlbGVzIiB9LAogICAgeyBpZCA9PiAzLCBuYW1lID0+ICJTYW0gSm9obnNvbiIsIGFnZSA9PiAyNSwgY2l0eSA9PiAiQ2hpY2FnbyIgfSwKKTsKCiMgR2VuZXJhdGUgdGFibGUgcm93cwpteSAkdGFibGVfcm93cyA9ICcnOwpmb3JlYWNoIG15ICRyb3cgKEB0YWJsZV9kYXRhKSB7CiAgICAkdGFibGVfcm93cyAuPSAiPHRyIGRhdGEtdGFiPVwidGFiJHJvdy0+e2lkfVwiPlxuIjsKICAgICR0YWJsZV9yb3dzIC49ICI8dGQgY2xhc3M9XCJ0YWItaWRcIj4kcm93LT57aWR9PC90ZD5cbiI7CiAgICAkdGFibGVfcm93cyAuPSAiPHRkPiRyb3ctPntuYW1lfTwvdGQ+XG4iOwogICAgJHRhYmxlX3Jvd3MgLj0gIjx0ZD4kcm93LT57YWdlfTwvdGQ+XG4iOwogICAgJHRhYmxlX3Jvd3MgLj0gIjx0ZD4kcm93LT57Y2l0eX08L3RkPlxuIjsKICAgICR0YWJsZV9yb3dzIC49ICI8L3RyPlxuIjsKfQoKIyBHZW5lcmF0ZSB0YWJzCm15ICR0YWJzID0gJyc7CmZvciAobXkgJGkgPSAxOyAkaSA8PSA3OyAkaSsrKSB7CiAgICAkdGFicyAuPSAiPGRpdiBjbGFzcz1cInRhYlwiIGRhdGEtdGFiPVwidGFiJGlcIj5UYWIgJGk8L2Rpdj5cbiI7Cn0KCiMgR2VuZXJhdGUgdGFiIGNvbnRlbnRzCm15ICR0YWJfY29udGVudHMgPSAnJzsKZm9yIChteSAkaSA9IDE7ICRpIDw9IDc7ICRpKyspIHsKICAgICR0YWJfY29udGVudHMgLj0gIjxkaXYgY2xhc3M9XCJ0YWItY29udGVudFwiIGlkPVwidGFiJGlcIj5cbiI7CiAgICAkdGFiX2NvbnRlbnRzIC49ICI8cD5UaGlzIGlzIGNvbnRlbnQgZm9yIFRhYiAkaS48L3A+XG4iOwogICAgJHRhYl9jb250ZW50cyAuPSAiPC9kaXY+XG4iOwp9CgojIFJlcGxhY2UgcGxhY2Vob2xkZXJzIGluIHRoZSB0ZW1wbGF0ZQokaHRtbF90ZW1wbGF0ZSA9fiBzLyVUQUJMRV9ST1dTJS8kdGFibGVfcm93cy9nOwokaHRtbF90ZW1wbGF0ZSA9fiBzLyVUQUJTJS8kdGFicy9nOwokaHRtbF90ZW1wbGF0ZSA9fiBzLyVUQUJfQ09OVEVOVFMlLyR0YWJfY29udGVudHMvZzsKCiMgT3V0cHV0IHRoZSBmaW5hbCBIVE1MCnByaW50IGhlYWRlcigtdHlwZSA9PiAndGV4dC9odG1sJywgLWNoYXJzZXQgPT4gJ1VURi04Jyk7CnByaW50ICRodG1sX3RlbXBsYXRlOwo=

Success #stdin #stdout 0.04s 9256KB

stdin

copy

Standard input is empty

stdout

copy

Content-Type: text/html; charset=UTF-8

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table and Pie Chart with Tabs</title>
    <link rel="stylesheet" href="https://c...content-available-to-author-only...e.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <script src="https://c...content-available-to-author-only...r.net/npm/chart.js"></script>
    <script src="https://c...content-available-to-author-only...r.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
    <style>
        /* Default Light Mode */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
            color: #333;
            transition: all 0.3s ease;
        }

        header {
            width: 100%;
            text-align: center;
            padding: 20px 0;
            font-size: 24px;
            font-weight: bold;
            background-color: #fff;
            color: #333;
        }

        .container {
            display: flex;
            justify-content: space-between;
            padding: 20px;
        }

        .table-container {
            flex: 1;
            margin-right: 20px;
        }

        .chart-container {
            width: 400px;
            height: 400px;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }

        table, th, td {
            border: 1px solid #ddd;
        }

        th, td {
            padding: 8px 12px;
            text-align: left;
        }

        th {
            background-color: #f4f4f4;
        }

        canvas {
            width: 200px;
            height: 200px;
        }

        .tabs {
            display: flex;
            margin-top: 20px;
            justify-content: center;
        }

        .tab {
            padding: 10px 20px;
            margin: 0 5px;
            cursor: pointer;
            border: 1px solid #ddd;
            border-radius: 5px;
            background-color: #f4f4f4;
            text-align: center;
        }

        .tab:hover {
            background-color: #ddd;
        }

        .tab-content {
            display: none;
            margin-top: 20px;
            padding: 20px;
            border: 1px solid #ddd;
            border-top: none;
        }

        .active-tab {
            background-color: #ccc;
        }

        .active-content {
            display: block;
        }

        .active-row {
            background-color: #e0f7fa;
        }

        /* Dark Mode Styles */
        .dark-mode {
            background-color: #333;
            color: #fff;
        }

        .dark-mode header {
            background-color: #444;
            color: #fff;
        }

        .dark-mode .tab {
            background-color: #444;
            color: #fff;
            border: 1px solid #555;
        }

        .dark-mode .tab:hover {
            background-color: #555;
        }

        .dark-mode table, .dark-mode th, .dark-mode td {
            border: 1px solid #555;
        }

        .dark-mode th {
            background-color: #666;
        }

        .dark-mode .tab-content {
            background-color: #444;
            color: #fff;
        }

        .dark-mode .active-row {
            background-color: #555;
        }

        /* Dark Mode Button (Icon version) */
        .dark-mode-toggle {
            position: absolute;
            top: 20px;
            right: 20px;
            background-color: transparent;
            border: none;
            cursor: pointer;
            font-size: 24px;
            color: #fff;
            transition: background-color 0.3s ease, color 0.3s ease;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            padding: 5px;
        }

        /* Light Mode Icon */
        .dark-mode-toggle.light-mode i {
            color: #ffeb3b;  /* Yellow sun icon for light mode */
        }

        /* Hover Effect for Light Mode (Sun) */
        .dark-mode-toggle.light-mode:hover {
            background-color: #fff;
        }

        .dark-mode-toggle.light-mode:hover i {
            color: #ffea00; /* Lighter yellow when hovered */
        }

        /* Dark Mode Icon (Moon) */
        .dark-mode-toggle.dark-mode i {
            color: #fff;  /* White crescent icon in dark mode */
        }

        /* Hover Effect for Dark Mode (Moon) */
        .dark-mode-toggle.dark-mode:hover {
            background-color: #444; /* Blends with the dark background */
        }

        .dark-mode-toggle.dark-mode:hover i {
            color: #fff;
        }

        /* Chart.js Legend Text (Dark Mode Fix) */
        .dark-mode .chartjs-legend li {
            color: #fff !important; /* Ensure legend text is visible in dark mode */
        }

        /* "Back to Top" Button */
        .back-to-top {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background-color: transparent;
            border: none;
            cursor: pointer;
            font-size: 24px;
            color: #fff;
            transition: background-color 0.3s ease, color 0.3s ease;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            padding: 5px;
            opacity: 0; /* Initially hidden */
            visibility: hidden; /* Initially hidden */
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }

        .back-to-top.show {
            opacity: 1;
            visibility: visible;
        }

        .back-to-top i {
            color: #00bcd4; /* Light cyan color for the arrow */
        }

        /* Hover Effect for "Back to Top" Button */
        .back-to-top:hover {
            background-color: #00bcd4;
            color: #fff;
        }

        .back-to-top:hover i {
            transform: scale(1.1);
        }

    </style>
</head>
<body>

    <header>Table and Pie Chart with Tab</header>
    <div class="container">
        <!-- Table Section -->
        <div class="table-container">
            <table>
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Name</th>
                        <th>Age</th>
                        <th>City</th>
                    </tr>
                </thead>
                <tbody>
                    <tr data-tab="tab1">
<td class="tab-id">1</td>
<td>John Doe</td>
<td>28</td>
<td>New York</td>
</tr>
<tr data-tab="tab2">
<td class="tab-id">2</td>
<td>Jane Smith</td>
<td>34</td>
<td>Los Angeles</td>
</tr>
<tr data-tab="tab3">
<td class="tab-id">3</td>
<td>Sam Johnson</td>
<td>25</td>
<td>Chicago</td>
</tr>

                </tbody>
            </table>
        </div>

        <!-- Pie Chart Section -->
        <div class="chart-container">
            <canvas id="pieChart"></canvas>
        </div>
    </div>

    <!-- Tabs Section -->
    <div class="tabs">
        <div class="tab" data-tab="tab1">Tab 1</div>
<div class="tab" data-tab="tab2">Tab 2</div>
<div class="tab" data-tab="tab3">Tab 3</div>
<div class="tab" data-tab="tab4">Tab 4</div>
<div class="tab" data-tab="tab5">Tab 5</div>
<div class="tab" data-tab="tab6">Tab 6</div>
<div class="tab" data-tab="tab7">Tab 7</div>

    </div>

    <!-- Tab Content -->
    <div class="tab-content" id="tab1">
<p>This is content for Tab 1.</p>
</div>
<div class="tab-content" id="tab2">
<p>This is content for Tab 2.</p>
</div>
<div class="tab-content" id="tab3">
<p>This is content for Tab 3.</p>
</div>
<div class="tab-content" id="tab4">
<p>This is content for Tab 4.</p>
</div>
<div class="tab-content" id="tab5">
<p>This is content for Tab 5.</p>
</div>
<div class="tab-content" id="tab6">
<p>This is content for Tab 6.</p>
</div>
<div class="tab-content" id="tab7">
<p>This is content for Tab 7.</p>
</div>


    <!-- Dark Mode Toggle Button -->
    <button id="darkModeToggle" class="dark-mode-toggle light-mode">
        <i class="fas fa-sun"></i>
    </button>

    <!-- Back to Top Button -->
    <button class="back-to-top" id="backToTopBtn">
        <i class="fas fa-arrow-up"></i>
    </button>

    <script>
      // Pie Chart Data
        const data = {
            labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple'],
            datasets: [{
                data: [300, 50, 100, 40, 120],
                hoverOffset: 4
            }]
        };

        const config = {
            type: 'pie',
            data: data,
            options: {
                responsive: true,
                maintainAspectRatio: false,
                animation: {
                    duration: 1500,
                    easing: 'easeInOutCubic',
                    animateRotate: true,
                    animateScale: true,
                },
                plugins: {
                    legend: {
                        position: 'top',
                        labels: {
                            color: '#333',
                        }
                    },
                    datalabels: {
                        anchor: 'center',
                        align: 'center',
                        font: {
                            weight: 'bold',
                            size: 14,
                        },
                        color: '#fff',
                        formatter: (value, context) => {
                            let total = context.dataset._meta[Object.keys(context.dataset._meta)[0]].total;
                            let percentage = ((value / total) * 100).toFixed(1);
                            return `${value} (${percentage}%)`;
                        }
                    }
                }
            }
        };
        const pieChart = new Chart(document.getElementById('pieChart'), config);
		// Dark Mode Fix for Chart.js Legend Text
		const updateChartLegendForDarkMode = () => {
			if (document.body.classList.contains('dark-mode')) {
				// Change the legend label color to white in dark mode
				pieChart.options.plugins.legend.labels.color = '#fff';
				pieChart.update();
			} else {
				// Reset the legend label color to black for light mode
				pieChart.options.plugins.legend.labels.color = '#333';
				pieChart.update();
			}
		};
		
        // Scroll to top functionality
        const backToTopBtn = document.getElementById('backToTopBtn');

        window.onscroll = () => {
            if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
                backToTopBtn.classList.add('show');
            } else {
                backToTopBtn.classList.remove('show');
            }
        };

        backToTopBtn.onclick = () => {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        };

        // Tab Switching Functionality with Table Row Sync
        const tabs = document.querySelectorAll('.tab');
        const contents = document.querySelectorAll('.tab-content');
        const tableRows = document.querySelectorAll('tbody tr');

        tabs.forEach(tab => {
            tab.addEventListener('click', () => {
                const targetTab = tab.getAttribute('data-tab');
                
                // Hide all tab contents
                contents.forEach(content => content.classList.remove('active-content'));
                tabs.forEach(tab => tab.classList.remove('active-tab'));
                tableRows.forEach(row => row.classList.remove('active-row'));
                
                // Show the clicked tab content
                document.getElementById(targetTab).classList.add('active-content');
                
                // Mark the clicked tab as active
                tab.classList.add('active-tab');
                
                // Highlight the corresponding table row
                const correspondingRow = document.querySelector(`tr[data-tab="${targetTab}"]`);
                correspondingRow.classList.add('active-row');
            });
        });

        // Table Row Click to Open Corresponding Tab
        tableRows.forEach(row => {
            row.addEventListener('click', () => {
                const targetTab = row.getAttribute('data-tab');
                const tab = document.querySelector(`.tab[data-tab="${targetTab}"]`);

                // Trigger the tab click to highlight the tab and row
                tab.click();
            });
        });

        // Dark Mode Toggle Functionality
        const toggleButton = document.getElementById('darkModeToggle');
        toggleButton.addEventListener('click', () => {
            document.body.classList.toggle('dark-mode');
			updateChartLegendForDarkMode();
            const icon = document.querySelector('.dark-mode-toggle i');
            if (document.body.classList.contains('dark-mode')) {
                icon.classList.remove('fa-sun');
                icon.classList.add('fa-moon');
                toggleButton.classList.remove('light-mode');
                toggleButton.classList.add('dark-mode');
            } else {
                icon.classList.remove('fa-moon');
                icon.classList.add('fa-sun');
                toggleButton.classList.remove('dark-mode');
                toggleButton.classList.add('light-mode');
            }
        });
    </script>
</body>
</html>

https://ideone.com/pmT7BB

language:

Perl (perl 5.28.1)

created:

visibility:

public

Share or Embed source code

Discover > Sphere Engine API

The brand new service which powers Ideone!

Discover > IDE Widget

Widget for compiling and running the source code in a web browser!

Discover > Sphere Engine API

Discover > IDE Widget

Choose your language