Style-Extractor-PRO/popup.html at main · AR1ES-DEV/Style-Extractor-PRO · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
  <title>Style Extractor PRO</title>
  <link rel="stylesheet" href="styles.css"/>
</head>
<body>
<div class="container">

  <h1>
    <svg viewBox="0 0 24 24" fill="none" stroke="url(#lg)" stroke-width="2" width="18" height="18">
      <defs><linearGradient id="lg" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="#a78bfa"/><stop offset="100%" stop-color="#06b6d4"/></linearGradient></defs>
      <circle cx="12" cy="12" r="3"/><path d="M12 1v4M12 19v4M4.22 4.22l2.83 2.83M16.95 16.95l2.83 2.83M1 12h4M19 12h4M4.22 19.78l2.83-2.83M16.95 7.05l2.83-2.83"/>
    </svg>
    <span class="logo-text">Style Extractor</span>
    <span class="pro-badge">PRO</span>
  </h1>

  <!-- ACTIONS -->
  <div class="section">
    <button class="primary" id="extract">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-width="2" d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg>
      Extract Styles
    </button>
    <button id="inspect">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-width="2" d="M15 15l6 6M17 11A6 6 0 115 11a6 6 0 0112 0z"/></svg>
      Inspector Tool
    </button>
    <button id="detectTech">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17H3a2 2 0 01-2-2V5a2 2 0 012-2h14a2 2 0 012 2v10a2 2 0 01-2 2h-2"/></svg>
      Detect Tech Stack
    </button>
  </div>

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

  <div class="divider"></div>

  <!-- EXPORT -->
  <div class="section">
    <h3>Export</h3>
    <div class="button-row">
      <button id="export">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-width="2" d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8zM14 2v6h6"/></svg>
        JSON
      </button>
      <button id="exportCSS">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-width="2" d="M8 9l-2 3 2 3M16 9l2 3-2 3M12 7l-2 10"/></svg>
        CSS Vars
      </button>
      <button id="exportTailwind">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-width="2" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM8 12s1-4 4-4 4 4 4 4-1 4-4 4-4-4-4-4z"/></svg>
        Tailwind
      </button>
      <button id="exportPng">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><rect x="3" y="3" width="18" height="18" rx="2" stroke-width="2"/><circle cx="8.5" cy="8.5" r="1.5" stroke-width="2"/><path d="M21 15l-5-5L5 21" stroke-width="2"/></svg>
        Palette PNG
      </button>
    </div>
  </div>

  <div class="divider"></div>

  <!-- TABS -->
  <div class="tabs">
    <button class="tab active" data-tab="colorsTab">Colors</button>
    <button class="tab" data-tab="fontsTab">Fonts</button>
    <button class="tab" data-tab="techTab">Tech</button>
  </div>

  <!-- COLORS TAB -->
  <div class="tab-content active" id="colorsTab">
    <div class="search-wrap">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><circle cx="11" cy="11" r="8" stroke-width="2"/><path d="M21 21l-4.35-4.35" stroke-width="2"/></svg>
      <input type="text" id="colorSearch" class="search-input" placeholder="Search hex, hsl, or color name…"/>
    </div>
    <div id="colors"></div>
  </div>

  <!-- FONTS TAB -->
  <div class="tab-content" id="fontsTab">
    <div class="search-wrap">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><circle cx="11" cy="11" r="8" stroke-width="2"/><path d="M21 21l-4.35-4.35" stroke-width="2"/></svg>
      <input type="text" id="fontSearch" class="search-input" placeholder="Search fonts…"/>
    </div>
    <div id="fonts"></div>
  </div>

  <!-- TECH TAB -->
  <div class="tab-content" id="techTab">
    <div id="techList"></div>
  </div>

</div>
<script src="popup.js"></script>
</body>
</html>