Changed status style
This commit is contained in:
informaticker
parent
10ecdcf319
commit
3ba5ebeba8
@ -151,9 +151,67 @@ body {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.project-item,
|
||||
.status-item {
|
||||
margin: 10px 0;
|
||||
border: 1px solid #2a5a5a;
|
||||
padding: 15px;
|
||||
margin: 15px 0;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
background: rgba(42, 90, 90, 0.05);
|
||||
}
|
||||
|
||||
.project-item:hover,
|
||||
.status-item:hover {
|
||||
border-color: #c5e5e5;
|
||||
background: rgba(42, 90, 90, 0.1);
|
||||
}
|
||||
|
||||
.project-header,
|
||||
.status-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.project-header .entry::before,
|
||||
.status-header .entry::before {
|
||||
content: "⎔";
|
||||
}
|
||||
|
||||
.expand-icon {
|
||||
color: #88aaaa;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.project-item.expanded .expand-icon,
|
||||
.status-item.expanded .expand-icon {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.project-content,
|
||||
.status-details {
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition:
|
||||
max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
opacity 0.3s ease,
|
||||
transform 0.3s ease;
|
||||
margin-top: 10px;
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
|
||||
.project-content.expanded,
|
||||
.status-details.expanded {
|
||||
max-height: 500px;
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.status-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.status-indicator {
|
||||
@ -184,27 +242,6 @@ body {
|
||||
box-shadow: 0 0 10px rgba(255, 152, 0, 0.3);
|
||||
}
|
||||
|
||||
.status-details {
|
||||
margin-left: 18px;
|
||||
color: #88aaaa;
|
||||
font-size: 0.9em;
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
transition:
|
||||
max-height 0.3s ease-out,
|
||||
opacity 0.3s ease,
|
||||
transform 0.3s ease;
|
||||
}
|
||||
|
||||
.status-details.expanded {
|
||||
max-height: 500px;
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.status-metric {
|
||||
margin: 4px 0;
|
||||
padding-left: 15px;
|
||||
@ -215,19 +252,20 @@ body {
|
||||
content: "›";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: #88aaaa;
|
||||
}
|
||||
|
||||
.loading-indicator,
|
||||
.error-message {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.loading-indicator {
|
||||
color: #88aaaa;
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
color: #f44336;
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.refresh-button {
|
||||
@ -270,7 +308,6 @@ body {
|
||||
|
||||
.entry::before {
|
||||
content: "▹";
|
||||
color: #88aaaa;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
margin-right: 10px;
|
||||
|
||||
@ -108,9 +108,9 @@ function updateStatus() {
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
statusContainer.innerHTML = createStatusHTML(data);
|
||||
document.querySelectorAll(".status-item .entry").forEach((item) => {
|
||||
document.querySelectorAll(".status-item").forEach((item) => {
|
||||
item.addEventListener("click", function () {
|
||||
const details = this.nextElementSibling;
|
||||
const details = this.querySelector(".status-details");
|
||||
details.classList.toggle("expanded");
|
||||
});
|
||||
});
|
||||
@ -130,8 +130,6 @@ function updateStatus() {
|
||||
// initial update
|
||||
updateStatus();
|
||||
|
||||
// update every minute
|
||||
setInterval(updateStatus, 60000);
|
||||
// status details toggle
|
||||
document.querySelectorAll(".status-item .entry").forEach((item) => {
|
||||
const details = item.nextElementSibling;
|
||||
|
||||
52
index.html
52
index.html
@ -31,10 +31,8 @@
|
||||
>
|
||||
</div>
|
||||
<div class="entry">
|
||||
<a
|
||||
href="https://huggingface.co/informatiker"
|
||||
class="entry-link"
|
||||
>RESEARCH</a
|
||||
<a href="#" class="entry-link"
|
||||
>RESEARCH (SEE BELOW)</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
@ -65,13 +63,33 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="entry">
|
||||
RESEARCH
|
||||
<div class="nested-entries">
|
||||
<div class="entry">
|
||||
<a
|
||||
href="https://huggingface.co/informatiker"
|
||||
class="entry-link"
|
||||
>NLP</a
|
||||
>
|
||||
</div>
|
||||
<div class="entry">
|
||||
<a
|
||||
href="https://netwatch.elia.network"
|
||||
class="entry-link"
|
||||
>INTERNET AT WAR</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="projects" class="section">
|
||||
<div class="section-title">PROJECTS</div>
|
||||
|
||||
<div class="project-item" onclick="toggleProject(this)">
|
||||
<div class="project-item">
|
||||
<div class="project-header">
|
||||
<div class="entry">CAS</div>
|
||||
<span class="expand-icon">+</span>
|
||||
@ -91,7 +109,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="project-item" onclick="toggleProject(this)">
|
||||
<div class="project-item">
|
||||
<div class="project-header">
|
||||
<div class="entry">cchat</div>
|
||||
<span class="expand-icon">+</span>
|
||||
@ -111,7 +129,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="project-item" onclick="toggleProject(this)">
|
||||
<div class="project-item">
|
||||
<div class="project-header">
|
||||
<div class="entry">discord-jellyfin-bot</div>
|
||||
<span class="expand-icon">+</span>
|
||||
@ -130,6 +148,26 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="project-item">
|
||||
<div class="project-header">
|
||||
<div class="entry">netwatch</div>
|
||||
<span class="expand-icon">+</span>
|
||||
</div>
|
||||
<div class="project-content">
|
||||
<p>
|
||||
Monitor internet connectivity in regions of war and
|
||||
conflict.
|
||||
</p>
|
||||
<div class="project-links">
|
||||
<a
|
||||
href="https://git.elia.network/elia/netwatch"
|
||||
class="project-link"
|
||||
>⎔ GIT →</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="status" class="section">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user