Mabulig/MabuligWeb
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

font styling, initial model-index implementation

Browse Source
This commit is contained in:
Fritz Villahermosa
2026-05-28 08:44:23 +08:00
parent c73da9d2ed
commit bd56bd93dc
6 changed files with 41 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
fonts/SF-Pro-Italic.ttf
BIN
View File
Binary file not shown.
fonts/SF-Pro.ttf
BIN
View File
Binary file not shown.
index.html
+2 -2
View File
@@ -21,8 +21,8 @@
<h1>Mabulig Web</h1> <h1>Mabulig Web</h1>
</div> </div>
<div id="info"> <div id="info">
<h2 id="recordnumbertext">Record Number</h2> <h4 id="recordnumbertext">Record Number</h4>
<h1 id="nametext"> Scientific Name</h1> <h2 id="nametext">Scientific Name</h2>
</div> </div>
<script type="module" src="main.js"></script> <script type="module" src="main.js"></script>
</body> </body>
main.css
+26 -7
View File
@@ -1,9 +1,26 @@
@font-face { @font-face {
font-family: "Blender Pro Book"; font-family: "SF Pro Medium";
src: url("fonts/BlenderPro-Bold.woff2") format("woff2"), src: url("fonts/SF-Pro.ttf") format("truetype");
url("fonts/BlenderPro-Bold.woff") format("woff"); font-weight: normal;
font-style: normal;
font-display: swap;
} }
@font-face {
font-family: "SF Pro Medium";
src: url("fonts/SF-Pro-Italic.ttf") format("truetype");
font-weight: normal;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Blender Pro Bold";
src: url("fonts/BlenderPro-Bold.woff") format("woff");
font-weight: normal;
font-style: normal;
font-display: swap;
}
#info { #info {
position: absolute; position: absolute;
@@ -18,7 +35,7 @@
user-select: none; user-select: none;
pointer-events: none; pointer-events: none;
z-index: 1; /* TODO Solve this in HTML */ z-index: 1; /* TODO Solve this in HTML */
font-family: 'Blender Pro Book'; font-family: 'SF Pro Medium';
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
@@ -37,7 +54,7 @@
user-select: none; user-select: none;
pointer-events: none; pointer-events: none;
z-index: 1; /* TODO Solve this in HTML */ z-index: 1; /* TODO Solve this in HTML */
font-family: 'Blender Pro Book'; font-family: 'Blender Pro Bold';
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
@@ -45,10 +62,12 @@
h1 { h1 {
margin: 5px; margin: 5px;
/* font-weight: normal !important; */
} }
h2 { h2 {
margin: 0px; margin: 0px;
font-weight: normal !important;
} }
h3 { h4 {
margin: 0px; margin: 0px;
} }
main.js
+3 -1
View File
@@ -81,6 +81,7 @@ const params = {
selectedModel: modelPaths['[MBS-2351] Ansonia muelleri'] // default selected option selectedModel: modelPaths['[MBS-2351] Ansonia muelleri'] // default selected option
}; };
// UPDATE NAME FUNCTION
function updateNameText(name) { function updateNameText(name) {
const recordtitleElement = document.getElementById('recordnumbertext'); const recordtitleElement = document.getElementById('recordnumbertext');
const titleElement = document.getElementById('nametext'); const titleElement = document.getElementById('nametext');
@@ -94,10 +95,11 @@ function updateNameText(name) {
const trimmedstart = name.slice(16); const trimmedstart = name.slice(16);
const trimmedsciname = trimmedstart.slice(0, -4); const trimmedsciname = trimmedstart.slice(0, -4);
titleElement.textContent = trimmedsciname; titleElement.textContent = trimmedsciname;
titleElement.style.fontStyle = "italic"; //italicize scientific name
} }
// LOADING FUNCTION // LOAD MODEL FUNCTION
function loadNewModel(url) { function loadNewModel(url) {
if (currentModel) { if (currentModel) {
scene.remove(currentModel); scene.remove(currentModel);
model-index.json
+10
View File
@@ -0,0 +1,10 @@
[
{
"name": "[MBS-2351] Ansonia muelleri",
"variants": {
"posed": "models/MBS-2351 Ansonia muelleri.glb",
"expanded dorsal": "models/MBS-2351 Ansonia muelleri.glb",
"expanded ventral": "models/MBS-2351 Ansonia muelleri.glb"
}
}
]