[html]
<div class="win95-monitor">
    <div class="win95-screen">
       
        <div class="desktop-icons">
            <label for="win-art1" class="icon">
                <img src="https://i.ibb.co/L8m7X9p/image.png" alt=""> <span>Art_01.jpg</span>
            </label>
            <label for="win-art2" class="icon">
                <img src="https://i.ibb.co/L8m7X9p/image.png" alt=""> <span>Sketch.png</span>
            </label>
            <label for="win-art3" class="icon">
                <img src="https://i.ibb.co/L8m7X9p/image.png" alt=""> <span>Scene_Final.jpg</span>
            </label>
            <label for="win-art4" class="icon">
                <img src="https://i.ibb.co/L8m7X9p/image.png" alt=""> <span>Portrait.webp</span>
            </label>
            <label for="win-art5" class="icon">
                <img src="https://i.ibb.co/L8m7X9p/image.png" alt=""> <span>Draft_02.png</span>
            </label>
            <label for="win-art6" class="icon">
                <img src="https://i.ibb.co/L8m7X9p/image.png" alt=""> <span>Concept.jpg</span>
            </label>
            <label for="win-art7" class="icon">
                <img src="https://i.ibb.co/L8m7X9p/image.png" alt=""> <span>WIP_03.png</span>
            </label>
            <label for="win-art8" class="icon">
                <img src="https://i.ibb.co/L8m7X9p/image.png" alt=""> <span>Backup.jpg</span>
            </label>
        </div>

        <input type="checkbox" id="win-art1" class="win-state">
        <div class="window">
            <div class="title-bar"><div class="title-text">Art_01.jpg</div><label for="win-art1" class="close-btn">×</label></div>
            <div class="window-content"><img src="https://upforme.ru/uploads/001c/82/f2/62/336347.jpg" class="content-img"></div>
        </div>

        <input type="checkbox" id="win-art2" class="win-state">
        <div class="window">
            <div class="title-bar"><div class="title-text">Sketch.png</div><label for="win-art2" class="close-btn">×</label></div>
            <div class="window-content"><img src="https://upforme.ru/uploads/001c/82/f2/62/25148.jpg" class="content-img"></div>
        </div>
       
<input type="checkbox" id="win-art3" class="win-state">
        <div class="window">
            <div class="title-bar">
                <div class="title-text">Scene_Final.jpg - Просмотр</div>
                <label for="win-art3" class="close-btn">×</label>
            </div>
            <div class="window-content"><img src="https://upforme.ru/uploads/001c/82/f2/62/267551.gif" class="content-img"></div>
        </div>

        <input type="checkbox" id="win-art4" class="win-state">
        <div class="window">
            <div class="title-bar">
                <div class="title-text">Portrait.webp - Просмотр</div>
                <label for="win-art4" class="close-btn">×</label>
            </div>
            <div class="window-content"><img src="https://i.ibb.co/zLMLBFd/ezgif-712de600a9ca128b.gif" class="content-img"></div>
        </div>

        <input type="checkbox" id="win-art5" class="win-state">
        <div class="window">
            <div class="title-bar">
                <div class="title-text">Draft_02.png - Просмотр</div>
                <label for="win-art5" class="close-btn">×</label>
            </div>
            <div class="window-content"><img src="https://upforme.ru/uploads/001c/82/f2/62/889063.jpg" class="content-img"></div>
        </div>

        <input type="checkbox" id="win-art6" class="win-state">
        <div class="window">
            <div class="title-bar">
                <div class="title-text">Concept.jpg - Просмотр</div>
                <label for="win-art6" class="close-btn">×</label>
            </div>
            <div class="window-content"><img src="https://upforme.ru/uploads/001c/82/f2/62/336347.jpg" class="content-img"></div>
        </div>

        <input type="checkbox" id="win-art7" class="win-state">
        <div class="window">
            <div class="title-bar">
                <div class="title-text">WIP_03.png - Просмотр</div>
                <label for="win-art7" class="close-btn">×</label>
            </div>
            <div class="window-content"><img src="https://upforme.ru/uploads/001c/82/f2/62/25148.jpg" class="content-img"></div>
        </div>

        <input type="checkbox" id="win-art8" class="win-state">
        <div class="window">
            <div class="title-bar">
                <div class="title-text">Backup.jpg - Просмотр</div>
                <label for="win-art8" class="close-btn">×</label>
            </div>
            <div class="window-content"><img src="https://upforme.ru/uploads/001c/82/f2/62/267551.gif" class="content-img"></div>
        </div>

        <div class="taskbar">
            <div class="start-btn">
                <img src="https://i.ibb.co/pxpXpXp/win95-start.png" style="height:14px; image-rendering: pixelated;">
                <b>Start</b>
            </div>
            <div class="divider"></div>
            <div class="system-tray" id="win-clock">12:00</div>
        </div>
    </div>
</div>

<style>
    .win95-monitor {
        background: #444;
        padding: 25px;
        border-radius: 20px;
        border: 12px solid #2a2a2a;
        box-shadow: inset 0 0 15px #000;
        max-width: 950px; /* Немного расширил монитор */
        margin: 20px auto;
    }

    .win95-screen {
        background-color: #008080;
        height: 550px;
        position: relative;
        overflow: hidden;
        font-family: "MS Sans Serif", Arial, sans-serif;
    }

    .desktop-icons {
        padding: 20px;
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
        gap: 15px;
    }

    .icon {
        width: 80px;
        display: flex;
        flex-direction: column;
        align-items: center;
        cursor: pointer;
        color: white;
        font-size: 11px;
    }

    .icon img { width: 32px; height: 32px; image-rendering: pixelated; margin-bottom: 5px; }

    .win-state { display: none; }

    /* ОБНОВЛЕННОЕ ОКНО */
    .window {
        display: none;
        position: absolute;
        top: 48%; /* Чуть выше центра, чтобы визуально было ровно */
        left: 50%;
        transform: translate(-50%, -50%);
        background: #c0c0c0;
        border: 2px solid;
        border-color: #dfdfdf #808080 #808080 #dfdfdf;
        box-shadow: 2px 2px 10px rgba(0,0,0,0.5);
        padding: 2px;
        z-index: 100;
        width: 92%; /* Занимает почти всю ширину экрана */
        max-width: 800px;
    }

    .win-state:checked + .window {
        display: block;
        animation: winOpen 0.15s ease-out;
    }

    .title-bar {
        background: linear-gradient(90deg, #000080, #1084d0);
        color: white;
        padding: 3px 5px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-weight: bold;
        font-size: 12px;
    }

    .close-btn {
        background: #c0c0c0;
        color: black;
        border: 1px solid;
        border-color: #fff #444 #444 #fff;
        width: 18px;
        height: 16px;
        text-align: center;
        line-height: 14px;
        cursor: pointer;
    }

    .window-content {
        margin-top: 2px;
        background: #444; /* Темный фон для фото */
        border: 2px inset #dfdfdf;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: auto;
        height: auto;
        max-height: 460px; /* Максимальная высота внутри монитора */
    }

    .content-img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain; /* Картинка впишется целиком без искажений */
        display: block;
    }

    /* Панель задач */
    .taskbar {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 30px;
        background: #c0c0c0;
        border-top: 2px solid #dfdfdf;
        display: flex;
        align-items: center;
        padding: 0 5px;
        z-index: 200;
    }

    @keyframes winOpen {
        from { transform: translate(-50%, -50%) scale(0.9); opacity: 0; }
        to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    }

    .system-tray { margin-left: auto; border: 2px inset #dfdfdf; padding: 0 10px; font-size: 12px; }
</style>

<script>
    function updateClock() {
        const now = new Date();
        document.getElementById('win-clock').textContent = now.getHours().toString().padStart(2, '0') + ":" + now.getMinutes().toString().padStart(2, '0');
    }
    setInterval(updateClock, 10000); updateClock();
</script>
[/html]

[html]
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }

.win95-monitor {
  background: #444;
  padding: 20px;
  border-radius: 20px;
  border: 12px solid #2a2a2a;
  box-shadow: inset 0 0 15px #000;
  max-width: 950px;
  margin: 20px auto;
}
.win95-screen {
  background-color: #008080;
  height: 550px;
  position: relative;
  overflow: hidden;
  font-family: "MS Sans Serif", Arial, sans-serif;
  font-size: 12px;
}
.desktop-icons {
  padding: 15px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 10px;
  height: calc(550px - 32px);
}
.icon {
  width: 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  color: white;
  font-size: 11px;
  text-align: center;
  user-select: none;
  padding: 4px;
  border-radius: 2px;
}
.icon:hover { background: rgba(255,255,255,0.15); }
.icon.active { background: rgba(0,0,128,0.5); }
.icon img { width: 32px; height: 32px; image-rendering: pixelated; margin-bottom: 4px; }
.icon span { word-break: break-all; line-height: 1.2; }

.window {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #c0c0c0;
  border: 2px solid;
  border-color: #dfdfdf #808080 #808080 #dfdfdf;
  box-shadow: 2px 2px 10px rgba(0,0,0,0.5);
  padding: 2px;
  z-index: 100;
  width: 92%;
  max-width: 820px;
}
.window.open {
  display: block;
  animation: winOpen 0.15s ease-out;
}
@keyframes winOpen {
  from { transform: translate(-50%, -50%) scale(0.92); opacity: 0; }
  to   { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
.title-bar {
  background: linear-gradient(90deg, #000080, #1084d0);
  color: white;
  padding: 3px 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  font-size: 12px;
  cursor: default;
}
.title-text { flex: 1; }
.win-btns { display: flex; gap: 2px; }
.win-btn {
  background: #c0c0c0;
  color: black;
  border: 1px solid;
  border-color: #fff #444 #444 #fff;
  width: 18px;
  height: 16px;
  text-align: center;
  line-height: 14px;
  cursor: pointer;
  font-size: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.win-btn:active { border-color: #444 #fff #fff #444; }

.window-content {
  background: #222;
  border: 2px inset #dfdfdf;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  height: 430px;
}
.content-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

.nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.45);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
  width: 32px;
  height: 48px;
  cursor: pointer;
  font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  z-index: 10;
  user-select: none;
}
.nav-btn:hover { background: rgba(0,0,0,0.7); }
.nav-prev { left: 4px; }
.nav-next { right: 4px; }
.nav-counter {
  position: absolute;
  bottom: 5px;
  right: 8px;
  color: rgba(255,255,255,0.7);
  font-size: 11px;
  background: rgba(0,0,0,0.4);
  padding: 1px 5px;
}

.taskbar {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 30px;
  background: #c0c0c0;
  border-top: 2px solid #dfdfdf;
  display: flex;
  align-items: center;
  padding: 0 5px;
  z-index: 200;
}
.start-btn {
  display: flex; align-items: center; gap: 4px;
  border: 1px solid; border-color: #fff #444 #444 #fff;
  padding: 2px 8px;
  cursor: pointer; font-weight: bold; font-size: 12px;
}
.divider { width: 2px; height: 20px; background: #808080; border-right: 1px solid #fff; margin: 0 4px; }
.system-tray { margin-left: auto; border: 2px inset #dfdfdf; padding: 0 10px; font-size: 12px; }
</style>

<div class="win95-monitor">
  <div class="win95-screen">

    <div class="desktop-icons" id="desktopIcons"></div>

    <div class="window" id="mainWindow">
      <div class="title-bar">
        <div class="title-text" id="winTitle">—</div>
        <div class="win-btns">
          <div class="win-btn" id="prevBtn" title="Назад">◄</div>
          <div class="win-btn" id="nextBtn" title="Вперёд">►</div>
          <div class="win-btn" id="closeBtn">×</div>
        </div>
      </div>
      <div class="window-content" id="windowContent">
        <div class="nav-btn nav-prev" id="navPrev">‹</div>
        <img id="mainImg" class="content-img" src="" alt="">
        <div class="nav-btn nav-next" id="navNext">›</div>
        <div class="nav-counter" id="navCounter"></div>
      </div>
    </div>

    <div class="taskbar">
      <div class="start-btn"><b>Start</b></div>
      <div class="divider"></div>
      <div class="system-tray" id="win-clock">12:00</div>
    </div>
  </div>
</div>

<script>
var files = [
  { name: "clyde-swearing.gif",          src: "https://i.ibb.co/mVzkb0vX/clyde-swearing.gif" },
  { name: "clyde-complements.gif",       src: "https://i.ibb.co/k6vxMXvM/clyde-complements.gif" },
  { name: "clyde-complements-roting.gif",src: "https://i.ibb.co/gM2V9wNv/clyde-complements-roting.gif" },
  { name: "clyde-date.gif",              src: "https://i.ibb.co/GQfp6NCX/clyde-date.gif" },
  { name: "clyde-good-boy.gif",          src: "https://i.ibb.co/qY7B0Q1r/clyde-good-boy.gif" },
  { name: "clyde-thank-you.gif",         src: "https://i.ibb.co/GQR48CfV/clyde-thank-you-for-dying.gif" },
  { name: "sean-addiction.gif",          src: "https://i.ibb.co/RG7wkQdv/sean-addiction.gif" },
  { name: "sean-economy.gif",            src: "https://i.ibb.co/hR6PgZKy/sean-economy.gif" },
  { name: "sean-instructions.gif",       src: "https://i.ibb.co/5WtcS9tT/sean-instructions.gif" },
  { name: "sean-take-off.gif",           src: "https://i.ibb.co/T56bS2c/sean-take-off.gif" },
  { name: "sean-tired.gif",              src: "https://i.ibb.co/bjnzt1J0/sean-tired.gif" }
];

var ICON_IMG = "https://i.ibb.co/L8m7X9p/image.png";
var currentIndex = -1;
var win = document.getElementById("mainWindow");
var winTitle = document.getElementById("winTitle");
var mainImg = document.getElementById("mainImg");
var navCounter = document.getElementById("navCounter");
var iconsEl = document.getElementById("desktopIcons");

function openAt(idx) {
  currentIndex = idx;
  var f = files[idx];
  winTitle.textContent = f.name + " — Просмотр";
  mainImg.src = f.src;
  navCounter.textContent = (idx + 1) + " / " + files.length;
  document.querySelectorAll(".icon").forEach(function(el, i) {
    el.classList.toggle("active", i === idx);
  });
  win.classList.remove("open");
  void win.offsetWidth;
  win.classList.add("open");
}

function closeWin() {
  win.classList.remove("open");
  document.querySelectorAll(".icon").forEach(function(el) { el.classList.remove("active"); });
  currentIndex = -1;
}

files.forEach(function(f, i) {
  var div = document.createElement("div");
  div.className = "icon";
  div.innerHTML = '<img src="' + ICON_IMG + '" alt=""><span>' + f.name + '</span>';
  div.addEventListener("click", function() {
    document.querySelectorAll(".icon").forEach(function(el) { el.classList.remove("active"); });
    div.classList.add("active");
  });
  div.addEventListener("dblclick", function() { openAt(i); });
  iconsEl.appendChild(div);
});

document.getElementById("closeBtn").addEventListener("click", closeWin);
document.getElementById("prevBtn").addEventListener("click", function() {
  openAt(currentIndex > 0 ? currentIndex - 1 : files.length - 1);
});
document.getElementById("nextBtn").addEventListener("click", function() {
  openAt(currentIndex < files.length - 1 ? currentIndex + 1 : 0);
});
document.getElementById("navPrev").addEventListener("click", function() {
  openAt(currentIndex > 0 ? currentIndex - 1 : files.length - 1);
});
document.getElementById("navNext").addEventListener("click", function() {
  openAt(currentIndex < files.length - 1 ? currentIndex + 1 : 0);
});

function updateClock() {
  var now = new Date();
  document.getElementById("win-clock").textContent =
    now.getHours().toString().padStart(2, "0") + ":" +
    now.getMinutes().toString().padStart(2, "0");
}
setInterval(updateClock, 10000);
updateClock();
</script>
[/html]