Crypt3TR/editor.html at main · TBDwarf/Crypt3TR · 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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Crypt3TR Editor</title>
  <style>
    :root {
      --glass-bg: #ffffff;
      --glass-border: #e2e8f0;
      --text: #1e293b;
      --text-muted: #64748b;
      --input-bg: #f8fafc;
      --accent: #3b82f6;
      --accent-hover: #2563eb;
      --shadow: 0 10px 25px rgba(0,0,0,0.1);
    }

    [data-theme="dark"] {
      --glass-bg: #0f1115;
      --glass-border: #333333;
      --text: #f5f5f5;
      --text-muted: #9ca3af;
      --input-bg: #181a1f;
      --accent: #3b82f6;
      --accent-hover: #2563eb;
      --shadow: 0 10px 30px rgba(0,0,0,0.5);
    }

    html { background: transparent !important; margin: 0; padding: 0; }

    body {
      margin: 0; padding: 15px;
      width: 100vw; height: 100vh;
      overflow: hidden;
      background: var(--glass-bg);
      color: var(--text);
      font-family: 'Segoe UI', system-ui, sans-serif;
      display: flex; flex-direction: column;
      box-sizing: border-box;
      border-radius: 12px;
      border: 1px solid var(--glass-border);
    }

    .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; flex-shrink: 0; }
    .header h1 { font-size: 14px; margin: 0; font-weight: 700; letter-spacing: 0.5px; color: var(--accent); }

    .theme-toggle { background: none; border: none; cursor: pointer; font-size: 18px; padding: 5px; border-radius: 50%; display: flex; align-items: center; color: var(--text); }

    .input-container { position: relative; flex-grow: 1; display: flex; flex-direction: column; min-height: 0; }

    textarea {
      width: 100%; flex-grow: 1;
      background: var(--input-bg);
      border: 1px solid var(--glass-border);
      border-radius: 8px;
      color: var(--text);
      padding: 12px;
      font-size: 14px; line-height: 1.5;
      resize: none; outline: none;
      box-sizing: border-box;
    }

    .toolbar { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; flex-shrink: 0; }

    .btn-emoji {
      background: var(--input-bg); border: 1px solid var(--glass-border);
      color: var(--text); border-radius: 8px;
      cursor: pointer; font-size: 18px;
      display: flex; align-items: center; justify-content: center;
      width: 42px; height: 42px;
    }

    .actions { display: flex; gap: 8px; }
    button.main { padding: 10px 20px; border-radius: 8px; border: none; font-weight: 600; cursor: pointer; font-size: 14px; }
    .btn-ok { background: var(--accent); color: white; }
    .btn-cancel { background: transparent; color: var(--text-muted); }

    #emojiPicker {
      position: absolute; bottom: -10px; left: 0;
      width: 260px; height: 200px;
      background: var(--input-bg);
      border: 1px solid var(--glass-border);
      border-radius: 10px;
      display: none; flex-direction: column;
      box-shadow: var(--shadow);
      z-index: 100;
    }
    .emoji-search { padding: 8px; border-bottom: 1px solid var(--glass-border); }
    .emoji-search input { width: 100%; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 6px; color: var(--text); padding: 6px; font-size: 12px; outline: none; box-sizing: border-box; }
    .emoji-grid { flex-grow: 1; overflow-y: auto; padding: 8px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
    .emoji-item { font-size: 20px; cursor: pointer; text-align: center; padding: 4px; border-radius: 6px; }
    .emoji-item:hover { background: var(--accent); }

    #error { color: #f87171; font-size: 12px; margin-top: 4px; min-height: 14px; }
    ::-webkit-scrollbar { width: 6px; }
    ::-webkit-scrollbar-thumb { background: var(--glass-border); border-radius: 10px; }
  </style>
</head>
<body data-theme="dark">
  <div class="header">
    <h1 id="titleEditor">CRYPT3TR <span style="font-weight:300; opacity:0.7">EDITOR</span></h1>
    <button class="theme-toggle" id="themeToggle">🌓</button>
  </div>
  <div class="input-container">
    <!-- Placeholder vide ici, il sera injecté par JS -->
    <textarea id="editor"></textarea>
    <div id="emojiPicker">
      <div class="emoji-search"><input type="text" id="emojiSearchInput" placeholder="..."></div>
      <div id="emojiGrid" class="emoji-grid"></div>
    </div>
  </div>
  <div id="error"></div>
  <div class="toolbar">
    <button class="btn-emoji" id="btnEmoji">😊</button>
    <div class="actions">
      <button class="btn-cancel main" id="btnCancel">Annuler</button>
      <button class="btn-ok main" id="btnOk">Chiffrer</button>
    </div>
  </div>

  <!-- IMPORTANT : Charger lang.js avant editor.js -->
  <script src="lang.js"></script>
  <script src="emoji-data.js"></script>
  <script src="editor.js"></script>
</body>
</html>