Hugging Face's logo

Spaces:
doeqoth
/
doegoth
Running

App Files Community
PISAN commited on
Commit
20b7615
·
verified ·
1 Parent(s): 4ba6554

Create components/sidebar.js

Browse files
Files changed (1) hide show
  1. components/sidebar.js +188 -0
components/sidebar.js ADDED
@@ -0,0 +1,188 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class AppSidebar extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ :host {
7
+ width: var(--sidebar-width, 320px);
8
+ background-color: white;
9
+ border-right: 1px solid #e2e8f0;
10
+ display: flex;
11
+ flex-direction: column;
12
+ height: 100%;
13
+ overflow-y: auto;
14
+ transition: transform 0.3s ease;
15
+ flex-shrink: 0;
16
+ z-index: 40;
17
+ }
18
+ .section {
19
+ padding: 1.5rem 1rem;
20
+ border-bottom: 1px solid #f1f5f9;
21
+ }
22
+ .section h3 {
23
+ font-size: 0.875rem;
24
+ font-weight: 700;
25
+ text-transform: uppercase;
26
+ color: #64748b;
27
+ margin-bottom: 1rem;
28
+ display: flex;
29
+ align-items: center;
30
+ gap: 0.5rem;
31
+ }
32
+ label.file-label {
33
+ display: flex;
34
+ align-items: center;
35
+ justify-content: center;
36
+ gap: 0.5rem;
37
+ width: 100%;
38
+ padding: 0.75rem;
39
+ background: #eff6ff;
40
+ color: #2563eb;
41
+ border: 1px dashed #bfdbfe;
42
+ border-radius: 0.5rem;
43
+ font-size: 0.875rem;
44
+ font-weight: 500;
45
+ cursor: pointer;
46
+ transition: all 0.2s;
47
+ text-align: center;
48
+ }
49
+ label.file-label:hover {
50
+ background: #dbeafe;
51
+ border-color: #3b82f6;
52
+ }
53
+ .file-name {
54
+ font-size: 0.75rem;
55
+ color: #94a3b8;
56
+ margin-top: 0.25rem;
57
+ white-space: nowrap;
58
+ overflow: hidden;
59
+ text-overflow: ellipsis;
60
+ }
61
+ button.action-btn {
62
+ width: 100%;
63
+ padding: 0.75rem;
64
+ border-radius: 0.5rem;
65
+ border: none;
66
+ font-weight: 600;
67
+ cursor: pointer;
68
+ display: flex;
69
+ align-items: center;
70
+ justify-content: center;
71
+ gap: 0.5rem;
72
+ transition: all 0.2s;
73
+ margin-bottom: 0.5rem;
74
+ }
75
+ .btn-primary {
76
+ background: linear-gradient(135deg, #2563eb, #4f46e5);
77
+ color: white;
78
+ }
79
+ .btn-primary:hover {
80
+ box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
81
+ transform: translateY(-1px);
82
+ }
83
+ .btn-secondary {
84
+ background: #f1f5f9;
85
+ color: #475569;
86
+ }
87
+ .btn-secondary:hover {
88
+ background: #e2e8f0;
89
+ }
90
+ .btn-indigo {
91
+ background: #4f46e5;
92
+ color: white;
93
+ }
94
+ .form-group {
95
+ margin-bottom: 1rem;
96
+ }
97
+ select.form-control {
98
+ width: 100%;
99
+ padding: 0.5rem;
100
+ border: 1px solid #cbd5e1;
101
+ border-radius: 0.375rem;
102
+ background: white;
103
+ }
104
+ /* Dark Mode Support via Host selector */
105
+ :host-context([data-theme="dark"]) {
106
+ background-color: #1e293b;
107
+ border-color: #334155;
108
+ }
109
+ :host-context([data-theme="dark"]) .section h3 {
110
+ color: #94a3b8;
111
+ }
112
+ :host-context([data-theme="dark"]) label.file-label {
113
+ background: #172554;
114
+ color: #60a5fa;
115
+ border-color: #1e3a8a;
116
+ }
117
+ :host-context([data-theme="dark"]) .file-name {
118
+ color: #64748b;
119
+ }
120
+ :host-context([data-theme="dark"]) .btn-secondary {
121
+ background: #334155;
122
+ color: #e2e8f0;
123
+ }
124
+ :host-context([data-theme="dark"]) select.form-control {
125
+ background: #0f172a;
126
+ color: white;
127
+ border-color: #475569;
128
+ }
129
+ </style>
130
+
131
+ <!-- Standard Sidebar Content -->
132
+ <div id="sidebar-standard">
133
+ <div class="section">
134
+ <h3><i data-feather="image"></i> Backgrounds</h3>
135
+ <div class="form-group">
136
+ <input type="file" id="bg1-file" accept="image/*,.pdf" class="hidden">
137
+ <label for="bg1-file" class="file-label">
138
+ <i data-feather="upload"></i> Page 1 Image
139
+ </label>
140
+ <div id="bg1-name" class="file-name">No file selected</div>
141
+ </div>
142
+ <div class="form-group">
143
+ <input type="file" id="bg2-file" accept="image/*,.pdf" class="hidden">
144
+ <label for="bg2-file" class="file-label">
145
+ <i data-feather="upload"></i> Page 2 Image
146
+ </label>
147
+ <div id="bg2-name" class="file-name">No file selected</div>
148
+ </div>
149
+ <button id="btn-apply-bg" class="action-btn btn-primary">
150
+ <i data-feather="check"></i> Apply Backgrounds
151
+ </button>
152
+ </div>
153
+
154
+ <div class="section">
155
+ <h3><i data-feather="database"></i> Data Source</h3>
156
+ <div class="form-group">
157
+ <input type="file" id="json-file" accept=".json" class="hidden">
158
+ <label for="json-file" class="file-label">
159
+ <i data-feather="file-text"></i> Import JSON
160
+ </label>
161
+ <div id="json-name" class="file-name">No file selected</div>
162
+ </div>
163
+ <div class="form-group">
164
+ <label class="text-xs font-bold text-slate-500 uppercase mb-1 block">Select Record</label>
165
+ <select id="data-select" class="form-control" disabled>
166
+ <option value="">-- No Data --</option>
167
+ </select>
168
+ </div>
169
+ <button id="btn-load-sample" class="action-btn btn-indigo">
170
+ <i data-feather="box"></i> Load Sample
171
+ </button>
172
+ </div>
173
+
174
+ <div class="section">
175
+ <h3><i data-feather="book-open"></i> PDF Tools</h3>
176
+ <div class="form-group">
177
+ <input type="file" id="pdf-upload" accept="application/pdf" class="hidden">
178
+ <label for="pdf-upload" class="file-label">
179
+ <i data-feather="upload"></i> Import PDF
180
+ </label>
181
+ <div id="pdf-name" class="file-name">No file selected</div>
182
+ </div>
183
+ </div>
184
+
185
+ <div class="section">
186
+ <h3><i data-feather="download"></i> Export</h3>
187
+ <button id="btn-download-pdf" class="action-btn btn-primary">
188
+ <i data