imoji-extension/options.html at main · scxr-dev/imoji-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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>imoji Enterprise Settings</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400&display=swap" rel="stylesheet">
    <style>
        :root { --primary: #6366f1; --bg: #f1f5f9; --card: #ffffff; --text: #0f172a; }
        body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); margin: 0; padding: 40px 20px; }

        .layout { max-width: 900px; margin: 0 auto; display: grid; grid-template-columns: 280px 1fr; gap: 24px; }

        /* Sidebar */
        .sidebar { position: sticky; top: 40px; height: fit-content; }
        .brand { font-size: 24px; font-weight: 800; margin-bottom: 32px; display: flex; align-items: center; gap: 10px; }
        .nav-item {
            padding: 12px 16px; border-radius: 8px; font-weight: 500; color: #64748b; cursor: pointer; margin-bottom: 4px;
            transition: all 0.2s;
        }
        .nav-item.active { background: white; color: var(--primary); box-shadow: 0 2px 4px rgba(0,0,0,0.05); }

        /* Content */
        .card { background: var(--card); border-radius: 16px; padding: 32px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); }
        h2 { margin-top: 0; font-size: 20px; border-bottom: 1px solid #e2e8f0; padding-bottom: 16px; margin-bottom: 24px; }

        /* Inputs */
        .input-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end; margin-bottom: 24px; }
        .form-group label { font-size: 12px; font-weight: 600; color: #64748b; margin-bottom: 6px; display: block; }
        input {
            width: 100%; padding: 12px; border: 1px solid #cbd5e1; border-radius: 8px;
            font-family: 'JetBrains Mono', monospace; box-sizing: border-box;
        }
        input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1); }

        .btn { background: var(--primary); color: white; border: none; padding: 12px 24px; border-radius: 8px; font-weight: 600; cursor: pointer; }
        .btn:hover { background: #4f46e5; }

        /* List */
        .list-header { display: grid; grid-template-columns: 1fr 1fr auto; padding: 0 16px 12px; font-size: 12px; font-weight: 600; color: #94a3b8; }
        .list-item {
            display: grid; grid-template-columns: 1fr 1fr auto; align-items: center;
            padding: 16px; border-bottom: 1px solid #f1f5f9;
        }
        .list-item:last-child { border: none; }
        .code-tag { background: #e0e7ff; color: var(--primary); padding: 4px 8px; border-radius: 4px; font-family: 'JetBrains Mono'; font-size: 13px; }
        .del-btn { color: #ef4444; background: #fef2f2; border: none; padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 600; }
        .del-btn:hover { background: #fee2e2; }

        /* Data Management */
        .data-actions { display: flex; gap: 12px; margin-top: 32px; padding-top: 32px; border-top: 1px solid #e2e8f0; }
        .btn-outline { background: transparent; border: 1px solid #cbd5e1; color: #475569; }
    </style>
</head>
<body>
    <div class="layout">
        <aside class="sidebar">
            <div class="brand"><span>⚡</span> imoji Ent.</div>
            <div class="nav-item active">Shortcuts</div>
            <div class="nav-item">Data Management</div>
        </aside>

        <main>
            <div class="card">
                <h2>Add New Shortcut</h2>
                <form id="add-form" class="input-row">
                    <div class="form-group">
                        <label>Trigger Code</label>
                        <input type="text" id="shortcode" placeholder=":fire:">
                    </div>
                    <div class="form-group">
                        <label>Replacement</label>
                        <input type="text" id="emoji" placeholder="🔥">
                    </div>
                    <button type="submit" class="btn">Add</button>
                </form>

                <div class="list-header">
                    <span>TRIGGER</span>
                    <span>OUTPUT</span>
                    <span>ACTION</span>
                </div>
                <div id="list"></div>

                <div class="data-actions">
                    <button id="export-btn" class="btn btn-outline">Export Config (JSON)</button>
                    <button id="import-btn" class="btn btn-outline">Import Config</button>
                    <input type="file" id="file-input" style="display: none" accept=".json">
                </div>
            </div>
        </main>
    </div>
    <script src="options.js"></script>
</body>
</html>