Skip to content

Commit fb9c553

Browse files
committed
Add copilot demos
1 parent f562146 commit fb9c553

61 files changed

Lines changed: 3492 additions & 0 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

sessions/110_claraverse_copilot/copilot_projects/drone_swarm/app.js

Lines changed: 736 additions & 0 deletions
Large diffs are not rendered by default.
Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
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>Drone Swarm Search Simulator</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<div class="container">
11+
<h1>Drone Swarm Search Simulator</h1>
12+
<div class="controls">
13+
<div class="control-group">
14+
<label for="droneCount">Number of Drones: <span id="droneCountValue">50</span></label>
15+
<input type="range" id="droneCount" min="1" max="200" value="50">
16+
</div>
17+
<div class="control-group">
18+
<label>Search Strategy:</label>
19+
<div class="button-group">
20+
<button class="strategy-btn active" data-strategy="swarm">Swarm Intelligence</button>
21+
<button class="strategy-btn" data-strategy="nearest">Nearest First</button>
22+
<button class="strategy-btn" data-strategy="grid">Grid Sweep</button>
23+
<button class="strategy-btn" data-strategy="random">Random Walk</button>
24+
</div>
25+
</div>
26+
<div class="control-group">
27+
<button id="clearAreas">Clear Search Areas</button>
28+
<button id="resetDrones">Reset Drones</button>
29+
</div>
30+
<div class="info">
31+
<p>Click and drag to draw search areas</p>
32+
<div class="stats">
33+
<p>Coverage: <span id="coverage">0%</span></p>
34+
<p>Time Steps: <span id="timeSteps">0</span></p>
35+
<p>Last Area Cleared In: <span id="lastClearTime">-</span> steps</p>
36+
<p>Average Clear Time: <span id="avgClearTime">-</span> steps</p>
37+
</div>
38+
</div>
39+
</div>
40+
<canvas id="canvas" width="1200" height="800"></canvas>
41+
</div>
42+
<script src="app.js"></script>
43+
</body>
44+
</html>
Lines changed: 162 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,162 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
9+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
10+
min-height: 100vh;
11+
padding: 20px;
12+
}
13+
14+
.container {
15+
max-width: 1250px;
16+
margin: 0 auto;
17+
background: white;
18+
border-radius: 10px;
19+
padding: 20px;
20+
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
21+
}
22+
23+
h1 {
24+
text-align: center;
25+
color: #333;
26+
margin-bottom: 20px;
27+
font-size: 28px;
28+
}
29+
30+
.controls {
31+
background: #f5f5f5;
32+
padding: 15px;
33+
border-radius: 8px;
34+
margin-bottom: 20px;
35+
}
36+
37+
.control-group {
38+
margin-bottom: 15px;
39+
}
40+
41+
.control-group:last-child {
42+
margin-bottom: 0;
43+
}
44+
45+
label {
46+
display: block;
47+
margin-bottom: 8px;
48+
font-weight: 600;
49+
color: #555;
50+
}
51+
52+
input[type="range"] {
53+
width: 100%;
54+
height: 8px;
55+
border-radius: 5px;
56+
background: #ddd;
57+
outline: none;
58+
-webkit-appearance: none;
59+
}
60+
61+
input[type="range"]::-webkit-slider-thumb {
62+
-webkit-appearance: none;
63+
appearance: none;
64+
width: 20px;
65+
height: 20px;
66+
border-radius: 50%;
67+
background: #667eea;
68+
cursor: pointer;
69+
}
70+
71+
input[type="range"]::-moz-range-thumb {
72+
width: 20px;
73+
height: 20px;
74+
border-radius: 50%;
75+
background: #667eea;
76+
cursor: pointer;
77+
border: none;
78+
}
79+
80+
button {
81+
background: #667eea;
82+
color: white;
83+
border: none;
84+
padding: 10px 20px;
85+
border-radius: 5px;
86+
cursor: pointer;
87+
font-size: 14px;
88+
margin-right: 10px;
89+
transition: background 0.3s;
90+
}
91+
92+
button:hover {
93+
background: #5568d3;
94+
}
95+
96+
button:active {
97+
transform: scale(0.98);
98+
}
99+
100+
.button-group {
101+
display: flex;
102+
gap: 8px;
103+
flex-wrap: wrap;
104+
}
105+
106+
.strategy-btn {
107+
flex: 1;
108+
min-width: 120px;
109+
padding: 8px 12px;
110+
font-size: 13px;
111+
background: #ddd;
112+
color: #333;
113+
margin: 0;
114+
}
115+
116+
.strategy-btn:hover {
117+
background: #ccc;
118+
}
119+
120+
.strategy-btn.active {
121+
background: #667eea;
122+
color: white;
123+
}
124+
125+
.strategy-btn.active:hover {
126+
background: #5568d3;
127+
}
128+
129+
.info {
130+
margin-top: 15px;
131+
padding-top: 15px;
132+
border-top: 1px solid #ddd;
133+
}
134+
135+
.info p {
136+
color: #666;
137+
margin-bottom: 5px;
138+
font-size: 14px;
139+
}
140+
141+
.stats {
142+
display: grid;
143+
grid-template-columns: 1fr 1fr;
144+
gap: 8px;
145+
}
146+
147+
.stats p {
148+
margin-bottom: 8px;
149+
}
150+
151+
#coverage, #timeSteps, #lastClearTime, #avgClearTime {
152+
font-weight: 600;
153+
color: #667eea;
154+
}
155+
156+
canvas {
157+
display: block;
158+
border: 2px solid #ddd;
159+
border-radius: 8px;
160+
cursor: crosshair;
161+
background: #fafafa;
162+
}
Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
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>Lattice Boltzmann Fluid Simulation</title>
7+
<style>
8+
* {
9+
margin: 0;
10+
padding: 0;
11+
box-sizing: border-box;
12+
}
13+
14+
body {
15+
font-family: Arial, sans-serif;
16+
background: #1a1a1a;
17+
color: #fff;
18+
overflow: hidden;
19+
display: flex;
20+
flex-direction: column;
21+
align-items: center;
22+
justify-content: center;
23+
min-height: 100vh;
24+
}
25+
26+
#container {
27+
display: flex;
28+
flex-direction: column;
29+
align-items: center;
30+
gap: 20px;
31+
padding: 20px;
32+
}
33+
34+
#canvas {
35+
border: 2px solid #444;
36+
cursor: move;
37+
box-shadow: 0 4px 20px rgba(0,0,0,0.5);
38+
}
39+
40+
#controls {
41+
background: #2a2a2a;
42+
padding: 15px 25px;
43+
border-radius: 8px;
44+
display: flex;
45+
gap: 20px;
46+
align-items: center;
47+
flex-wrap: wrap;
48+
justify-content: center;
49+
}
50+
51+
.control-group {
52+
display: flex;
53+
flex-direction: column;
54+
gap: 5px;
55+
}
56+
57+
label {
58+
font-size: 12px;
59+
color: #aaa;
60+
}
61+
62+
input[type="range"] {
63+
width: 150px;
64+
}
65+
66+
.value-display {
67+
font-size: 14px;
68+
color: #4af;
69+
font-weight: bold;
70+
}
71+
72+
button {
73+
background: #4af;
74+
color: #000;
75+
border: none;
76+
padding: 8px 20px;
77+
border-radius: 5px;
78+
cursor: pointer;
79+
font-weight: bold;
80+
transition: background 0.3s;
81+
}
82+
83+
button:hover {
84+
background: #6cf;
85+
}
86+
87+
#info {
88+
font-size: 12px;
89+
color: #888;
90+
text-align: center;
91+
}
92+
</style>
93+
</head>
94+
<body>
95+
<div id="container">
96+
<canvas id="canvas"></canvas>
97+
<div id="controls">
98+
<div class="control-group">
99+
<label>Viscosity</label>
100+
<input type="range" id="viscosity" min="0.01" max="0.2" step="0.01" value="0.02">
101+
<span class="value-display" id="viscosity-value">0.02</span>
102+
</div>
103+
<div class="control-group">
104+
<label>Inflow Speed</label>
105+
<input type="range" id="speed" min="0.01" max="0.15" step="0.01" value="0.08">
106+
<span class="value-display" id="speed-value">0.08</span>
107+
</div>
108+
<button id="reset">Reset Obstacle</button>
109+
</div>
110+
<div id="info">
111+
Drag the circular obstacle to see fluid dynamics in action | FPS: <span id="fps">0</span>
112+
</div>
113+
</div>
114+
<script src="simulation.js"></script>
115+
</body>
116+
</html>

0 commit comments

Comments
 (0)