src/options.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Xdebug Extension Options</title>
    <link rel="stylesheet" type="text/css" href="options.css">
</head>

<body>
    <h1>Xdebug Extension</h1>
    <form>
        <fieldset>
            <legend>Options</legend>
            <label for="debugtrigger">Debug Trigger or Xdebug Cloud Key</label>
            <input type="text" id="debugtrigger" placeholder="Debug trigger or Xdebug Cloud Key" value="YOUR-NAME">
            <label for="tracetrigger">Trace Trigger</label>
            <input type="text" id="tracetrigger" placeholder="Trace trigger" value="">
            <label for="profiletrigger">Profile Trigger</label>
            <input type="text" id="profiletrigger" placeholder="Profile trigger" value="">
            <button type="reset">Clear</button>
            <button type="submit">Save</button>
        </fieldset>
    </form>
    <div id="help">
        <h2>Shortcuts</h2>
    </div>
    <a href="https://github.com/FraserChapman/xdebug-extension" target="_blank">
        <img src="img/github25.png" alt="GitHub logo" width="25" height="25">
        xdebug-extension
    </a>
    <script src="options.js"></script>
</body>

</html>