synthos 0.6.0 → 0.7.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/README.md +33 -1
- package/default-pages/app_builder.html +40 -0
- package/default-pages/app_builder.json +1 -0
- package/default-pages/json_tools.html +89 -159
- package/default-pages/json_tools.json +1 -0
- package/default-pages/my_notes.html +33 -0
- package/default-pages/my_notes.json +12 -0
- package/default-pages/neon_asteroids.html +77 -0
- package/default-pages/neon_asteroids.json +12 -0
- package/default-pages/sidebar_builder.html +49 -0
- package/default-pages/sidebar_builder.json +1 -0
- package/default-pages/solar_explorer.html +1956 -0
- package/default-pages/solar_explorer.json +12 -0
- package/default-pages/solar_tutorial.html +476 -0
- package/default-pages/solar_tutorial.json +1 -0
- package/default-pages/two-panel_builder.html +66 -0
- package/default-pages/two-panel_builder.json +1 -0
- package/dist/connectors/index.d.ts +3 -0
- package/dist/connectors/index.d.ts.map +1 -0
- package/dist/connectors/index.js +6 -0
- package/dist/connectors/index.js.map +1 -0
- package/dist/connectors/registry.d.ts +3 -0
- package/dist/connectors/registry.d.ts.map +1 -0
- package/dist/connectors/registry.js +100 -0
- package/dist/connectors/registry.js.map +1 -0
- package/dist/connectors/types.d.ts +61 -0
- package/dist/connectors/types.d.ts.map +1 -0
- package/dist/connectors/types.js +3 -0
- package/dist/connectors/types.js.map +1 -0
- package/dist/files.d.ts +2 -0
- package/dist/files.d.ts.map +1 -1
- package/dist/files.js +12 -1
- package/dist/files.js.map +1 -1
- package/dist/init.d.ts +8 -1
- package/dist/init.d.ts.map +1 -1
- package/dist/init.js +155 -3
- package/dist/init.js.map +1 -1
- package/dist/migrations.d.ts +11 -0
- package/dist/migrations.d.ts.map +1 -0
- package/dist/migrations.js +281 -0
- package/dist/migrations.js.map +1 -0
- package/dist/models/index.d.ts +3 -0
- package/dist/models/index.d.ts.map +1 -0
- package/dist/models/index.js +10 -0
- package/dist/models/index.js.map +1 -0
- package/dist/models/providers.d.ts +7 -0
- package/dist/models/providers.d.ts.map +1 -0
- package/dist/models/providers.js +33 -0
- package/dist/models/providers.js.map +1 -0
- package/dist/models/types.d.ts +21 -0
- package/dist/models/types.d.ts.map +1 -0
- package/dist/models/types.js +3 -0
- package/dist/models/types.js.map +1 -0
- package/dist/pages.d.ts +21 -2
- package/dist/pages.d.ts.map +1 -1
- package/dist/pages.js +202 -23
- package/dist/pages.js.map +1 -1
- package/dist/scripts.js +2 -2
- package/dist/scripts.js.map +1 -1
- package/dist/service/createCompletePrompt.d.ts +3 -2
- package/dist/service/createCompletePrompt.d.ts.map +1 -1
- package/dist/service/createCompletePrompt.js +11 -16
- package/dist/service/createCompletePrompt.js.map +1 -1
- package/dist/service/debugLog.d.ts +11 -0
- package/dist/service/debugLog.d.ts.map +1 -0
- package/dist/service/debugLog.js +26 -0
- package/dist/service/debugLog.js.map +1 -0
- package/dist/service/modelInstructions.d.ts +7 -0
- package/dist/service/modelInstructions.d.ts.map +1 -0
- package/dist/service/modelInstructions.js +16 -0
- package/dist/service/modelInstructions.js.map +1 -0
- package/dist/service/requiresSettings.d.ts +2 -2
- package/dist/service/requiresSettings.d.ts.map +1 -1
- package/dist/service/requiresSettings.js.map +1 -1
- package/dist/service/server.d.ts.map +1 -1
- package/dist/service/server.js +15 -0
- package/dist/service/server.js.map +1 -1
- package/dist/service/transformPage.d.ts +81 -2
- package/dist/service/transformPage.d.ts.map +1 -1
- package/dist/service/transformPage.js +672 -82
- package/dist/service/transformPage.js.map +1 -1
- package/dist/service/useApiRoutes.d.ts.map +1 -1
- package/dist/service/useApiRoutes.js +579 -13
- package/dist/service/useApiRoutes.js.map +1 -1
- package/dist/service/useConnectorRoutes.d.ts +4 -0
- package/dist/service/useConnectorRoutes.d.ts.map +1 -0
- package/dist/service/useConnectorRoutes.js +389 -0
- package/dist/service/useConnectorRoutes.js.map +1 -0
- package/dist/service/useDataRoutes.d.ts.map +1 -1
- package/dist/service/useDataRoutes.js +83 -70
- package/dist/service/useDataRoutes.js.map +1 -1
- package/dist/service/usePageRoutes.d.ts.map +1 -1
- package/dist/service/usePageRoutes.js +243 -38
- package/dist/service/usePageRoutes.js.map +1 -1
- package/dist/settings.d.ts +33 -4
- package/dist/settings.d.ts.map +1 -1
- package/dist/settings.js +108 -15
- package/dist/settings.js.map +1 -1
- package/dist/synthos-cli.d.ts.map +1 -1
- package/dist/synthos-cli.js +11 -1
- package/dist/synthos-cli.js.map +1 -1
- package/dist/themes.d.ts +9 -0
- package/dist/themes.d.ts.map +1 -0
- package/dist/themes.js +64 -0
- package/dist/themes.js.map +1 -0
- package/package.json +5 -3
- package/required-pages/builder.html +74 -0
- package/required-pages/builder.json +1 -0
- package/required-pages/pages.html +169 -126
- package/required-pages/pages.json +1 -0
- package/required-pages/settings.html +812 -156
- package/required-pages/settings.json +1 -0
- package/required-pages/synthos_apis.html +272 -0
- package/required-pages/synthos_apis.json +1 -0
- package/required-pages/synthos_scripts.html +87 -0
- package/required-pages/synthos_scripts.json +1 -0
- package/src/connectors/index.ts +12 -0
- package/src/connectors/registry.ts +98 -0
- package/src/connectors/types.ts +68 -0
- package/src/files.ts +11 -0
- package/src/init.ts +151 -5
- package/src/migrations.ts +266 -0
- package/src/models/index.ts +2 -0
- package/src/models/providers.ts +33 -0
- package/src/models/types.ts +23 -0
- package/src/pages.ts +234 -26
- package/src/scripts.ts +2 -2
- package/src/service/createCompletePrompt.ts +14 -18
- package/src/service/debugLog.ts +17 -0
- package/src/service/modelInstructions.ts +14 -0
- package/src/service/requiresSettings.ts +3 -3
- package/src/service/server.ts +19 -2
- package/src/service/transformPage.ts +709 -88
- package/src/service/useApiRoutes.ts +632 -16
- package/src/service/useConnectorRoutes.ts +427 -0
- package/src/service/useDataRoutes.ts +87 -71
- package/src/service/usePageRoutes.ts +237 -44
- package/src/settings.ts +143 -20
- package/src/synthos-cli.ts +11 -1
- package/src/themes.ts +71 -0
- package/default-pages/[application].html +0 -95
- package/default-pages/[markdown].html +0 -271
- package/default-pages/[sidebar].html +0 -114
- package/default-pages/[split-application].html +0 -118
- package/default-pages/solar_system.html +0 -432
- package/default-pages/space_invaders.html +0 -617
- package/required-pages/apis.html +0 -362
- package/required-pages/home.html +0 -126
- package/required-pages/scripts.html +0 -350
|
@@ -0,0 +1,476 @@
|
|
|
1
|
+
<!DOCTYPE html><html lang="en"><head>
|
|
2
|
+
<meta charset="UTF-8">
|
|
3
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
4
|
+
<title>SynthOS</title>
|
|
5
|
+
<script id="theme-info" src="/api/theme-info.js" data-locked="true"></script>
|
|
6
|
+
<link id="theme-css" rel="stylesheet" href="/api/theme.css" data-locked="true">
|
|
7
|
+
<style id="solar-styles">
|
|
8
|
+
#solarSystem {
|
|
9
|
+
width: 100%;
|
|
10
|
+
height: 100%;
|
|
11
|
+
position: relative;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.controls {
|
|
15
|
+
position: absolute;
|
|
16
|
+
bottom: 20px;
|
|
17
|
+
left: 50%;
|
|
18
|
+
transform: translateX(-50%);
|
|
19
|
+
display: flex;
|
|
20
|
+
gap: 15px;
|
|
21
|
+
z-index: 100;
|
|
22
|
+
background: rgba(15, 15, 35, 0.9);
|
|
23
|
+
padding: 15px 25px;
|
|
24
|
+
border-radius: 25px;
|
|
25
|
+
border: 1px solid rgba(138, 43, 226, 0.3);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.controls button {
|
|
29
|
+
padding: 10px 20px;
|
|
30
|
+
border: none;
|
|
31
|
+
border-radius: 15px;
|
|
32
|
+
background: linear-gradient(135deg, #667eea 0, #764ba2 100%);
|
|
33
|
+
color: #fff;
|
|
34
|
+
cursor: pointer;
|
|
35
|
+
font-size: 13px;
|
|
36
|
+
transition: 0.3s;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.controls button:hover {
|
|
40
|
+
transform: scale(1.05);
|
|
41
|
+
box-shadow: 0 0 15px rgba(102, 126, 234, 0.5);
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.controls button.active {
|
|
45
|
+
background: linear-gradient(135deg, #f093fb 0, #764ba2 100%);
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.info-panel {
|
|
49
|
+
position: absolute;
|
|
50
|
+
top: 20px;
|
|
51
|
+
right: 20px;
|
|
52
|
+
background: rgba(15, 15, 35, 0.95);
|
|
53
|
+
padding: 20px;
|
|
54
|
+
border-radius: 15px;
|
|
55
|
+
border: 1px solid rgba(138, 43, 226, 0.3);
|
|
56
|
+
max-width: 280px;
|
|
57
|
+
z-index: 100;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.info-panel h3 {
|
|
61
|
+
color: #f093fb;
|
|
62
|
+
margin-bottom: 10px;
|
|
63
|
+
font-size: 18px;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.info-panel p {
|
|
67
|
+
font-size: 13px;
|
|
68
|
+
line-height: 1.6;
|
|
69
|
+
color: #b794f6;
|
|
70
|
+
margin-bottom: 8px;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.speed-control {
|
|
74
|
+
position: absolute;
|
|
75
|
+
top: 20px;
|
|
76
|
+
left: 20px;
|
|
77
|
+
background: rgba(15, 15, 35, 0.95);
|
|
78
|
+
padding: 15px 20px;
|
|
79
|
+
border-radius: 15px;
|
|
80
|
+
border: 1px solid rgba(138, 43, 226, 0.3);
|
|
81
|
+
z-index: 100;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.speed-control label {
|
|
85
|
+
color: #b794f6;
|
|
86
|
+
font-size: 13px;
|
|
87
|
+
display: block;
|
|
88
|
+
margin-bottom: 8px;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.speed-control input[type=range] {
|
|
92
|
+
width: 150px;
|
|
93
|
+
accent-color: #f093fb;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.planet-label {
|
|
97
|
+
font-size: 11px;
|
|
98
|
+
fill: #b794f6;
|
|
99
|
+
pointer-events: none;
|
|
100
|
+
text-anchor: middle;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
#viewerPanel.full-viewer {
|
|
104
|
+
background: #0a0a19 !important;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.light-mode .controls,
|
|
108
|
+
.light-mode .info-panel,
|
|
109
|
+
.light-mode .speed-control {
|
|
110
|
+
background: rgba(15, 15, 35, 0.95) !important;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.light-mode .info-panel h3 {
|
|
114
|
+
color: #f093fb !important;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.light-mode .info-panel p {
|
|
118
|
+
color: #b794f6 !important;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.light-mode .speed-control label {
|
|
122
|
+
color: #b794f6 !important;
|
|
123
|
+
}
|
|
124
|
+
</style>
|
|
125
|
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/14.1.1/marked.min.js"></script>
|
|
126
|
+
<script id="page-info" src="/api/page-info.js?page=solar_system"></script>
|
|
127
|
+
<style id="tutorial-link-styles">.tutorial-link{color:#667eea;text-decoration:underline;cursor:pointer;transition:color 0.2s}.tutorial-link:hover{color:#f093fb}.light-mode .tutorial-link{color:#667eea}.light-mode .tutorial-link:hover{color:#764ba2}</style><style id="detail-card-options">.card-showcase{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:none;gap:30px;z-index:200;padding:20px}.card-showcase.active{display:flex}.planet-detail-card{width:240px;background:rgba(255,255,255,.1);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);border-radius:12px;padding:16px;color:#fff;box-shadow:0 8px 32px rgba(0,0,0,.3);position:absolute;pointer-events:none;opacity:0;transition:opacity .2s;z-index:150}.planet-detail-card.visible{opacity:1;pointer-events:auto}.planet-detail-card .planet-header{display:flex;align-items:center;gap:10px;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.15)}.planet-detail-card .planet-icon{width:32px;height:32px;border-radius:50%;box-shadow:0 0 12px rgba(255,200,100,.3);flex-shrink:0}.planet-detail-card .planet-name{font-size:18px;font-weight:600;background:linear-gradient(135deg,#f093fb,#667eea);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.planet-detail-card .stat-row{display:flex;justify-content:space-between;padding:6px 0;font-size:12px;border-bottom:1px solid rgba(255,255,255,.08)}.planet-detail-card .stat-row:last-of-type{border-bottom:none}.planet-detail-card .stat-label{color:rgba(255,255,255,.5)}.planet-detail-card .stat-value{color:#fff;font-weight:500}.planet-detail-card .fun-fact{margin-top:12px;padding:10px;background:rgba(102,126,234,.15);border-radius:8px;font-size:11px;color:rgba(255,255,255,.9);line-height:1.4;display:none}.planet-detail-card .fun-fact-label{color:#f093fb;font-weight:600;margin-bottom:4px;display:block}.planet-detail-card .question-section{margin-top:12px;display:none}.planet-detail-card .question-input{width:100%;padding:10px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:8px;color:#fff;font-size:12px;outline:none;box-sizing:border-box}.planet-detail-card .question-input::placeholder{color:rgba(255,255,255,.4)}.planet-detail-card .question-input:focus{border-color:#667eea;box-shadow:0 0 10px rgba(102,126,234,.3)}.planet-detail-card .ai-answer{margin-top:10px;padding:10px;background:rgba(240,147,251,.1);border-radius:8px;font-size:11px;color:rgba(255,255,255,.9);line-height:1.4;border-left:2px solid #f093fb;max-height:120px;overflow-y:auto;display:none}.planet-detail-card .ai-answer.visible{display:block}.planet-detail-card .ai-answer::-webkit-scrollbar{width:4px}.planet-detail-card .ai-answer::-webkit-scrollbar-track{background:rgba(255,255,255,.05);border-radius:2px}.planet-detail-card .ai-answer::-webkit-scrollbar-thumb{background:rgba(240,147,251,.3);border-radius:2px}.planet-detail-card .ai-answer::-webkit-scrollbar-thumb:hover{background:rgba(240,147,251,.5)}.planet-detail-card.mode-funfact .fun-fact{display:block}.planet-detail-card.mode-funfact .question-section{display:none}.planet-detail-card.mode-question .fun-fact{display:none}.planet-detail-card.mode-question .question-section{display:block}.light-mode .planet-detail-card{background:rgba(45,38,64,.9);border-color:rgba(118,75,162,.3)}.light-mode .planet-detail-card .stat-label{color:rgba(255,255,255,.6)}.light-mode .planet-detail-card .question-input{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.25)}</style><style id="detail-view-styles">.detail-view-container{position:absolute;top:0;left:0;width:100%;height:100%;display:none;background:#0a0a19}.detail-view-container.active{display:flex}.detail-planet-area{flex:1;position:relative;display:flex;align-items:center;justify-content:center}.detail-planet-canvas{width:100%;height:100%}.detail-sidebar{width:300px;background:rgba(15,15,35,.95);border-left:1px solid rgba(138,43,226,.3);padding:20px;overflow-y:auto;display:flex;flex-direction:column;gap:15px}.detail-sidebar .planet-detail-card{position:relative;opacity:1;pointer-events:auto;width:100%;box-sizing:border-box}.back-button{padding:10px 20px;border:none;border-radius:15px;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;cursor:pointer;font-size:13px;transition:.3s;margin-bottom:10px}.back-button:hover{transform:scale(1.05);box-shadow:0 0 15px rgba(102,126,234,.5)}.moon-speed-control{background:rgba(255,255,255,.1);padding:12px;border-radius:10px;margin-top:10px}.moon-speed-control label{color:#b794f6;font-size:12px;display:block;margin-bottom:8px}.moon-speed-control input[type="range"]{width:100%;accent-color:#f093fb}.moon-detail-card{position:absolute;width:200px;background:rgba(255,255,255,.1);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);border-radius:10px;padding:12px;color:#fff;box-shadow:0 8px 32px rgba(0,0,0,.3);pointer-events:none;opacity:0;transition:opacity .2s;z-index:200}.moon-detail-card.visible{opacity:1}.moon-detail-card .moon-name{font-size:14px;font-weight:600;background:linear-gradient(135deg,#f093fb,#667eea);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:8px}.moon-detail-card .moon-stat{display:flex;justify-content:space-between;padding:4px 0;font-size:11px;border-bottom:1px solid rgba(255,255,255,.08)}.moon-detail-card .moon-stat:last-of-type{border-bottom:none}.moon-detail-card .moon-stat-label{color:rgba(255,255,255,.5)}.moon-detail-card .moon-stat-value{color:#fff}.moon-detail-card .moon-fun-fact{margin-top:8px;padding:8px;background:rgba(102,126,234,.15);border-radius:6px;font-size:10px;color:rgba(255,255,255,.9);line-height:1.4}.light-mode .detail-view-container{background:#0a0a19}.light-mode .detail-sidebar{background:rgba(15,15,35,.95)}</style>
|
|
128
|
+
<script id="planet-details" type="application/json" data-locked="true">{"sun":{"name":"The Sun","type":"G-type main-sequence star","diameter":"1,392,700 km","surfaceTemp":"5,500°C","funFact":"Contains 99.86% of the Solar System's mass and could fit 1.3 million Earths inside it."},"planets":{"mercury":{"name":"Mercury","color":"#b5b5b5","type":"Terrestrial","diameter":"4,879 km","distance":"57.9 million km","orbitalPeriod":"88 Earth days","dayLength":"59 Earth days","surfaceTemp":"-180°C to 430°C","moons":0,"funFact":"Despite being closest to the Sun, Mercury isn't the hottest planet. Its lack of atmosphere means heat escapes quickly at night."},"venus":{"name":"Venus","color":"#e6c87a","type":"Terrestrial","diameter":"12,104 km","distance":"108.2 million km","orbitalPeriod":"225 Earth days","dayLength":"243 Earth days","surfaceTemp":"465°C","moons":0,"funFact":"Venus rotates backwards compared to other planets, so the Sun rises in the west and sets in the east."},"earth":{"name":"Earth","color":"#6b93d6","type":"Terrestrial","diameter":"12,742 km","distance":"149.6 million km","orbitalPeriod":"365.25 days","dayLength":"24 hours","surfaceTemp":"-89°C to 57°C","moons":1,"funFact":"Earth is the only planet not named after a Greek or Roman god. Its name comes from Old English meaning 'ground'.","moonData":{"luna":{"name":"Luna (The Moon)","diameter":"3,474 km","distance":"384,400 km","distanceKm":384400,"orbitalPeriod":"27.3 days","funFact":"The Moon is slowly drifting away from Earth at about 3.8 cm per year."}}},"mars":{"name":"Mars","color":"#c1440e","type":"Terrestrial","diameter":"6,779 km","distance":"227.9 million km","orbitalPeriod":"687 Earth days","dayLength":"24.6 hours","surfaceTemp":"-125°C to 20°C","moons":2,"funFact":"Mars has the largest volcano in the solar system, Olympus Mons, which is nearly 3 times the height of Mount Everest.","moonData":{"phobos":{"name":"Phobos","diameter":"22.4 km","distance":"9,376 km","distanceKm":9376,"orbitalPeriod":"7.7 hours","funFact":"Phobos orbits Mars faster than Mars rotates, so it rises in the west and sets in the east."},"deimos":{"name":"Deimos","diameter":"12.4 km","distance":"23,463 km","distanceKm":23463,"orbitalPeriod":"30.3 hours","funFact":"Deimos is one of the smallest moons in the solar system and may be a captured asteroid."}}},"jupiter":{"name":"Jupiter","color":"#d4a574","type":"Gas Giant","diameter":"139,820 km","distance":"778.5 million km","orbitalPeriod":"11.86 Earth years","dayLength":"9.9 hours","surfaceTemp":"-110°C","moons":95,"funFact":"Jupiter's Great Red Spot is a storm that has been raging for at least 400 years and is larger than Earth.","moonData":{"io":{"name":"Io","diameter":"3,643 km","distance":"421,700 km","distanceKm":421700,"orbitalPeriod":"1.77 days","funFact":"Io is the most volcanically active body in the solar system with over 400 active volcanoes."},"europa":{"name":"Europa","diameter":"3,122 km","distance":"671,034 km","distanceKm":671034,"orbitalPeriod":"3.55 days","funFact":"Europa likely has a subsurface ocean containing more water than all of Earth's oceans combined."},"ganymede":{"name":"Ganymede","diameter":"5,268 km","distance":"1,070,400 km","distanceKm":1070400,"orbitalPeriod":"7.15 days","funFact":"Ganymede is the largest moon in the solar system, even bigger than the planet Mercury."},"callisto":{"name":"Callisto","diameter":"4,821 km","distance":"1,882,700 km","distanceKm":1882700,"orbitalPeriod":"16.69 days","funFact":"Callisto has the oldest and most heavily cratered surface in the solar system."}}},"saturn":{"name":"Saturn","color":"#f4d59e","type":"Gas Giant","diameter":"116,460 km","distance":"1.43 billion km","orbitalPeriod":"29.46 Earth years","dayLength":"10.7 hours","surfaceTemp":"-140°C","moons":146,"funFact":"Saturn's density is so low that it would float if you could find a bathtub big enough to hold it.","moonData":{"mimas":{"name":"Mimas","diameter":"396 km","distance":"185,520 km","distanceKm":185520,"orbitalPeriod":"0.94 days","funFact":"Mimas has a giant crater that makes it look like the Death Star from Star Wars."},"enceladus":{"name":"Enceladus","diameter":"504 km","distance":"238,020 km","distanceKm":238020,"orbitalPeriod":"1.37 days","funFact":"Enceladus shoots geysers of water ice into space, suggesting a subsurface ocean."},"tethys":{"name":"Tethys","diameter":"1,062 km","distance":"294,619 km","distanceKm":294619,"orbitalPeriod":"1.89 days","funFact":"Tethys has a massive canyon called Ithaca Chasma that stretches 2,000 km across its surface."},"dione":{"name":"Dione","diameter":"1,123 km","distance":"377,396 km","distanceKm":377396,"orbitalPeriod":"2.74 days","funFact":"Dione has wispy ice cliffs and may have a subsurface ocean beneath its icy crust."},"rhea":{"name":"Rhea","diameter":"1,527 km","distance":"527,040 km","distanceKm":527040,"orbitalPeriod":"4.52 days","funFact":"Rhea may have its own faint ring system, which would make it the only moon known to have rings."},"titan":{"name":"Titan","diameter":"5,150 km","distance":"1,221,870 km","distanceKm":1221870,"orbitalPeriod":"15.95 days","funFact":"Titan is the only moon with a dense atmosphere and has lakes of liquid methane on its surface."},"iapetus":{"name":"Iapetus","diameter":"1,469 km","distance":"3,560,820 km","distanceKm":3560820,"orbitalPeriod":"79.32 days","funFact":"Iapetus has one hemisphere as dark as coal and the other as bright as snow, giving it a striking two-toned appearance."}}},"uranus":{"name":"Uranus","color":"#d1e7e7","type":"Ice Giant","diameter":"50,724 km","distance":"2.87 billion km","orbitalPeriod":"84.01 Earth years","dayLength":"17.2 hours","surfaceTemp":"-195°C","moons":28,"funFact":"Uranus rotates on its side with an axial tilt of 98°, possibly due to a collision with an Earth-sized object.","moonData":{"miranda":{"name":"Miranda","diameter":"472 km","distance":"129,390 km","distanceKm":129390,"orbitalPeriod":"1.41 days","funFact":"Miranda has the tallest known cliff in the solar system, Verona Rupes, at 20 km high."},"ariel":{"name":"Ariel","diameter":"1,158 km","distance":"191,020 km","distanceKm":191020,"orbitalPeriod":"2.52 days","funFact":"Ariel is the brightest of Uranus's moons and has extensive canyon systems."},"umbriel":{"name":"Umbriel","diameter":"1,169 km","distance":"266,000 km","distanceKm":266000,"orbitalPeriod":"4.14 days","funFact":"Umbriel is the darkest of Uranus's major moons, with a mysterious bright ring on its surface called Wunda crater."},"titania":{"name":"Titania","diameter":"1,578 km","distance":"435,910 km","distanceKm":435910,"orbitalPeriod":"8.71 days","funFact":"Titania is the largest moon of Uranus and may have a subsurface ocean."},"oberon":{"name":"Oberon","diameter":"1,523 km","distance":"583,520 km","distanceKm":583520,"orbitalPeriod":"13.46 days","funFact":"Oberon has a mountain that rises about 6 km above the surrounding terrain."}}},"neptune":{"name":"Neptune","color":"#5b5ddf","type":"Ice Giant","diameter":"49,244 km","distance":"4.5 billion km","orbitalPeriod":"164.8 Earth years","dayLength":"16.1 hours","surfaceTemp":"-200°C","moons":16,"funFact":"Neptune has the strongest winds in the solar system, reaching speeds of 2,100 km/h.","moonData":{"triton":{"name":"Triton","diameter":"2,707 km","distance":"354,760 km","distanceKm":354760,"orbitalPeriod":"5.88 days (retrograde)","funFact":"Triton orbits Neptune backwards and is slowly spiraling inward, destined to be torn apart in about 3.6 billion years."},"proteus":{"name":"Proteus","diameter":"420 km","distance":"117,647 km","distanceKm":117647,"orbitalPeriod":"1.12 days","funFact":"Proteus is Neptune's second largest moon and is irregularly shaped — it's about as large as an object can be without being pulled into a sphere by its own gravity."},"nereid":{"name":"Nereid","diameter":"340 km","distance":"5,513,400 km","distanceKm":5513400,"orbitalPeriod":"360.14 days","funFact":"Nereid has one of the most eccentric orbits of any known moon in the solar system."}}},"pluto":{"name":"Pluto","color":"#a89f91","type":"Dwarf Planet","diameter":"2,377 km","distance":"5.9 billion km","orbitalPeriod":"248 Earth years","dayLength":"6.4 Earth days","surfaceTemp":"-230°C","moons":5,"funFact":"Pluto has a heart-shaped glacier called Tombaugh Regio that's larger than Texas.","moonData":{"charon":{"name":"Charon","diameter":"1,212 km","distance":"19,571 km","distanceKm":19571,"orbitalPeriod":"6.4 days","funFact":"Charon is so large relative to Pluto that they orbit a point in space between them, making them a 'double dwarf planet'."},"styx":{"name":"Styx","diameter":"16 km","distance":"42,656 km","distanceKm":42656,"orbitalPeriod":"20.16 days","funFact":"Styx is the smallest and last-discovered moon of Pluto, found in 2012 by the Hubble Space Telescope."},"nix":{"name":"Nix","diameter":"50 km","distance":"48,694 km","distanceKm":48694,"orbitalPeriod":"24.85 days","funFact":"Nix rotates chaotically due to the gravitational influence of Pluto and Charon."},"kerberos":{"name":"Kerberos","diameter":"19 km","distance":"57,783 km","distanceKm":57783,"orbitalPeriod":"32.17 days","funFact":"Kerberos is surprisingly small and dark, defying predictions that it would be large and bright."},"hydra":{"name":"Hydra","diameter":"51 km","distance":"64,738 km","distanceKm":64738,"orbitalPeriod":"38.2 days","funFact":"Hydra is shaped like a potato and tumbles unpredictably as it orbits."}}}}}</script>
|
|
129
|
+
</head>
|
|
130
|
+
<body>
|
|
131
|
+
<div class="chat-panel" data-locked="true">
|
|
132
|
+
<div class="chat-header" data-locked="true">SynthOS</div>
|
|
133
|
+
<div class="chat-messages" id="chatMessages" data-locked="true">
|
|
134
|
+
<div class="chat-message"><p><strong>SynthOS:</strong> Welcome to this Solar Tutorial! I'll guide you through building interactive features for this simulation of the Solar System. Let's start with something simple: <a href="#" class="tutorial-link" data-message="add a reverse time button">add a reverse time button</a> so users can watch planets orbit backwards!</p></div>
|
|
135
|
+
|
|
136
|
+
|
|
137
|
+
</div>
|
|
138
|
+
<div class="link-group" data-locked="true">
|
|
139
|
+
<a href="#" id="saveLink" data-locked="true">Save</a>
|
|
140
|
+
<a href="/pages" id="pagesLink" data-locked="true">Pages</a>
|
|
141
|
+
<a href="#" id="resetLink" data-locked="true">Reset</a>
|
|
142
|
+
</div>
|
|
143
|
+
<form action="/" method="POST" id="chatForm" data-locked="true">
|
|
144
|
+
<input type="text" class="chat-input" id="chatInput" name="message" placeholder="Type a message..." data-locked="true">
|
|
145
|
+
<button type="submit" class="chat-submit" data-locked="true">Send</button>
|
|
146
|
+
</form>
|
|
147
|
+
</div>
|
|
148
|
+
<div class="viewer-panel full-viewer" id="viewerPanel" style="background: #0a0a19;">
|
|
149
|
+
<div id="solarSystem"><div id="planetDetailCard" class="planet-detail-card"><div class="planet-header">
|
|
150
|
+
<div class="planet-icon"></div>
|
|
151
|
+
<div class="planet-name"></div>
|
|
152
|
+
</div>
|
|
153
|
+
<div class="stat-row"><span class="stat-label">Type</span><span class="stat-value" data-field="type"></span></div>
|
|
154
|
+
<div class="stat-row"><span class="stat-label">Diameter</span><span class="stat-value" data-field="diameter"></span></div>
|
|
155
|
+
<div class="stat-row"><span class="stat-label">Moons</span><span class="stat-value" data-field="moons"></span></div>
|
|
156
|
+
<div class="fun-fact">
|
|
157
|
+
<span class="fun-fact-label">Fun Fact</span>
|
|
158
|
+
<span data-field="funFact"></span>
|
|
159
|
+
</div>
|
|
160
|
+
<div class="question-section">
|
|
161
|
+
<input type="text" class="question-input" placeholder="Ask a question...">
|
|
162
|
+
<div class="ai-answer"></div>
|
|
163
|
+
</div></div><div id="detailViewContainer" class="detail-view-container">
|
|
164
|
+
<div class="detail-planet-area">
|
|
165
|
+
<canvas id="detailCanvas" class="detail-planet-canvas"></canvas>
|
|
166
|
+
<div id="moonDetailCard" class="moon-detail-card">
|
|
167
|
+
<div class="moon-name"></div>
|
|
168
|
+
<div class="moon-stat"><span class="moon-stat-label">Diameter</span><span class="moon-stat-value" data-field="diameter"></span></div>
|
|
169
|
+
<div class="moon-stat"><span class="moon-stat-label">Distance</span><span class="moon-stat-value" data-field="distance"></span></div>
|
|
170
|
+
<div class="moon-stat"><span class="moon-stat-label">Orbital Period</span><span class="moon-stat-value" data-field="period"></span></div>
|
|
171
|
+
<div class="moon-fun-fact"></div>
|
|
172
|
+
</div>
|
|
173
|
+
</div>
|
|
174
|
+
<div class="detail-sidebar" id="detailSidebar">
|
|
175
|
+
<button class="back-button" id="backToSystem">← Back to System</button>
|
|
176
|
+
<div id="planetDetailCardFixed" class="planet-detail-card mode-funfact">
|
|
177
|
+
<div class="planet-header">
|
|
178
|
+
<div class="planet-icon"></div>
|
|
179
|
+
<div class="planet-name"></div>
|
|
180
|
+
</div>
|
|
181
|
+
<div class="stat-row"><span class="stat-label">Type</span><span class="stat-value" data-field="type"></span></div>
|
|
182
|
+
<div class="stat-row"><span class="stat-label">Diameter</span><span class="stat-value" data-field="diameter"></span></div>
|
|
183
|
+
<div class="stat-row"><span class="stat-label">Distance from Sun</span><span class="stat-value" data-field="distance"></span></div>
|
|
184
|
+
<div class="stat-row"><span class="stat-label">Orbital Period</span><span class="stat-value" data-field="orbitalPeriod"></span></div>
|
|
185
|
+
<div class="stat-row"><span class="stat-label">Day Length</span><span class="stat-value" data-field="dayLength"></span></div>
|
|
186
|
+
<div class="stat-row"><span class="stat-label">Surface Temp</span><span class="stat-value" data-field="surfaceTemp"></span></div>
|
|
187
|
+
<div class="stat-row"><span class="stat-label">Moons</span><span class="stat-value" data-field="moons"></span></div>
|
|
188
|
+
<div class="fun-fact">
|
|
189
|
+
<span class="fun-fact-label">Fun Fact</span>
|
|
190
|
+
<span data-field="funFact"></span>
|
|
191
|
+
</div>
|
|
192
|
+
</div>
|
|
193
|
+
<div id="moonSpeedControl" class="moon-speed-control" style="display: none;">
|
|
194
|
+
<label>Moon Orbit Speed: <span id="moonSpeedValue">1x</span></label>
|
|
195
|
+
<input type="range" id="moonSpeedSlider" min="0" max="20" step="0.5" value="1">
|
|
196
|
+
</div>
|
|
197
|
+
</div>
|
|
198
|
+
</div></div>
|
|
199
|
+
<div class="speed-control">
|
|
200
|
+
<label>Simulation Speed: <span id="speedValue">1x</span></label>
|
|
201
|
+
<input type="range" id="speedSlider" min="0.0" max="10" step="0.1" value="1">
|
|
202
|
+
</div>
|
|
203
|
+
<div class="info-panel" id="infoPanel">
|
|
204
|
+
<h3>Solar Tutorial</h3>
|
|
205
|
+
<p>Click on any planet to see detailed information.</p>
|
|
206
|
+
<p>The simulation shows accurate relative orbital periods and distances (scaled for visibility).</p>
|
|
207
|
+
</div>
|
|
208
|
+
<div class="controls">
|
|
209
|
+
<button id="toggleOrbits" class="active">Show Orbits</button>
|
|
210
|
+
<button id="toggleLabels" class="active">Show Labels</button>
|
|
211
|
+
<button id="toggleAsteroids">Show Asteroids</button>
|
|
212
|
+
<button id="resetView">Reset View</button>
|
|
213
|
+
</div>
|
|
214
|
+
<div id="loadingOverlay" class="loading-overlay"><div class="spinner"></div></div>
|
|
215
|
+
</div>
|
|
216
|
+
<div id="instructions" style="display: none;" data-locked="true">We are teaching the user how use SynthOS to build apps, games, and animations as a sequence of steps:
|
|
217
|
+
|
|
218
|
+
1. add a reverse time button.
|
|
219
|
+
2. show a detail card with fun facts when a planet is hovered over.
|
|
220
|
+
3. when you click on a planet navigate to detail view of the planet. Show the planets detail card pinned to the right. The planet should be centerd to the left of the detail card. If it has moons show their orbits, add a slider to control the speed & stop the moons, add detail cards for each moon that shows on hover. A planets moons animations should be realistic.
|
|
221
|
+
|
|
222
|
+
Allow the user to explore but try to steer them back to the tutorial.
|
|
223
|
+
Use the pre-existing detail cards, detail view, and planet details.</div>
|
|
224
|
+
<div id="thoughts" style="display: none;" data-locked="true"></div>
|
|
225
|
+
<script id="solar-sim">
|
|
226
|
+
const container = document.getElementById("solarSystem");
|
|
227
|
+
const canvas = document.createElement("canvas");
|
|
228
|
+
const ctx = canvas.getContext("2d");
|
|
229
|
+
let width, height, centerX, centerY;
|
|
230
|
+
container.appendChild(canvas);
|
|
231
|
+
|
|
232
|
+
let simulationSpeed = 1;
|
|
233
|
+
let showOrbits = true;
|
|
234
|
+
let showLabels = true;
|
|
235
|
+
let showAsteroids = false;
|
|
236
|
+
let time = 0;
|
|
237
|
+
|
|
238
|
+
const planets = [
|
|
239
|
+
{ name: "Mercury", color: "#b5b5b5", size: 4, distance: 50, period: 0.24, eccentricity: 0.206, info: "Smallest planet, closest to Sun. Surface temp: -180°C to 430°C. No moons." },
|
|
240
|
+
{ name: "Venus", color: "#e6c87a", size: 6, distance: 75, period: 0.62, eccentricity: 0.007, info: "Hottest planet due to greenhouse effect. Rotates backwards. No moons." },
|
|
241
|
+
{ name: "Earth", color: "#6b93d6", size: 6, distance: 100, period: 1, eccentricity: 0.017, info: "Our home! Only known planet with life. 1 moon (Luna)." },
|
|
242
|
+
{ name: "Mars", color: "#c1440e", size: 5, distance: 130, period: 1.88, eccentricity: 0.093, info: "The Red Planet. Has the largest volcano (Olympus Mons). 2 moons." },
|
|
243
|
+
{ name: "Jupiter", color: "#d4a574", size: 18, distance: 200, period: 11.86, eccentricity: 0.049, info: "Largest planet. Great Red Spot is a giant storm. 95 known moons." },
|
|
244
|
+
{ name: "Saturn", color: "#f4d59e", size: 15, distance: 270, period: 29.46, eccentricity: 0.057, info: "Famous for its rings made of ice and rock. 146 known moons." },
|
|
245
|
+
{ name: "Uranus", color: "#d1e7e7", size: 10, distance: 330, period: 84.01, eccentricity: 0.046, info: "Ice giant, rotates on its side. 28 known moons." },
|
|
246
|
+
{ name: "Neptune", color: "#5b5ddf", size: 10, distance: 380, period: 164.8, eccentricity: 0.01, info: "Windiest planet (2,100 km/h). 16 known moons." },
|
|
247
|
+
{ name: "Pluto", color: "#a89f91", size: 3, distance: 420, period: 248, eccentricity: 0.249, info: "Dwarf planet. Has a heart-shaped glacier. 5 known moons." }
|
|
248
|
+
];
|
|
249
|
+
|
|
250
|
+
let asteroids = [];
|
|
251
|
+
|
|
252
|
+
function generateAsteroids() {
|
|
253
|
+
asteroids = [];
|
|
254
|
+
for (let i = 0; i < 500; i++) {
|
|
255
|
+
asteroids.push({
|
|
256
|
+
distance: 155 + 35 * Math.random(),
|
|
257
|
+
angle: Math.random() * Math.PI * 2,
|
|
258
|
+
speed: 5e-4 + 0.001 * Math.random(),
|
|
259
|
+
size: 0.5 + 1.5 * Math.random()
|
|
260
|
+
});
|
|
261
|
+
}
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
function resize() {
|
|
265
|
+
width = container.clientWidth;
|
|
266
|
+
height = container.clientHeight;
|
|
267
|
+
canvas.width = width;
|
|
268
|
+
canvas.height = height;
|
|
269
|
+
centerX = width / 2;
|
|
270
|
+
centerY = height / 2;
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
function getOrbitalPosition(planet, t) {
|
|
274
|
+
const meanAnomaly = (2 * Math.PI) / (365 * planet.period) * t * simulationSpeed;
|
|
275
|
+
const e = planet.eccentricity;
|
|
276
|
+
const trueAnomaly = meanAnomaly + 2 * e * Math.sin(meanAnomaly);
|
|
277
|
+
const r = planet.distance * (1 - e * e) / (1 + e * Math.cos(trueAnomaly));
|
|
278
|
+
return {
|
|
279
|
+
x: centerX + r * Math.cos(trueAnomaly),
|
|
280
|
+
y: centerY + r * Math.sin(trueAnomaly),
|
|
281
|
+
angle: trueAnomaly
|
|
282
|
+
};
|
|
283
|
+
}
|
|
284
|
+
|
|
285
|
+
function drawOrbit(planet) {
|
|
286
|
+
ctx.beginPath();
|
|
287
|
+
ctx.strokeStyle = "rgba(138, 43, 226, 0.2)";
|
|
288
|
+
ctx.lineWidth = 1;
|
|
289
|
+
const a = planet.distance;
|
|
290
|
+
const e = planet.eccentricity;
|
|
291
|
+
const b = a * Math.sqrt(1 - e * e);
|
|
292
|
+
const c = a * e;
|
|
293
|
+
ctx.ellipse(centerX + c, centerY, a, b, 0, 0, 2 * Math.PI);
|
|
294
|
+
ctx.stroke();
|
|
295
|
+
}
|
|
296
|
+
|
|
297
|
+
function drawSun() {
|
|
298
|
+
const gradient = ctx.createRadialGradient(centerX, centerY, 0, centerX, centerY, 60);
|
|
299
|
+
gradient.addColorStop(0, "rgba(255, 200, 50, 1)");
|
|
300
|
+
gradient.addColorStop(0.3, "rgba(255, 150, 0, 0.8)");
|
|
301
|
+
gradient.addColorStop(0.6, "rgba(255, 100, 0, 0.3)");
|
|
302
|
+
gradient.addColorStop(1, "rgba(255, 50, 0, 0)");
|
|
303
|
+
ctx.beginPath();
|
|
304
|
+
ctx.arc(centerX, centerY, 60, 0, 2 * Math.PI);
|
|
305
|
+
ctx.fillStyle = gradient;
|
|
306
|
+
ctx.fill();
|
|
307
|
+
ctx.beginPath();
|
|
308
|
+
ctx.arc(centerX, centerY, 25, 0, 2 * Math.PI);
|
|
309
|
+
ctx.fillStyle = "#fff5c0";
|
|
310
|
+
ctx.fill();
|
|
311
|
+
ctx.beginPath();
|
|
312
|
+
ctx.arc(centerX, centerY, 30, 0, 2 * Math.PI);
|
|
313
|
+
ctx.fillStyle = "rgba(255, 220, 100, 0.5)";
|
|
314
|
+
ctx.fill();
|
|
315
|
+
}
|
|
316
|
+
|
|
317
|
+
function drawSaturnRings(x, y, size, angle) {
|
|
318
|
+
ctx.save();
|
|
319
|
+
ctx.translate(x, y);
|
|
320
|
+
ctx.rotate(0.4);
|
|
321
|
+
ctx.beginPath();
|
|
322
|
+
ctx.ellipse(0, 0, 2.2 * size, 0.5 * size, 0, 0, 2 * Math.PI);
|
|
323
|
+
ctx.strokeStyle = "rgba(210, 180, 140, 0.6)";
|
|
324
|
+
ctx.lineWidth = 3;
|
|
325
|
+
ctx.stroke();
|
|
326
|
+
ctx.beginPath();
|
|
327
|
+
ctx.ellipse(0, 0, 1.8 * size, 0.4 * size, 0, 0, 2 * Math.PI);
|
|
328
|
+
ctx.strokeStyle = "rgba(180, 150, 120, 0.4)";
|
|
329
|
+
ctx.lineWidth = 2;
|
|
330
|
+
ctx.stroke();
|
|
331
|
+
ctx.restore();
|
|
332
|
+
}
|
|
333
|
+
|
|
334
|
+
function drawPlanet(planet, pos) {
|
|
335
|
+
ctx.beginPath();
|
|
336
|
+
ctx.arc(pos.x + 2, pos.y + 2, planet.size, 0, 2 * Math.PI);
|
|
337
|
+
ctx.fillStyle = "rgba(0, 0, 0, 0.3)";
|
|
338
|
+
ctx.fill();
|
|
339
|
+
const gradient = ctx.createRadialGradient(
|
|
340
|
+
pos.x - 0.3 * planet.size, pos.y - 0.3 * planet.size, 0,
|
|
341
|
+
pos.x, pos.y, planet.size
|
|
342
|
+
);
|
|
343
|
+
gradient.addColorStop(0, lightenColor(planet.color, 30));
|
|
344
|
+
gradient.addColorStop(1, planet.color);
|
|
345
|
+
ctx.beginPath();
|
|
346
|
+
ctx.arc(pos.x, pos.y, planet.size, 0, 2 * Math.PI);
|
|
347
|
+
ctx.fillStyle = gradient;
|
|
348
|
+
ctx.fill();
|
|
349
|
+
if (planet.name === "Saturn") {
|
|
350
|
+
drawSaturnRings(pos.x, pos.y, planet.size, pos.angle);
|
|
351
|
+
}
|
|
352
|
+
if (showLabels) {
|
|
353
|
+
ctx.fillStyle = "#e0d0f0";
|
|
354
|
+
ctx.font = "bold 11px Segoe UI, sans-serif";
|
|
355
|
+
ctx.textAlign = "center";
|
|
356
|
+
ctx.shadowColor = "rgba(240, 147, 251, 0.6)";
|
|
357
|
+
ctx.shadowBlur = 4;
|
|
358
|
+
ctx.fillText(planet.name, pos.x, pos.y - planet.size - 8);
|
|
359
|
+
ctx.shadowColor = "transparent";
|
|
360
|
+
ctx.shadowBlur = 0;
|
|
361
|
+
}
|
|
362
|
+
}
|
|
363
|
+
|
|
364
|
+
function drawAsteroidBelt() {
|
|
365
|
+
ctx.fillStyle = "rgba(150, 150, 150, 0.6)";
|
|
366
|
+
asteroids.forEach(function(asteroid) {
|
|
367
|
+
asteroid.angle += asteroid.speed * simulationSpeed;
|
|
368
|
+
const x = centerX + asteroid.distance * Math.cos(asteroid.angle);
|
|
369
|
+
const y = centerY + asteroid.distance * Math.sin(asteroid.angle);
|
|
370
|
+
ctx.beginPath();
|
|
371
|
+
ctx.arc(x, y, asteroid.size, 0, 2 * Math.PI);
|
|
372
|
+
ctx.fill();
|
|
373
|
+
});
|
|
374
|
+
}
|
|
375
|
+
|
|
376
|
+
function lightenColor(color, percent) {
|
|
377
|
+
const num = parseInt(color.replace("#", ""), 16);
|
|
378
|
+
const amt = Math.round(2.55 * percent);
|
|
379
|
+
const R = (num >> 16) + amt;
|
|
380
|
+
const G = (num >> 8 & 255) + amt;
|
|
381
|
+
const B = (num & 255) + amt;
|
|
382
|
+
return "#" + (
|
|
383
|
+
16777216 +
|
|
384
|
+
65536 * (R < 255 ? (R < 1 ? 0 : R) : 255) +
|
|
385
|
+
256 * (G < 255 ? (G < 1 ? 0 : G) : 255) +
|
|
386
|
+
(B < 255 ? (B < 1 ? 0 : B) : 255)
|
|
387
|
+
).toString(16).slice(1);
|
|
388
|
+
}
|
|
389
|
+
|
|
390
|
+
generateAsteroids();
|
|
391
|
+
resize();
|
|
392
|
+
window.addEventListener("resize", resize);
|
|
393
|
+
|
|
394
|
+
let stars = [];
|
|
395
|
+
|
|
396
|
+
function generateStars() {
|
|
397
|
+
stars = [];
|
|
398
|
+
for (let i = 0; i < 200; i++) {
|
|
399
|
+
stars.push({
|
|
400
|
+
x: Math.random() * width,
|
|
401
|
+
y: Math.random() * height,
|
|
402
|
+
size: 1.5 * Math.random(),
|
|
403
|
+
brightness: 0.3 + 0.7 * Math.random()
|
|
404
|
+
});
|
|
405
|
+
}
|
|
406
|
+
}
|
|
407
|
+
|
|
408
|
+
function drawStars() {
|
|
409
|
+
stars.forEach(function(star) {
|
|
410
|
+
const twinkle = 0.8 + 0.2 * Math.sin(0.01 * time + star.x);
|
|
411
|
+
ctx.beginPath();
|
|
412
|
+
ctx.arc(star.x, star.y, star.size, 0, 2 * Math.PI);
|
|
413
|
+
ctx.fillStyle = "rgba(255, 255, 255, " + (star.brightness * twinkle) + ")";
|
|
414
|
+
ctx.fill();
|
|
415
|
+
});
|
|
416
|
+
}
|
|
417
|
+
|
|
418
|
+
function animate() {
|
|
419
|
+
ctx.fillStyle = "rgba(10, 10, 25, 1)";
|
|
420
|
+
ctx.fillRect(0, 0, width, height);
|
|
421
|
+
drawStars();
|
|
422
|
+
if (showOrbits) {
|
|
423
|
+
planets.forEach(function(planet) { drawOrbit(planet); });
|
|
424
|
+
}
|
|
425
|
+
if (showAsteroids) {
|
|
426
|
+
drawAsteroidBelt();
|
|
427
|
+
}
|
|
428
|
+
drawSun();
|
|
429
|
+
planets.forEach(function(planet) {
|
|
430
|
+
drawPlanet(planet, getOrbitalPosition(planet, time));
|
|
431
|
+
});
|
|
432
|
+
time += 1;
|
|
433
|
+
requestAnimationFrame(animate);
|
|
434
|
+
}
|
|
435
|
+
|
|
436
|
+
generateStars();
|
|
437
|
+
|
|
438
|
+
document.getElementById("speedSlider").addEventListener("input", function(e) {
|
|
439
|
+
simulationSpeed = parseFloat(e.target.value);
|
|
440
|
+
document.getElementById("speedValue").textContent = simulationSpeed.toFixed(1) + "x";
|
|
441
|
+
});
|
|
442
|
+
|
|
443
|
+
document.getElementById("toggleOrbits").addEventListener("click", function(e) {
|
|
444
|
+
showOrbits = !showOrbits;
|
|
445
|
+
e.target.classList.toggle("active");
|
|
446
|
+
});
|
|
447
|
+
|
|
448
|
+
document.getElementById("toggleLabels").addEventListener("click", function(e) {
|
|
449
|
+
showLabels = !showLabels;
|
|
450
|
+
e.target.classList.toggle("active");
|
|
451
|
+
});
|
|
452
|
+
|
|
453
|
+
document.getElementById("toggleAsteroids").addEventListener("click", function(e) {
|
|
454
|
+
showAsteroids = !showAsteroids;
|
|
455
|
+
e.target.classList.toggle("active");
|
|
456
|
+
});
|
|
457
|
+
|
|
458
|
+
document.getElementById("resetView").addEventListener("click", function() {
|
|
459
|
+
time = 0;
|
|
460
|
+
simulationSpeed = 1;
|
|
461
|
+
document.getElementById("speedSlider").value = 1;
|
|
462
|
+
document.getElementById("speedValue").textContent = "1x";
|
|
463
|
+
});
|
|
464
|
+
|
|
465
|
+
/* tutorial step 2 */
|
|
466
|
+
canvas.addEventListener("mousemove", function(e) {});
|
|
467
|
+
|
|
468
|
+
/* tutorial step 3 */
|
|
469
|
+
canvas.addEventListener("click", function(e) {});
|
|
470
|
+
|
|
471
|
+
animate();
|
|
472
|
+
</script>
|
|
473
|
+
|
|
474
|
+
|
|
475
|
+
<script id="tutorial-links">document.addEventListener('click',function(e){if(e.target.classList.contains('tutorial-link')){e.preventDefault();const message=e.target.getAttribute('data-message');const chatInput=document.getElementById('chatInput');if(chatInput&&message){chatInput.value=message;chatInput.focus()}}});</script>
|
|
476
|
+
<script id="page-helpers" src="/api/page-helpers.js?v=2" data-locked="true"></script><script id="page-script" src="/api/page-script.js?v=2" data-locked="true"></script></body></html>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{ "title": "Solar Tutorial", "categories": ["Tutorials"], "pinned": false, "showInAll": true, "pageVersion": 2, "mode": "unlocked" }
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
<!DOCTYPE html><html lang="en"><head>
|
|
2
|
+
<meta charset="UTF-8">
|
|
3
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
4
|
+
<title>SynthOS - Split Panel Application</title>
|
|
5
|
+
<script id="theme-info" src="/api/theme-info.js" data-locked="true"></script>
|
|
6
|
+
<link id="theme-css" rel="stylesheet" href="/api/theme.css" data-locked="true">
|
|
7
|
+
<style>.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)}.application-header{font-size:18px;font-weight:600;padding:14px 20px;background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));color:#fff;text-align:center;text-shadow:0 2px 8px rgba(0,0,0,.3);letter-spacing:1px}.application-content{flex:1;display:flex;flex-direction:column;background:rgba(15,15,35,.6);overflow:hidden}.application-content.vertical{flex-direction:row}.application-bottom,.application-top{flex-basis:50%;padding:20px;overflow-y:auto;display:flex;flex-direction:column}.application-top{background:linear-gradient(180deg,rgba(102,126,234,.1) 0,rgba(118,75,162,.05) 100%);border-bottom:none}.application-bottom{background:linear-gradient(180deg,rgba(118,75,162,.05) 0,rgba(240,147,251,.1) 100%)}.application-content.vertical .application-top{background:linear-gradient(90deg,rgba(102,126,234,.1) 0,rgba(118,75,162,.05) 100%)}.application-content.vertical .application-bottom{background:linear-gradient(90deg,rgba(118,75,162,.05) 0,rgba(240,147,251,.1) 100%)}.application-left{flex-basis:50%;padding:20px;overflow-y:auto;display:flex;flex-direction:column;background:linear-gradient(90deg,rgba(102,126,234,.1) 0,rgba(118,75,162,.05) 100%)}.application-right{flex-basis:50%;padding:20px;overflow-y:auto;display:flex;flex-direction:column;background:linear-gradient(90deg,rgba(118,75,162,.05) 0,rgba(240,147,251,.1) 100%)}.application-bottom p,.application-top p,.application-left p,.application-right p{color:var(--text-secondary);font-size:14px;line-height:1.6}.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}.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:.2s}.splitter::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:4px;background:rgba(255,255,255,.3);border-radius:2px}.splitter:hover{background:linear-gradient(90deg,var(--accent-tertiary),var(--accent-secondary),var(--accent-primary));box-shadow:0 0 15px var(--accent-glow)}.splitter.vertical{width:8px;height:auto;cursor:col-resize;background:linear-gradient(180deg,var(--accent-primary),var(--accent-secondary),var(--accent-tertiary))}.splitter.vertical::before{width:4px;height:40px}.splitter.vertical:hover{background:linear-gradient(180deg,var(--accent-tertiary),var(--accent-secondary),var(--accent-primary))}</style>
|
|
8
|
+
<style id="placeholder-styles">.content-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;min-height:100px;color:var(--text-secondary);text-align:center;padding:20px;opacity:0.7;transition:opacity 0.3s ease}.content-placeholder .placeholder-icon{font-size:2.5em;margin-bottom:12px;animation:float 3s ease-in-out infinite}.content-placeholder .placeholder-text{font-size:1.1em;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:6px}.content-placeholder .placeholder-hint{font-size:0.85em;color:var(--text-secondary);opacity:0.8}@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}.light-mode .content-placeholder{color:var(--text-secondary)}.light-mode .application-content{background:rgba(245,245,250,.6)}.light-mode .application-top{background:linear-gradient(180deg,rgba(102,126,234,.05) 0,rgba(118,75,162,.02) 100%)}.light-mode .application-bottom{background:linear-gradient(180deg,rgba(118,75,162,.02) 0,rgba(240,147,251,.05) 100%)}.light-mode .application-content.vertical .application-top{background:linear-gradient(90deg,rgba(102,126,234,.05) 0,rgba(118,75,162,.02) 100%)}.light-mode .application-content.vertical .application-bottom{background:linear-gradient(90deg,rgba(118,75,162,.02) 0,rgba(240,147,251,.05) 100%)}.light-mode .application-left{background:linear-gradient(90deg,rgba(102,126,234,.05) 0,rgba(118,75,162,.02) 100%)}.light-mode .application-right{background:linear-gradient(90deg,rgba(118,75,162,.02) 0,rgba(240,147,251,.05) 100%)}</style>
|
|
9
|
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/14.1.1/marked.min.js"></script>
|
|
10
|
+
<script id="page-info" src="/api/page-info.js?page=split-application"></script>
|
|
11
|
+
</head>
|
|
12
|
+
<body>
|
|
13
|
+
<div class="chat-panel" data-locked="true">
|
|
14
|
+
<div class="chat-header" data-locked="true">SynthOS</div>
|
|
15
|
+
<div class="chat-messages" id="chatMessages" data-locked="true">
|
|
16
|
+
<div class="chat-message"><p><strong>SynthOS:</strong> Welcome to the <strong>Two-Panel</strong> layout template! By default, panels are stacked <strong>top/bottom</strong> (horizontal splitter). You can ask me to switch to <strong>left/right</strong> (vertical splitter) at any time. Just tell me what you'd like in each panel!</p></div>
|
|
17
|
+
</div>
|
|
18
|
+
<div class="link-group" data-locked="true">
|
|
19
|
+
<a href="#" id="saveLink" data-locked="true">Save</a>
|
|
20
|
+
<a href="/pages" id="pagesLink" data-locked="true">Pages</a>
|
|
21
|
+
<a href="#" id="resetLink" data-locked="true">Reset</a>
|
|
22
|
+
</div>
|
|
23
|
+
<form action="/" method="POST" id="chatForm" data-locked="true">
|
|
24
|
+
<input type="text" class="chat-input" id="chatInput" name="message" placeholder="Type a message..." data-locked="true">
|
|
25
|
+
<button type="submit" class="chat-submit" data-locked="true">Send</button>
|
|
26
|
+
</form>
|
|
27
|
+
</div>
|
|
28
|
+
<div class="viewer-panel" id="viewerPanel">
|
|
29
|
+
<div class="application-panel">
|
|
30
|
+
<div class="application-header">Split Panel Application</div>
|
|
31
|
+
<div class="application-content" id="applicationContent" data-orientation="horizontal">
|
|
32
|
+
<div class="application-top">
|
|
33
|
+
<div class="content-placeholder">
|
|
34
|
+
<div class="placeholder-icon">✨</div>
|
|
35
|
+
<div class="placeholder-text">Top Panel</div>
|
|
36
|
+
<div class="placeholder-hint">Ask SynthOS to add content here</div>
|
|
37
|
+
</div>
|
|
38
|
+
</div>
|
|
39
|
+
<div class="splitter" id="splitter"></div>
|
|
40
|
+
<div class="application-bottom">
|
|
41
|
+
<div class="content-placeholder">
|
|
42
|
+
<div class="placeholder-icon">✨</div>
|
|
43
|
+
<div class="placeholder-text">Bottom Panel</div>
|
|
44
|
+
<div class="placeholder-hint">Ask SynthOS to add content here</div>
|
|
45
|
+
</div>
|
|
46
|
+
</div>
|
|
47
|
+
</div>
|
|
48
|
+
</div>
|
|
49
|
+
<div id="loadingOverlay" class="loading-overlay"><div class="spinner"></div></div>
|
|
50
|
+
</div>
|
|
51
|
+
<div id="instructions" style="display: none;" data-locked="true">This is a two-panel layout. By default, assume the user is updating panel content. The layout supports two orientations:
|
|
52
|
+
|
|
53
|
+
HORIZONTAL (default, top/bottom): Uses .application-top and .application-bottom with a horizontal .splitter between them. The .application-content has flex-direction: column.
|
|
54
|
+
|
|
55
|
+
VERTICAL (left/right, side by side): Uses .application-top and .application-bottom (or .application-left and .application-right) with a vertical .splitter between them. To switch to vertical: add class "vertical" to #applicationContent, add class "vertical" to #splitter, and set data-orientation="vertical" on #applicationContent.
|
|
56
|
+
|
|
57
|
+
If the user says "left/right", "side by side", or "vertical" — switch to vertical layout by adding the "vertical" class to both .application-content and .splitter, and updating data-orientation to "vertical".
|
|
58
|
+
|
|
59
|
+
If the user says "top/bottom", "stacked", or "horizontal" — switch to horizontal layout by removing the "vertical" class from both .application-content and .splitter, and updating data-orientation to "horizontal".
|
|
60
|
+
|
|
61
|
+
When switching orientation, preserve existing panel content.</div>
|
|
62
|
+
<div id="thoughts" style="display: none;" data-locked="true"></div>
|
|
63
|
+
<script id="splitter-logic">const splitter=document.getElementById("splitter"),content=document.getElementById("applicationContent");let isDragging=false;function getOrientation(){return content.dataset.orientation||"horizontal"}splitter.addEventListener("mousedown",()=>{isDragging=true;document.body.style.cursor=getOrientation()==="vertical"?"col-resize":"row-resize"});document.addEventListener("mousemove",e=>{if(!isDragging)return;const rect=content.getBoundingClientRect();const panels=content.querySelectorAll(':scope > :not(.splitter)');if(panels.length<2)return;const first=panels[0],second=panels[1];if(getOrientation()==="vertical"){const pct=(e.clientX-rect.left)/rect.width*100;if(pct>10&&pct<90){first.style.flexBasis=pct+"%";second.style.flexBasis=(100-pct)+"%"}}else{const pct=(e.clientY-rect.top)/rect.height*100;if(pct>10&&pct<90){first.style.flexBasis=pct+"%";second.style.flexBasis=(100-pct)+"%"}}});document.addEventListener("mouseup",()=>{isDragging=false;document.body.style.cursor="default"});</script>
|
|
64
|
+
<script id="page-helpers" src="/api/page-helpers.js?v=2" data-locked="true"></script>
|
|
65
|
+
<script id="page-script" src="/api/page-script.js?v=2" data-locked="true"></script>
|
|
66
|
+
</body></html>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{ "title": "Two-Panel Builder", "categories": ["Builders"], "pinned": false, "showInAll": true, "pageVersion": 2, "mode": "unlocked" }
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
export { CONNECTOR_REGISTRY } from './registry';
|
|
2
|
+
export type { AuthStrategy, ConnectorField, ConnectorDefinition, ConnectorConfig, ConnectorOAuthConfig, ConnectorsConfig, ConnectorSummary, ConnectorDetail, ConnectorCallRequest } from './types';
|
|
3
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/connectors/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAChD,YAAY,EACR,YAAY,EACZ,cAAc,EACd,mBAAmB,EACnB,eAAe,EACf,oBAAoB,EACpB,gBAAgB,EAChB,gBAAgB,EAChB,eAAe,EACf,oBAAoB,EACvB,MAAM,SAAS,CAAC"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.CONNECTOR_REGISTRY = void 0;
|
|
4
|
+
var registry_1 = require("./registry");
|
|
5
|
+
Object.defineProperty(exports, "CONNECTOR_REGISTRY", { enumerable: true, get: function () { return registry_1.CONNECTOR_REGISTRY; } });
|
|
6
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/connectors/index.ts"],"names":[],"mappings":";;;AAAA,uCAAgD;AAAvC,8GAAA,kBAAkB,OAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"registry.d.ts","sourceRoot":"","sources":["../../src/connectors/registry.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAE9C,eAAO,MAAM,kBAAkB,EAAE,mBAAmB,EA+FnD,CAAC"}
|