CrytoTool/index.html at main · ObscuritySecurity/CrytoTool · 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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="theme-color" content="#000000" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-eval' 'wasm-unsafe-eval' 'sha256-OEPdcHzvKEr3pZVPkK7qb3CkSklneNEDL1ISFLi6KLc='; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; img-src 'self' data:; font-src 'self' https://fonts.gstatic.com; connect-src 'self'; frame-src 'none'; object-src 'none'; base-uri 'self'; form-action 'self';" />
    <title>CrytoTool</title>

    <script>
      // Load saved theme immediately to prevent flash
      (function() {
        const savedTheme = JSON.parse(localStorage.getItem('app_theme_config') || '{}');
        const savedFont = 'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif';

        const root = document.documentElement;

        // Defaults
        const defaults = {
          '--accent-color': '#39ff14',
          '--bg-main': '#000000',
          '--bg-card': '#09090b',
          '--bg-surface': '#18181b',
          '--border-color': '#27272a',
          '--text-main': '#ffffff',
          '--text-muted': '#a1a1aa'
        };

        const config = { ...defaults, ...savedTheme };

        // Apply theme variables
        Object.entries(config).forEach(([key, val]) => {
          root.style.setProperty(key, val);
        });

        // Apply font variable
        root.style.setProperty('--app-font', savedFont);

        // Set RGB for accent alpha/opacity utilities
        const accentHex = config['--accent-color'];
        if (accentHex) {
           const r = parseInt(accentHex.slice(1, 3), 16);
           const g = parseInt(accentHex.slice(3, 5), 16);
           const b = parseInt(accentHex.slice(5, 7), 16);
           root.style.setProperty('--accent-rgb', `${r}, ${g}, ${b}`);
        }
      })();

    </script>
    <style>
      body {
        background-color: var(--bg-main);
        color: var(--text-main);
        margin: 0;
        transition: background-color 0.5s ease, color 0.5s ease;
        font-family: var(--app-font);
      }
      ::-webkit-scrollbar {
        width: 8px;
      }
      ::-webkit-scrollbar-track {
        background: var(--bg-main);
      }
      ::-webkit-scrollbar-thumb {
        background: var(--border-color);
        border-radius: 4px;
      }
      ::-webkit-scrollbar-thumb:hover {
        background: var(--accent-color);
      }

      :root {
        --accent-color: #39ff14;
        --accent-rgb: 57, 255, 20;
        --bg-main: #000000;
        --bg-card: #09090b;
        --bg-surface: #18181b;
        --border-color: #27272a;
        --text-main: #ffffff;
        --text-muted: #a1a1aa;
        --app-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      }

      input[type="color"]::-webkit-color-swatch-wrapper {
        padding: 0;
      }
      input[type="color"]::-webkit-color-swatch {
        border: none;
        border-radius: 9999px;
      }
    </style>

</head>
  <body>
    <div id="root"></div>
    <script type="module" src="/index.tsx"></script>
  </body>
</html>