Hugging Face's logo

Spaces:
heisbuba
/
quantvat
Running

App Files Community
1
heisbuba commited on
Commit
6ab8b38
·
verified ·
1 Parent(s): bfb566d

Update src/templates/base.html

Browse files
Files changed (1) hide show
  1. src/templates/base.html +197 -44
src/templates/base.html CHANGED
@@ -6,50 +6,203 @@
6
  <title>Crypto VAT v4.0 - Cloud Edition</title>
7
  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Inter:wght@400;600;800&display=swap" rel="stylesheet">
8
  <style>
9
- :root {
10
- --bg-dark: #0b0e11;
11
- --bg-card: #151a1e;
12
- --text-main: #eaecef;
13
- --text-dim: #848e9c;
14
- --accent-green: #0ecb81;
15
- --accent-blue: #3b82f6;
16
- --accent-orange: #f59e0b;
17
- --accent-red: #f6465d;
18
- --accent-purple: #9333ea;
19
- --border: #2b3139;
20
- --input-bg: #1e252a;
21
- }
22
- body { margin:0; background:var(--bg-dark); color:var(--text-main); font-family:'Inter',sans-serif; }
23
- .container { width: 100%; max-width: 600px; margin: 0 auto; padding: 0 15px; box-sizing: border-box; }
24
- /* "Wide" Modifier */
25
- .container.wide {
26
- max-width: 1000px;}
27
- .card { background:var(--bg-card); padding:25px; border-radius:12px; border:1px solid var(--border); margin-bottom:20px; }
28
- h1 { color:var(--accent-green); text-align:center; font-size:1.4rem; margin-bottom:10px; }
29
- h2 { color:var(--accent-blue); font-size:1.1rem; margin-top:20px; }
30
- input[type="text"], input[type="email"], input[type="password"] {
31
- width:100%; padding:12px; background:var(--input-bg);
32
- border:1px solid var(--border); color:#fff; border-radius:8px;
33
- font-family:monospace; margin-top:5px; box-sizing:border-box;
34
- }
35
- .btn { display:block; width:100%; padding:15px; border:none; border-radius:8px; font-weight:800; cursor:pointer; text-align:center; text-decoration:none; margin-top:10px; font-size:0.95rem; }
36
- .btn:hover { transform: translateY(-2px); }
37
- .btn-green { background:var(--accent-green); color:#000; }
38
- .btn-green:hover { box-shadow: 0 4px 12px rgba(14,203,129,0.3); opacity: 0.9; }
39
- .btn-blue { background:var(--bg-card); width: 90%; border:1px solid var(--accent-blue); color:var(--accent-blue); }
40
- .btn-blue:hover { background: rgba(59,130,246,0.1); box-shadow: 0 4px 12px rgba(59,130,246,0.2); }
41
- .btn-links{ background:var(--bg-card); width: 80%; border:1px solid var(--accent-blue); color:var(--accent-blue); }
42
- .btn-links:hover { background: rgba(59,130,246,0.1); }
43
- .btn-red { background:rgba(246,70,93,0.1); width:95%; border:1px solid var(--accent-red); color:var(--accent-red); }
44
- .btn-red:hover { background:rgba(246,70,93,0.2); box-shadow: 0 4px 12px rgba(246,70,93,0.2); }
45
- .link { color:var(--accent-blue); text-decoration:none; font-size:0.85rem; float:right; }
46
- .link:hover { text-decoration: underline; }
47
- .back-link { display:block; text-align:center; margin-top:20px; color:var(--text-dim); text-decoration:none; }
48
- .back-link:hover { color: var(--accent-blue); }
49
- .grid-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
50
- .error-message { color:var(--accent-red); padding:10px; background:rgba(246,70,93,0.1); border-radius:8px; margin:10px 0; }
51
- .success-message { color:var(--accent-green); padding:10px; background:rgba(14,203,129,0.1); border-radius:8px; margin:10px 0; }
52
- </style>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
53
  {% block extra_css %}{% endblock %}
54
  </head>
55
  <body>
 
6
  <title>Crypto VAT v4.0 - Cloud Edition</title>
7
  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Inter:wght@400;600;800&display=swap" rel="stylesheet">
8
  <style>
9
+ /* --- CSS VARIABLES (CUSTOM PROPERTIES) --- */
10
+
11
+ :root {
12
+ --bg-dark: #0b0e11;
13
+ --bg-card: #151a1e;
14
+ --text-main: #eaecef;
15
+ --text-dim: #848e9c;
16
+ --accent-green: #0ecb81;
17
+ --accent-blue: #3b82f6;
18
+ --accent-orange: #f59e0b;
19
+ --accent-red: #f6465d;
20
+ --accent-purple: #9333ea;
21
+ --border: #2b3139;
22
+ --input-bg: #1e252a;
23
+ }
24
+
25
+ /* --- BASE & LAYOUT --- */
26
+
27
+ body {
28
+ margin: 0;
29
+ background: var(--bg-dark);
30
+ color: var(--text-main);
31
+ font-family: 'Inter', sans-serif;
32
+ }
33
+
34
+ .container {
35
+ width: 100%;
36
+ max-width: 600px;
37
+ margin: 0 auto;
38
+ padding: 0 15px;
39
+ box-sizing: border-box;
40
+ }
41
+
42
+ /* "Wide" Modifier - for larger layouts */
43
+ .container.wide {
44
+ max-width: 1000px;
45
+ }
46
+
47
+ /* --- CARD COMPONENT --- */
48
+
49
+ .card {
50
+ background: var(--bg-card);
51
+ padding: 25px;
52
+ border-radius: 12px;
53
+ border: 1px solid var(--border);
54
+ margin-bottom: 20px;
55
+ }
56
+
57
+ /* --- TYPOGRAPHY --- */
58
+
59
+ h1 {
60
+ color: var(--accent-green);
61
+ text-align: center;
62
+ font-size: 1.4rem;
63
+ margin-bottom: 10px;
64
+ }
65
+
66
+ h2 {
67
+ color: var(--accent-blue);
68
+ font-size: 1.1rem;
69
+ margin-top: 20px;
70
+ }
71
+
72
+ /* --- FORM ELEMENTS --- */
73
+
74
+ input[type="text"],
75
+ input[type="email"],
76
+ input[type="password"] {
77
+ width: 100%;
78
+ padding: 12px;
79
+ background: var(--input-bg);
80
+ border: 1px solid var(--border);
81
+ color: #fff;
82
+ border-radius: 8px;
83
+ font-family: monospace;
84
+ margin-top: 5px;
85
+ box-sizing: border-box;
86
+ }
87
+
88
+ /* --- BUTTONS --- */
89
+
90
+ .btn {
91
+ display: block;
92
+ width: 100%;
93
+ padding: 15px;
94
+ border: none;
95
+ border-radius: 8px;
96
+ font-weight: 800;
97
+ cursor: pointer;
98
+ text-align: center;
99
+ text-decoration: none;
100
+ margin-top: 10px;
101
+ font-size: 0.95rem;
102
+ transition: transform 0.2s ease; /* For consistent hover animation */
103
+ }
104
+
105
+ .btn:hover {
106
+ transform: translateY(-2px);
107
+ }
108
+
109
+ /* Button Color Variants */
110
+ .btn-green {
111
+ background: var(--accent-green);
112
+ color: #000;
113
+ }
114
+
115
+ .btn-green:hover {
116
+ box-shadow: 0 4px 12px rgba(14, 203, 129, 0.3);
117
+ opacity: 0.9;
118
+ }
119
+
120
+ .btn-blue {
121
+ background: var(--bg-card);
122
+ width: 90%;
123
+ border: 1px solid var(--accent-blue);
124
+ color: var(--accent-blue);
125
+ }
126
+
127
+ .btn-blue:hover {
128
+ background: rgba(59, 130, 246, 0.1);
129
+ box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
130
+ }
131
+
132
+ .btn-links {
133
+ background: var(--bg-card);
134
+ width: 80%;
135
+ border: 1px solid var(--accent-blue);
136
+ color: var(--accent-blue);
137
+ }
138
+
139
+ .btn-links:hover {
140
+ background: rgba(59, 130, 246, 0.1);
141
+ }
142
+
143
+ .btn-red {
144
+ background: rgba(246, 70, 93, 0.1);
145
+ width: 95%;
146
+ border: 1px solid var(--accent-red);
147
+ color: var(--accent-red);
148
+ }
149
+
150
+ .btn-red:hover {
151
+ background: rgba(246, 70, 93, 0.2);
152
+ box-shadow: 0 4px 12px rgba(246, 70, 93, 0.2);
153
+ }
154
+
155
+ /* --- LINK STYLES --- */
156
+
157
+ .link {
158
+ color: var(--accent-blue);
159
+ text-decoration: none;
160
+ font-size: 0.85rem;
161
+ float: right;
162
+ }
163
+
164
+ .link:hover {
165
+ text-decoration: underline;
166
+ }
167
+
168
+ .back-link {
169
+ display: block;
170
+ text-align: center;
171
+ margin-top: 20px;
172
+ color: var(--text-dim);
173
+ text-decoration: none;
174
+ }
175
+
176
+ .back-link:hover {
177
+ color: var(--accent-blue);
178
+ }
179
+
180
+ /* --- GRID LAYOUT --- */
181
+
182
+ .grid-buttons {
183
+ display: grid;
184
+ grid-template-columns: 1fr 1fr;
185
+ gap: 10px;
186
+ }
187
+
188
+ /* --- MESSAGE STATES --- */
189
+
190
+ .error-message {
191
+ color: var(--accent-red);
192
+ padding: 10px;
193
+ background: rgba(246, 70, 93, 0.1);
194
+ border-radius: 8px;
195
+ margin: 10px 0;
196
+ }
197
+
198
+ .success-message {
199
+ color: var(--accent-green);
200
+ padding: 10px;
201
+ background: rgba(14, 203, 129, 0.1);
202
+ border-radius: 8px;
203
+ margin: 10px 0;
204
+ }
205
+ </style>
206
  {% block extra_css %}{% endblock %}
207
  </head>
208
  <body>