codeapp-js 0.1.0 → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,314 @@
1
+ :root {
2
+ --bg: #081014;
3
+ --panel: #0e1b21;
4
+ --panel-2: #12262d;
5
+ --line: rgba(130, 239, 214, 0.18);
6
+ --text: #d9fff7;
7
+ --muted: #7cb9ad;
8
+ --accent: #7df3d5;
9
+ --warning: #f7b267;
10
+ --shadow: 0 18px 56px rgba(0, 0, 0, 0.36);
11
+ }
12
+
13
+ * {
14
+ box-sizing: border-box;
15
+ }
16
+
17
+ html {
18
+ scroll-behavior: smooth;
19
+ }
20
+
21
+ body {
22
+ margin: 0;
23
+ min-height: 100vh;
24
+ background:
25
+ radial-gradient(circle at top right, rgba(125, 243, 213, 0.08), transparent 24%),
26
+ linear-gradient(180deg, #061015, var(--bg));
27
+ color: var(--text);
28
+ font-family: 'IBM Plex Mono', monospace;
29
+ }
30
+
31
+ .layout {
32
+ display: grid;
33
+ grid-template-columns: 280px minmax(0, 1fr);
34
+ min-height: 100vh;
35
+ }
36
+
37
+ .sidebar {
38
+ position: sticky;
39
+ top: 0;
40
+ display: flex;
41
+ flex-direction: column;
42
+ gap: 20px;
43
+ height: 100vh;
44
+ padding: 28px;
45
+ border-right: 1px solid var(--line);
46
+ background: linear-gradient(180deg, rgba(5, 14, 18, 0.94), rgba(9, 21, 26, 0.98));
47
+ }
48
+
49
+ .brand,
50
+ .sidebar nav a {
51
+ color: var(--text);
52
+ text-decoration: none;
53
+ }
54
+
55
+ .brand,
56
+ .hero h1,
57
+ .connectorMatrix h2,
58
+ .exampleStrip h2 {
59
+ font-family: 'Archivo', sans-serif;
60
+ }
61
+
62
+ .brand {
63
+ font-size: 1.35rem;
64
+ font-weight: 800;
65
+ letter-spacing: 0.06em;
66
+ text-transform: uppercase;
67
+ }
68
+
69
+ .versionBadge {
70
+ width: fit-content;
71
+ margin: 0;
72
+ padding: 6px 10px;
73
+ border: 1px solid var(--line);
74
+ border-radius: 999px;
75
+ color: var(--accent);
76
+ }
77
+
78
+ .sidebar nav {
79
+ display: grid;
80
+ gap: 12px;
81
+ }
82
+
83
+ .sidebar nav a {
84
+ color: var(--muted);
85
+ }
86
+
87
+ .sidebarPanel,
88
+ .heroMetricGrid article,
89
+ .eventFeed,
90
+ .commandDeck,
91
+ .matrixCard,
92
+ .exampleCard,
93
+ .terminalWindow {
94
+ border: 1px solid var(--line);
95
+ border-radius: 24px;
96
+ background: linear-gradient(180deg, rgba(14, 27, 33, 0.96), rgba(9, 18, 22, 0.96));
97
+ box-shadow: var(--shadow);
98
+ }
99
+
100
+ .sidebarPanel {
101
+ margin-top: auto;
102
+ padding: 18px;
103
+ }
104
+
105
+ .sidebarPanel p:last-child,
106
+ .heroText,
107
+ .eventFeed li,
108
+ .matrixCard span,
109
+ .exampleCard p {
110
+ color: var(--muted);
111
+ line-height: 1.7;
112
+ }
113
+
114
+ .mainPanel {
115
+ padding: 30px;
116
+ }
117
+
118
+ .hero {
119
+ display: grid;
120
+ grid-template-columns: 1.15fr 0.85fr;
121
+ gap: 22px;
122
+ align-items: stretch;
123
+ }
124
+
125
+ .signalTag,
126
+ .panelLabel {
127
+ margin: 0;
128
+ color: var(--warning);
129
+ font-size: 0.78rem;
130
+ font-weight: 700;
131
+ letter-spacing: 0.16em;
132
+ text-transform: uppercase;
133
+ }
134
+
135
+ .hero h1 {
136
+ margin: 16px 0 0;
137
+ font-size: clamp(3rem, 6vw, 5.2rem);
138
+ line-height: 0.92;
139
+ }
140
+
141
+ .heroText {
142
+ max-width: 720px;
143
+ margin: 18px 0 0;
144
+ }
145
+
146
+ .heroMetricGrid {
147
+ display: grid;
148
+ gap: 16px;
149
+ }
150
+
151
+ .heroMetricGrid article {
152
+ display: grid;
153
+ gap: 6px;
154
+ padding: 22px;
155
+ }
156
+
157
+ .heroMetricGrid span {
158
+ color: var(--muted);
159
+ }
160
+
161
+ .heroMetricGrid strong {
162
+ color: var(--accent);
163
+ font-size: 1.25rem;
164
+ }
165
+
166
+ .pipeline {
167
+ display: grid;
168
+ grid-template-columns: 1.15fr 0.85fr;
169
+ gap: 22px;
170
+ margin-top: 22px;
171
+ }
172
+
173
+ .terminalWindow {
174
+ overflow: hidden;
175
+ }
176
+
177
+ .windowBar {
178
+ display: flex;
179
+ gap: 8px;
180
+ padding: 14px 16px;
181
+ border-bottom: 1px solid var(--line);
182
+ }
183
+
184
+ .windowBar span {
185
+ width: 10px;
186
+ height: 10px;
187
+ border-radius: 50%;
188
+ background: rgba(125, 243, 213, 0.4);
189
+ }
190
+
191
+ pre,
192
+ .tabPanel code {
193
+ margin: 0;
194
+ white-space: pre-wrap;
195
+ }
196
+
197
+ pre {
198
+ padding: 20px;
199
+ color: var(--accent);
200
+ }
201
+
202
+ .eventFeed {
203
+ padding: 22px;
204
+ }
205
+
206
+ .eventFeed ul {
207
+ margin: 16px 0 0;
208
+ padding-left: 18px;
209
+ }
210
+
211
+ .commandDeck {
212
+ padding: 22px;
213
+ margin-top: 22px;
214
+ }
215
+
216
+ .deckHeader {
217
+ display: flex;
218
+ justify-content: space-between;
219
+ gap: 16px;
220
+ align-items: center;
221
+ }
222
+
223
+ .tabRow {
224
+ display: flex;
225
+ flex-wrap: wrap;
226
+ gap: 8px;
227
+ }
228
+
229
+ .tabButton {
230
+ border: 1px solid var(--line);
231
+ border-radius: 999px;
232
+ padding: 10px 14px;
233
+ background: transparent;
234
+ color: var(--muted);
235
+ font: inherit;
236
+ cursor: pointer;
237
+ }
238
+
239
+ .tabButton.is-active {
240
+ background: var(--accent);
241
+ color: #06201b;
242
+ }
243
+
244
+ .tabPanel {
245
+ display: none;
246
+ margin-top: 18px;
247
+ padding: 20px;
248
+ border-radius: 18px;
249
+ background: rgba(4, 11, 14, 0.76);
250
+ }
251
+
252
+ .tabPanel.is-active {
253
+ display: block;
254
+ }
255
+
256
+ .connectorMatrix,
257
+ .exampleStrip {
258
+ display: grid;
259
+ grid-template-columns: 1.2fr repeat(2, minmax(0, 1fr));
260
+ gap: 18px;
261
+ margin-top: 22px;
262
+ }
263
+
264
+ .connectorMatrix h2,
265
+ .exampleStrip h2 {
266
+ margin: 14px 0 0;
267
+ font-size: clamp(2rem, 4vw, 3.2rem);
268
+ line-height: 0.95;
269
+ }
270
+
271
+ .matrixCard,
272
+ .exampleCard {
273
+ padding: 20px;
274
+ }
275
+
276
+ .matrixCard strong,
277
+ .exampleCard span {
278
+ display: block;
279
+ margin-bottom: 8px;
280
+ color: var(--accent);
281
+ }
282
+
283
+ @media (max-width: 1080px) {
284
+ .layout {
285
+ grid-template-columns: 1fr;
286
+ }
287
+
288
+ .sidebar {
289
+ position: relative;
290
+ height: auto;
291
+ border-right: 0;
292
+ border-bottom: 1px solid var(--line);
293
+ }
294
+ }
295
+
296
+ @media (max-width: 880px) {
297
+ .hero,
298
+ .pipeline,
299
+ .connectorMatrix,
300
+ .exampleStrip {
301
+ grid-template-columns: 1fr;
302
+ }
303
+
304
+ .deckHeader {
305
+ flex-direction: column;
306
+ align-items: flex-start;
307
+ }
308
+ }
309
+
310
+ @media (max-width: 720px) {
311
+ .mainPanel {
312
+ padding: 20px;
313
+ }
314
+ }
@@ -0,0 +1,287 @@
1
+ :root {
2
+ --bg: #f3f6fb;
3
+ --panel: #ffffff;
4
+ --text: #17253b;
5
+ --muted: #55657d;
6
+ --line: #d9e2ef;
7
+ --accent: #0f6cbd;
8
+ --accent-soft: #dcecff;
9
+ --teal: #1f8f8a;
10
+ --shadow: 0 18px 40px rgba(15, 30, 58, 0.08);
11
+ }
12
+
13
+ * {
14
+ box-sizing: border-box;
15
+ }
16
+
17
+ html,
18
+ body {
19
+ margin: 0;
20
+ min-height: 100%;
21
+ }
22
+
23
+ body {
24
+ background:
25
+ linear-gradient(180deg, #f7f9fc, var(--bg));
26
+ color: var(--text);
27
+ font-family: 'Segoe UI Variable Text', 'Segoe UI', sans-serif;
28
+ }
29
+
30
+ .shell {
31
+ width: min(1240px, calc(100% - 40px));
32
+ margin: 0 auto;
33
+ padding: 22px 0 40px;
34
+ }
35
+
36
+ .topbar {
37
+ display: flex;
38
+ justify-content: space-between;
39
+ gap: 16px;
40
+ align-items: center;
41
+ padding: 10px 0 22px;
42
+ }
43
+
44
+ .brandBlock {
45
+ display: flex;
46
+ gap: 16px;
47
+ align-items: center;
48
+ }
49
+
50
+ .suiteMark {
51
+ display: grid;
52
+ place-items: center;
53
+ width: 48px;
54
+ height: 48px;
55
+ border-radius: 14px;
56
+ background: linear-gradient(135deg, #0f6cbd, #3a96dd);
57
+ color: #ffffff;
58
+ font-size: 1.4rem;
59
+ font-weight: 800;
60
+ }
61
+
62
+ .eyebrow {
63
+ margin: 0 0 6px;
64
+ color: var(--accent);
65
+ font-size: 0.8rem;
66
+ font-weight: 700;
67
+ letter-spacing: 0.12em;
68
+ text-transform: uppercase;
69
+ }
70
+
71
+ .topbar h1 {
72
+ max-width: 860px;
73
+ margin: 0;
74
+ font-size: clamp(2rem, 4.8vw, 3.9rem);
75
+ font-weight: 700;
76
+ line-height: 1.05;
77
+ }
78
+
79
+ .topbarMeta {
80
+ display: flex;
81
+ gap: 10px;
82
+ flex-wrap: wrap;
83
+ }
84
+
85
+ .topbarMeta span {
86
+ padding: 8px 12px;
87
+ border: 1px solid var(--line);
88
+ border-radius: 999px;
89
+ background: rgba(255, 255, 255, 0.9);
90
+ color: var(--muted);
91
+ font-size: 0.9rem;
92
+ }
93
+
94
+ .heroPanel {
95
+ display: grid;
96
+ grid-template-columns: 1.2fr 0.8fr;
97
+ gap: 20px;
98
+ padding: 24px;
99
+ border: 1px solid var(--line);
100
+ border-radius: 24px;
101
+ background: var(--panel);
102
+ box-shadow: var(--shadow);
103
+ }
104
+
105
+ .heroLead {
106
+ max-width: 760px;
107
+ margin: 0;
108
+ color: var(--muted);
109
+ font-size: 1.04rem;
110
+ line-height: 1.7;
111
+ }
112
+
113
+ .heroActions {
114
+ display: flex;
115
+ flex-wrap: wrap;
116
+ gap: 14px;
117
+ margin-top: 28px;
118
+ }
119
+
120
+ .heroActions a {
121
+ border-radius: 8px;
122
+ padding: 12px 18px;
123
+ text-decoration: none;
124
+ font-weight: 700;
125
+ transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease;
126
+ }
127
+
128
+ .primaryAction {
129
+ background: var(--accent);
130
+ color: #ffffff;
131
+ }
132
+
133
+ .secondaryAction {
134
+ border: 1px solid var(--line);
135
+ background: #ffffff;
136
+ color: var(--text);
137
+ }
138
+
139
+ .heroActions a:hover,
140
+ .heroActions a:focus-visible,
141
+ .conceptCard:hover,
142
+ .conceptCard:focus-within {
143
+ transform: translateY(-2px);
144
+ }
145
+
146
+ .heroStats {
147
+ display: grid;
148
+ gap: 12px;
149
+ }
150
+
151
+ .heroStats article {
152
+ display: grid;
153
+ gap: 4px;
154
+ padding: 18px;
155
+ border: 1px solid var(--line);
156
+ border-radius: 18px;
157
+ background: linear-gradient(180deg, #fdfefe, #f6f9fd);
158
+ }
159
+
160
+ .heroStats strong {
161
+ color: var(--accent);
162
+ font-size: 1.2rem;
163
+ }
164
+
165
+ .conceptGrid {
166
+ display: grid;
167
+ grid-template-columns: repeat(2, minmax(0, 1fr));
168
+ gap: 20px;
169
+ margin: 20px 0 28px;
170
+ }
171
+
172
+ .conceptCard {
173
+ display: flex;
174
+ flex-direction: column;
175
+ min-height: 340px;
176
+ padding: 26px;
177
+ border: 1px solid var(--line);
178
+ border-radius: 22px;
179
+ background: var(--panel);
180
+ box-shadow: var(--shadow);
181
+ transition: transform 180ms ease, border-color 180ms ease;
182
+ }
183
+
184
+ .makerCard {
185
+ background:
186
+ linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 255, 0.96)),
187
+ linear-gradient(90deg, transparent, transparent);
188
+ }
189
+
190
+ .workspaceCard {
191
+ background:
192
+ linear-gradient(180deg, rgba(247, 250, 255, 0.98), rgba(239, 245, 252, 0.98));
193
+ }
194
+
195
+ .conceptNumber {
196
+ margin: 0;
197
+ color: var(--accent);
198
+ font-size: 0.85rem;
199
+ font-weight: 700;
200
+ letter-spacing: 0.08em;
201
+ }
202
+
203
+ .conceptCard h2 {
204
+ margin: 18px 0 8px;
205
+ font-size: 2.05rem;
206
+ font-weight: 700;
207
+ }
208
+
209
+ .conceptTone {
210
+ margin: 0;
211
+ color: var(--teal);
212
+ font-weight: 700;
213
+ }
214
+
215
+ .conceptBody {
216
+ flex: 1;
217
+ color: var(--muted);
218
+ line-height: 1.7;
219
+ }
220
+
221
+ .tags {
222
+ display: flex;
223
+ flex-wrap: wrap;
224
+ gap: 10px;
225
+ padding: 0;
226
+ margin: 0 0 24px;
227
+ list-style: none;
228
+ }
229
+
230
+ .tags li {
231
+ border: 1px solid var(--line);
232
+ border-radius: 999px;
233
+ padding: 8px 12px;
234
+ font-size: 0.84rem;
235
+ font-weight: 600;
236
+ background: #f7fafe;
237
+ }
238
+
239
+ .conceptCard a {
240
+ color: var(--accent);
241
+ font-weight: 700;
242
+ text-decoration: none;
243
+ }
244
+
245
+ .footerNote {
246
+ padding-bottom: 22px;
247
+ color: var(--muted);
248
+ }
249
+
250
+ .is-visible {
251
+ animation: riseIn 520ms ease forwards;
252
+ }
253
+
254
+ @keyframes riseIn {
255
+ from {
256
+ opacity: 0;
257
+ transform: translateY(18px);
258
+ }
259
+
260
+ to {
261
+ opacity: 1;
262
+ transform: translateY(0);
263
+ }
264
+ }
265
+
266
+ @media (max-width: 980px) {
267
+ .heroPanel,
268
+ .conceptGrid {
269
+ grid-template-columns: 1fr;
270
+ }
271
+ }
272
+
273
+ @media (max-width: 720px) {
274
+ .shell {
275
+ width: min(100% - 20px, 1240px);
276
+ }
277
+
278
+ .topbar {
279
+ flex-direction: column;
280
+ align-items: flex-start;
281
+ }
282
+
283
+ .heroActions a {
284
+ width: 100%;
285
+ text-align: center;
286
+ }
287
+ }
@@ -1,7 +1,8 @@
1
1
  {
2
- "appDisplayName": "test groups please work",
2
+ "appId": "afb6517a-1b6d-4890-ae9f-3375fa875a0f",
3
+ "appDisplayName": "test groups app",
3
4
  "description": "",
4
- "environmentId": "<ENVIRONMENT ID>",
5
+ "environmentId": "Default-6b6c3ede-aa0d-4268-a46f-96b7621b13a8",
5
6
  "buildPath": "./dist",
6
7
  "buildEntryPoint": "index.html",
7
8
  "logoPath": "",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "codeapp-js",
3
- "version": "0.1.0",
3
+ "version": "0.1.1",
4
4
  "private": false,
5
5
  "description": "JavaScript library with samples and starter app for Power Apps Code Apps.",
6
6
  "scripts": {