the_mechanic_2 0.1.0

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,666 @@
1
+ /* The Mechanic 2 - Inline Styles */
2
+ /* Replicates the original Mechanic design without external dependencies */
3
+
4
+ /* Reset and Base Styles */
5
+ * {
6
+ margin: 0;
7
+ padding: 0;
8
+ box-sizing: border-box;
9
+ }
10
+
11
+ html, body {
12
+ height: 100%;
13
+ font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
14
+ font-size: 16px;
15
+ line-height: 1.5;
16
+ color: #1f2937;
17
+ background-color: #f9fafb;
18
+ }
19
+
20
+ code, pre {
21
+ font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Courier New', monospace;
22
+ }
23
+
24
+ /* Layout */
25
+ #app {
26
+ min-height: 100vh;
27
+ display: flex;
28
+ flex-direction: column;
29
+ }
30
+
31
+ /* Header */
32
+ .header {
33
+ background-color: #1f2937;
34
+ color: white;
35
+ padding: 1.5rem 2rem;
36
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
37
+ }
38
+
39
+ .header-content {
40
+ max-width: 1400px;
41
+ margin: 0 auto;
42
+ display: flex;
43
+ justify-content: space-between;
44
+ align-items: center;
45
+ }
46
+
47
+ .header h1 {
48
+ font-size: 1.875rem;
49
+ font-weight: 700;
50
+ margin: 0;
51
+ }
52
+
53
+ .header-subtitle {
54
+ font-size: 0.875rem;
55
+ color: #9ca3af;
56
+ margin-top: 0.25rem;
57
+ }
58
+
59
+ /* Main Content */
60
+ .main-content {
61
+ flex: 1;
62
+ max-width: 1400px;
63
+ width: 100%;
64
+ margin: 0 auto;
65
+ padding: 2rem;
66
+ }
67
+
68
+ /* Buttons */
69
+ .btn {
70
+ display: inline-flex;
71
+ align-items: center;
72
+ justify-content: center;
73
+ padding: 0.5rem 1rem;
74
+ font-size: 0.875rem;
75
+ font-weight: 500;
76
+ border-radius: 0.5rem;
77
+ border: none;
78
+ cursor: pointer;
79
+ transition: all 0.2s;
80
+ text-decoration: none;
81
+ }
82
+
83
+ .btn:disabled {
84
+ opacity: 0.5;
85
+ cursor: not-allowed;
86
+ }
87
+
88
+ .btn-primary {
89
+ background-color: #2563eb;
90
+ color: white;
91
+ }
92
+
93
+ .btn-primary:hover:not(:disabled) {
94
+ background-color: #1d4ed8;
95
+ }
96
+
97
+ .btn-secondary {
98
+ background-color: #e5e7eb;
99
+ color: #374151;
100
+ }
101
+
102
+ .btn-secondary:hover:not(:disabled) {
103
+ background-color: #d1d5db;
104
+ }
105
+
106
+ .btn-success {
107
+ background-color: #10b981;
108
+ color: white;
109
+ }
110
+
111
+ .btn-success:hover:not(:disabled) {
112
+ background-color: #059669;
113
+ }
114
+
115
+ .btn-danger {
116
+ background-color: #ef4444;
117
+ color: white;
118
+ }
119
+
120
+ .btn-danger:hover:not(:disabled) {
121
+ background-color: #dc2626;
122
+ }
123
+
124
+ .btn-group {
125
+ display: flex;
126
+ gap: 0.5rem;
127
+ margin-top: 1rem;
128
+ }
129
+
130
+ /* Cards */
131
+ .card {
132
+ background-color: white;
133
+ border-radius: 0.5rem;
134
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
135
+ border: 1px solid #e5e7eb;
136
+ padding: 1.5rem;
137
+ margin-bottom: 1.5rem;
138
+ }
139
+
140
+ .card-header {
141
+ font-size: 1.125rem;
142
+ font-weight: 600;
143
+ margin-bottom: 1rem;
144
+ color: #111827;
145
+ }
146
+
147
+ /* Code Input Section */
148
+ .code-input-section {
149
+ margin-bottom: 2rem;
150
+ }
151
+
152
+ .code-input-grid {
153
+ display: grid;
154
+ grid-template-columns: 1fr 1fr;
155
+ gap: 1.5rem;
156
+ margin-top: 1rem;
157
+ }
158
+
159
+ .code-input-container {
160
+ display: flex;
161
+ flex-direction: column;
162
+ }
163
+
164
+ .code-input-label {
165
+ font-weight: 600;
166
+ margin-bottom: 0.5rem;
167
+ color: #374151;
168
+ font-size: 0.875rem;
169
+ text-transform: uppercase;
170
+ letter-spacing: 0.05em;
171
+ }
172
+
173
+ .code-editor {
174
+ border: 1px solid #d1d5db;
175
+ border-radius: 0.375rem;
176
+ min-height: 200px;
177
+ font-family: 'Monaco', 'Menlo', monospace;
178
+ font-size: 14px;
179
+ }
180
+
181
+ .shared-setup-container {
182
+ margin-top: 1.5rem;
183
+ display: flex;
184
+ flex-direction: column;
185
+ }
186
+
187
+ .shared-setup-container .code-input-label {
188
+ display: block;
189
+ margin-bottom: 0.5rem;
190
+ }
191
+
192
+ .shared-setup-container .code-editor {
193
+ width: 100%;
194
+ }
195
+
196
+ /* Results Section */
197
+ .results-section {
198
+ margin-top: 2rem;
199
+ }
200
+
201
+ .results-grid {
202
+ display: grid;
203
+ grid-template-columns: 1fr 1fr;
204
+ gap: 1.5rem;
205
+ margin-top: 1rem;
206
+ }
207
+
208
+ .result-card {
209
+ background-color: white;
210
+ border-radius: 0.5rem;
211
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
212
+ border: 2px solid #e5e7eb;
213
+ padding: 1.5rem;
214
+ position: relative;
215
+ }
216
+
217
+ .result-card.winner {
218
+ border-color: #10b981;
219
+ background-color: #f0fdf4;
220
+ }
221
+
222
+ .result-card-header {
223
+ display: flex;
224
+ justify-content: space-between;
225
+ align-items: center;
226
+ margin-bottom: 1rem;
227
+ }
228
+
229
+ .result-card-title {
230
+ font-size: 1.25rem;
231
+ font-weight: 700;
232
+ color: #111827;
233
+ }
234
+
235
+ .winner-badge {
236
+ background-color: #10b981;
237
+ color: white;
238
+ padding: 0.25rem 0.75rem;
239
+ border-radius: 9999px;
240
+ font-size: 0.75rem;
241
+ font-weight: 600;
242
+ text-transform: uppercase;
243
+ }
244
+
245
+ .performance-ratio {
246
+ font-size: 0.875rem;
247
+ color: #059669;
248
+ font-weight: 600;
249
+ margin-top: 0.25rem;
250
+ }
251
+
252
+ .metrics-list {
253
+ list-style: none;
254
+ padding: 0;
255
+ margin: 0;
256
+ }
257
+
258
+ .metric-item {
259
+ display: flex;
260
+ justify-content: space-between;
261
+ padding: 0.75rem 0;
262
+ border-bottom: 1px solid #f3f4f6;
263
+ }
264
+
265
+ .metric-item:last-child {
266
+ border-bottom: none;
267
+ }
268
+
269
+ .metric-label {
270
+ font-weight: 500;
271
+ color: #6b7280;
272
+ font-size: 0.875rem;
273
+ }
274
+
275
+ .metric-value {
276
+ font-weight: 600;
277
+ color: #111827;
278
+ font-family: 'Monaco', 'Menlo', monospace;
279
+ font-size: 0.875rem;
280
+ }
281
+
282
+ /* Summary Section */
283
+ .summary-section {
284
+ background-color: #eff6ff;
285
+ border: 1px solid #bfdbfe;
286
+ border-radius: 0.5rem;
287
+ padding: 1rem;
288
+ margin-top: 1.5rem;
289
+ }
290
+
291
+ .summary-text {
292
+ font-size: 1rem;
293
+ color: #1e40af;
294
+ font-weight: 500;
295
+ }
296
+
297
+ /* Runtime Logs */
298
+ .runtime-logs {
299
+ margin-top: 2rem;
300
+ }
301
+
302
+ .logs-header {
303
+ display: flex;
304
+ justify-content: space-between;
305
+ align-items: center;
306
+ cursor: pointer;
307
+ padding: 1rem;
308
+ background-color: #f9fafb;
309
+ border: 1px solid #e5e7eb;
310
+ border-radius: 0.5rem;
311
+ user-select: none;
312
+ }
313
+
314
+ .logs-header:hover {
315
+ background-color: #f3f4f6;
316
+ }
317
+
318
+ .logs-title {
319
+ font-weight: 600;
320
+ color: #374151;
321
+ }
322
+
323
+ .logs-toggle {
324
+ font-size: 1.25rem;
325
+ color: #6b7280;
326
+ transition: transform 0.2s;
327
+ }
328
+
329
+ .logs-toggle.expanded {
330
+ transform: rotate(180deg);
331
+ }
332
+
333
+ .logs-content {
334
+ border: 1px solid #e5e7eb;
335
+ border-top: none;
336
+ border-radius: 0 0 0.5rem 0.5rem;
337
+ overflow: hidden;
338
+ }
339
+
340
+ .logs-tabs {
341
+ display: flex;
342
+ background-color: #f9fafb;
343
+ border-bottom: 1px solid #e5e7eb;
344
+ }
345
+
346
+ .log-tab {
347
+ flex: 1;
348
+ padding: 0.75rem 1rem;
349
+ border: none;
350
+ background: none;
351
+ cursor: pointer;
352
+ font-weight: 500;
353
+ color: #6b7280;
354
+ border-bottom: 2px solid transparent;
355
+ transition: all 0.2s;
356
+ }
357
+
358
+ .log-tab:hover {
359
+ color: #374151;
360
+ background-color: #f3f4f6;
361
+ }
362
+
363
+ .log-tab.active {
364
+ color: #2563eb;
365
+ border-bottom-color: #2563eb;
366
+ background-color: white;
367
+ }
368
+
369
+ .log-panel {
370
+ padding: 1rem;
371
+ background-color: #1f2937;
372
+ color: #f9fafb;
373
+ font-family: 'Monaco', 'Menlo', monospace;
374
+ font-size: 0.875rem;
375
+ max-height: 400px;
376
+ overflow-y: auto;
377
+ white-space: pre-wrap;
378
+ word-wrap: break-word;
379
+ }
380
+
381
+ /* Export Buttons */
382
+ .export-section {
383
+ margin-top: 1.5rem;
384
+ padding-top: 1.5rem;
385
+ border-top: 1px solid #e5e7eb;
386
+ }
387
+
388
+ .export-buttons {
389
+ display: flex;
390
+ gap: 0.5rem;
391
+ }
392
+
393
+ /* Loading State */
394
+ .loading-spinner {
395
+ display: inline-block;
396
+ width: 1rem;
397
+ height: 1rem;
398
+ border: 2px solid #f3f4f6;
399
+ border-top-color: #2563eb;
400
+ border-radius: 50%;
401
+ animation: spin 0.6s linear infinite;
402
+ }
403
+
404
+ @keyframes spin {
405
+ to { transform: rotate(360deg); }
406
+ }
407
+
408
+ /* Error Messages */
409
+ .error-message {
410
+ background-color: #fef2f2;
411
+ border: 1px solid #fecaca;
412
+ color: #991b1b;
413
+ padding: 1rem;
414
+ border-radius: 0.5rem;
415
+ margin-bottom: 1rem;
416
+ }
417
+
418
+ .error-list {
419
+ list-style: disc;
420
+ margin-left: 1.5rem;
421
+ margin-top: 0.5rem;
422
+ }
423
+
424
+ /* Success Messages */
425
+ .success-message {
426
+ background-color: #f0fdf4;
427
+ border: 1px solid #bbf7d0;
428
+ color: #166534;
429
+ padding: 1rem;
430
+ border-radius: 0.5rem;
431
+ margin-bottom: 1rem;
432
+ }
433
+
434
+ /* Footer */
435
+ .footer {
436
+ background-color: #f9fafb;
437
+ border-top: 1px solid #e5e7eb;
438
+ padding: 1.5rem 2rem;
439
+ text-align: center;
440
+ color: #6b7280;
441
+ font-size: 0.875rem;
442
+ }
443
+
444
+ .footer a {
445
+ color: #2563eb;
446
+ text-decoration: none;
447
+ }
448
+
449
+ .footer a:hover {
450
+ text-decoration: underline;
451
+ }
452
+
453
+ /* Responsive Design */
454
+ @media (max-width: 1024px) {
455
+ .code-input-grid,
456
+ .results-grid {
457
+ grid-template-columns: 1fr;
458
+ }
459
+
460
+ .main-content {
461
+ padding: 1rem;
462
+ }
463
+ }
464
+
465
+ @media (max-width: 640px) {
466
+ .header {
467
+ padding: 1rem;
468
+ }
469
+
470
+ .header h1 {
471
+ font-size: 1.5rem;
472
+ }
473
+
474
+ .btn-group {
475
+ flex-direction: column;
476
+ }
477
+
478
+ .btn {
479
+ width: 100%;
480
+ }
481
+
482
+ .logs-tabs {
483
+ flex-wrap: wrap;
484
+ }
485
+
486
+ .log-tab {
487
+ flex: 1 1 50%;
488
+ }
489
+ }
490
+
491
+ /* Animations */
492
+ @keyframes slideDown {
493
+ from {
494
+ opacity: 0;
495
+ max-height: 0;
496
+ transform: translateY(-10px);
497
+ }
498
+ to {
499
+ opacity: 1;
500
+ max-height: 2000px;
501
+ transform: translateY(0);
502
+ }
503
+ }
504
+
505
+ .animate-slideDown {
506
+ animation: slideDown 0.3s ease-out forwards;
507
+ }
508
+
509
+ /* Utility Classes */
510
+ .hidden {
511
+ display: none !important;
512
+ }
513
+
514
+ .text-center {
515
+ text-align: center;
516
+ }
517
+
518
+ .mt-1 { margin-top: 0.25rem; }
519
+ .mt-2 { margin-top: 0.5rem; }
520
+ .mt-4 { margin-top: 1rem; }
521
+ .mb-1 { margin-bottom: 0.25rem; }
522
+ .mb-2 { margin-bottom: 0.5rem; }
523
+ .mb-4 { margin-bottom: 1rem; }
524
+
525
+ /* Runtime Logs Section */
526
+ .runtime-logs-section {
527
+ margin-top: 2rem;
528
+ }
529
+
530
+ .logs-container {
531
+ background-color: white;
532
+ border-radius: 0.5rem;
533
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
534
+ border: 1px solid #e5e7eb;
535
+ overflow: hidden;
536
+ }
537
+
538
+ .logs-header {
539
+ width: 100%;
540
+ padding: 1rem 1.5rem;
541
+ display: flex;
542
+ align-items: center;
543
+ justify-content: space-between;
544
+ background-color: #f9fafb;
545
+ border: none;
546
+ cursor: pointer;
547
+ transition: background-color 0.2s;
548
+ }
549
+
550
+ .logs-header:hover {
551
+ background-color: #f3f4f6;
552
+ }
553
+
554
+ .logs-header-content {
555
+ display: flex;
556
+ align-items: center;
557
+ gap: 0.75rem;
558
+ }
559
+
560
+ .logs-chevron {
561
+ width: 1.25rem;
562
+ height: 1.25rem;
563
+ color: #6b7280;
564
+ transition: transform 0.2s;
565
+ }
566
+
567
+ .logs-chevron.expanded {
568
+ transform: rotate(90deg);
569
+ }
570
+
571
+ .logs-title {
572
+ font-size: 1.125rem;
573
+ font-weight: 600;
574
+ color: #111827;
575
+ margin: 0;
576
+ }
577
+
578
+ .logs-toggle-text {
579
+ font-size: 0.875rem;
580
+ color: #6b7280;
581
+ }
582
+
583
+ .logs-content {
584
+ border-top: 1px solid #e5e7eb;
585
+ }
586
+
587
+ .logs-tabs {
588
+ display: flex;
589
+ background-color: #f9fafb;
590
+ border-bottom: 1px solid #e5e7eb;
591
+ }
592
+
593
+ .log-tab {
594
+ flex: 1;
595
+ padding: 0.75rem 1rem;
596
+ font-size: 0.875rem;
597
+ font-weight: 500;
598
+ border: none;
599
+ background: transparent;
600
+ color: #6b7280;
601
+ cursor: pointer;
602
+ transition: all 0.2s;
603
+ display: flex;
604
+ align-items: center;
605
+ justify-content: center;
606
+ gap: 0.5rem;
607
+ border-bottom: 2px solid transparent;
608
+ }
609
+
610
+ .log-tab:hover {
611
+ color: #111827;
612
+ background-color: #f3f4f6;
613
+ }
614
+
615
+ .log-tab.active {
616
+ background-color: white;
617
+ color: #2563eb;
618
+ border-bottom-color: #2563eb;
619
+ }
620
+
621
+ .tab-icon {
622
+ font-size: 1rem;
623
+ }
624
+
625
+ .logs-panels {
626
+ padding: 1.5rem;
627
+ }
628
+
629
+ .log-panel {
630
+ display: none;
631
+ }
632
+
633
+ .log-panel.active {
634
+ display: block;
635
+ }
636
+
637
+ .panel-title {
638
+ font-size: 1rem;
639
+ font-weight: 600;
640
+ color: #111827;
641
+ margin-bottom: 0.75rem;
642
+ }
643
+
644
+ .panel-content {
645
+ background-color: #f9fafb;
646
+ border-radius: 0.5rem;
647
+ padding: 1rem;
648
+ border: 1px solid #e5e7eb;
649
+ overflow-x: auto;
650
+ }
651
+
652
+ .log-output {
653
+ font-family: 'Monaco', 'Menlo', monospace;
654
+ font-size: 0.875rem;
655
+ color: #1f2937;
656
+ white-space: pre-wrap;
657
+ word-wrap: break-word;
658
+ margin: 0;
659
+ }
660
+
661
+ .panel-description {
662
+ font-size: 0.75rem;
663
+ color: #6b7280;
664
+ margin-top: 0.5rem;
665
+ margin-bottom: 0;
666
+ }
@@ -0,0 +1,6 @@
1
+ module TheMechanic2
2
+ class ApplicationController < ActionController::Base
3
+ # Disable CSRF protection for API endpoints
4
+ protect_from_forgery with: :null_session
5
+ end
6
+ end