sw-plugin-devtools-chrome-extension/options.html at main · sidworks-dev/sw-plugin-devtools-chrome-extension · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Sidworks Shopware DevTools Settings</title>
    <link rel="stylesheet" href="css/shared/layout.css">
    <link rel="stylesheet" href="css/shared/sections.css">
    <link rel="stylesheet" href="css/shared/buttons.css">
    <link rel="stylesheet" href="css/shared/forms.css">
    <link rel="stylesheet" href="css/pages/options.css">
</head>
<body>
    <div class="header">
        <div class="header-content">
            <h1>Sidworks Shopware DevTools Settings</h1>
            <p>Configure the extension for your local development environment</p>
        </div>
    </div>

    <div class="container">
        <div class="section">
            <h2>🔧 IDE Integration</h2>

            <div class="hint">
                <strong>💡 How to find your path:</strong>
                Open your terminal in the Shopware project and run: <code>pwd</code> (macOS/Linux) or <code>cd</code> (Windows).
                Then paste this into the configuration of the plugin.
            </div>

            <label for="editorType" style="margin-top: 16px;">Preferred Editor</label>
            <select id="editorType">
                <option value="phpstorm">PHPStorm</option>
                <option value="vscode">Visual Studio Code</option>
            </select>

            <div class="checkbox-group">
                <label>
                    <input type="checkbox" id="enableIde">
                    Enable IDE integration
                </label>
            </div>

            <div class="buttons">
                <button class="btn-primary" id="saveBtn">💾 Save Settings</button>
                <button class="btn-secondary" id="resetBtn">🔄 Reset to Default</button>
            </div>

            <div class="status" id="status"></div>
        </div>

        <div class="section">
            <h2>ℹ️ About</h2>
            <div class="footer-text">
                <strong>Sidworks DevTools for Shopware 6</strong>
                Version 1.0.0<br>
                <br>
                Inspect Twig templates directly in Chrome DevTools.<br>
                Made with ❤️ by <a href="https://www.sidworks.nl" target="_blank" style="color: #a855f7; text-decoration: none;">Sidworks</a>
            </div>
        </div>
    </div>

    <script src="js/options.js"></script>
</body>
</html>