<style>
  #arena-strip-box {
    width: 320px;
    height: auto;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    background: transparent;
    border-radius: 4px;
    min-height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 15px;
  }
  #arena-strip-box img {
    width: 100%;
    height: auto;
    display: block;
  }
  #arena-strip-box .text-content {
    padding: 15px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #333;
  }
  #arena-strip-box .loading {
    padding: 40px;
    text-align: center;
    color: #999;
  }
</style>
<div id="arena-strip-box">
  <div class="loading">ᕕ( ᐛ )ᕗ</div>
</div>
<script>
{
const token = "K4YGMslfMBJc-Dr0E24wX0r6XtwP883-MheiFmoLN7A";
const slug = "strips-h9t4zmdziqc";
async function load() {
try {
const res = await fetch("https://api.are.na/v3/channels/" + slug + "/contents?per=100&sort=created_at_desc", {headers: {"Authorization": "Bearer " + token}});
const data = await res.json();
const blocks = data.data || [];
if (blocks.length === 0) {
document.getElementById("arena-strip-box").innerHTML = '<div class="loading">No blocks found.</div>';
return;
}
blocks.sort((a, b) => {
const ta = a.connection && a.connection.connected_at ? new Date(a.connection.connected_at) : new Date(0);
const tb = b.connection && b.connection.connected_at ? new Date(b.connection.connected_at) : new Date(0);
return tb - ta;
});
const block = blocks[0];
const box = document.getElementById("arena-strip-box");
let html = '';
if (block.type === "Image" && block.image) {
const src = (block.image.large && block.image.large.src) || block.image.src || '';
html = '<img src="' + src + '" alt="">';
} else if (block.type === "Text" && block.content) {
html = '<div class="text-content">' + (block.content.html || block.content.markdown || '') + '</div>';
} else if (block.type === "Link" && block.image && block.image.large) {
html = '<img src="' + block.image.large.src + '" alt="Preview">';
} else if (block.type === "Embed" && block.embed) {
const e = block.embed;
if (e.html) {
const ratio = e.height && e.width ? (e.height / e.width * 100).toFixed(2) : 56.25;
html = '<div style="width:100%;position:relative;padding-bottom:' + ratio + '%"><div style="position:absolute;inset:0">' + e.html + '</div></div>';
} else if (block.image && block.image.large) {
html = '<img src="' + block.image.large.src + '" alt="Preview">';
}
} else if (block.type === "Attachment" && block.attachment) {
const a = block.attachment;
if (a.content_type && a.content_type.startsWith("video/")) {
html = '<video controls style="width:100%;display:block"><source src="' + a.url + '" type="' + a.content_type + '"></video>';
} else if (a.content_type && a.content_type.startsWith("audio/")) {
html = '<div class="text-content"><audio controls style="width:100%"><source src="' + a.url + '" type="' + a.content_type + '"></audio></div>';
} else if (block.image && block.image.large) {
html = '<img src="' + block.image.large.src + '" alt="Preview">';
} else {
html = '<div class="text-content">' + (block.title || a.filename || 'Attachment') + '</div>';
}
} else if (block.image && block.image.large) {
html = '<img src="' + block.image.large.src + '" alt="Preview">';
} else {
html = '<div class="text-content">' + (block.title || 'Block') + '</div>';
}
box.innerHTML = html;
} catch (err) {
document.getElementById("arena-strip-box").innerHTML = '<div class="loading">Error loading.</div>';
}
}
load();
}
</script>