fork download
copy 
  1. <!DOCTYPE html>
  2. <html lang="en" data-theme="dark">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Cybersecurity Professor Portfolio</title>
  7.     <!-- Modern Font Imports -->
  8.     <link rel="preconnect" href="https://f...content-available-to-author-only...s.com">
  9.     <link rel="preconnect" href="https://f...content-available-to-author-only...c.com" crossorigin>
  10.     <link href="https://f...content-available-to-author-only...s.com/css2?family=Fira+Code:wght@400;500&family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
  11.  
  12.     <style>
  13.         /* CSS Variables for Dynamic Dark/Light Theme Switching */
  14.         :root[data-theme="dark"] {
  15.             --bg-color: #0f172a;
  16.             --surface-color: rgba(30, 41, 59, 0.7);
  17.             --border-color: rgba(255, 255, 255, 0.1);
  18.             --text-primary: #f8fafc;
  19.             --text-secondary: #94a3b8;
  20.             --accent-color: #38bdf8;
  21.             --accent-glow: rgba(56, 189, 248, 0.25);
  22.             --grid-line: rgba(255, 255, 255, 0.03);
  23.             --card-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
  24.         }
  25.  
  26.         :root[data-theme="light"] {
  27.             --bg-color: #f8fafc;
  28.             --surface-color: rgba(255, 255, 255, 0.8);
  29.             --border-color: rgba(0, 0, 0, 0.08);
  30.             --text-primary: #0f172a;
  31.             --text-secondary: #64748b;
  32.             --accent-color: #0284c7;
  33.             --accent-glow: rgba(2, 132, 199, 0.15);
  34.             --grid-line: rgba(0, 0, 0, 0.03);
  35.             --card-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.08);
  36.         }
  37.  
  38.         * {
  39.             box-sizing: border-box;
  40.             margin: 0;
  41.             padding: 0;
  42.             transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  43.         }
  44.  
  45.         body {
  46.             font-family: 'Inter', sans-serif;
  47.             background-color: var(--bg-color);
  48.             color: var(--text-primary);
  49.             min-height: 100vh;
  50.             display: flex;
  51.             align-items: center;
  52.             justify-content: center;
  53.             padding: 2rem 1rem;
  54.             /* Subtle modern grid background pattern */
  55.             background-image: 
  56.                 linear-gradient(var(--grid-line) 1px, transparent 1px),
  57.                 linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  58.             background-size: 30px 30px;
  59.         }
  60.  
  61.         .portfolio-card {
  62.             background: var(--surface-color);
  63.             backdrop-filter: blur(12px);
  64.             -webkit-backdrop-filter: blur(12px);
  65.             border: 1px solid var(--border-color);
  66.             border-radius: 20px;
  67.             width: 100%;
  68.             max-width: 480px;
  69.             padding: 2.5rem 2rem;
  70.             box-shadow: var(--card-shadow);
  71.             position: relative;
  72.             text-align: center;
  73.         }
  74.  
  75.         /* Dark/Light Mode Switcher Button */
  76.         .theme-toggle {
  77.             position: absolute;
  78.             top: 1.25rem;
  79.             right: 1.25rem;
  80.             background: transparent;
  81.             border: 1px solid var(--border-color);
  82.             color: var(--text-secondary);
  83.             padding: 0.4rem 0.8rem;
  84.             border-radius: 20px;
  85.             cursor: pointer;
  86.             font-size: 0.85rem;
  87.             font-family: 'Fira Code', monospace;
  88.             display: flex;
  89.             align-items: center;
  90.             gap: 0.4rem;
  91.         }
  92.  
  93.         .theme-toggle:hover {
  94.             color: var(--accent-color);
  95.             border-color: var(--accent-color);
  96.         }
  97.  
  98.         /* Profile & Header Elements */
  99.         .avatar-wrapper {
  100.             position: relative;
  101.             width: 90px;
  102.             height: 90px;
  103.             margin: 0 auto 1.5rem auto;
  104.         }
  105.  
  106.         .avatar {
  107.             width: 100%;
  108.             height: 100%;
  109.             object-fit: contain;
  110.             border-radius: 50%;
  111.             background: rgba(255, 255, 255, 0.05);
  112.             padding: 8px;
  113.             border: 2px solid var(--border-color);
  114.         }
  115.  
  116.         .badge {
  117.             display: inline-block;
  118.             font-family: 'Fira Code', monospace;
  119.             font-size: 0.75rem;
  120.             color: var(--accent-color);
  121.             background: var(--accent-glow);
  122.             padding: 0.25rem 0.75rem;
  123.             border-radius: 12px;
  124.             margin-bottom: 0.75rem;
  125.             border: 1px solid var(--accent-color);
  126.         }
  127.  
  128.         h1 {
  129.             font-size: 1.6rem;
  130.             font-weight: 700;
  131.             letter-spacing: -0.02em;
  132.             margin-bottom: 0.4rem;
  133.         }
  134.  
  135.         .subtitle {
  136.             color: var(--text-secondary);
  137.             font-size: 0.95rem;
  138.             margin-bottom: 2rem;
  139.         }
  140.  
  141.         /* Interactive Link & Action Buttons */
  142.         .actions {
  143.             display: flex;
  144.             flex-direction: column;
  145.             gap: 0.8rem;
  146.         }
  147.  
  148.         .btn {
  149.             display: inline-flex;
  150.             align-items: center;
  151.             justify-content: center;
  152.             gap: 0.5rem;
  153.             width: 100%;
  154.             padding: 0.85rem 1.2rem;
  155.             border-radius: 12px;
  156.             font-weight: 600;
  157.             font-size: 0.95rem;
  158.             text-decoration: none;
  159.             cursor: pointer;
  160.             transition: transform 0.2s ease, box-shadow 0.2s ease;
  161.         }
  162.  
  163.         .btn:hover {
  164.             transform: translateY(-2px);
  165.         }
  166.  
  167.         .btn-primary {
  168.             background-color: var(--accent-color);
  169.             color: #ffffff;
  170.             border: none;
  171.             box-shadow: 0 4px 14px var(--accent-glow);
  172.         }
  173.  
  174.         .btn-secondary {
  175.             background-color: transparent;
  176.             color: var(--text-primary);
  177.             border: 1px solid var(--border-color);
  178.         }
  179.  
  180.         .btn-secondary:hover {
  181.             border-color: var(--text-secondary);
  182.         }
  183.     </style>
  184. </head>
  185.  
  186. <body>
  187.  
  188. <div class="portfolio-card">
  189.     <!-- Theme Toggle -->
  190.     <button class="theme-toggle" id="themeToggle" aria-label="Toggle Theme">
  191.         <span id="themeIcon">☀️</span> <span id="themeText">Light</span>
  192.     </button>
  193.  
  194.     <!-- Profile Header -->
  195.     <div class="avatar-wrapper">
  196.         <img 
  197.             src="https://s...content-available-to-author-only...c.ma/_next/image?url=%2Fimages%2Fsummer_school_logo.jpeg&w=256&q=75" 
  198.             alt="ENSEM Profile Logo" 
  199.             class="avatar"
  200.         >
  201.     </div>
  202.  
  203.     <span class="badge">ENSEM Faculty</span>
  204.     <h1 id="headline">My Professional Portfolio</h1>
  205.     <p class="subtitle">Cybersecurity Professor at ENSEM</p>
  206.  
  207.     <!-- Actions -->
  208.     <div class="actions">
  209.         <button id="button" class="btn btn-primary">
  210.             Send Encrypted Message
  211.         </button>
  212.         <a href="https://g...content-available-to-author-only...b.com" target="_blank" class="btn btn-secondary">
  213.             Visit GitHub
  214.         </a>
  215.     </div>
  216. </div>
  217.  
  218. <script>
  219.     // Original Functionality
  220.     const title = document.getElementById("headline");
  221.     const button = document.getElementById("button");
  222.  
  223.     button.onclick = function () {
  224.         title.innerText = "Interactivity Unlocked!";
  225.         title.style.color = "var(--accent-color)";
  226.     };
  227.  
  228.     // Dark / Light Theme Toggle Logic
  229.     const themeToggle = document.getElementById("themeToggle");
  230.     const themeIcon = document.getElementById("themeIcon");
  231.     const themeText = document.getElementById("themeText");
  232.     const html = document.documentElement;
  233.  
  234.     themeToggle.onclick = function () {
  235.         const currentTheme = html.getAttribute("data-theme");
  236.  
  237.         if (currentTheme === "dark") {
  238.             html.setAttribute("data-theme", "light");
  239.             themeIcon.innerText = "🌙";
  240.             themeText.innerText = "Dark";
  241.         } else {
  242.             html.setAttribute("data-theme", "dark");
  243.             themeIcon.innerText = "☀️";
  244.             themeText.innerText = "Light";
  245.         }
  246.     };
  247. </script>
  248.  
  249. </body>
  250. </html>
Success #stdin #stdout 0.02s 25556KB
comments (?)
stdin
copy 
Standard input is empty
stdout
copy 
<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cybersecurity Professor Portfolio</title>
    <!-- Modern Font Imports -->
    <link rel="preconnect" href="https://f...content-available-to-author-only...s.com">
    <link rel="preconnect" href="https://f...content-available-to-author-only...c.com" crossorigin>
    <link href="https://f...content-available-to-author-only...s.com/css2?family=Fira+Code:wght@400;500&family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">

    <style>
        /* CSS Variables for Dynamic Dark/Light Theme Switching */
        :root[data-theme="dark"] {
            --bg-color: #0f172a;
            --surface-color: rgba(30, 41, 59, 0.7);
            --border-color: rgba(255, 255, 255, 0.1);
            --text-primary: #f8fafc;
            --text-secondary: #94a3b8;
            --accent-color: #38bdf8;
            --accent-glow: rgba(56, 189, 248, 0.25);
            --grid-line: rgba(255, 255, 255, 0.03);
            --card-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
        }

        :root[data-theme="light"] {
            --bg-color: #f8fafc;
            --surface-color: rgba(255, 255, 255, 0.8);
            --border-color: rgba(0, 0, 0, 0.08);
            --text-primary: #0f172a;
            --text-secondary: #64748b;
            --accent-color: #0284c7;
            --accent-glow: rgba(2, 132, 199, 0.15);
            --grid-line: rgba(0, 0, 0, 0.03);
            --card-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.08);
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--bg-color);
            color: var(--text-primary);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 2rem 1rem;
            /* Subtle modern grid background pattern */
            background-image: 
                linear-gradient(var(--grid-line) 1px, transparent 1px),
                linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
            background-size: 30px 30px;
        }

        .portfolio-card {
            background: var(--surface-color);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid var(--border-color);
            border-radius: 20px;
            width: 100%;
            max-width: 480px;
            padding: 2.5rem 2rem;
            box-shadow: var(--card-shadow);
            position: relative;
            text-align: center;
        }

        /* Dark/Light Mode Switcher Button */
        .theme-toggle {
            position: absolute;
            top: 1.25rem;
            right: 1.25rem;
            background: transparent;
            border: 1px solid var(--border-color);
            color: var(--text-secondary);
            padding: 0.4rem 0.8rem;
            border-radius: 20px;
            cursor: pointer;
            font-size: 0.85rem;
            font-family: 'Fira Code', monospace;
            display: flex;
            align-items: center;
            gap: 0.4rem;
        }

        .theme-toggle:hover {
            color: var(--accent-color);
            border-color: var(--accent-color);
        }

        /* Profile & Header Elements */
        .avatar-wrapper {
            position: relative;
            width: 90px;
            height: 90px;
            margin: 0 auto 1.5rem auto;
        }

        .avatar {
            width: 100%;
            height: 100%;
            object-fit: contain;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.05);
            padding: 8px;
            border: 2px solid var(--border-color);
        }

        .badge {
            display: inline-block;
            font-family: 'Fira Code', monospace;
            font-size: 0.75rem;
            color: var(--accent-color);
            background: var(--accent-glow);
            padding: 0.25rem 0.75rem;
            border-radius: 12px;
            margin-bottom: 0.75rem;
            border: 1px solid var(--accent-color);
        }

        h1 {
            font-size: 1.6rem;
            font-weight: 700;
            letter-spacing: -0.02em;
            margin-bottom: 0.4rem;
        }

        .subtitle {
            color: var(--text-secondary);
            font-size: 0.95rem;
            margin-bottom: 2rem;
        }

        /* Interactive Link & Action Buttons */
        .actions {
            display: flex;
            flex-direction: column;
            gap: 0.8rem;
        }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            width: 100%;
            padding: 0.85rem 1.2rem;
            border-radius: 12px;
            font-weight: 600;
            font-size: 0.95rem;
            text-decoration: none;
            cursor: pointer;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .btn:hover {
            transform: translateY(-2px);
        }

        .btn-primary {
            background-color: var(--accent-color);
            color: #ffffff;
            border: none;
            box-shadow: 0 4px 14px var(--accent-glow);
        }

        .btn-secondary {
            background-color: transparent;
            color: var(--text-primary);
            border: 1px solid var(--border-color);
        }

        .btn-secondary:hover {
            border-color: var(--text-secondary);
        }
    </style>
</head>

<body>

<div class="portfolio-card">
    <!-- Theme Toggle -->
    <button class="theme-toggle" id="themeToggle" aria-label="Toggle Theme">
        <span id="themeIcon">☀️</span> <span id="themeText">Light</span>
    </button>

    <!-- Profile Header -->
    <div class="avatar-wrapper">
        <img 
            src="https://s...content-available-to-author-only...c.ma/_next/image?url=%2Fimages%2Fsummer_school_logo.jpeg&w=256&q=75" 
            alt="ENSEM Profile Logo" 
            class="avatar"
        >
    </div>

    <span class="badge">ENSEM Faculty</span>
    <h1 id="headline">My Professional Portfolio</h1>
    <p class="subtitle">Cybersecurity Professor at ENSEM</p>

    <!-- Actions -->
    <div class="actions">
        <button id="button" class="btn btn-primary">
            Send Encrypted Message
        </button>
        <a href="https://g...content-available-to-author-only...b.com" target="_blank" class="btn btn-secondary">
            Visit GitHub
        </a>
    </div>
</div>

<script>
    // Original Functionality
    const title = document.getElementById("headline");
    const button = document.getElementById("button");

    button.onclick = function () {
        title.innerText = "Interactivity Unlocked!";
        title.style.color = "var(--accent-color)";
    };

    // Dark / Light Theme Toggle Logic
    const themeToggle = document.getElementById("themeToggle");
    const themeIcon = document.getElementById("themeIcon");
    const themeText = document.getElementById("themeText");
    const html = document.documentElement;

    themeToggle.onclick = function () {
        const currentTheme = html.getAttribute("data-theme");
        
        if (currentTheme === "dark") {
            html.setAttribute("data-theme", "light");
            themeIcon.innerText = "🌙";
            themeText.innerText = "Dark";
        } else {
            html.setAttribute("data-theme", "dark");
            themeIcon.innerText = "☀️";
            themeText.innerText = "Light";
        }
    };
</script>

</body>
</html>
https://ideone.com/0SSYAJ
language:
PHP (php 7.3.5)
created:
1 day ago
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!