synthos 0.1.0 → 0.2.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.
- package/bin/synthos.js +2 -2
- package/default-pages/[application].html +94 -86
- package/default-pages/[markdown].html +270 -260
- package/default-pages/[sidebar].html +67 -42
- package/default-pages/[split-application].html +55 -70
- package/default-pages/json_tools.html +113 -130
- package/default-pages/solar_system.html +432 -0
- package/default-pages/space_invaders.html +617 -0
- package/default-scripts/windows-terminal.json +6 -6
- package/dist/service/createCompletePrompt.d.ts.map +1 -1
- package/dist/service/createCompletePrompt.js +6 -5
- package/dist/service/createCompletePrompt.js.map +1 -1
- package/package.json +1 -1
- package/required-pages/apis.html +361 -346
- package/required-pages/home.html +69 -26
- package/required-pages/pages.html +152 -134
- package/required-pages/scripts.html +349 -334
- package/required-pages/settings.html +184 -157
- package/src/service/createCompletePrompt.ts +6 -5
- package/src/settings.ts +1 -1
|
@@ -5,37 +5,57 @@
|
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
6
|
<title>SynthOS</title>
|
|
7
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); }
|
|
8
9
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
9
|
-
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background:
|
|
10
|
-
.chat-panel { width:
|
|
11
|
-
.chat-header { font-size: 24px; padding:
|
|
12
|
-
.chat-messages { flex-grow: 1; overflow-y: auto; padding: 15px; margin-top:
|
|
13
|
-
.chat-message { margin-bottom: 15px; padding:
|
|
14
|
-
.chat-message p { margin-bottom: 5px; line-height: 1.
|
|
15
|
-
.chat-message p strong { font-weight: 600; color:
|
|
16
|
-
.chat-message p code { background:
|
|
17
|
-
.link-group { display: flex; justify-content: space-between; margin: 15px 0; }
|
|
18
|
-
.link-group a { font-size: 14px; color:
|
|
19
|
-
.link-group a:hover { background-color:
|
|
20
|
-
form { display: flex; flex-direction:
|
|
21
|
-
.chat-input
|
|
22
|
-
.chat-input {
|
|
23
|
-
.chat-
|
|
24
|
-
.chat-submit
|
|
25
|
-
.
|
|
26
|
-
.
|
|
27
|
-
.
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
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); }
|
|
35
58
|
</style>
|
|
36
|
-
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.9.0/d3.min.js"></script>
|
|
37
|
-
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/14.1.1/marked.min.js"></script>
|
|
38
|
-
<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/11.1.0/mermaid.min.js"></script>
|
|
39
59
|
</head>
|
|
40
60
|
<body>
|
|
41
61
|
<div class="chat-panel">
|
|
@@ -53,16 +73,26 @@
|
|
|
53
73
|
<button type="submit" class="chat-submit">Send</button>
|
|
54
74
|
</form>
|
|
55
75
|
</div>
|
|
56
|
-
<div class="
|
|
57
|
-
<div class="sidebar-
|
|
58
|
-
|
|
59
|
-
<
|
|
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>
|
|
60
91
|
</div>
|
|
61
92
|
</div>
|
|
62
|
-
<div id="thoughts" style="display: none;">
|
|
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>
|
|
63
94
|
<div id="loadingOverlay" class="loading-overlay"><div class="spinner"></div></div>
|
|
64
95
|
<script>
|
|
65
|
-
// Basic chat functionality
|
|
66
96
|
document.getElementById("chatInput").focus();
|
|
67
97
|
document.getElementById("chatForm").addEventListener('submit', () => {
|
|
68
98
|
document.getElementById("loadingOverlay").style.display = 'flex';
|
|
@@ -70,19 +100,14 @@
|
|
|
70
100
|
});
|
|
71
101
|
document.getElementById("saveLink").addEventListener("click", function() {
|
|
72
102
|
const pageName = prompt("Enter the name of the page to save as:");
|
|
73
|
-
if (pageName) {
|
|
74
|
-
window.location.href = `${window.location.pathname}/save?name=${encodeURIComponent(pageName)}`;
|
|
75
|
-
}
|
|
103
|
+
if (pageName) window.location.href = `${window.location.pathname}/save?name=${encodeURIComponent(pageName)}`;
|
|
76
104
|
});
|
|
77
105
|
document.getElementById("resetLink").addEventListener("click", function() {
|
|
78
106
|
window.location.href = `${window.location.pathname}/reset`;
|
|
79
107
|
});
|
|
80
108
|
window.onload = function() {
|
|
81
109
|
const chatMessages = document.getElementById('chatMessages');
|
|
82
|
-
chatMessages.scrollTo({
|
|
83
|
-
top: chatMessages.scrollHeight,
|
|
84
|
-
behavior: 'smooth'
|
|
85
|
-
});
|
|
110
|
+
chatMessages.scrollTo({ top: chatMessages.scrollHeight, behavior: 'smooth' });
|
|
86
111
|
};
|
|
87
112
|
</script>
|
|
88
113
|
</body>
|
|
@@ -3,44 +3,50 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<title>SynthOS -
|
|
6
|
+
<title>SynthOS - Split Panel Application</title>
|
|
7
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); }
|
|
8
9
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
9
|
-
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background:
|
|
10
|
-
.chat-panel { width: 30%; background:
|
|
11
|
-
.chat-header { font-size: 24px; padding:
|
|
12
|
-
.chat-messages { flex-grow: 1; overflow-y: auto; padding: 15px; margin-top:
|
|
13
|
-
.chat-message { margin-bottom: 15px; padding:
|
|
14
|
-
.chat-message p { margin-bottom: 5px; line-height: 1.
|
|
15
|
-
.chat-message p strong { font-weight: 600; color:
|
|
16
|
-
.
|
|
17
|
-
.link-group {
|
|
18
|
-
.link-group a {
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
.chat-input
|
|
22
|
-
.chat-input {
|
|
23
|
-
.chat-submit { background:
|
|
24
|
-
.chat-submit:hover {
|
|
25
|
-
.viewer-panel { width: 70%; background:
|
|
26
|
-
.
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
::-webkit-scrollbar
|
|
32
|
-
::-webkit-scrollbar-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
.application-
|
|
38
|
-
.application-
|
|
39
|
-
.
|
|
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); }
|
|
40
49
|
</style>
|
|
41
|
-
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.9.0/d3.min.js"></script>
|
|
42
|
-
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/14.1.1/marked.min.js"></script>
|
|
43
|
-
<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/11.1.0/mermaid.min.js"></script>
|
|
44
50
|
</head>
|
|
45
51
|
<body>
|
|
46
52
|
<div class="chat-panel">
|
|
@@ -60,22 +66,23 @@
|
|
|
60
66
|
</div>
|
|
61
67
|
<div class="viewer-panel" id="viewerPanel">
|
|
62
68
|
<div class="application-panel">
|
|
63
|
-
<div class="application-header">
|
|
69
|
+
<div class="application-header">Split Panel Application</div>
|
|
64
70
|
<div class="application-content">
|
|
65
71
|
<div class="application-top">
|
|
66
|
-
<
|
|
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>
|
|
67
74
|
</div>
|
|
68
75
|
<div class="splitter" id="splitter"></div>
|
|
69
76
|
<div class="application-bottom">
|
|
70
|
-
<
|
|
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>
|
|
71
79
|
</div>
|
|
72
80
|
</div>
|
|
73
81
|
</div>
|
|
74
82
|
</div>
|
|
75
|
-
<div id="thoughts" style="display: none;">I've
|
|
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>
|
|
76
84
|
<div id="loadingOverlay" class="loading-overlay"><div class="spinner"></div></div>
|
|
77
85
|
<script>
|
|
78
|
-
// Basic chat functionality
|
|
79
86
|
document.getElementById("chatInput").focus();
|
|
80
87
|
document.getElementById("chatForm").addEventListener('submit', () => {
|
|
81
88
|
document.getElementById("loadingOverlay").style.display = 'flex';
|
|
@@ -83,51 +90,29 @@
|
|
|
83
90
|
});
|
|
84
91
|
document.getElementById("saveLink").addEventListener("click", function() {
|
|
85
92
|
const pageName = prompt("Enter the name of the page to save as:");
|
|
86
|
-
if (pageName) {
|
|
87
|
-
window.location.href = `${window.location.pathname}/save?name=${encodeURIComponent(pageName)}`;
|
|
88
|
-
}
|
|
93
|
+
if (pageName) window.location.href = `${window.location.pathname}/save?name=${encodeURIComponent(pageName)}`;
|
|
89
94
|
});
|
|
90
95
|
document.getElementById("resetLink").addEventListener("click", function() {
|
|
91
96
|
window.location.href = `${window.location.pathname}/reset`;
|
|
92
97
|
});
|
|
93
98
|
window.onload = function() {
|
|
94
99
|
const chatMessages = document.getElementById('chatMessages');
|
|
95
|
-
chatMessages.scrollTo({
|
|
96
|
-
top: chatMessages.scrollHeight,
|
|
97
|
-
behavior: 'smooth'
|
|
98
|
-
});
|
|
100
|
+
chatMessages.scrollTo({ top: chatMessages.scrollHeight, behavior: 'smooth' });
|
|
99
101
|
};
|
|
100
102
|
|
|
101
|
-
// Splitter functionality
|
|
102
103
|
const splitter = document.getElementById('splitter');
|
|
103
104
|
const topPanel = document.querySelector('.application-top');
|
|
104
105
|
const bottomPanel = document.querySelector('.application-bottom');
|
|
105
|
-
|
|
106
106
|
let isDragging = false;
|
|
107
107
|
|
|
108
|
-
splitter.addEventListener('mousedown',
|
|
109
|
-
|
|
110
|
-
document.body.style.cursor = 'row-resize';
|
|
111
|
-
});
|
|
112
|
-
|
|
113
|
-
document.addEventListener('mousemove', function(e) {
|
|
108
|
+
splitter.addEventListener('mousedown', () => { isDragging = true; document.body.style.cursor = 'row-resize'; });
|
|
109
|
+
document.addEventListener('mousemove', (e) => {
|
|
114
110
|
if (!isDragging) return;
|
|
115
|
-
const
|
|
116
|
-
const
|
|
117
|
-
|
|
118
|
-
const newTopHeight = (offsetY / containerHeight) * 100;
|
|
119
|
-
const newBottomHeight = 100 - newTopHeight;
|
|
120
|
-
|
|
121
|
-
if (newTopHeight > 10 && newBottomHeight > 10) {
|
|
122
|
-
topPanel.style.flexBasis = `${newTopHeight}%`;
|
|
123
|
-
bottomPanel.style.flexBasis = `${newBottomHeight}%`;
|
|
124
|
-
}
|
|
125
|
-
});
|
|
126
|
-
|
|
127
|
-
document.addEventListener('mouseup', function() {
|
|
128
|
-
isDragging = false;
|
|
129
|
-
document.body.style.cursor = 'default';
|
|
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}%`; }
|
|
130
114
|
});
|
|
115
|
+
document.addEventListener('mouseup', () => { isDragging = false; document.body.style.cursor = 'default'; });
|
|
131
116
|
</script>
|
|
132
117
|
</body>
|
|
133
118
|
</html>
|