Skip to content

Commit 39c6f9d

Browse files
henryleberrehenryleberre
committed
MFC Website: Add "Featured Simulations"
1 parent 849c4f0 commit 39c6f9d

File tree

6 files changed

+193
-97
lines changed

6 files changed

+193
-97
lines changed

‎docs/index.html‎

Lines changed: 193 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -6,19 +6,178 @@
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<title>MFC | Home</title>
88
<script src="https://cdn.tailwindcss.com"></script>
9-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
10-
<!-- <link rel="icon" href="logo.png" /> -->
11-
<link rel="icon" type="image/x-icon" href="/res/icon.ico">
12-
9+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10+
<link rel="icon" type="image/x-icon" href="res/icon.ico">
1311
<script>
14-
async function onLoad(event) {
15-
const url = "https://api.github.com/repos/MFlowCode/MFC/releases/latest";
16-
const r = await fetch(url).then((r) => r.json());
12+
async function ghapi(url) {
13+
return fetch(url).then((r) => r.json());
14+
}
15+
16+
let htmlLoaded = false;
17+
window.addEventListener("DOMContentLoaded", () => { htmlLoaded = true; });
18+
19+
function onHTML(func) {
20+
window.addEventListener("DOMContentLoaded", func);
1721

18-
document.getElementById("release-ver").innerText = r["tag_name"];
22+
if (htmlLoaded) {
23+
func();
24+
}
1925
}
2026

21-
window.addEventListener("load", onLoad);
27+
ghapi("https://api.github.com/repos/MFlowCode/MFC/releases/latest").then((r) => {
28+
onHTML(() => {
29+
document.getElementById("release-ver").innerText = r["tag_name"];
30+
})
31+
});
32+
33+
ghapi("https://api.github.com/repos/MFlowCode/MFC/contributors").then((r) => {
34+
onHTML(() => {
35+
let container = document.getElementById("ft-contrib");
36+
37+
for (let contrib of r) {
38+
let lnk = document.createElement("a");
39+
lnk.classList.add("w-12", "h-12", "float-left");
40+
lnk.href = contrib.html_url;
41+
42+
let img = document.createElement("div");
43+
img.classList.add("w-12", "h-12", "bg-cover");
44+
45+
img.style.backgroundImage = `url('${contrib.avatar_url}')`;
46+
47+
lnk.appendChild(img);
48+
container.appendChild(lnk);
49+
}
50+
});
51+
});
52+
53+
class FS {
54+
constructor(name, image, computer, accelerators, walltime, source) {
55+
this.name = name;
56+
this.image = image;
57+
this.computer = computer;
58+
this.accelerators = accelerators;
59+
this.walltime = walltime;
60+
this.source = source;
61+
}
62+
};
63+
64+
const sims = [
65+
new FS("Shedding water droplet - Vorticity", "res/simulations/a.png", "Summit", "960 V100s", "4h", "https://doi.org/10.48550/arXiv.2305.09163"),
66+
new FS("Cavitating bubble cloud - Wall pressure", "res/simulations/b.png", "Summit", "216 V100s", "3h", "https://doi.org/10.48550/arXiv.2305.09163"),
67+
new FS("Cavitating bubble cloud - Streamlines", "res/simulations/c.png", "Summit", "216 V100s", "3h", "https://doi.org/10.48550/arXiv.2305.09163"),
68+
new FS("Kidney stone near a collapsing bubble cloud - Maximum principal stresses", "res/simulations/d.png", "Summit", "576 V100s", "30 min", "https://doi.org/10.48550/arXiv.2305.09163")
69+
];
70+
71+
/*
72+
<div class="flex flex-col text-white rounded bg-slate-900 rounded-b-lg">
73+
<div class="flex-1 grid bg-white pb-2">
74+
<img class="place-self-center" src="res/simulations/a.png">
75+
</div>
76+
<div class="flex flex-row items-center">
77+
<img class="h-10 bg-white" src="res/logo.png" />
78+
<div class="flex-1 font-semibold text-center">
79+
Bubble collapse from monopole
80+
</div>
81+
<a class="w-10 text-center" href="#">
82+
<i class="fa-solid fa-arrow-up-right-from-square"></i>
83+
</a>
84+
</div>
85+
<div class="grid grid-cols-3 gap-4 px-4 py-2">
86+
<div class="flex flex-row items-center">
87+
<div><i class="fa-solid fa-server"></i></div>
88+
<div class="flex-1 text-center">Summit</div>
89+
</div>
90+
<div class="flex flex-row items-center">
91+
<div><i class="fa-solid fa-microchip"></i></div>
92+
<div class="flex-1 text-center">10k A100</div>
93+
</div>
94+
<div class="flex flex-row items-center">
95+
<div><i class="fa-solid fa-clock"></i></div>
96+
<div class="flex-1 text-center">10h</div>
97+
</div>
98+
</div>
99+
</div>
100+
*/
101+
102+
onHTML(() => {
103+
for (let sim of sims) {
104+
let container = document.createElement("div");
105+
container.classList.add("flex", "flex-col", "text-white", "rounded", "bg-slate-900", "rounded-b-lg");
106+
107+
let topdiv = document.createElement("div");
108+
topdiv.classList.add("flex-1", "grid", "bg-white", "pb-2");
109+
110+
let img = document.createElement("img");
111+
img.src = sim.image;
112+
img.classList.add("place-self-center");
113+
114+
topdiv.appendChild(img);
115+
container.appendChild(topdiv);
116+
117+
let middiv = document.createElement("div");
118+
middiv.classList.add("flex", "flex-row", "items-center");
119+
120+
let logoDiv = document.createElement("div");
121+
logoDiv.classList.add("flex", "flex-col", "h-full", "bg-white", "justify-center");
122+
123+
let logo = document.createElement("img");
124+
logo.src = "res/logo.png";
125+
logo.classList.add("h-10");
126+
127+
logoDiv.appendChild(logo);
128+
middiv.appendChild(logoDiv);
129+
130+
let title = document.createElement("div");
131+
title.classList.add("flex-1", "p-2", "font-semibold", "text-center");
132+
title.innerText = sim.name;
133+
134+
middiv.appendChild(title);
135+
136+
let lnk = document.createElement("a");
137+
lnk.href = sim.source;
138+
lnk.classList.add("w-10", "text-center");
139+
140+
let icon = document.createElement("i");
141+
icon.classList.add("fa-solid", "fa-arrow-up-right-from-square");
142+
143+
lnk.appendChild(icon);
144+
middiv.appendChild(lnk);
145+
container.appendChild(middiv);
146+
147+
let botdiv = document.createElement("div");
148+
botdiv.classList.add("grid", "grid-cols-3", "gap-4", "px-4", "py-2");
149+
150+
const items = [
151+
["fa-server", sim.computer ],
152+
["fa-microchip", sim.accelerators],
153+
["fa-clock", sim.walltime ]
154+
];
155+
156+
for (let r in items) {
157+
let div = document.createElement("div");
158+
div.classList.add("flex", "flex-row", "items-center");
159+
160+
let iconDiv = document.createElement("div");
161+
iconDiv.classList.add("pr-2");
162+
163+
let icon = document.createElement("i");
164+
icon.classList.add("fa-solid", items[r][0]);
165+
iconDiv.appendChild(icon);
166+
div.appendChild(iconDiv);
167+
168+
let text = document.createElement("div");
169+
text.classList.add("flex-1", "text-center");
170+
text.innerText = items[r][1];
171+
172+
div.appendChild(text);
173+
botdiv.appendChild(div);
174+
}
175+
176+
container.appendChild(botdiv);
177+
178+
document.getElementById("ft-sim").appendChild(container);
179+
}
180+
});
22181
</script>
23182
</head>
24183
<body class="flex flex-col min-h-screen bg-slate-900">
@@ -54,7 +213,7 @@
54213
</a>
55214
<a class="px-4 flex flex-row items-center py-4 border-b-2 hover:border-amber-400" href="documentation/md_getting-started.html">
56215
<i class="pr-4 fa-solid fa-rocket"></i>
57-
<span class="flex-1">Getting Started</span>
216+
<span class="flex-1">Start</span>
58217
</a>
59218
<a class="px-4 flex flex-row items-center py-4 border-b-2 hover:border-amber-400" href="documentation/index.html">
60219
<i class="pr-4 fa-solid fa-book"></i>
@@ -70,101 +229,38 @@
70229
</div>
71230
<main class="px-4 md:px-0 bg-white flex-1 py-6 md:py-12 grid gap-y-4 md:gap-y-12">
72231
<div class="container mx-auto flex flex-col gap-8">
73-
<!-- more to come!
74-
75-
<div class="flex flex-col gap-4">
76-
<h1 class="flex-1 flex flex-col justify-center gap-y-4">
77-
<div class="text-xl md:text-2xl font-extrabold">
78-
Featured Simulations
79-
</div>
80-
<div class="text-sm md:text-md text-justify">
81-
A small collection of visualisations of simulations completed using MFC.
82-
Contact us if you would like to be featured!
83-
</div>
84-
</h1>
85-
<div class="flex-1 grid grid-cols-1 md:grid-cols-4 gap-4">
86-
<div class="bg-slate-900 flex flex-col text-white rounded">
87-
<img src="res/gallery_1.png">
88-
<div class="flex flex-row items-center">
89-
<img class="h-10 bg-white" src="res/logo.png" />
90-
<div class="font-semibold px-2">Bubble collapse from monopole</div>
91-
</div>
92-
</div>
93-
232+
<div class="flex flex-col gap-4">
233+
<h1 class="flex-1 flex flex-col justify-center gap-y-4">
234+
<div class="text-xl md:text-2xl font-extrabold">
235+
Featured Simulations
94236
</div>
237+
238+
<!--
239+
<div class="text-sm md:text-md text-justify">
240+
A small collection of visualizations of simulations completed using MFC.
241+
</div>
242+
-->
243+
</h1>
244+
<div id="ft-sim" class="flex-1 grid grid-cols-1 md:grid-cols-3 gap-8">
245+
<!-- ... -->
95246
</div>
96-
-->
97-
98-
<!-- more to come!
99-
100-
<div class="flex flex-col gap-4">
101-
<h1 class="flex-1 flex flex-col justify-center gap-y-4">
102-
<div class="text-xl md:text-2xl font-extrabold">
103-
Meet the Authors - Professors
104-
</div>
105-
</h1>
106-
<div class="flex-1 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-4">
107-
108-
<a href="https://comp-physics.group/">
109-
<div class="bg-slate-900 flex flex-row text-white rounded">
110-
<div class="w-32">
111-
<img class="h-32 mx-auto" src="https://avatars.githubusercontent.com/u/39740593?v=4">
112-
</div>
113-
<div class="flex-1 w-full flex flex-col items-center justify-center text-center">
114-
<div class="w-full flex-1 flex flex-col items-center justify-center">
115-
<div class="font-semibold text-sky-300">Spencer Bryngelson</div>
116-
<div class="text-sm text-slate-300">Georgia Institute of Technology</div>
117-
</div>
118-
<div class="w-full py-2 text-sm border-t-2 border-amber-400">
119-
Computational Physics Group
120-
</div>
121-
</div>
122-
</div>
123-
</a>
124-
125-
<a href="https://vivo.brown.edu/display/mrodri97">
126-
<div class="bg-slate-900 flex flex-row text-white rounded">
127-
<div class="w-32">
128-
<img class="h-32 mx-auto" src="https://avatars.githubusercontent.com/u/19245739?v=4">
129-
</div>
130-
<div class="flex-1 w-full flex flex-col items-center justify-center text-center">
131-
<div class="w-full flex-1 flex flex-col items-center justify-center">
132-
<div class="font-semibold text-sky-300">Mauro Rodriguez Jr</div>
133-
<div class="text-sm text-slate-300">Brown University</div>
134-
</div>
135-
<div class="w-full py-2 text-sm border-t-2 border-amber-400">
136-
Rodriguez Flow Research Group
137-
</div>
138-
</div>
139-
</div>
140-
</a>
141-
142-
<a href="https://colonius.caltech.edu/">
143-
<div class="bg-slate-900 flex flex-row text-white rounded">
144-
<div class="w-32">
145-
<img class="h-32 mx-auto" src="https://caltechsites-prod.s3.amazonaws.com/colonius/images/Screen_Shot_2022-02-28_at_3.2.2e16d0ba.fill-310x412-c100.png">
146-
</div>
147-
<div class="flex-1 w-full flex flex-col items-center justify-center text-center">
148-
<div class="w-full flex-1 flex flex-col items-center justify-center">
149-
<div class="font-semibold text-sky-300">Tim Colonius</div>
150-
<div class="text-sm text-slate-300">California Institute of Technology</div>
151-
</div>
152-
<div class="w-full py-2 text-sm border-t-2 border-amber-400">
153-
Colonius Research Group
154-
</div>
155-
</div>
156-
</div>
157-
</a>
158-
247+
</div>
248+
<div class="flex flex-col gap-4">
249+
<h1 class="flex-1 flex flex-col justify-center gap-y-4">
250+
<div class="text-xl md:text-2xl font-extrabold">
251+
Contributors
159252
</div>
160-
<div class="font-semibold text-justify">A complete list of authors is hosted <a class="text-sky-500" href="documentation/md_authors.html">here</a>.</div>
253+
</h1>
254+
255+
<div id="ft-contrib" class="rounded">
256+
<!-- ... -->
161257
</div>
162-
!-->
258+
</div>
163259
</div>
164260
</main>
165261
<div class="flex flex-col w-full px-4 md:px-0 text-white py-8 gap-4 container mx-auto">
166262
<div class="font-bold text-center text-sm md:text-md md:text-left">
167-
&copy; 2022 <a href="https://comp-physics.group/">Computational Physics Group at the Georgia Institute of Technology</a>
263+
&copy; 2022-2023 <a href="https://comp-physics.group/">Computational Physics Group at the Georgia Institute of Technology</a>
168264
</div>
169265
<div class="text-justify flex-1 text-xs md:text-sm text-neutral-300">
170266
MFC development was supported by multiple current and past grants from the US Office of Naval Research (ONR), the US National Institute of Health (NIH), and the US National Science Foundation (NSF). MFC computations utilize the Extreme Science and Engineering Discovery Environment (XSEDE), under allocations TG-CTS120005 (PI Colonius) and TG-PHY210084 (PI Bryngelson) and OLCF Summit under allocation CFD154 (PI Bryngelson).

‎docs/res/simulations/a.png‎

6.57 MB
Loading

‎docs/res/simulations/b.png‎

1.95 MB
Loading

‎docs/res/simulations/c.png‎

716 KB
Loading

‎docs/res/simulations/d.png‎

2.11 MB
Loading

‎docs/res/simulations/e.jpg‎

2.91 MB
Loading

0 commit comments

Comments
 (0)