app-icon-formatter/index.html at main · xcodeBn/app-icon-formatter · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>App Icon Formatter</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
  <script>
    tailwind.config = {
      darkMode: 'class', // or 'media'
      theme: {
        extend: {
          colors: {
            'brand-blue': '#3B82F6',
            'brand-gray': {
              DEFAULT: '#1F2937', // Used for dark selected platform card
              light: '#374151',   // Used for dark component backgrounds
              lighter: '#4B5563', // Used for dark borders/hover
              dark: '#111827',    // Used for dark body background
            }
          }
        }
      }
    }
  </script>
  <style>
    body {
      font-family: 'Inter', sans-serif;
    }
    /* Custom scrollbars */
    ::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }
    html.dark ::-webkit-scrollbar-track {
      background: #1f2937; /* brand-gray */
    }
    html:not(.dark) ::-webkit-scrollbar-track {
      background: #e5e7eb; /* gray-200 */
    }
    html.dark ::-webkit-scrollbar-thumb {
      background: #4b5563; /* brand-gray-lighter */
      border-radius: 4px;
    }
    html:not(.dark) ::-webkit-scrollbar-thumb {
      background: #9ca3af; /* gray-400 */
      border-radius: 4px;
    }
    html.dark ::-webkit-scrollbar-thumb:hover {
      background: #6b7280; /* gray-500 */
    }
    html:not(.dark) ::-webkit-scrollbar-thumb:hover {
      background: #6b7280; /* gray-500 */
    }

    /* Styles for selected platform cards - Light Mode (default) */
    .icon-checkbox:checked + label {
        border-color: #3B82F6; /* brand-blue */
        background-color: #DBEAFE; /* blue-200 for light theme selection */
    }
    .icon-checkbox:checked + label .icon-display-area {
        transform: scale(1.1);
        background-color: #3B82F6; /* brand-blue */
    }
    .icon-checkbox:checked + label .icon-display-area svg {
        color: #FFFFFF; /* white */
    }
    .icon-checkbox:checked + label .platform-label-text {
        font-weight: 600; /* semibold */
        color: #2563EB; /* blue-600 for light theme selected text */
    }

    /* Styles for selected platform cards - Dark Mode */
    .dark .icon-checkbox:checked + label {
        border-color: #3B82F6; /* brand-blue */
        background-color: #1F2937; /* brand-gray (default for dark) */
    }
    /* .dark .icon-checkbox:checked + label .icon-display-area - bg already brand-blue, svg white, scale same */
    .dark .icon-checkbox:checked + label .platform-label-text {
        font-weight: 600; /* semibold */
        color: #D1D5DB; /* gray-300 for dark theme selected text */
    }
  </style>
<script type="importmap">
{
  "imports": {
    "react/": "https://esm.sh/react@^19.1.0/",
    "react": "https://esm.sh/react@^19.1.0",
    "react-dom/": "https://esm.sh/react-dom@^19.1.0/"
  }
}
</script>
</head>
<body class="bg-slate-100 text-slate-800 dark:bg-brand-gray-dark dark:text-gray-200 antialiased">
  <div id="root"></div>
  <script type="module" src="./index.tsx"></script>

  <!-- SVG icons for theme toggle -->
  <svg width="0" height="0" style="display:none;" xmlns="http://www.w3.org/2000/svg">
    <symbol id="icon-sun" viewBox="0 0 24 24" fill="currentColor">
      <path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM12 15c-1.65 0-3-1.35-3-3s1.35-3 3-3 3 1.35 3 3-1.35 3-3 3zM12 2L11 3V5H13V3L12 2zM12 19L11 20V22H13V20L12 19zM4.22 5.64L2.81 4.22 5.64 2.81 4.22 5.64zM18.36 19.78L19.78 18.36 17.19 15.81 15.81 17.19 18.36 19.78zM19 12L20 11H22V13H20L19 12zM2 12L3 11V13H5V11L2 12zM5.64 18.36L4.22 19.78 2.81 17.19 1.64 15.81 5.64 18.36zM19.78 5.64L18.36 4.22 17.19 1.64 15.81 2.81 19.78 5.64z"></path>
    </symbol>
    <symbol id="icon-moon" viewBox="0 0 24 24" fill="currentColor">
      <path d="M10 2c-1.82 0-3.53.5-5 1.35C7.99 5.08 10 8.3 10 12s-2.01 6.92-5 8.65C6.47 21.5 8.18 22 10 22c5.52 0 10-4.48 10-10S15.52 2 10 2z"></path>
    </symbol>
  </svg>
</body>
</html><link rel="stylesheet" href="index.css">
<script src="index.tsx" type="module"></script>