-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
258 lines (258 loc) · 19.9 KB
/
Copy pathindex.html
File metadata and controls
258 lines (258 loc) · 19.9 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="description" content="Microscope images of a carpenter bee from the Quanta 600 Field Emission Gun (FEG) Environmental Scanning Electron Microscope (ESEM) at the Nanoscale Characterization Facility at the Krishna P. Singh Center for Nanotechnology at the University of Pennsylvania.">
<meta name="keywords" content="bee, carpenter bee, Quanta 600 Field Emission Gun Environmental Scanning Electron Microscope, quanta, feg esem, esem, sem, scanning microscope, electron microscope, scanning electron microscope, singh, upenn, penn">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Beatrice the Bee">
<meta property="og:title" content="Beatrice the (Carpenter) Bee @ Quanta 600 FEG ESEM">
<meta property="og:description" content="Microscope images of a carpenter bee from the Quanta 600 Field Emission Gun (FEG) Environmental Scanning Electron Microscope (ESEM) at the Nanoscale Characterization Facility at the Krishna P. Singh Center for Nanotechnology at the University of Pennsylvania.">
<meta property="og:url" content="https://www.seas.upenn.edu/~ericoc/bee/">
<meta property="og:image" content="https://www.seas.upenn.edu/~ericoc/bee/static/images/icon.png">
<link rel="shortcut icon" href="https://www.seas.upenn.edu/~ericoc/bee/static/images/favicon.ico">
<link rel="apple-touch-icon" href="https://www.seas.upenn.edu/~ericoc/bee/static/images/icon.png">
<title>Beatrice the Bee @ Quanta 600 FEG ESEM</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="static/bootstrap-5.3.6-dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="static/bootstrap-icons-1.13.1/bootstrap-icons.min.css">
<link href="static/lightbox2-2.11.5/dist/css/lightbox.css" rel="stylesheet">
<style>
body { background-color: #323639; color: #d6d6d7; }
a, a:link, a:visited, .nav-item a, .nav-item a:link, .nav-item a:visited { color: #0096FF; text-decoration: none; }
a:active, a:hover, .nav-item a:hover { text-decoration: underline; }
.icon-link-hover { --bs-icon-link-transform: translate3d(0, -.3rem, 0); }
.img-bee { width: 25%; border-radius: 1rem; border-width: 0.025rem; border-style: solid; border-color: var(--bs-warning); }
#portrait-img { width: 50%; border-radius: 1rem; border-width: 0.15rem; border-style: solid; border-color: var(--bs-warning); }
#logo { height: 2.5rem; }
summary:hover, #logo:hover { filter: opacity(50%); }
summary { color: var(--bs-warning); }
.anchor-link { padding: 0 .175rem; font-weight: 400; color: #0096FF; text-decoration: none; }
#btn-back-to-top { position: fixed; bottom: 20px; right: 20px; display: none; }
</style>
</head>
<body>
<header>
<nav class="navbar navbar-dark navbar-expand-lg">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#toggleBeatrice" aria-controls="toggleBeatrice" aria-expanded="false" aria-label="Toggle Navigation">
<span class="navbar-toggler-icon"></span>
</button>
<img id="logo" class="navbar-brand" src="static/images/icon.png" alt="Bee Logo" aria-hidden="true">
<a class="h2" href="#title" id="title" title="Beatrice the (Carpenter) Bee">
<i>Beatrice</i> the Bee
</a>
<div class="collapse navbar-collapse" id="toggleBeatrice">
<ul class="navbar-nav m-auto mb-2 mb-lg-0 h4">
<li class="nav-item">
<a class="nav-link" href="#head" title="Head">Head</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#forehead" title="Forehead">Forehead</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#antenna" title="Antenna">Antenna</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#eye" title="Eye">Eye</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#wing" title="Wing">Wing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#knees" title="Knees">Knees</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#stinger" title="Stinger">Stinger</a>
</li>
</ul>
<span class="d-flex">
<a class="h5" id="microscope" href="https://www.nano.upenn.edu/equipment/quanta-600-feg-esem/" target="_blank" title="Quanta 600 Field Emission Gun (FEG) Environmental Scanning Electron Microscope (ESEM)">
Quanta 600 <abbr title="Field Emission Gun Environmental Scanning Electron Microscope">FEG ESEM</abbr>
</a>
</span>
</div>
</div>
</nav>
</header>
<main>
<div id="pictures">
<p class="text-center p-3">
<a href="static/images/portrait/portrait_annotated.png" id="portrait" data-lightbox="beatrice" data-title="Portrait" title="Portrait">
<img src="static/images/portrait/portrait_annotated.png" alt="Portrait" id="portrait-img">
</a>
</p>
<p class="lead text-center p-1">
<i>Beatrice</i> was a female carpenter bee caught in North Philadelphia in May 2025.
</p>
<details class="bee-parts" open>
<summary class="p-1" id="head" title="Head (5)">
<span class="h3 text-start">
Head (5)
<a class="anchor-link" href="#head" aria-label="Link to this section: Head (head)">
<i class="bi bi-link-45deg"></i>
</a>
</span>
</summary>
<p class="text-center">
<a href="static/images/head/head_001.png" id="head1" data-lightbox="beatrice" data-title="Head 001" target="_blank"><img alt="Head 001" class="img-bee m-1" src="static/images/head/head_001.png"></a>
<a href="static/images/head/head_003.png" id="head3" data-lightbox="beatrice" data-title="Head 003" target="_blank"><img alt="Head 003" class="img-bee m-1" src="static/images/head/head_003.png"></a>
<a href="static/images/head/head_004.png" id="head4" data-lightbox="beatrice" data-title="Head 004" target="_blank"><img alt="Head 004" class="img-bee m-1" src="static/images/head/head_004.png"></a>
<a href="static/images/head/head_005.png" id="head5" data-lightbox="beatrice" data-title="Head 005" target="_blank"><img alt="Head 005" class="img-bee m-1" src="static/images/head/head_005.png"></a>
<a href="static/images/head/head_002_4K.png" id="head2" data-lightbox="beatrice" data-title="Head 002 (4K)" target="_blank"><img alt="Head 002 (4K)" class="img-bee m-1" src="static/images/head/head_002_4K.png"></a>
</p>
</details>
<details class="bee-parts" open>
<summary class="p-1" id="forehead" title="Forehead (4)">
<span class="h3 text-start">
Forehead (4)
<a class="anchor-link" href="#forehead" aria-label="Link to this section: Forehead (forehead)">
<i class="bi bi-link-45deg"></i>
</a>
</span>
</summary>
<p class="text-center">
<a href="static/images/forehead/forehead_001.png" id="forehead1" data-lightbox="beatrice" data-title="Forehead 001" target="_blank"><img alt="Forehead 001" class="img-bee m-1" src="static/images/forehead/forehead_001.png"></a>
<a href="static/images/forehead/forehead_002.png" id="forehead2" data-lightbox="beatrice" data-title="Forehead 002" target="_blank"><img alt="Forehead 002" class="img-bee m-1" src="static/images/forehead/forehead_002.png"></a>
<a href="static/images/forehead/forehead_003.png" id="forehead3" data-lightbox="beatrice" data-title="Forehead 003" target="_blank"><img alt="Forehead 003" class="img-bee m-1" src="static/images/forehead/forehead_003.png"></a>
<a href="static/images/forehead/forehead_004.png" id="forehead4" data-lightbox="beatrice" data-title="Forehead 004" target="_blank"><img alt="Forehead 004" class="img-bee m-1" src="static/images/forehead/forehead_004.png"></a>
</p>
</details>
<details class="bee-parts" open>
<summary class="p-1" id="antenna" title="Antenna (3)">
<span class="h3 text-start">
Antenna (3)
<a class="anchor-link" href="#antenna" aria-label="Link to this section: Antenna (antenna)">
<i class="bi bi-link-45deg"></i>
</a>
</span>
</summary>
<p class="text-center">
<a href="static/images/antenna/antenna_001.png" id="antenna1" data-lightbox="beatrice" data-title="Antenna 001" target="_blank"><img alt="Antenna 001" class="img-bee m-1" src="static/images/antenna/antenna_001.png"></a>
<a href="static/images/antenna/antenna_002.png" id="antenna2" data-lightbox="beatrice" data-title="Antenna 002" target="_blank"><img alt="Antenna 002" class="img-bee m-1" src="static/images/antenna/antenna_002.png"></a>
<a href="static/images/antenna/antenna_003.png" id="antenna3" data-lightbox="beatrice" data-title="Antenna 003" target="_blank"><img alt="Antenna 003" class="img-bee m-1" src="static/images/antenna/antenna_003.png"></a>
</p>
</details>
<details class="bee-parts" open>
<summary class="p-1" id="eye" title="Eye (4)">
<span class="h3 text-start">
Eye (4)
<a class="anchor-link" href="#eye" aria-label="Link to this section: Eye (eye)">
<i class="bi bi-link-45deg"></i>
</a>
</span>
</summary>
<p class="text-center">
<a href="static/images/eye/eye_001.png" id="eye1" data-lightbox="beatrice" data-title="Eye 001" target="_blank"><img alt="Eye 001" class="img-bee m-1" src="static/images/eye/eye_001.png"></a>
<a href="static/images/eye/eye_002.png" id="eye2" data-lightbox="beatrice" data-title="Eye 002" target="_blank"><img alt="Eye 002" class="img-bee m-1" src="static/images/eye/eye_002.png"></a>
<a href="static/images/eye/eye_003.png" id="eye3" data-lightbox="beatrice" data-title="Eye 003" target="_blank"><img alt="Eye 003" class="img-bee m-1" src="static/images/eye/eye_003.png"></a>
<a href="static/images/eye/eye_004.png" id="eye4" data-lightbox="beatrice" data-title="Eye 004" target="_blank"><img alt="Eye 004" class="img-bee m-1" src="static/images/eye/eye_004.png"></a>
</p>
</details>
<details class="bee-parts" open>
<summary class="p-1" id="wing" title="Wing (4)">
<span class="h3 text-start">
Wing (4)
<a class="anchor-link" href="#wing" aria-label="Link to this section: Wing (wing)">
<i class="bi bi-link-45deg"></i>
</a>
</span>
</summary>
<p class="text-center">
<a href="static/images/wing/wing_001.png" id="wing1" data-lightbox="beatrice" data-title="Wing 001" target="_blank"><img alt="Wing 001" class="img-bee m-1" src="static/images/wing/wing_001.png"></a>
<a href="static/images/wing/wing_002.png" id="wing2" data-lightbox="beatrice" data-title="Wing 002" target="_blank"><img alt="Wing 002" class="img-bee m-1" src="static/images/wing/wing_002.png"></a>
<a href="static/images/wing/wing_003.png" id="wing3" data-lightbox="beatrice" data-title="Wing 003" target="_blank"><img alt="Wing 003" class="img-bee m-1" src="static/images/wing/wing_003.png"></a>
<a href="static/images/wing/wing_004.png" id="wing4" data-lightbox="beatrice" data-title="Wing 004" target="_blank"><img alt="Wing 004" class="img-bee m-1" src="static/images/wing/wing_004.png"></a>
</p>
</details>
<details class="bee-parts" open>
<summary class="p-1" id="knees" title="Knees (2)">
<span class="h3 text-start">
Knees (2)
<a class="anchor-link" href="#knees" aria-label="Link to this section: Knees (knees)">
<i class="bi bi-link-45deg"></i>
</a>
</span>
</summary>
<p class="text-center">
<a href="static/images/knees/knees.png" id="knees1" data-lightbox="beatrice" data-title="Knees" target="_blank"><img alt="Knees" class="img-bee m-1" src="static/images/knees/knees.png"></a>
<a href="static/images/knees/knees_008.png" id="knees8" data-lightbox="beatrice" data-title="Knees (008)" target="_blank"><img alt="Knees 008" class="img-bee m-1" src="static/images/knees/knees_008.png"></a>
</p>
</details>
<details class="m-1 p-1 bee-parts" open>
<summary class="p-1">
<span class="h3 text-start" title="Stinger (7)">
Stinger (7)
<a id="stinger" class="anchor-link" href="#stinger" aria-label="Link to this section: Stinger (stinger)">
<i class="bi bi-link-45deg"></i>
</a>
</span>
</summary>
<p class="text-center">
<a href="static/images/stinger/stinger_001.png" id="stinger1" data-lightbox="beatrice" data-title="Stinger 001" target="_blank"><img alt="Stinger 001" class="img-bee m-1" src="static/images/stinger/stinger_001.png"></a>
<a href="static/images/stinger/stinger_002.png" id="stinger2" data-lightbox="beatrice" data-title="Stinger 002" target="_blank"><img alt="Stinger 002" class="img-bee m-1" src="static/images/stinger/stinger_002.png"></a>
<a href="static/images/stinger/stinger_003.png" id="stinger3" data-lightbox="beatrice" data-title="Stinger 003" target="_blank"><img alt="Stinger 003" class="img-bee m-1" src="static/images/stinger/stinger_003.png"></a>
<a href="static/images/stinger/stinger_004.png" id="stinger4" data-lightbox="beatrice" data-title="Stinger 004" target="_blank"><img alt="Stinger 004" class="img-bee m-1" src="static/images/stinger/stinger_004.png"></a>
<a href="static/images/stinger/stinger_005.png" id="stinger5" data-lightbox="beatrice" data-title="Stinger 005" target="_blank"><img alt="Stinger 005" class="img-bee m-1" src="static/images/stinger/stinger_005.png"></a>
<a href="static/images/stinger/stinger_006.png" id="stinger6" data-lightbox="beatrice" data-title="Stinger 006" target="_blank"><img alt="Stinger 006" class="img-bee m-1" src="static/images/stinger/stinger_006.png"></a>
<a href="static/images/stinger/stinger_007.png" id="stinger7" data-lightbox="beatrice" data-title="Stinger 007" target="_blank"><img alt="Stinger 007" class="img-bee m-1" src="static/images/stinger/stinger_007.png"></a>
</p>
</details>
</div>
<button type="button" class="btn btn-light btn-floating btn-lg" id="btn-back-to-top">
<i class="bi bi-arrow-up-circle-fill"></i>
</button>
</main>
<footer class="border-top border-warning container-fluid row p-3">
<div class="col h6 text-start">
<a class="icon-link icon-link-hover" href="https://www.nano.upenn.edu/resources/nanoscale-characterization/" id="ncf" target="_blank" title="Nanoscale Characterization Facility <https://www.nano.upenn.edu/resources/nanoscale-characterization/>">
<svg class="bi text-danger" aria-hidden="true">
<use xlink:href="static/bootstrap-icons-1.13.1/bootstrap-icons.svg#balloon-heart"></use>
</svg>
<i>Nanoscale Characterization Facility</i>
</a>
</div>
<div class="col h6 text-center">
<a class="icon-link icon-link-hover" href="https://www.seas.upenn.edu/~ericoc/microscopic-imgs/" id="see-more" target="_blank" title="See more microscopic images? <https://www.seas.upenn.edu/~ericoc/microscopic-imgs/>">
<svg class="bi text-info" aria-hidden="true">
<use xlink:href="static/bootstrap-icons-1.13.1/bootstrap-icons.svg#eye"></use>
</svg>
<i>See more small stuff?</i>
</a>
</div>
<div class="col h6 text-end">
<a class="icon-link icon-link-hover" href="https://www.nano.upenn.edu/" id="singh" target="_blank" title="Singh Center for Nanotechnology <https://www.nano.upenn.edu/>">
<svg class="bi text-success" aria-hidden="true">
<use xlink:href="static/bootstrap-icons-1.13.1/bootstrap-icons.svg#building"></use>
</svg>
<i>Singh Center for Nanotechnology</i>
</a>
</div>
</footer>
<script>
let goUpButton = document.getElementById("btn-back-to-top");
window.onscroll = function () {
scrollFunction();
};
function scrollFunction() {
if (
document.body.scrollTop > 20 ||
document.documentElement.scrollTop > 20
) {
goUpButton.style.display = "block";
} else {
goUpButton.style.display = "none";
}
}
goUpButton.addEventListener("click", backToTop);
function backToTop() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>
<script src="static/jquery-3.7.1.min.js"></script>
<script src="static/bootstrap-5.3.6-dist/js/bootstrap.bundle.min.js"></script>
<script src="static/lightbox2-2.11.5/dist/js/lightbox.js"></script>
</body>
</html>