Hugging Face's logo

Spaces:
broadfield-dev
/
noding
Sleeping

App Files Community
broadfield-dev commited on
Commit
91a4425
·
verified ·
1 Parent(s): 39d7539

Update static/styles.css

Browse files
Files changed (1) hide show
  1. static/styles.css +150 -21
static/styles.css CHANGED
@@ -1,34 +1,163 @@
1
- #container {
2
- width: 1000px;
3
- height: 600px;
4
- border: 1px solid #ccc;
5
- margin: 20px auto;
 
 
 
 
 
 
6
  }
7
 
8
- #controls {
9
- text-align: center;
10
- margin-bottom: 10px;
 
 
 
 
 
 
 
11
  }
12
 
13
- #codeFile, #codeInput, button {
14
- margin: 10px;
15
- padding: 10px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
16
  }
17
 
18
- #codeInput {
19
- width: 80%;
20
- max-width: 600px;
21
- font-family: monospace;
 
22
  }
23
 
24
- button {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
25
  cursor: pointer;
26
- background-color: #007bff;
 
 
 
 
 
 
 
 
 
 
 
27
  color: white;
28
- border: none;
29
- border-radius: 5px;
30
  }
31
 
32
- button:hover {
33
- background-color: #0056b3;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
34
  }
 
1
+ :root {
2
+ --bg-dark: #0f0f12;
3
+ --bg-panel: #1a1a1f;
4
+ --border: #2a2a35;
5
+ --accent: #6c5ce7;
6
+ --accent-hover: #5649c0;
7
+ --text-main: #dfe6e9;
8
+ --text-dim: #636e72;
9
+ --font-mono: 'JetBrains Mono', monospace;
10
+ --success: #00b894;
11
+ --error: #ff7675;
12
  }
13
 
14
+ * { box-sizing: border-box; }
15
+
16
+ body {
17
+ margin: 0;
18
+ padding: 0;
19
+ background-color: var(--bg-dark);
20
+ color: var(--text-main);
21
+ font-family: var(--font-mono);
22
+ height: 100vh;
23
+ overflow: hidden;
24
  }
25
 
26
+ .app-container {
27
+ display: flex;
28
+ height: 100%;
29
+ }
30
+
31
+ /* Sidebar Styling */
32
+ .sidebar {
33
+ width: 400px;
34
+ background-color: var(--bg-panel);
35
+ border-right: 1px solid var(--border);
36
+ display: flex;
37
+ flex-direction: column;
38
+ padding: 20px;
39
+ z-index: 10;
40
+ box-shadow: 5px 0 20px rgba(0,0,0,0.5);
41
+ }
42
+
43
+ .header h1 {
44
+ margin: 0;
45
+ font-size: 1.5rem;
46
+ letter-spacing: -1px;
47
+ }
48
+
49
+ .badge {
50
+ font-size: 0.7rem;
51
+ background: var(--border);
52
+ padding: 2px 6px;
53
+ border-radius: 4px;
54
+ color: var(--accent);
55
+ font-weight: bold;
56
  }
57
 
58
+ .editor-container {
59
+ flex: 1;
60
+ margin-top: 20px;
61
+ display: flex;
62
+ flex-direction: column;
63
  }
64
 
65
+ textarea {
66
+ flex: 1;
67
+ background: #000000;
68
+ border: 1px solid var(--border);
69
+ color: #a29bfe;
70
+ padding: 15px;
71
+ font-family: var(--font-mono);
72
+ font-size: 0.85rem;
73
+ resize: none;
74
+ border-radius: 6px;
75
+ outline: none;
76
+ line-height: 1.5;
77
+ }
78
+
79
+ textarea:focus {
80
+ border-color: var(--accent);
81
+ }
82
+
83
+ .controls {
84
+ margin-top: 20px;
85
+ display: flex;
86
+ gap: 10px;
87
+ }
88
+
89
+ .btn {
90
+ flex: 1;
91
+ padding: 12px;
92
+ border: none;
93
+ border-radius: 6px;
94
  cursor: pointer;
95
+ font-family: var(--font-mono);
96
+ font-weight: bold;
97
+ font-size: 0.9rem;
98
+ transition: all 0.2s;
99
+ display: flex;
100
+ align-items: center;
101
+ justify-content: center;
102
+ gap: 8px;
103
+ }
104
+
105
+ .btn.primary {
106
+ background: var(--accent);
107
  color: white;
 
 
108
  }
109
 
110
+ .btn.primary:hover { background: var(--accent-hover); }
111
+
112
+ .btn.secondary {
113
+ background: transparent;
114
+ border: 1px solid var(--border);
115
+ color: var(--text-main);
116
+ }
117
+
118
+ .btn.secondary:hover { background: var(--border); }
119
+
120
+ /* Console Logs */
121
+ .console {
122
+ margin-top: 20px;
123
+ height: 150px;
124
+ background: #000;
125
+ border: 1px solid var(--border);
126
+ border-radius: 6px;
127
+ display: flex;
128
+ flex-direction: column;
129
+ }
130
+
131
+ .console-header {
132
+ background: var(--border);
133
+ font-size: 0.7rem;
134
+ padding: 5px 10px;
135
+ color: #aaa;
136
+ text-transform: uppercase;
137
+ }
138
+
139
+ .console-body {
140
+ padding: 10px;
141
+ font-size: 0.75rem;
142
+ color: #55efc4;
143
+ overflow-y: auto;
144
+ flex: 1;
145
+ }
146
+
147
+ /* Canvas Area */
148
+ .canvas-wrapper {
149
+ flex: 1;
150
+ position: relative;
151
+ background-image:
152
+ radial-gradient(circle, #2a2a35 1px, transparent 1px);
153
+ background-size: 30px 30px;
154
+ }
155
+
156
+ .overlay-info {
157
+ position: absolute;
158
+ bottom: 20px;
159
+ right: 20px;
160
+ color: var(--text-dim);
161
+ font-size: 0.8rem;
162
+ pointer-events: none;
163
  }