synthos 0.6.0 → 0.7.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.
Files changed (153) hide show
  1. package/README.md +33 -1
  2. package/default-pages/app_builder.html +40 -0
  3. package/default-pages/app_builder.json +1 -0
  4. package/default-pages/json_tools.html +89 -159
  5. package/default-pages/json_tools.json +1 -0
  6. package/default-pages/my_notes.html +33 -0
  7. package/default-pages/my_notes.json +12 -0
  8. package/default-pages/neon_asteroids.html +77 -0
  9. package/default-pages/neon_asteroids.json +12 -0
  10. package/default-pages/sidebar_builder.html +49 -0
  11. package/default-pages/sidebar_builder.json +1 -0
  12. package/default-pages/solar_explorer.html +1956 -0
  13. package/default-pages/solar_explorer.json +12 -0
  14. package/default-pages/solar_tutorial.html +476 -0
  15. package/default-pages/solar_tutorial.json +1 -0
  16. package/default-pages/two-panel_builder.html +66 -0
  17. package/default-pages/two-panel_builder.json +1 -0
  18. package/default-themes/nebula-dawn.css +682 -0
  19. package/default-themes/nebula-dawn.json +19 -0
  20. package/default-themes/nebula-dusk.css +674 -0
  21. package/default-themes/nebula-dusk.json +19 -0
  22. package/dist/connectors/index.d.ts +3 -0
  23. package/dist/connectors/index.d.ts.map +1 -0
  24. package/dist/connectors/index.js +6 -0
  25. package/dist/connectors/index.js.map +1 -0
  26. package/dist/connectors/registry.d.ts +3 -0
  27. package/dist/connectors/registry.d.ts.map +1 -0
  28. package/dist/connectors/registry.js +100 -0
  29. package/dist/connectors/registry.js.map +1 -0
  30. package/dist/connectors/types.d.ts +61 -0
  31. package/dist/connectors/types.d.ts.map +1 -0
  32. package/dist/connectors/types.js +3 -0
  33. package/dist/connectors/types.js.map +1 -0
  34. package/dist/files.d.ts +2 -0
  35. package/dist/files.d.ts.map +1 -1
  36. package/dist/files.js +12 -1
  37. package/dist/files.js.map +1 -1
  38. package/dist/init.d.ts +8 -1
  39. package/dist/init.d.ts.map +1 -1
  40. package/dist/init.js +155 -3
  41. package/dist/init.js.map +1 -1
  42. package/dist/migrations.d.ts +11 -0
  43. package/dist/migrations.d.ts.map +1 -0
  44. package/dist/migrations.js +281 -0
  45. package/dist/migrations.js.map +1 -0
  46. package/dist/models/index.d.ts +3 -0
  47. package/dist/models/index.d.ts.map +1 -0
  48. package/dist/models/index.js +10 -0
  49. package/dist/models/index.js.map +1 -0
  50. package/dist/models/providers.d.ts +7 -0
  51. package/dist/models/providers.d.ts.map +1 -0
  52. package/dist/models/providers.js +33 -0
  53. package/dist/models/providers.js.map +1 -0
  54. package/dist/models/types.d.ts +21 -0
  55. package/dist/models/types.d.ts.map +1 -0
  56. package/dist/models/types.js +3 -0
  57. package/dist/models/types.js.map +1 -0
  58. package/dist/pages.d.ts +21 -2
  59. package/dist/pages.d.ts.map +1 -1
  60. package/dist/pages.js +202 -23
  61. package/dist/pages.js.map +1 -1
  62. package/dist/scripts.js +2 -2
  63. package/dist/scripts.js.map +1 -1
  64. package/dist/service/createCompletePrompt.d.ts +3 -2
  65. package/dist/service/createCompletePrompt.d.ts.map +1 -1
  66. package/dist/service/createCompletePrompt.js +11 -16
  67. package/dist/service/createCompletePrompt.js.map +1 -1
  68. package/dist/service/debugLog.d.ts +11 -0
  69. package/dist/service/debugLog.d.ts.map +1 -0
  70. package/dist/service/debugLog.js +26 -0
  71. package/dist/service/debugLog.js.map +1 -0
  72. package/dist/service/modelInstructions.d.ts +7 -0
  73. package/dist/service/modelInstructions.d.ts.map +1 -0
  74. package/dist/service/modelInstructions.js +16 -0
  75. package/dist/service/modelInstructions.js.map +1 -0
  76. package/dist/service/requiresSettings.d.ts +2 -2
  77. package/dist/service/requiresSettings.d.ts.map +1 -1
  78. package/dist/service/requiresSettings.js.map +1 -1
  79. package/dist/service/server.d.ts.map +1 -1
  80. package/dist/service/server.js +15 -0
  81. package/dist/service/server.js.map +1 -1
  82. package/dist/service/transformPage.d.ts +81 -2
  83. package/dist/service/transformPage.d.ts.map +1 -1
  84. package/dist/service/transformPage.js +672 -82
  85. package/dist/service/transformPage.js.map +1 -1
  86. package/dist/service/useApiRoutes.d.ts.map +1 -1
  87. package/dist/service/useApiRoutes.js +579 -13
  88. package/dist/service/useApiRoutes.js.map +1 -1
  89. package/dist/service/useConnectorRoutes.d.ts +4 -0
  90. package/dist/service/useConnectorRoutes.d.ts.map +1 -0
  91. package/dist/service/useConnectorRoutes.js +389 -0
  92. package/dist/service/useConnectorRoutes.js.map +1 -0
  93. package/dist/service/useDataRoutes.d.ts.map +1 -1
  94. package/dist/service/useDataRoutes.js +83 -70
  95. package/dist/service/useDataRoutes.js.map +1 -1
  96. package/dist/service/usePageRoutes.d.ts.map +1 -1
  97. package/dist/service/usePageRoutes.js +243 -38
  98. package/dist/service/usePageRoutes.js.map +1 -1
  99. package/dist/settings.d.ts +33 -4
  100. package/dist/settings.d.ts.map +1 -1
  101. package/dist/settings.js +108 -15
  102. package/dist/settings.js.map +1 -1
  103. package/dist/synthos-cli.d.ts.map +1 -1
  104. package/dist/synthos-cli.js +11 -1
  105. package/dist/synthos-cli.js.map +1 -1
  106. package/dist/themes.d.ts +9 -0
  107. package/dist/themes.d.ts.map +1 -0
  108. package/dist/themes.js +64 -0
  109. package/dist/themes.js.map +1 -0
  110. package/package.json +6 -3
  111. package/required-pages/builder.html +74 -0
  112. package/required-pages/builder.json +1 -0
  113. package/required-pages/pages.html +169 -126
  114. package/required-pages/pages.json +1 -0
  115. package/required-pages/settings.html +812 -156
  116. package/required-pages/settings.json +1 -0
  117. package/required-pages/synthos_apis.html +272 -0
  118. package/required-pages/synthos_apis.json +1 -0
  119. package/required-pages/synthos_scripts.html +87 -0
  120. package/required-pages/synthos_scripts.json +1 -0
  121. package/src/connectors/index.ts +12 -0
  122. package/src/connectors/registry.ts +98 -0
  123. package/src/connectors/types.ts +68 -0
  124. package/src/files.ts +11 -0
  125. package/src/init.ts +151 -5
  126. package/src/migrations.ts +266 -0
  127. package/src/models/index.ts +2 -0
  128. package/src/models/providers.ts +33 -0
  129. package/src/models/types.ts +23 -0
  130. package/src/pages.ts +234 -26
  131. package/src/scripts.ts +2 -2
  132. package/src/service/createCompletePrompt.ts +14 -18
  133. package/src/service/debugLog.ts +17 -0
  134. package/src/service/modelInstructions.ts +14 -0
  135. package/src/service/requiresSettings.ts +3 -3
  136. package/src/service/server.ts +19 -2
  137. package/src/service/transformPage.ts +709 -88
  138. package/src/service/useApiRoutes.ts +632 -16
  139. package/src/service/useConnectorRoutes.ts +427 -0
  140. package/src/service/useDataRoutes.ts +87 -71
  141. package/src/service/usePageRoutes.ts +237 -44
  142. package/src/settings.ts +143 -20
  143. package/src/synthos-cli.ts +11 -1
  144. package/src/themes.ts +71 -0
  145. package/default-pages/[application].html +0 -95
  146. package/default-pages/[markdown].html +0 -271
  147. package/default-pages/[sidebar].html +0 -114
  148. package/default-pages/[split-application].html +0 -118
  149. package/default-pages/solar_system.html +0 -432
  150. package/default-pages/space_invaders.html +0 -617
  151. package/required-pages/apis.html +0 -362
  152. package/required-pages/home.html +0 -126
  153. package/required-pages/scripts.html +0 -350
package/default-pages/[application].html DELETED
@@ -1,95 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>SynthOS - {Application Title}</title>
7
- <style>
8
- /* Nebula Dusk Theme */
9
- :root { --accent-primary: #667eea; --accent-secondary: #764ba2; --accent-tertiary: #f093fb; --accent-glow: rgba(138, 43, 226, 0.3); --border-color: rgba(138, 43, 226, 0.3); }
10
- * { margin: 0; padding: 0; box-sizing: border-box; }
11
- body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: #0a0a0f; color: #e0e0e0; height: 100vh; display: flex; }
12
- .chat-panel { width: 30%; background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f0f23 100%); box-shadow: 0 0 20px rgba(138, 43, 226, 0.3); padding: 5px; display: flex; flex-direction: column; border-right: 1px solid rgba(138, 43, 226, 0.3); }
13
- .chat-header { font-size: 24px; padding: 10px; background: linear-gradient(90deg, #667eea 0%, #764ba2 50%, #f093fb 100%); color: white; text-align: center; border-radius: 10px 10px 0 0; text-shadow: 0 0 10px rgba(255,255,255,0.5); }
14
- .chat-messages { flex-grow: 1; overflow-y: auto; padding: 15px; margin-top: 10px; background: rgba(15, 15, 35, 0.8); border-radius: 10px; border: 1px solid rgba(138, 43, 226, 0.2); }
15
- .chat-message { margin-bottom: 15px; padding: 10px; background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%); border-radius: 15px; box-shadow: 0 2px 10px rgba(138, 43, 226, 0.2); border: 1px solid rgba(138, 43, 226, 0.1); }
16
- .chat-message p { margin-bottom: 5px; line-height: 1.4; }
17
- .chat-message p strong { font-weight: 600; color: #a78bfa; }
18
- .chat-message p code { background: rgba(138, 43, 226, 0.3); padding: 2px 4px; border-radius: 3px; font-family: 'Courier New', Courier, monospace; color: #e0e0e0; }
19
- .link-group { display: flex; justify-content: space-between; margin: 15px 0; }
20
- .link-group a { font-size: 14px; color: #a78bfa; text-decoration: none; padding: 5px 10px; border-radius: 5px; transition: all 0.3s; }
21
- .link-group a:hover { background: rgba(138, 43, 226, 0.3); text-shadow: 0 0 10px rgba(167, 139, 250, 0.5); }
22
- form { display: flex; flex-direction: row; width: 100%; gap: 10px; }
23
- .chat-input { padding: 12px; border: none; border-radius: 25px; flex-grow: 1; font-size: 14px; background: rgba(30, 30, 60, 0.8); color: #e0e0e0; box-shadow: inset 0 1px 3px rgba(0,0,0,0.3); border: 1px solid rgba(138, 43, 226, 0.3); }
24
- .chat-input:focus { outline: none; border-color: #a78bfa; box-shadow: 0 0 10px rgba(167, 139, 250, 0.3); }
25
- .chat-submit { padding: 12px 20px; border: none; border-radius: 25px; font-size: 14px; background: linear-gradient(90deg, #667eea 0%, #764ba2 100%); color: white; cursor: pointer; transition: all 0.3s; white-space: nowrap; }
26
- .chat-submit:hover { box-shadow: 0 0 20px rgba(138, 43, 226, 0.5); transform: translateY(-2px); }
27
- .viewer-panel { width: 90%; padding: 20px; background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f0f23 100%); display: flex; flex-direction: column; justify-content: flex-start; align-items: center; }
28
- .loading-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(10, 10, 15, 0.9); display: none; justify-content: center; align-items: center; z-index: 1000; }
29
- .spinner { border: 8px solid rgba(138, 43, 226, 0.2); border-top: 8px solid #a78bfa; border-radius: 50%; width: 60px; height: 60px; animation: spin 1s linear infinite; }
30
- @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
31
-
32
- /* Page Specific Styles - Updated with dialog colors */
33
- .application-title { font-size: 22px; font-weight: 700; padding: 14px 30px; background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); color: white; text-align: center; border-radius: 12px 12px 0 0; width: 100%; max-width: 800px; box-shadow: 0 6px 25px var(--accent-glow); }
34
- .application-content { font-size: 14px; color: rgba(224, 224, 224, 0.8); padding: 20px; flex-grow: 1; width: 100%; max-width: 800px; background: rgba(15, 15, 35, 0.8); border-radius: 0 0 12px 12px; border: 1px solid rgba(138, 43, 226, 0.2); border-top: none; }
35
-
36
- /* Scrollbar Styles */
37
- ::-webkit-scrollbar { width: 10px; height: 10px; }
38
- ::-webkit-scrollbar-track { background: rgba(15, 15, 35, 0.6); border-radius: 10px; border: 1px solid var(--border-color); }
39
- ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--accent-primary) 0%, var(--accent-secondary) 50%, var(--accent-tertiary) 100%); border-radius: 10px; border: 2px solid rgba(15, 15, 35, 0.6); box-shadow: 0 0 10px var(--accent-glow); }
40
- ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--accent-tertiary) 0%, var(--accent-secondary) 50%, var(--accent-primary) 100%); box-shadow: 0 0 15px rgba(240, 147, 251, 0.5); }
41
- ::-webkit-scrollbar-corner { background: rgba(15, 15, 35, 0.6); }
42
- * { scrollbar-width: thin; scrollbar-color: var(--accent-secondary) rgba(15, 15, 35, 0.6); }
43
- </style>
44
- <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.9.0/d3.min.js"></script>
45
- <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/14.1.1/marked.min.js"></script>
46
- <script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/11.1.0/mermaid.min.js"></script>
47
- </head>
48
- <body>
49
- <div class="chat-panel">
50
- <div class="chat-header">SynthOS</div>
51
- <div class="chat-messages" id="chatMessages">
52
- <div class="chat-message"><p><strong>SynthOS:</strong> what kind of application would you like?</p></div>
53
- </div>
54
- <div class="link-group">
55
- <a href="#" id="saveLink">Save</a>
56
- <a href="/pages" id="pagesLink">Pages</a>
57
- <a href="#" id="resetLink">Reset</a>
58
- </div>
59
- <form action="/" method="POST" id="chatForm">
60
- <input type="text" class="chat-input" id="chatInput" name="message" placeholder="Type a message...">
61
- <button type="submit" class="chat-submit">Send</button>
62
- </form>
63
- </div>
64
- <div class="viewer-panel" id="viewerPanel">
65
- <div class="application-title">{Application Title}</div>
66
- <div class="application-content">{Application Content}</div>
67
- </div>
68
- <div id="thoughts" style="display: none;">I've prompted the user for the type of application to create.</div>
69
- <div id="loadingOverlay" class="loading-overlay"><div class="spinner"></div></div>
70
- <script>
71
- // Basic chat functionality
72
- document.getElementById("chatInput").focus();
73
- document.getElementById("chatForm").addEventListener('submit', () => {
74
- document.getElementById("loadingOverlay").style.display = 'flex';
75
- document.getElementById("chatForm").action = window.location.pathname;
76
- });
77
- document.getElementById("saveLink").addEventListener("click", function() {
78
- const pageName = prompt("Enter the name of the page to save as:");
79
- if (pageName) {
80
- window.location.href = `${window.location.pathname}/save?name=${encodeURIComponent(pageName)}`;
81
- }
82
- });
83
- document.getElementById("resetLink").addEventListener("click", function() {
84
- window.location.href = `${window.location.pathname}/reset`;
85
- });
86
- window.onload = function() {
87
- const chatMessages = document.getElementById('chatMessages');
88
- chatMessages.scrollTo({
89
- top: chatMessages.scrollHeight,
90
- behavior: 'smooth'
91
- });
92
- };
93
- </script>
94
- </body>
95
- </html>
package/default-pages/[markdown].html DELETED
@@ -1,271 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>SynthOS</title>
7
- <style>
8
- /* Nebula Dusk Theme */
9
- :root { --bg-primary:#1a1a2e; --bg-secondary:#16213e; --bg-tertiary:#0f0f23; --accent-primary:#667eea; --accent-secondary:#764ba2; --accent-tertiary:#f093fb; --accent-glow:rgba(138,43,226,0.3); --text-primary:#e0e0e0; --text-secondary:#b794f6; --border-color:rgba(138,43,226,0.3); }
10
- * { margin: 0; padding: 0; box-sizing: border-box; }
11
- body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 50%, var(--bg-tertiary) 100%); color: var(--text-primary); height: 100vh; display: flex; }
12
- .chat-panel { width: 30%; background: linear-gradient(180deg, rgba(26, 26, 46, 0.95) 0%, rgba(22, 33, 62, 0.95) 100%); box-shadow: 0 0 30px var(--accent-glow), inset 0 0 60px rgba(75, 0, 130, 0.1); padding: 20px; display: flex; flex-direction: column; border-right: 1px solid var(--border-color); }
13
- .chat-header { font-size: 24px; padding: 15px; background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 50%, var(--accent-tertiary) 100%); color: white; text-align: center; border-radius: 15px; box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4); text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); letter-spacing: 2px; }
14
- .chat-messages { flex-grow: 1; overflow-y: auto; padding: 15px; margin-top: 15px; background: rgba(15, 15, 35, 0.6); border-radius: 15px; border: 1px solid var(--border-color); box-shadow: inset 0 0 30px rgba(75, 0, 130, 0.2); }
15
- .chat-message { margin-bottom: 15px; padding: 12px 15px; background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%); border-radius: 15px; box-shadow: 0 2px 10px var(--accent-glow); border: 1px solid rgba(138, 43, 226, 0.1); backdrop-filter: blur(5px); }
16
- .chat-message p { margin-bottom: 5px; line-height: 1.5; }
17
- .chat-message p strong { font-weight: 600; background: linear-gradient(90deg, var(--accent-primary), var(--accent-tertiary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
18
- .chat-message p code { background: rgba(138, 43, 226, 0.3); padding: 2px 6px; border-radius: 5px; font-family: 'Courier New', Courier, monospace; color: var(--accent-tertiary); border: 1px solid rgba(240, 147, 251, 0.3); }
19
- .link-group { display: flex; justify-content: space-between; margin: 15px 0; padding: 10px; background: rgba(15, 15, 35, 0.4); border-radius: 10px; border: 1px solid var(--border-color); }
20
- .link-group a { font-size: 14px; color: var(--text-secondary); text-decoration: none; padding: 8px 15px; border-radius: 8px; transition: all 0.3s ease; border: 1px solid transparent; }
21
- .link-group a:hover { background: linear-gradient(135deg, rgba(102, 126, 234, 0.3) 0%, rgba(118, 75, 162, 0.3) 100%); border-color: rgba(183, 148, 246, 0.5); box-shadow: 0 0 15px var(--accent-glow); color: var(--accent-tertiary); }
22
- form { display: flex; flex-direction: row; width: 100%; gap: 10px; align-items: center; }
23
- .chat-input { padding: 14px 18px; border: 1px solid var(--border-color); border-radius: 25px; flex-grow: 1; font-size: 14px; background: rgba(15, 15, 35, 0.8); color: var(--text-primary); box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.3), 0 0 20px rgba(138, 43, 226, 0.1); transition: all 0.3s ease; }
24
- .chat-input:focus { outline: none; border-color: rgba(183, 148, 246, 0.6); box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.3), 0 0 25px var(--accent-glow); }
25
- .chat-input::placeholder { color: rgba(183, 148, 246, 0.5); }
26
- .chat-submit { padding: 14px 20px; border: none; border-radius: 25px; font-size: 14px; background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 50%, var(--accent-tertiary) 100%); color: white; cursor: pointer; transition: all 0.3s ease; font-weight: 600; letter-spacing: 1px; box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4); white-space: nowrap; }
27
- .chat-submit:hover { transform: translateY(-2px); box-shadow: 0 6px 25px rgba(102, 126, 234, 0.6); }
28
- .chat-submit:active { transform: translateY(0); }
29
- .viewer-panel { width: 70%; padding: 25px; background: linear-gradient(135deg, rgba(22, 33, 62, 0.9) 0%, rgba(15, 15, 35, 0.95) 100%); display: flex; flex-direction: column; justify-content: flex-start; align-items: center; box-shadow: inset 0 0 60px rgba(75, 0, 130, 0.15); position: relative; overflow: auto; }
30
- .viewer-panel::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(ellipse at center, rgba(138, 43, 226, 0.05) 0%, transparent 70%); animation: nebula-pulse 8s ease-in-out infinite; pointer-events: none; }
31
- @keyframes nebula-pulse { 0%, 100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.1); } }
32
- .loading-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(15, 15, 35, 0.9); justify-content: center; align-items: center; z-index: 1000; }
33
- .spinner { width: 50px; height: 50px; border: 4px solid var(--border-color); border-top-color: var(--accent-tertiary); border-radius: 50%; animation: spin 1s linear infinite; }
34
- @keyframes spin { to { transform: rotate(360deg); } }
35
- ::-webkit-scrollbar { width: 10px; height: 10px; }
36
- ::-webkit-scrollbar-track { background: rgba(15, 15, 35, 0.6); border-radius: 10px; border: 1px solid var(--border-color); }
37
- ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--accent-primary) 0%, var(--accent-secondary) 50%, var(--accent-tertiary) 100%); border-radius: 10px; border: 2px solid rgba(15, 15, 35, 0.6); box-shadow: 0 0 10px var(--accent-glow); }
38
- ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--accent-tertiary) 0%, var(--accent-secondary) 50%, var(--accent-primary) 100%); }
39
- ::-webkit-scrollbar-corner { background: rgba(15, 15, 35, 0.6); }
40
- * { scrollbar-width: thin; scrollbar-color: var(--accent-secondary) rgba(15, 15, 35, 0.6); }
41
-
42
- /* Markdown Nebula Theme */
43
- .markdown-content { text-align: left; color: var(--text-primary); width: 100%; max-width: 800px; margin: 0 auto; line-height: 1.7; position: relative; z-index: 1; }
44
- .markdown-content h1, .markdown-content h2, .markdown-content h3, .markdown-content h4, .markdown-content h5 { background: linear-gradient(90deg, var(--accent-primary), var(--accent-tertiary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin: 1.2em 0 0.6em; font-weight: 700; }
45
- .markdown-content h1 { font-size: 2.2em; border-bottom: 2px solid var(--border-color); padding-bottom: 0.3em; text-shadow: 0 0 30px var(--accent-glow); }
46
- .markdown-content h2 { font-size: 1.8em; }
47
- .markdown-content h3 { font-size: 1.4em; }
48
- .markdown-content p { margin-bottom: 1em; color: rgba(224, 224, 224, 0.9); }
49
- .markdown-content ul, .markdown-content ol { margin: 0 0 1em 20px; }
50
- .markdown-content li { margin-bottom: 0.4em; color: rgba(224, 224, 224, 0.85); }
51
- .markdown-content li::marker { color: var(--accent-tertiary); }
52
- .markdown-content blockquote { margin: 1em 0; padding: 12px 20px; border-left: 4px solid var(--accent-secondary); background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%); border-radius: 0 10px 10px 0; font-style: italic; color: var(--text-secondary); }
53
- .markdown-content code { background: rgba(138, 43, 226, 0.25); padding: 3px 7px; border-radius: 5px; font-family: 'Fira Code', 'Courier New', monospace; color: var(--accent-tertiary); border: 1px solid rgba(240, 147, 251, 0.2); font-size: 0.9em; }
54
- .markdown-content pre { background: transparent !important; padding: 0; margin: 0; }
55
- .markdown-content .code-block { border-radius: 12px; overflow: hidden; margin: 1em 0; border: 1px solid var(--border-color); box-shadow: 0 4px 20px var(--accent-glow); }
56
- .markdown-content .code-block pre { margin: 0; padding: 15px; background: rgba(15, 15, 35, 0.9) !important; }
57
- .markdown-content .code-block code { background: transparent; border: none; padding: 0; color: inherit; }
58
- .markdown-content a { color: var(--accent-tertiary); text-decoration: none; border-bottom: 1px solid transparent; transition: all 0.3s; }
59
- .markdown-content a:hover { border-bottom-color: var(--accent-tertiary); text-shadow: 0 0 10px var(--accent-glow); }
60
- .markdown-content table { width: 100%; border-collapse: collapse; margin: 1em 0; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 15px var(--accent-glow); }
61
- .markdown-content th { padding: 12px 15px; background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); color: white; font-weight: 600; text-align: left; }
62
- .markdown-content td { padding: 10px 15px; background: rgba(15, 15, 35, 0.6); border-top: 1px solid var(--border-color); }
63
- .markdown-content tr:hover td { background: rgba(102, 126, 234, 0.15); }
64
- .markdown-content img { max-width: 100%; border-radius: 12px; margin: 1em auto; display: block; box-shadow: 0 4px 25px var(--accent-glow); border: 1px solid var(--border-color); }
65
- .markdown-content hr { border: none; height: 2px; background: linear-gradient(90deg, transparent, var(--accent-secondary), var(--accent-tertiary), var(--accent-secondary), transparent); margin: 2em 0; }
66
- .markdown-content input[type="checkbox"] { accent-color: var(--accent-tertiary); margin-right: 8px; }
67
- .code-header { background: linear-gradient(135deg, rgba(102, 126, 234, 0.3), rgba(118, 75, 162, 0.3)); padding: 8px 15px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-color); }
68
- .code-header span { font-size: 0.85em; color: var(--text-secondary); font-weight: 500; }
69
- .copy-button { background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); border: none; color: white; padding: 5px 12px; border-radius: 6px; cursor: pointer; font-size: 0.8em; transition: all 0.3s; }
70
- .copy-button:hover { box-shadow: 0 0 15px var(--accent-glow); transform: translateY(-1px); } </style>
71
- <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.9.0/d3.min.js"></script>
72
- <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/14.1.1/marked.min.js"></script>
73
- <script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/11.1.0/mermaid.min.js"></script>
74
- <script src="https://cdn.jsdelivr.net/npm/@highlightjs/cdn-assets@11.10.0/highlight.min.js"></script>
75
- <link href="https://cdn.jsdelivr.net/npm/@highlightjs/cdn-assets@11.10.0/styles/night-owl.min.css" rel="stylesheet">
76
- </head>
77
- <body>
78
- <div class="chat-panel">
79
- <div class="chat-header">SynthOS</div>
80
- <div class="chat-messages" id="chatMessages">
81
- <div class="chat-message"><p><strong>SynthOS:</strong> what document can I write for you?</p></div>
82
- </div>
83
- <div class="link-group">
84
- <a href="#" id="saveLink">Save</a>
85
- <a href="/pages" id="pagesLink">Pages</a>
86
- <a href="#" id="resetLink">Reset</a>
87
- </div>
88
- <form action="/" method="POST" id="chatForm">
89
- <input type="text" class="chat-input" id="chatInput" name="message" placeholder="Type a message...">
90
- <button type="submit" class="chat-submit">Send</button>
91
- </form>
92
- </div>
93
- <div class="viewer-panel" id="viewerPanel">
94
- <div class="markdown-content" id="markdownContent">
95
- <!-- The markdown content will be rendered here -->
96
- </div>
97
- </div>
98
- <div id="thoughts" style="display: none;">I've prompted the user for the document to write.</div>
99
- <div id="loadingOverlay" class="loading-overlay"><div class="spinner"></div></div>
100
- <script>
101
- // Basic chat functionality
102
- document.getElementById("chatInput").focus();
103
- document.getElementById("chatForm").addEventListener('submit', () => {
104
- document.getElementById("loadingOverlay").style.display = 'flex';
105
- document.getElementById("chatForm").action = window.location.pathname;
106
- });
107
- document.getElementById("saveLink").addEventListener("click", function() {
108
- const pageName = prompt("Enter the name of the page to save as:");
109
- if (pageName) {
110
- window.location.href = `${window.location.pathname}/save?name=${encodeURIComponent(pageName)}`;
111
- }
112
- });
113
- document.getElementById("resetLink").addEventListener("click", function() {
114
- window.location.href = `${window.location.pathname}/reset`;
115
- });
116
- window.onload = function() {
117
- const chatMessages = document.getElementById('chatMessages');
118
- chatMessages.scrollTo({
119
- top: chatMessages.scrollHeight,
120
- behavior: 'smooth'
121
- });
122
-
123
- // Render markdown using marked library with custom renderer
124
- const renderer = new marked.Renderer();
125
- renderer.code = function(code) {
126
- const validLanguage = !!(code.lang && hljs.getLanguage(code.lang));
127
- const highlighted = validLanguage ? hljs.highlight(code.lang, code.text).value : code.text;
128
- console.log(highlighted);
129
- return `<div class="code-block">
130
- <div class="code-header">
131
- <span>${code.lang || 'plaintext'}</span>
132
- <button class="copy-button" onclick="copyToClipboard(this)">Copy</button>
133
- </div>
134
- <pre><code class="${code.lang}">${highlighted}</code></pre>
135
- </div>`;
136
- };
137
-
138
- marked.setOptions({
139
- renderer: renderer,
140
- highlight: function(code) {
141
- const validLanguage = !!(code.lang && hljs.getLanguage(code.lang));
142
- return validLanguage ? hljs.highlight(code.lang, code.text).value : code.textS;
143
- }
144
- });
145
-
146
- document.getElementById('markdownContent').innerHTML = marked.parse(markdownContent);
147
-
148
- // Initialize mermaid
149
- mermaid.initialize({ startOnLoad: true, theme: 'dark' });
150
- mermaid.init(undefined, document.querySelectorAll('.language-mermaid'));
151
- };
152
-
153
- function copyToClipboard(button) {
154
- const codeBlock = button.parentElement.nextElementSibling.querySelector('code');
155
- navigator.clipboard.writeText(codeBlock.textContent).then(() => {
156
- button.textContent = 'Copied!';
157
- setTimeout(() => { button.textContent = 'Copy'; }, 2000);
158
- });
159
- }
160
-
161
- // Markdown content to render
162
- const markdownContent = `# SynthOS's Markdown Showcase
163
-
164
- This page demonstrates various markdown elements and how they are styled in our custom theme.
165
-
166
- ## Text Formatting
167
-
168
- You can make text **bold**, *italic*, or ***both***. You can also use ~~strikethrough~~ for deleted text.
169
-
170
- ## Lists
171
-
172
- ### Unordered List
173
-
174
- - Item 1
175
- - Item 2
176
- - Subitem 2.1
177
- - Subitem 2.2
178
- - Item 3
179
-
180
- ### Ordered List
181
-
182
- 1. First item
183
- 2. Second item
184
- 3. Third item
185
- 1. Subitem 3.1
186
- 2. Subitem 3.2
187
-
188
- ## Links and Images
189
-
190
- You can create [links to websites](https://www.example.com) or add images:
191
-
192
- ![Sample Image](https://via.placeholder.com/300x200.png?text=Sample+Image)
193
-
194
- ## Blockquotes
195
-
196
- > This is a blockquote. It's great for highlighting important information or quoting sources.
197
-
198
- ## Code Blocks
199
-
200
- Inline code: \`console.log('Hello, World!');\`
201
-
202
- Code block:
203
-
204
- \`\`\`javascript
205
- function greet(name) {
206
- return \`Hello, \${name}!\`;
207
- }
208
-
209
- console.log(greet('SynthOS'));
210
- \`\`\`
211
-
212
- ## Tables
213
-
214
- | Header 1 | Header 2 | Header 3 |
215
- |----------|----------|----------|
216
- | Row 1, Col 1 | Row 1, Col 2 | Row 1, Col 3 |
217
- | Row 2, Col 1 | Row 2, Col 2 | Row 2, Col 3 |
218
-
219
- ## Horizontal Rule
220
-
221
- ---
222
-
223
- ## Task Lists
224
-
225
- - [x] Complete task
226
- - [ ] Incomplete task
227
- - [ ] Another task
228
-
229
- ## Mermaid Diagrams
230
-
231
- \`\`\`mermaid
232
- graph TD
233
- A[Start] --> B{Is it?}
234
- B -- Yes --> C[OK]
235
- C --> D[Rethink]
236
- D --> B
237
- B -- No ----> E[End]
238
- \`\`\`
239
-
240
- This showcase demonstrates the various markdown elements and how they are styled in our custom theme. Feel free to use these examples as a reference when creating your own markdown content!
241
-
242
- ## Additional Content for Scrolling
243
-
244
- To demonstrate the scrolling functionality, we've added some extra content below.
245
-
246
- ### Lorem Ipsum
247
-
248
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nunc id aliquam tincidunt, nisl nunc tincidunt nunc, vitae aliquam nunc nunc vitae nunc. Sed euismod, nunc id aliquam tincidunt, nisl nunc tincidunt nunc, vitae aliquam nunc nunc vitae nunc.
249
-
250
- ### Code Example
251
-
252
- Here's another code example to show how syntax highlighting works with scrolling:
253
-
254
- \`\`\`python
255
- def fibonacci(n):
256
- if n <= 1:
257
- return n
258
- else:
259
- return fibonacci(n-1) + fibonacci(n-2)
260
-
261
- # Print the first 10 Fibonacci numbers
262
- for i in range(10):
263
- print(fibonacci(i))
264
- \`\`\`
265
-
266
- ### Final Thoughts
267
-
268
- This extended markdown content demonstrates how the viewer panel now scrolls independently of the chat panel, allowing users to read through longer documents while still having access to the chat functionality.`;
269
- </script>
270
- </body>
271
- </html>
package/default-pages/[sidebar].html DELETED
@@ -1,114 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>SynthOS</title>
7
- <style>
8
- :root { --bg-primary:#1a1a2e; --bg-secondary:#16213e; --bg-tertiary:#0f0f23; --accent-primary:#667eea; --accent-secondary:#764ba2; --accent-tertiary:#f093fb; --accent-glow:rgba(138,43,226,0.3); --text-primary:#e0e0e0; --text-secondary:#b794f6; --border-color:rgba(138,43,226,0.3); }
9
- * { margin: 0; padding: 0; box-sizing: border-box; }
10
- body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 50%, var(--bg-tertiary) 100%); color: var(--text-primary); height: 100vh; display: flex; }
11
- .chat-panel { width: 30%; background: linear-gradient(180deg, rgba(26, 26, 46, 0.95) 0%, rgba(22, 33, 62, 0.95) 100%); box-shadow: 0 0 30px var(--accent-glow), inset 0 0 60px rgba(75, 0, 130, 0.1); padding: 20px; display: flex; flex-direction: column; border-right: 1px solid var(--border-color); }
12
- .chat-header { font-size: 24px; padding: 15px; background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 50%, var(--accent-tertiary) 100%); color: white; text-align: center; border-radius: 15px; box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4); text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); letter-spacing: 2px; }
13
- .chat-messages { flex-grow: 1; overflow-y: auto; padding: 15px; margin-top: 15px; background: rgba(15, 15, 35, 0.6); border-radius: 15px; border: 1px solid var(--border-color); box-shadow: inset 0 0 30px rgba(75, 0, 130, 0.2); }
14
- .chat-message { margin-bottom: 15px; padding: 12px 15px; background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%); border-radius: 15px; box-shadow: 0 2px 10px var(--accent-glow); border: 1px solid rgba(138, 43, 226, 0.1); backdrop-filter: blur(5px); }
15
- .chat-message p { margin-bottom: 5px; line-height: 1.5; }
16
- .chat-message p strong { font-weight: 600; background: linear-gradient(90deg, var(--accent-primary), var(--accent-tertiary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
17
- .chat-message p code { background: rgba(138, 43, 226, 0.3); padding: 2px 6px; border-radius: 5px; font-family: 'Courier New', Courier, monospace; color: var(--accent-tertiary); border: 1px solid rgba(240, 147, 251, 0.3); }
18
- .link-group { display: flex; justify-content: space-between; margin: 15px 0; padding: 10px; background: rgba(15, 15, 35, 0.4); border-radius: 10px; border: 1px solid var(--border-color); }
19
- .link-group a { font-size: 14px; color: var(--text-secondary); text-decoration: none; padding: 8px 15px; border-radius: 8px; transition: all 0.3s ease; border: 1px solid transparent; }
20
- .link-group a:hover { background: linear-gradient(135deg, rgba(102, 126, 234, 0.3) 0%, rgba(118, 75, 162, 0.3) 100%); border-color: rgba(183, 148, 246, 0.5); box-shadow: 0 0 15px var(--accent-glow); color: var(--accent-tertiary); }
21
- form { display: flex; flex-direction: row; width: 100%; gap: 10px; align-items: center; }
22
- .chat-input { padding: 14px 18px; border: 1px solid var(--border-color); border-radius: 25px; flex-grow: 1; font-size: 14px; background: rgba(15, 15, 35, 0.8); color: var(--text-primary); box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.3), 0 0 20px rgba(138, 43, 226, 0.1); transition: all 0.3s ease; }
23
- .chat-input:focus { outline: none; border-color: rgba(183, 148, 246, 0.6); box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.3), 0 0 25px var(--accent-glow); }
24
- .chat-input::placeholder { color: rgba(183, 148, 246, 0.5); }
25
- .chat-submit { padding: 14px 20px; border: none; border-radius: 25px; font-size: 14px; background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 50%, var(--accent-tertiary) 100%); color: white; cursor: pointer; transition: all 0.3s ease; font-weight: 600; letter-spacing: 1px; box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4); white-space: nowrap; }
26
- .chat-submit:hover { transform: translateY(-2px); box-shadow: 0 6px 25px rgba(102, 126, 234, 0.6); }
27
- .chat-submit:active { transform: translateY(0); }
28
- .viewer-panel { width: 70%; padding: 25px; background: linear-gradient(135deg, rgba(22, 33, 62, 0.9) 0%, rgba(15, 15, 35, 0.95) 100%); display: flex; flex-direction: column; justify-content: flex-start; align-items: center; box-shadow: inset 0 0 60px rgba(75, 0, 130, 0.15); position: relative; overflow: hidden; }
29
- .viewer-panel::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(ellipse at center, rgba(138, 43, 226, 0.05) 0%, transparent 70%); animation: nebula-pulse 8s ease-in-out infinite; pointer-events: none; }
30
- @keyframes nebula-pulse { 0%, 100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.1); } }
31
- .loading-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(15, 15, 35, 0.9); justify-content: center; align-items: center; z-index: 1000; }
32
- .spinner { width: 50px; height: 50px; border: 4px solid var(--border-color); border-top-color: var(--accent-tertiary); border-radius: 50%; animation: spin 1s linear infinite; }
33
- @keyframes spin { to { transform: rotate(360deg); } }
34
-
35
- /* Sidebar Styles - Markdown Spirit */
36
- .sidebar-panel { width: 100%; max-width: 800px; position: relative; z-index: 1; }
37
- .sidebar-title { font-size: 1.8em; font-weight: 700; background: linear-gradient(90deg, var(--accent-primary), var(--accent-tertiary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; border-bottom: 2px solid var(--border-color); padding-bottom: 0.3em; margin-bottom: 1em; text-shadow: 0 0 30px var(--accent-glow); }
38
- .sidebar-content { background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%); border: 1px solid var(--border-color); border-radius: 12px; padding: 20px; box-shadow: 0 4px 20px var(--accent-glow); }
39
- .sidebar-content p { color: rgba(224, 224, 224, 0.9); line-height: 1.7; margin-bottom: 1em; }
40
- .sidebar-content p:last-child { margin-bottom: 0; }
41
- .sidebar-section { margin-top: 1.2em; padding-top: 1em; border-top: 1px solid var(--border-color); }
42
- .sidebar-section-title { font-size: 1.2em; font-weight: 600; background: linear-gradient(90deg, var(--accent-primary), var(--accent-tertiary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 0.6em; }
43
- .sidebar-list { margin: 0 0 1em 20px; }
44
- .sidebar-list li { margin-bottom: 0.4em; color: rgba(224, 224, 224, 0.85); }
45
- .sidebar-list li::marker { color: var(--accent-tertiary); }
46
- .sidebar-quote { margin: 1em 0; padding: 12px 20px; border-left: 4px solid var(--accent-secondary); background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%); border-radius: 0 10px 10px 0; font-style: italic; color: var(--text-secondary); }
47
- .sidebar-code { background: rgba(138, 43, 226, 0.25); padding: 3px 7px; border-radius: 5px; font-family: 'Fira Code', 'Courier New', monospace; color: var(--accent-tertiary); border: 1px solid rgba(240, 147, 251, 0.2); font-size: 0.9em; }
48
- .sidebar-link { color: var(--accent-tertiary); text-decoration: none; border-bottom: 1px solid transparent; transition: all 0.3s; }
49
- .sidebar-link:hover { border-bottom-color: var(--accent-tertiary); text-shadow: 0 0 10px var(--accent-glow); }
50
-
51
- /* Scrollbar Styles */
52
- ::-webkit-scrollbar { width: 10px; height: 10px; }
53
- ::-webkit-scrollbar-track { background: rgba(15, 15, 35, 0.6); border-radius: 10px; border: 1px solid var(--border-color); }
54
- ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--accent-primary) 0%, var(--accent-secondary) 50%, var(--accent-tertiary) 100%); border-radius: 10px; border: 2px solid rgba(15, 15, 35, 0.6); box-shadow: 0 0 10px var(--accent-glow); }
55
- ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--accent-tertiary) 0%, var(--accent-secondary) 50%, var(--accent-primary) 100%); box-shadow: 0 0 15px rgba(240, 147, 251, 0.5); }
56
- ::-webkit-scrollbar-corner { background: rgba(15, 15, 35, 0.6); }
57
- * { scrollbar-width: thin; scrollbar-color: var(--accent-secondary) rgba(15, 15, 35, 0.6); }
58
- </style>
59
- </head>
60
- <body>
61
- <div class="chat-panel">
62
- <div class="chat-header">SynthOS</div>
63
- <div class="chat-messages" id="chatMessages">
64
- <div class="chat-message"><p><strong>SynthOS:</strong> what would you like in the sidebar?</p></div>
65
- </div>
66
- <div class="link-group">
67
- <a href="#" id="saveLink">Save</a>
68
- <a href="/pages" id="pagesLink">Pages</a>
69
- <a href="#" id="resetLink">Reset</a>
70
- </div>
71
- <form action="/" method="POST" id="chatForm">
72
- <input type="text" class="chat-input" id="chatInput" name="message" placeholder="Type a message...">
73
- <button type="submit" class="chat-submit">Send</button>
74
- </form>
75
- </div>
76
- <div class="viewer-panel">
77
- <div class="sidebar-panel">
78
- <div class="sidebar-title">Sidebar</div>
79
- <div class="sidebar-content">
80
- <p>This is the sidebar content. You can customize this area with various widgets, information, or controls as needed.</p>
81
- <div class="sidebar-quote">Styled in the spirit of markdown — clean, elegant, and cohesive with the nebula dusk theme.</div>
82
- <div class="sidebar-section">
83
- <div class="sidebar-section-title">Features</div>
84
- <ul class="sidebar-list">
85
- <li>Gradient text headings</li>
86
- <li>Glowing borders & shadows</li>
87
- <li>Consistent color palette</li>
88
- </ul>
89
- </div>
90
- </div>
91
- </div>
92
- </div>
93
- <div id="thoughts" style="display: none;">Restyled the sidebar to match the markdown content styles - using gradient text for titles, the same border/glow effects, blockquote styling, and list formatting. Kept CSS compact by reusing variables and combining selectors where possible.</div>
94
- <div id="loadingOverlay" class="loading-overlay"><div class="spinner"></div></div>
95
- <script>
96
- document.getElementById("chatInput").focus();
97
- document.getElementById("chatForm").addEventListener('submit', () => {
98
- document.getElementById("loadingOverlay").style.display = 'flex';
99
- document.getElementById("chatForm").action = window.location.pathname;
100
- });
101
- document.getElementById("saveLink").addEventListener("click", function() {
102
- const pageName = prompt("Enter the name of the page to save as:");
103
- if (pageName) window.location.href = `${window.location.pathname}/save?name=${encodeURIComponent(pageName)}`;
104
- });
105
- document.getElementById("resetLink").addEventListener("click", function() {
106
- window.location.href = `${window.location.pathname}/reset`;
107
- });
108
- window.onload = function() {
109
- const chatMessages = document.getElementById('chatMessages');
110
- chatMessages.scrollTo({ top: chatMessages.scrollHeight, behavior: 'smooth' });
111
- };
112
- </script>
113
- </body>
114
- </html>
package/default-pages/[split-application].html DELETED
@@ -1,118 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>SynthOS - Split Panel Application</title>
7
- <style>
8
- :root { --bg-primary:#1a1a2e; --bg-secondary:#16213e; --bg-tertiary:#0f0f23; --accent-primary:#667eea; --accent-secondary:#764ba2; --accent-tertiary:#f093fb; --accent-glow:rgba(138,43,226,0.3); --text-primary:#e0e0e0; --text-secondary:#b794f6; --border-color:rgba(138,43,226,0.3); }
9
- * { margin: 0; padding: 0; box-sizing: border-box; }
10
- body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 50%, var(--bg-tertiary) 100%); color: var(--text-primary); height: 100vh; display: flex; }
11
- .chat-panel { width: 30%; background: linear-gradient(180deg, rgba(26, 26, 46, 0.95) 0%, rgba(22, 33, 62, 0.95) 100%); box-shadow: 0 0 30px var(--accent-glow), inset 0 0 60px rgba(75, 0, 130, 0.1); padding: 20px; display: flex; flex-direction: column; border-right: 1px solid var(--border-color); }
12
- .chat-header { font-size: 24px; padding: 15px; background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 50%, var(--accent-tertiary) 100%); color: white; text-align: center; border-radius: 15px; box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4); text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); letter-spacing: 2px; }
13
- .chat-messages { flex-grow: 1; overflow-y: auto; padding: 15px; margin-top: 15px; background: rgba(15, 15, 35, 0.6); border-radius: 15px; border: 1px solid var(--border-color); box-shadow: inset 0 0 30px rgba(75, 0, 130, 0.2); }
14
- .chat-message { margin-bottom: 15px; padding: 12px 15px; background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%); border-radius: 15px; box-shadow: 0 2px 10px var(--accent-glow); border: 1px solid rgba(138, 43, 226, 0.1); backdrop-filter: blur(5px); }
15
- .chat-message p { margin-bottom: 5px; line-height: 1.5; }
16
- .chat-message p strong { font-weight: 600; background: linear-gradient(90deg, var(--accent-primary), var(--accent-tertiary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
17
- .link-group { display: flex; justify-content: space-between; margin: 15px 0; padding: 10px; background: rgba(15, 15, 35, 0.4); border-radius: 10px; border: 1px solid var(--border-color); }
18
- .link-group a { font-size: 14px; color: var(--text-secondary); text-decoration: none; padding: 8px 15px; border-radius: 8px; transition: all 0.3s ease; border: 1px solid transparent; }
19
- .link-group a:hover { background: linear-gradient(135deg, rgba(102, 126, 234, 0.3) 0%, rgba(118, 75, 162, 0.3) 100%); border-color: rgba(183, 148, 246, 0.5); box-shadow: 0 0 15px var(--accent-glow); color: var(--accent-tertiary); }
20
- form { display: flex; flex-direction: row; width: 100%; gap: 10px; align-items: center; }
21
- .chat-input { padding: 14px 18px; border: 1px solid var(--border-color); border-radius: 25px; flex-grow: 1; font-size: 14px; background: rgba(15, 15, 35, 0.8); color: var(--text-primary); box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.3), 0 0 20px rgba(138, 43, 226, 0.1); transition: all 0.3s ease; }
22
- .chat-input:focus { outline: none; border-color: rgba(183, 148, 246, 0.6); box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.3), 0 0 25px var(--accent-glow); }
23
- .chat-input::placeholder { color: rgba(183, 148, 246, 0.5); }
24
- .chat-submit { padding: 14px 20px; border: none; border-radius: 25px; font-size: 14px; background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 50%, var(--accent-tertiary) 100%); color: white; cursor: pointer; transition: all 0.3s ease; font-weight: 600; letter-spacing: 1px; box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4); white-space: nowrap; }
25
- .chat-submit:hover { transform: translateY(-2px); box-shadow: 0 6px 25px rgba(102, 126, 234, 0.6); }
26
- .viewer-panel { width: 70%; padding: 25px; background: linear-gradient(135deg, rgba(22, 33, 62, 0.9) 0%, rgba(15, 15, 35, 0.95) 100%); display: flex; flex-direction: column; justify-content: flex-start; align-items: center; box-shadow: inset 0 0 60px rgba(75, 0, 130, 0.15); position: relative; overflow: hidden; }
27
- .viewer-panel::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(ellipse at center, rgba(138, 43, 226, 0.05) 0%, transparent 70%); animation: nebula-pulse 8s ease-in-out infinite; pointer-events: none; }
28
- @keyframes nebula-pulse { 0%, 100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.1); } }
29
- .loading-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(15, 15, 35, 0.9); justify-content: center; align-items: center; z-index: 1000; }
30
- .spinner { width: 50px; height: 50px; border: 4px solid var(--border-color); border-top-color: var(--accent-tertiary); border-radius: 50%; animation: spin 1s linear infinite; }
31
- @keyframes spin { to { transform: rotate(360deg); } }
32
- ::-webkit-scrollbar { width: 10px; height: 10px; }
33
- ::-webkit-scrollbar-track { background: rgba(15, 15, 35, 0.6); border-radius: 10px; border: 1px solid var(--border-color); }
34
- ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--accent-primary) 0%, var(--accent-secondary) 50%, var(--accent-tertiary) 100%); border-radius: 10px; border: 2px solid rgba(15, 15, 35, 0.6); box-shadow: 0 0 10px var(--accent-glow); }
35
- ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--accent-tertiary) 0%, var(--accent-secondary) 50%, var(--accent-primary) 100%); }
36
-
37
- /* Split Application Styles */
38
- .application-panel { width: 100%; max-width: 900px; height: calc(100vh - 50px); display: flex; flex-direction: column; position: relative; z-index: 1; border-radius: 15px; overflow: hidden; border: 1px solid var(--border-color); box-shadow: 0 0 40px var(--accent-glow); }
39
- .application-header { font-size: 18px; font-weight: 600; padding: 14px 20px; background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); color: white; text-align: center; text-shadow: 0 2px 8px rgba(0,0,0,0.3); letter-spacing: 1px; }
40
- .application-content { flex: 1; display: flex; flex-direction: column; background: rgba(15, 15, 35, 0.6); overflow: hidden; }
41
- .application-top, .application-bottom { flex-basis: 50%; padding: 20px; overflow-y: auto; display: flex; flex-direction: column; }
42
- .application-top { background: linear-gradient(180deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.05) 100%); border-bottom: none; }
43
- .application-bottom { background: linear-gradient(180deg, rgba(118, 75, 162, 0.05) 0%, rgba(240, 147, 251, 0.1) 100%); }
44
- .application-top p, .application-bottom p { color: var(--text-secondary); font-size: 14px; line-height: 1.6; }
45
- .panel-title { font-size: 14px; font-weight: 600; color: var(--accent-tertiary); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border-color); text-transform: uppercase; letter-spacing: 1px; }
46
- .splitter { height: 8px; background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary), var(--accent-tertiary)); cursor: row-resize; flex-shrink: 0; position: relative; transition: all 0.2s; }
47
- .splitter::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 4px; background: rgba(255,255,255,0.3); border-radius: 2px; }
48
- .splitter:hover { background: linear-gradient(90deg, var(--accent-tertiary), var(--accent-secondary), var(--accent-primary)); box-shadow: 0 0 15px var(--accent-glow); }
49
- </style>
50
- </head>
51
- <body>
52
- <div class="chat-panel">
53
- <div class="chat-header">SynthOS</div>
54
- <div class="chat-messages" id="chatMessages">
55
- <div class="chat-message"><p><strong>SynthOS:</strong> what kind of application would you like?</p></div>
56
- </div>
57
- <div class="link-group">
58
- <a href="#" id="saveLink">Save</a>
59
- <a href="/pages" id="pagesLink">Pages</a>
60
- <a href="#" id="resetLink">Reset</a>
61
- </div>
62
- <form action="/" method="POST" id="chatForm">
63
- <input type="text" class="chat-input" id="chatInput" name="message" placeholder="Type a message...">
64
- <button type="submit" class="chat-submit">Send</button>
65
- </form>
66
- </div>
67
- <div class="viewer-panel" id="viewerPanel">
68
- <div class="application-panel">
69
- <div class="application-header">Split Panel Application</div>
70
- <div class="application-content">
71
- <div class="application-top">
72
- <div class="panel-title">Top Panel</div>
73
- <p>This is the top panel content area. You can add any content here - forms, data displays, controls, or visualizations. Drag the splitter below to resize.</p>
74
- </div>
75
- <div class="splitter" id="splitter"></div>
76
- <div class="application-bottom">
77
- <div class="panel-title">Bottom Panel</div>
78
- <p>This is the bottom panel content area. Perfect for output displays, logs, previews, or secondary content. Both panels are scrollable independently.</p>
79
- </div>
80
- </div>
81
- </div>
82
- </div>
83
- <div id="thoughts" style="display: none;">User requested styling the split application with the page's Nebula Dusk theme while keeping CSS compact. I've applied gradient backgrounds, glowing borders, themed scrollbars, and a visually appealing splitter with hover effects. The CSS is consolidated and uses the existing CSS variables for consistency.</div>
84
- <div id="loadingOverlay" class="loading-overlay"><div class="spinner"></div></div>
85
- <script>
86
- document.getElementById("chatInput").focus();
87
- document.getElementById("chatForm").addEventListener('submit', () => {
88
- document.getElementById("loadingOverlay").style.display = 'flex';
89
- document.getElementById("chatForm").action = window.location.pathname;
90
- });
91
- document.getElementById("saveLink").addEventListener("click", function() {
92
- const pageName = prompt("Enter the name of the page to save as:");
93
- if (pageName) window.location.href = `${window.location.pathname}/save?name=${encodeURIComponent(pageName)}`;
94
- });
95
- document.getElementById("resetLink").addEventListener("click", function() {
96
- window.location.href = `${window.location.pathname}/reset`;
97
- });
98
- window.onload = function() {
99
- const chatMessages = document.getElementById('chatMessages');
100
- chatMessages.scrollTo({ top: chatMessages.scrollHeight, behavior: 'smooth' });
101
- };
102
-
103
- const splitter = document.getElementById('splitter');
104
- const topPanel = document.querySelector('.application-top');
105
- const bottomPanel = document.querySelector('.application-bottom');
106
- let isDragging = false;
107
-
108
- splitter.addEventListener('mousedown', () => { isDragging = true; document.body.style.cursor = 'row-resize'; });
109
- document.addEventListener('mousemove', (e) => {
110
- if (!isDragging) return;
111
- const rect = document.querySelector('.application-content').getBoundingClientRect();
112
- const pct = ((e.clientY - rect.top) / rect.height) * 100;
113
- if (pct > 10 && pct < 90) { topPanel.style.flexBasis = `${pct}%`; bottomPanel.style.flexBasis = `${100-pct}%`; }
114
- });
115
- document.addEventListener('mouseup', () => { isDragging = false; document.body.style.cursor = 'default'; });
116
- </script>
117
- </body>
118
- </html>