Bellsworne/critterfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adding an image library because i apparently need TGAs

Browse Source
This commit is contained in:
chris bell
2026-08-05 23:24:32 -05:00
parent 466e0570d4
commit 62a6f49eba
10 changed files with 9917 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/images/icon.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 627 KiB

55
assets/images/icon.svg Executable file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 269 KiB

BIN
assets/images/icon.tga Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 625 KiB

26
assets/main.rml
View File

@@ -2,6 +2,10 @@
<head>
<title>Critterfolio</title>
<link type="text/rcss" href="styles/main.rcss" />
<script>
</script>
</head>
<body data-model="app_data">
@@ -11,11 +15,23 @@
<!-- Critter Cards -->
<div class="critter-list">
<div data-for="entry : critters" class="critter-card">
<h3>#{{entry.key}} - {{entry.value.name}}</h3>
<p><strong>Species:</strong> {{entry.value.species}}</p>
<p><strong>Gender:</strong> {{entry.value.gender}}</p>
</div>
<button data-for="entry : critters" class="critter-card">
<div class="critter-card-header">
<span class="critter-id">ID: #{{entry.key}}</span>
<button class="btn-delete">X</button>
</div>
<div class="critter-card-body">
<img class="critter-thumb"
src="images/icon.tga" />
<div class="critter-info">
<h3 class="critter-name">{{entry.value.name}}</h3>
<p><strong>Species:</strong> {{entry.value.species}}</p>
<p><strong>Gender:</strong> {{entry.value.gender}}</p>
</div>
</div>
</button>
</div>
<!-- Modal Dialog Overlay -->

87
assets/styles/main.rcss
View File

@@ -272,7 +272,92 @@ progress-value {
Specific app stuff
=================================== */
/* Critter cards */
/* Critter Cards Container */
.critter-list {
display: flex;
flex-wrap: wrap;
padding: 10px;
}
/* Interactive Card Base */
.critter-card {
display: block;
width: 220px;
margin: 10px;
padding: 10px;
background-color: #2b2b2b;
color: #ffffff;
border: 1px #444444;
border-radius: 6px;
text-align: left;
}
.critter-card:hover {
background-color: #383838;
border: 1px #005aff;
}
.critter-card:active {
background-color: #222222;
}
/* Header with Small ID & Delete Button */
.critter-card-header {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px #444444;
padding-bottom: 4px;
margin-bottom: 8px;
}
.critter-id {
font-size: 11px;
color: #aaaaaa;
}
.btn-delete {
padding: 2px 6px;
min-width: 0px;
font-size: 10px;
background-color: #aa2222;
color: #ffffff;
border: 0px;
}
.btn-delete:hover {
background-color: #ff3333;
}
/* Body & Thumbnail */
.critter-card-body {
display: flex;
align-items: center;
}
.critter-thumb {
width: 48px;
height: 48px;
margin-right: 10px;
background-color: #1a1a1a;
border: 1px #555555;
}
.critter-info {
flex: 1;
}
.critter-name {
margin: 0px 0px 4px 0px;
font-size: 16px;
color: #ffffff;
}
.critter-info p {
margin: 2px 0px;
font-size: 12px;
color: #dddddd;
}
/* Modals */
.modal-overlay {