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">
    <!-- Removed Chart.js, added Google Charts -->
    <script type="text/javascript" src="https://w...content-available-to-author-only...c.com/charts/loader.js"></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: 100%;
            height: 400px;  /* Updated height to make chart more flexible */
        }
 
        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 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 */
        }
 
        /* "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">
            <!-- This is where the Google Pie Chart will be rendered -->
            <div id="pieChart"></div>
        </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 type="text/javascript">
        // Load Google Charts library
        google.charts.load('current', {
            packages: ['corechart', 'piechart']
        });
 
        google.charts.setOnLoadCallback(drawChart);
 
        // Pie Chart Data and Options
        function drawChart() {
            var data = google.visualization.arrayToDataTable([
                ['Category', 'Value'],
                ['Red', 300],
                ['Blue', 50],
                ['Yellow', 100],
                ['Green', 40],
                ['Purple', 120]
            ]);
 
            var options = {
                title: 'Pie Chart Example',
                is3D: false,
                slices: {
                    0: {offset: 0.1},
                    1: {offset: 0.1},
                    2: {offset: 0.1},
                    3: {offset: 0.1},
                    4: {offset: 0.1}
                },
                legend: { position: 'top' }
            };
 
            var chart = new google.visualization.PieChart(document.getElementById('pieChart'));
            chart.draw(data, options);
        }
 
        // Dark Mode Toggle Functionality (Same as before)
        const toggleButton = document.getElementById('darkModeToggle');
        toggleButton.addEventListener('click', () => {
            document.body.classList.toggle('dark-mode');
            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+CjxoZWFkPgogICAgPG1ldGEgY2hhcnNldD0iVVRGLTgiPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiPgogICAgPHRpdGxlPlRhYmxlIGFuZCBQaWUgQ2hhcnQgd2l0aCBUYWJzPC90aXRsZT4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaHR0cHM6Ly9jLi4uY29udGVudC1hdmFpbGFibGUtdG8tYXV0aG9yLW9ubHkuLi5lLmNvbS9hamF4L2xpYnMvZm9udC1hd2Vzb21lLzUuMTUuMy9jc3MvYWxsLm1pbi5jc3MiPgogICAgPCEtLSBSZW1vdmVkIENoYXJ0LmpzLCBhZGRlZCBHb29nbGUgQ2hhcnRzIC0tPgogICAgPHNjcmlwdCB0eXBlPSJ0ZXh0L2phdmFzY3JpcHQiIHNyYz0iaHR0cHM6Ly93Li4uY29udGVudC1hdmFpbGFibGUtdG8tYXV0aG9yLW9ubHkuLi5jLmNvbS9jaGFydHMvbG9hZGVyLmpzIj48L3NjcmlwdD4KICAgIDxzdHlsZT4KICAgICAgICAvKiBEZWZhdWx0IExpZ2h0IE1vZGUgKi8KICAgICAgICBib2R5IHsKICAgICAgICAgICAgZm9udC1mYW1pbHk6IEFyaWFsLCBzYW5zLXNlcmlmOwogICAgICAgICAgICBtYXJnaW46IDA7CiAgICAgICAgICAgIHBhZGRpbmc6IDA7CiAgICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6ICNmNGY0ZjQ7CiAgICAgICAgICAgIGNvbG9yOiAjMzMzOwogICAgICAgICAgICB0cmFuc2l0aW9uOiBhbGwgMC4zcyBlYXNlOwogICAgICAgIH0KCiAgICAgICAgaGVhZGVyIHsKICAgICAgICAgICAgd2lkdGg6IDEwMCU7CiAgICAgICAgICAgIHRleHQtYWxpZ246IGNlbnRlcjsKICAgICAgICAgICAgcGFkZGluZzogMjBweCAwOwogICAgICAgICAgICBmb250LXNpemU6IDI0cHg7CiAgICAgICAgICAgIGZvbnQtd2VpZ2h0OiBib2xkOwogICAgICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmOwogICAgICAgICAgICBjb2xvcjogIzMzMzsKICAgICAgICB9CgogICAgICAgIC5jb250YWluZXIgewogICAgICAgICAgICBkaXNwbGF5OiBmbGV4OwogICAgICAgICAgICBqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWJldHdlZW47CiAgICAgICAgICAgIHBhZGRpbmc6IDIwcHg7CiAgICAgICAgfQoKICAgICAgICAudGFibGUtY29udGFpbmVyIHsKICAgICAgICAgICAgZmxleDogMTsKICAgICAgICAgICAgbWFyZ2luLXJpZ2h0OiAyMHB4OwogICAgICAgIH0KCiAgICAgICAgLmNoYXJ0LWNvbnRhaW5lciB7CiAgICAgICAgICAgIHdpZHRoOiAxMDAlOwogICAgICAgICAgICBoZWlnaHQ6IDQwMHB4OyAgLyogVXBkYXRlZCBoZWlnaHQgdG8gbWFrZSBjaGFydCBtb3JlIGZsZXhpYmxlICovCiAgICAgICAgfQoKICAgICAgICB0YWJsZSB7CiAgICAgICAgICAgIHdpZHRoOiAxMDAlOwogICAgICAgICAgICBib3JkZXItY29sbGFwc2U6IGNvbGxhcHNlOwogICAgICAgICAgICBtYXJnaW4tYm90dG9tOiAyMHB4OwogICAgICAgIH0KCiAgICAgICAgdGFibGUsIHRoLCB0ZCB7CiAgICAgICAgICAgIGJvcmRlcjogMXB4IHNvbGlkICNkZGQ7CiAgICAgICAgfQoKICAgICAgICB0aCwgdGQgewogICAgICAgICAgICBwYWRkaW5nOiA4cHggMTJweDsKICAgICAgICAgICAgdGV4dC1hbGlnbjogbGVmdDsKICAgICAgICB9CgogICAgICAgIHRoIHsKICAgICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogI2Y0ZjRmNDsKICAgICAgICB9CgogICAgICAgIGNhbnZhcyB7CiAgICAgICAgICAgIHdpZHRoOiAyMDBweDsKICAgICAgICAgICAgaGVpZ2h0OiAyMDBweDsKICAgICAgICB9CgogICAgICAgIC50YWJzIHsKICAgICAgICAgICAgZGlzcGxheTogZmxleDsKICAgICAgICAgICAgbWFyZ2luLXRvcDogMjBweDsKICAgICAgICAgICAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7CiAgICAgICAgfQoKICAgICAgICAudGFiIHsKICAgICAgICAgICAgcGFkZGluZzogMTBweCAyMHB4OwogICAgICAgICAgICBtYXJnaW46IDAgNXB4OwogICAgICAgICAgICBjdXJzb3I6IHBvaW50ZXI7CiAgICAgICAgICAgIGJvcmRlcjogMXB4IHNvbGlkICNkZGQ7CiAgICAgICAgICAgIGJvcmRlci1yYWRpdXM6IDVweDsKICAgICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogI2Y0ZjRmNDsKICAgICAgICAgICAgdGV4dC1hbGlnbjogY2VudGVyOwogICAgICAgIH0KCiAgICAgICAgLnRhYjpob3ZlciB7CiAgICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6ICNkZGQ7CiAgICAgICAgfQoKICAgICAgICAudGFiLWNvbnRlbnQgewogICAgICAgICAgICBkaXNwbGF5OiBub25lOwogICAgICAgICAgICBtYXJnaW4tdG9wOiAyMHB4OwogICAgICAgICAgICBwYWRkaW5nOiAyMHB4OwogICAgICAgICAgICBib3JkZXI6IDFweCBzb2xpZCAjZGRkOwogICAgICAgICAgICBib3JkZXItdG9wOiBub25lOwogICAgICAgIH0KCiAgICAgICAgLmFjdGl2ZS10YWIgewogICAgICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjY2NjOwogICAgICAgIH0KCiAgICAgICAgLmFjdGl2ZS1jb250ZW50IHsKICAgICAgICAgICAgZGlzcGxheTogYmxvY2s7CiAgICAgICAgfQoKICAgICAgICAuYWN0aXZlLXJvdyB7CiAgICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6ICNlMGY3ZmE7CiAgICAgICAgfQoKICAgICAgICAvKiBEYXJrIE1vZGUgU3R5bGVzICovCiAgICAgICAgLmRhcmstbW9kZSB7CiAgICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6ICMzMzM7CiAgICAgICAgICAgIGNvbG9yOiAjZmZmOwogICAgICAgIH0KCiAgICAgICAgLmRhcmstbW9kZSBoZWFkZXIgewogICAgICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjNDQ0OwogICAgICAgICAgICBjb2xvcjogI2ZmZjsKICAgICAgICB9CgogICAgICAgIC5kYXJrLW1vZGUgLnRhYiB7CiAgICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6ICM0NDQ7CiAgICAgICAgICAgIGNvbG9yOiAjZmZmOwogICAgICAgICAgICBib3JkZXI6IDFweCBzb2xpZCAjNTU1OwogICAgICAgIH0KCiAgICAgICAgLmRhcmstbW9kZSAudGFiOmhvdmVyIHsKICAgICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogIzU1NTsKICAgICAgICB9CgogICAgICAgIC5kYXJrLW1vZGUgdGFibGUsIC5kYXJrLW1vZGUgdGgsIC5kYXJrLW1vZGUgdGQgewogICAgICAgICAgICBib3JkZXI6IDFweCBzb2xpZCAjNTU1OwogICAgICAgIH0KCiAgICAgICAgLmRhcmstbW9kZSB0aCB7CiAgICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6ICM2NjY7CiAgICAgICAgfQoKICAgICAgICAuZGFyay1tb2RlIC50YWItY29udGVudCB7CiAgICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6ICM0NDQ7CiAgICAgICAgICAgIGNvbG9yOiAjZmZmOwogICAgICAgIH0KCiAgICAgICAgLmRhcmstbW9kZSAuYWN0aXZlLXJvdyB7CiAgICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6ICM1NTU7CiAgICAgICAgfQoKICAgICAgICAvKiBEYXJrIE1vZGUgQnV0dG9uIChJY29uIHZlcnNpb24pICovCiAgICAgICAgLmRhcmstbW9kZS10b2dnbGUgewogICAgICAgICAgICBwb3NpdGlvbjogYWJzb2x1dGU7CiAgICAgICAgICAgIHRvcDogMjBweDsKICAgICAgICAgICAgcmlnaHQ6IDIwcHg7CiAgICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6IHRyYW5zcGFyZW50OwogICAgICAgICAgICBib3JkZXI6IG5vbmU7CiAgICAgICAgICAgIGN1cnNvcjogcG9pbnRlcjsKICAgICAgICAgICAgZm9udC1zaXplOiAyNHB4OwogICAgICAgICAgICBjb2xvcjogI2ZmZjsKICAgICAgICAgICAgdHJhbnNpdGlvbjogYmFja2dyb3VuZC1jb2xvciAwLjNzIGVhc2UsIGNvbG9yIDAuM3MgZWFzZTsKICAgICAgICAgICAgZGlzcGxheTogZmxleDsKICAgICAgICAgICAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7CiAgICAgICAgICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7CiAgICAgICAgICAgIHdpZHRoOiA0MHB4OwogICAgICAgICAgICBoZWlnaHQ6IDQwcHg7CiAgICAgICAgICAgIGJvcmRlci1yYWRpdXM6IDUwJTsKICAgICAgICAgICAgcGFkZGluZzogNXB4OwogICAgICAgIH0KCiAgICAgICAgLyogTGlnaHQgTW9kZSBJY29uICovCiAgICAgICAgLmRhcmstbW9kZS10b2dnbGUubGlnaHQtbW9kZSBpIHsKICAgICAgICAgICAgY29sb3I6ICNmZmViM2I7ICAvKiBZZWxsb3cgc3VuIGljb24gZm9yIGxpZ2h0IG1vZGUgKi8KICAgICAgICB9CgogICAgICAgIC8qIEhvdmVyIEVmZmVjdCBmb3IgTGlnaHQgTW9kZSAoU3VuKSAqLwogICAgICAgIC5kYXJrLW1vZGUtdG9nZ2xlLmxpZ2h0LW1vZGU6aG92ZXIgewogICAgICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmOwogICAgICAgIH0KCiAgICAgICAgLyogRGFyayBNb2RlIEljb24gKE1vb24pICovCiAgICAgICAgLmRhcmstbW9kZS10b2dnbGUuZGFyay1tb2RlIGkgewogICAgICAgICAgICBjb2xvcjogI2ZmZjsgIC8qIFdoaXRlIGNyZXNjZW50IGljb24gaW4gZGFyayBtb2RlICovCiAgICAgICAgfQoKICAgICAgICAvKiBIb3ZlciBFZmZlY3QgZm9yIERhcmsgTW9kZSAoTW9vbikgKi8KICAgICAgICAuZGFyay1tb2RlLXRvZ2dsZS5kYXJrLW1vZGU6aG92ZXIgewogICAgICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjNDQ0OyAvKiBCbGVuZHMgd2l0aCB0aGUgZGFyayBiYWNrZ3JvdW5kICovCiAgICAgICAgfQoKICAgICAgICAvKiAiQmFjayB0byBUb3AiIEJ1dHRvbiAqLwogICAgICAgIC5iYWNrLXRvLXRvcCB7CiAgICAgICAgICAgIHBvc2l0aW9uOiBmaXhlZDsKICAgICAgICAgICAgYm90dG9tOiAyMHB4OwogICAgICAgICAgICByaWdodDogMjBweDsKICAgICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnQ7CiAgICAgICAgICAgIGJvcmRlcjogbm9uZTsKICAgICAgICAgICAgY3Vyc29yOiBwb2ludGVyOwogICAgICAgICAgICBmb250LXNpemU6IDI0cHg7CiAgICAgICAgICAgIGNvbG9yOiAjZmZmOwogICAgICAgICAgICB0cmFuc2l0aW9uOiBiYWNrZ3JvdW5kLWNvbG9yIDAuM3MgZWFzZSwgY29sb3IgMC4zcyBlYXNlOwogICAgICAgICAgICBkaXNwbGF5OiBmbGV4OwogICAgICAgICAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjsKICAgICAgICAgICAgYWxpZ24taXRlbXM6IGNlbnRlcjsKICAgICAgICAgICAgd2lkdGg6IDQwcHg7CiAgICAgICAgICAgIGhlaWdodDogNDBweDsKICAgICAgICAgICAgYm9yZGVyLXJhZGl1czogNTAlOwogICAgICAgICAgICBwYWRkaW5nOiA1cHg7CiAgICAgICAgICAgIG9wYWNpdHk6IDA7IC8qIEluaXRpYWxseSBoaWRkZW4gKi8KICAgICAgICAgICAgdmlzaWJpbGl0eTogaGlkZGVuOyAvKiBJbml0aWFsbHkgaGlkZGVuICovCiAgICAgICAgICAgIHRyYW5zaXRpb246IG9wYWNpdHkgMC4zcyBlYXNlLCB2aXNpYmlsaXR5IDAuM3MgZWFzZTsKICAgICAgICB9CgogICAgICAgIC5iYWNrLXRvLXRvcC5zaG93IHsKICAgICAgICAgICAgb3BhY2l0eTogMTsKICAgICAgICAgICAgdmlzaWJpbGl0eTogdmlzaWJsZTsKICAgICAgICB9CgogICAgICAgIC5iYWNrLXRvLXRvcCBpIHsKICAgICAgICAgICAgY29sb3I6ICMwMGJjZDQ7IC8qIExpZ2h0IGN5YW4gY29sb3IgZm9yIHRoZSBhcnJvdyAqLwogICAgICAgIH0KCiAgICAgICAgLyogSG92ZXIgRWZmZWN0IGZvciAiQmFjayB0byBUb3AiIEJ1dHRvbiAqLwogICAgICAgIC5iYWNrLXRvLXRvcDpob3ZlciB7CiAgICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6ICMwMGJjZDQ7CiAgICAgICAgICAgIGNvbG9yOiAjZmZmOwogICAgICAgIH0KCiAgICAgICAgLmJhY2stdG8tdG9wOmhvdmVyIGkgewogICAgICAgICAgICB0cmFuc2Zvcm06IHNjYWxlKDEuMSk7CiAgICAgICAgfQogICAgPC9zdHlsZT4KPC9oZWFkPgo8Ym9keT4KCiAgICA8aGVhZGVyPlRhYmxlIGFuZCBQaWUgQ2hhcnQgd2l0aCBUYWI8L2hlYWRlcj4KICAgIDxkaXYgY2xhc3M9ImNvbnRhaW5lciI+CiAgICAgICAgPCEtLSBUYWJsZSBTZWN0aW9uIC0tPgogICAgICAgIDxkaXYgY2xhc3M9InRhYmxlLWNvbnRhaW5lciI+CiAgICAgICAgICAgIDx0YWJsZT4KICAgICAgICAgICAgICAgIDx0aGVhZD4KICAgICAgICAgICAgICAgICAgICA8dHI+CiAgICAgICAgICAgICAgICAgICAgICAgIDx0aD5JRDwvdGg+CiAgICAgICAgICAgICAgICAgICAgICAgIDx0aD5OYW1lPC90aD4KICAgICAgICAgICAgICAgICAgICAgICAgPHRoPkFnZTwvdGg+CiAgICAgICAgICAgICAgICAgICAgICAgIDx0aD5DaXR5PC90aD4KICAgICAgICAgICAgICAgICAgICA8L3RyPgogICAgICAgICAgICAgICAgPC90aGVhZD4KICAgICAgICAgICAgICAgIDx0Ym9keT4KICAgICAgICAgICAgICAgICAgICAlVEFCTEVfUk9XUyUKICAgICAgICAgICAgICAgIDwvdGJvZHk+CiAgICAgICAgICAgIDwvdGFibGU+CiAgICAgICAgPC9kaXY+CgogICAgICAgIDwhLS0gUGllIENoYXJ0IFNlY3Rpb24gLS0+CiAgICAgICAgPGRpdiBjbGFzcz0iY2hhcnQtY29udGFpbmVyIj4KICAgICAgICAgICAgPCEtLSBUaGlzIGlzIHdoZXJlIHRoZSBHb29nbGUgUGllIENoYXJ0IHdpbGwgYmUgcmVuZGVyZWQgLS0+CiAgICAgICAgICAgIDxkaXYgaWQ9InBpZUNoYXJ0Ij48L2Rpdj4KICAgICAgICA8L2Rpdj4KICAgIDwvZGl2PgoKICAgIDwhLS0gVGFicyBTZWN0aW9uIC0tPgogICAgPGRpdiBjbGFzcz0idGFicyI+CiAgICAgICAgJVRBQlMlCiAgICA8L2Rpdj4KCiAgICA8IS0tIFRhYiBDb250ZW50IC0tPgogICAgJVRBQl9DT05URU5UUyUKCiAgICA8IS0tIERhcmsgTW9kZSBUb2dnbGUgQnV0dG9uIC0tPgogICAgPGJ1dHRvbiBpZD0iZGFya01vZGVUb2dnbGUiIGNsYXNzPSJkYXJrLW1vZGUtdG9nZ2xlIGxpZ2h0LW1vZGUiPgogICAgICAgIDxpIGNsYXNzPSJmYXMgZmEtc3VuIj48L2k+CiAgICA8L2J1dHRvbj4KCiAgICA8IS0tIEJhY2sgdG8gVG9wIEJ1dHRvbiAtLT4KICAgIDxidXR0b24gY2xhc3M9ImJhY2stdG8tdG9wIiBpZD0iYmFja1RvVG9wQnRuIj4KICAgICAgICA8aSBjbGFzcz0iZmFzIGZhLWFycm93LXVwIj48L2k+CiAgICA8L2J1dHRvbj4KCiAgICA8c2NyaXB0IHR5cGU9InRleHQvamF2YXNjcmlwdCI+CiAgICAgICAgLy8gTG9hZCBHb29nbGUgQ2hhcnRzIGxpYnJhcnkKICAgICAgICBnb29nbGUuY2hhcnRzLmxvYWQoJ2N1cnJlbnQnLCB7CiAgICAgICAgICAgIHBhY2thZ2VzOiBbJ2NvcmVjaGFydCcsICdwaWVjaGFydCddCiAgICAgICAgfSk7CgogICAgICAgIGdvb2dsZS5jaGFydHMuc2V0T25Mb2FkQ2FsbGJhY2soZHJhd0NoYXJ0KTsKCiAgICAgICAgLy8gUGllIENoYXJ0IERhdGEgYW5kIE9wdGlvbnMKICAgICAgICBmdW5jdGlvbiBkcmF3Q2hhcnQoKSB7CiAgICAgICAgICAgIHZhciBkYXRhID0gZ29vZ2xlLnZpc3VhbGl6YXRpb24uYXJyYXlUb0RhdGFUYWJsZShbCiAgICAgICAgICAgICAgICBbJ0NhdGVnb3J5JywgJ1ZhbHVlJ10sCiAgICAgICAgICAgICAgICBbJ1JlZCcsIDMwMF0sCiAgICAgICAgICAgICAgICBbJ0JsdWUnLCA1MF0sCiAgICAgICAgICAgICAgICBbJ1llbGxvdycsIDEwMF0sCiAgICAgICAgICAgICAgICBbJ0dyZWVuJywgNDBdLAogICAgICAgICAgICAgICAgWydQdXJwbGUnLCAxMjBdCiAgICAgICAgICAgIF0pOwoKICAgICAgICAgICAgdmFyIG9wdGlvbnMgPSB7CiAgICAgICAgICAgICAgICB0aXRsZTogJ1BpZSBDaGFydCBFeGFtcGxlJywKICAgICAgICAgICAgICAgIGlzM0Q6IGZhbHNlLAogICAgICAgICAgICAgICAgc2xpY2VzOiB7CiAgICAgICAgICAgICAgICAgICAgMDoge29mZnNldDogMC4xfSwKICAgICAgICAgICAgICAgICAgICAxOiB7b2Zmc2V0OiAwLjF9LAogICAgICAgICAgICAgICAgICAgIDI6IHtvZmZzZXQ6IDAuMX0sCiAgICAgICAgICAgICAgICAgICAgMzoge29mZnNldDogMC4xfSwKICAgICAgICAgICAgICAgICAgICA0OiB7b2Zmc2V0OiAwLjF9CiAgICAgICAgICAgICAgICB9LAogICAgICAgICAgICAgICAgbGVnZW5kOiB7IHBvc2l0aW9uOiAndG9wJyB9CiAgICAgICAgICAgIH07CgogICAgICAgICAgICB2YXIgY2hhcnQgPSBuZXcgZ29vZ2xlLnZpc3VhbGl6YXRpb24uUGllQ2hhcnQoZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3BpZUNoYXJ0JykpOwogICAgICAgICAgICBjaGFydC5kcmF3KGRhdGEsIG9wdGlvbnMpOwogICAgICAgIH0KCiAgICAgICAgLy8gRGFyayBNb2RlIFRvZ2dsZSBGdW5jdGlvbmFsaXR5IChTYW1lIGFzIGJlZm9yZSkKICAgICAgICBjb25zdCB0b2dnbGVCdXR0b24gPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnZGFya01vZGVUb2dnbGUnKTsKICAgICAgICB0b2dnbGVCdXR0b24uYWRkRXZlbnRMaXN0ZW5lcignY2xpY2snLCAoKSA9PiB7CiAgICAgICAgICAgIGRvY3VtZW50LmJvZHkuY2xhc3NMaXN0LnRvZ2dsZSgnZGFyay1tb2RlJyk7CiAgICAgICAgICAgIGNvbnN0IGljb24gPSBkb2N1bWVudC5xdWVyeVNlbGVjdG9yKCcuZGFyay1tb2RlLXRvZ2dsZSBpJyk7CiAgICAgICAgICAgIGlmIChkb2N1bWVudC5ib2R5LmNsYXNzTGlzdC5jb250YWlucygnZGFyay1tb2RlJykpIHsKICAgICAgICAgICAgICAgIGljb24uY2xhc3NMaXN0LnJlbW92ZSgnZmEtc3VuJyk7CiAgICAgICAgICAgICAgICBpY29uLmNsYXNzTGlzdC5hZGQoJ2ZhLW1vb24nKTsKICAgICAgICAgICAgICAgIHRvZ2dsZUJ1dHRvbi5jbGFzc0xpc3QucmVtb3ZlKCdsaWdodC1tb2RlJyk7CiAgICAgICAgICAgICAgICB0b2dnbGVCdXR0b24uY2xhc3NMaXN0LmFkZCgnZGFyay1tb2RlJyk7CiAgICAgICAgICAgIH0gZWxzZSB7CiAgICAgICAgICAgICAgICBpY29uLmNsYXNzTGlzdC5yZW1vdmUoJ2ZhLW1vb24nKTsKICAgICAgICAgICAgICAgIGljb24uY2xhc3NMaXN0LmFkZCgnZmEtc3VuJyk7CiAgICAgICAgICAgICAgICB0b2dnbGVCdXR0b24uY2xhc3NMaXN0LnJlbW92ZSgnZGFyay1tb2RlJyk7CiAgICAgICAgICAgICAgICB0b2dnbGVCdXR0b24uY2xhc3NMaXN0LmFkZCgnbGlnaHQtbW9kZScpOwogICAgICAgICAgICB9CiAgICAgICAgfSk7CiAgICA8L3NjcmlwdD4KPC9ib2R5Pgo8L2h0bWw+CkhUTUwKCiMgU2FtcGxlIGRhdGEgZm9yIHRoZSB0YWJsZSAoY2FuIGJlIGR5bmFtaWMpCm15IEB0YWJsZV9kYXRhID0gKAogICAgeyBpZCA9PiAxLCBuYW1lID0+ICJKb2huIERvZSIsIGFnZSA9PiAyOCwgY2l0eSA9PiAiTmV3IFlvcmsiIH0sCiAgICB7IGlkID0+IDIsIG5hbWUgPT4gIkphbmUgU21pdGgiLCBhZ2UgPT4gMzQsIGNpdHkgPT4gIkxvcyBBbmdlbGVzIiB9LAogICAgeyBpZCA9PiAzLCBuYW1lID0+ICJTYW0gSm9obnNvbiIsIGFnZSA9PiAyNSwgY2l0eSA9PiAiQ2hpY2FnbyIgfSwKKTsKCiMgR2VuZXJhdGUgdGFibGUgcm93cwpteSAkdGFibGVfcm93cyA9ICcnOwpmb3JlYWNoIG15ICRyb3cgKEB0YWJsZV9kYXRhKSB7CiAgICAkdGFibGVfcm93cyAuPSAiPHRyIGRhdGEtdGFiPVwidGFiJHJvdy0+e2lkfVwiPlxuIjsKICAgICR0YWJsZV9yb3dzIC49ICI8dGQgY2xhc3M9XCJ0YWItaWRcIj4kcm93LT57aWR9PC90ZD5cbiI7CiAgICAkdGFibGVfcm93cyAuPSAiPHRkPiRyb3ctPntuYW1lfTwvdGQ+XG4iOwogICAgJHRhYmxlX3Jvd3MgLj0gIjx0ZD4kcm93LT57YWdlfTwvdGQ+XG4iOwogICAgJHRhYmxlX3Jvd3MgLj0gIjx0ZD4kcm93LT57Y2l0eX08L3RkPlxuIjsKICAgICR0YWJsZV9yb3dzIC49ICI8L3RyPlxuIjsKfQoKIyBHZW5lcmF0ZSB0YWJzCm15ICR0YWJzID0gJyc7CmZvciAobXkgJGkgPSAxOyAkaSA8PSA3OyAkaSsrKSB7CiAgICAkdGFicyAuPSAiPGRpdiBjbGFzcz1cInRhYlwiIGRhdGEtdGFiPVwidGFiJGlcIj5UYWIgJGk8L2Rpdj5cbiI7Cn0KCiMgR2VuZXJhdGUgdGFiIGNvbnRlbnRzCm15ICR0YWJfY29udGVudHMgPSAnJzsKZm9yIChteSAkaSA9IDE7ICRpIDw9IDc7ICRpKyspIHsKICAgICR0YWJfY29udGVudHMgLj0gIjxkaXYgY2xhc3M9XCJ0YWItY29udGVudFwiIGlkPVwidGFiJGlcIj5cbiI7CiAgICAkdGFiX2NvbnRlbnRzIC49ICI8cD5UaGlzIGlzIGNvbnRlbnQgZm9yIFRhYiAkaS48L3A+XG4iOwogICAgJHRhYl9jb250ZW50cyAuPSAiPC9kaXY+XG4iOwp9CgojIFJlcGxhY2UgcGxhY2Vob2xkZXJzIGluIHRoZSB0ZW1wbGF0ZQokaHRtbF90ZW1wbGF0ZSA9fiBzLyVUQUJMRV9ST1dTJS8kdGFibGVfcm93cy9nOwokaHRtbF90ZW1wbGF0ZSA9fiBzLyVUQUJTJS8kdGFicy9nOwokaHRtbF90ZW1wbGF0ZSA9fiBzLyVUQUJfQ09OVEVOVFMlLyR0YWJfY29udGVudHMvZzsKCiMgT3V0cHV0IHRoZSBmaW5hbCBIVE1MCnByaW50IGhlYWRlcigtdHlwZSA9PiAndGV4dC9odG1sJywgLWNoYXJzZXQgPT4gJ1VURi04Jyk7CnByaW50ICRodG1sX3RlbXBsYXRlOwo=

Success #stdin #stdout 0.04s 9232KB

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">
    <!-- Removed Chart.js, added Google Charts -->
    <script type="text/javascript" src="https://w...content-available-to-author-only...c.com/charts/loader.js"></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: 100%;
            height: 400px;  /* Updated height to make chart more flexible */
        }

        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 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 */
        }

        /* "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">
            <!-- This is where the Google Pie Chart will be rendered -->
            <div id="pieChart"></div>
        </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 type="text/javascript">
        // Load Google Charts library
        google.charts.load('current', {
            packages: ['corechart', 'piechart']
        });

        google.charts.setOnLoadCallback(drawChart);

        // Pie Chart Data and Options
        function drawChart() {
            var data = google.visualization.arrayToDataTable([
                ['Category', 'Value'],
                ['Red', 300],
                ['Blue', 50],
                ['Yellow', 100],
                ['Green', 40],
                ['Purple', 120]
            ]);

            var options = {
                title: 'Pie Chart Example',
                is3D: false,
                slices: {
                    0: {offset: 0.1},
                    1: {offset: 0.1},
                    2: {offset: 0.1},
                    3: {offset: 0.1},
                    4: {offset: 0.1}
                },
                legend: { position: 'top' }
            };

            var chart = new google.visualization.PieChart(document.getElementById('pieChart'));
            chart.draw(data, options);
        }

        // Dark Mode Toggle Functionality (Same as before)
        const toggleButton = document.getElementById('darkModeToggle');
        toggleButton.addEventListener('click', () => {
            document.body.classList.toggle('dark-mode');
            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/sqoVuN

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