4 models have responded to the "Retro macOS UI Recreation" challenge. Compare their approaches side-by-side on RIVAL. This response is part of RIVAL's open dataset of 5,600+ AI model responses.
Retro macOS UI Recreation
Qwen3 Coder's response to the 'Retro macOS UI Recreation' challenge.
Qwen3 Coder
February 3, 2026
Website
?Prompt
Recreate a classic, retro, macOS Desktop UI — make it interactive and nostalgic, make it as interactive as you can, you can be creative.. Feel free to showcase your skills. The entire application must be a single-page self-contained HTML file.
Response
Couldn't render this response
This model didn't return a displayable web page for this challenge.
View raw output
# Retro macOS Desktop Experience
I'll create a nostalgic, interactive macOS desktop that captures the classic UI elements from Mac OS 8/9 era. This will include the iconic Platinum theme, Finder windows, application icons, and interactive elements.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Retro macOS Desktop</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Lucida Grande", "Geneva", sans-serif;
}
body {
background: #3d6dac url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="%233d6dac"/><path d="M0,0 L100,100 M100,0 L0,100" stroke="%235a8ad6" stroke-width="1"/></svg>');
height: 100vh;
overflow: hidden;
user-select: none;
}
#desktop {
position: relative;
width: 100%;
height: 100%;
background: #3d6dac;
}
/* Desktop Icons */
.desktop-icon {
position: absolute;
width: 64px;
text-align: center;
cursor: pointer;
padding: 8px 4px;
border-radius: 4px;
}
.desktop-icon:hover {
background: rgba(255, 255, 255, 0.2);
}
.desktop-icon.selected {
background: #0000cc;
}
.desktop-icon img {
width: 32px;
height: 32px;
display: block;
margin: 0 auto 4px;
image-rendering: pixelated;
}
.desktop-icon span {
color: white;
font-size: 11px;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
display: block;
word-wrap: break-word;
}
/* Menu Bar */
#menu-bar {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 22px;
background: linear-gradient(to bottom, #d0d0d0, #a0a0a0);
border-bottom: 1px solid #808080;
display: flex;
align-items: center;
padding: 0 8px;
z-index: 1000;
}
#apple-menu {
width: 12px;
height: 12px;
background: #ff0000;
border-radius: 50%;
margin-right: 12px;
cursor: pointer;
position: relative;
}
#apple-menu::before {
content: "";
position: absolute;
top: 2px;
left: 2px;
width: 8px;
height: 8px;
background: white;
border-radius: 50%;
}
.menu-item {
font-size: 12px;
padding: 0 8px;
color: #000;
cursor: pointer;
}
.menu-item:hover {
background: #0000cc;
color: white;
}
#clock {
position: absolute;
right: 8px;
font-size: 12px;
color: #000;
}
/* Windows */
.window {
position: absolute;
background: #d0d0d0;
border: 1px solid #808080;
border-radius: 6px;
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
overflow: hidden;
display: flex;
flex-direction: column;
}
.window-header {
height: 20px;
background: linear-gradient(to bottom, #d0d0d0, #a0a0a0);
border-bottom: 1px solid #808080;
display: flex;
align-items: center;
padding: 0 4px;
cursor: move;
}
.window-title {
flex: 1;
font-size: 12px;
text-align: center;
color: #000;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5);
}
.window-controls {
display: flex;
}
.window-btn {
width: 12px;
height: 12px;
margin-left: 4px;
border-radius: 50%;
cursor: pointer;
}
.close-btn { background: #ff5f57; }
.minimize-btn { background: #febc2e; }
.maximize-btn { background: #28c840; }
.window-content {
flex: 1;
padding: 12px;
overflow: auto;
background: white;
}
/* Finder Window */
.finder-content {
display: flex;
height: 100%;
}
.sidebar {
width: 120px;
background: #e0e0e0;
border-right: 1px solid #c0c0c0;
padding: 8px;
}
.sidebar-item {
padding: 4px;
font-size: 12px;
cursor: pointer;
}
.sidebar-item:hover {
background: #0000cc;
color: white;
}
.main-content {
flex: 1;
padding: 8px;
}
.folder-icon {
display: inline-block;
width: 64px;
text-align: center;
margin: 8px;
cursor: pointer;
}
.folder-icon img {
width: 32px;
height: 32px;
display: block;
margin: 0 auto 4px;
}
.folder-icon span {
font-size: 11px;
display: block;
}
/* Dock */
#dock {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
display: flex;
background: rgba(0, 0, 0, 0.3);
padding: 6px 8px;
border-radius: 12px;
backdrop-filter: blur(5px);
}
.dock-icon {
width: 48px;
height: 48px;
margin: 0 4px;
cursor: pointer;
transition: all 0.2s ease;
}
.dock-icon:hover {
width: 56px;
height: 56px;
margin: -4px 2px;
}
.dock-icon img {
width: 100%;
height: 100%;
}
/* Dialog */
.dialog {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
background: #d0d0d0;
border: 1px solid #808080;
border-radius: 6px;
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
z-index: 2000;
}
.dialog-header {
height: 20px;
background: linear-gradient(to bottom, #d0d0d0, #a0a0a0);
border-bottom: 1px solid #808080;
display: flex;
align-items: center;
padding: 0 8px;
}
.dialog-title {
flex: 1;
font-size: 12px;
text-align: center;
color: #000;
}
.dialog-content {
padding: 16px;
font-size: 12px;
}
.dialog-buttons {
display: flex;
justify-content: flex-end;
padding: 0 16px 16px;
}
.dialog-btn {
padding: 4px 12px;
background: #d0d0d0;
border: 1px solid #808080;
border-radius: 4px;
font-size: 12px;
cursor: pointer;
margin-left: 8px;
}
.dialog-btn:hover {
background: #e0e0e0;
}
/* Context Menu */
.context-menu {
position: absolute;
background: #d0d0d0;
border: 1px solid #808080;
border-radius: 4px;
padding: 4px 0;
display: none;
z-index: 3000;
}
.context-item {
padding: 4px 24px 4px 16px;
font-size: 12px;
cursor: pointer;
}
.context-item:hover {
background: #0000cc;
color: white;
}
/* Trash */
#trash {
position: absolute;
bottom: 10px;
right: 20px;
width: 48px;
text-align: center;
cursor: pointer;
}
#trash img {
width: 32px;
height: 32px;
display: block;
margin: 0 auto;
}
#trash span {
color: white;
font-size: 11px;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<div id="desktop">
<!-- Menu Bar -->
<div id="menu-bar">
<div id="apple-menu"></div>
<div class="menu-item">File</div>
<div class="menu-item">Edit</div>
<div class="menu-item">View</div>
<div class="menu-item">Special</div>
<div class="menu-item">Help</div>
<div id="clock">10:42 AM</div>
</div>
<!-- Desktop Icons -->
<div class="desktop-icon" style="left: 20px; top: 40px;">
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><rect width='32' height='32' fill='%233399ff'/><path d='M8,8 L24,8 L24,24 L8,24 Z' fill='%23ffffff'/><path d='M12,12 L20,12 L20,20 L12,20 Z' fill='%233399ff'/></svg>" alt="Finder">
<span>Finder</span>
</div>
<div class="desktop-icon" style="left: 20px; top: 120px;">
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><rect width='32' height='32' fill='%23cc3333'/><circle cx='16' cy='16' r='8' fill='%23ffffff'/></svg>" alt="Internet">
<span>Internet</span>
</div>
<div class="desktop-icon" style="left: 20px; top: 200px;">
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><rect width='32' height='32' fill='%2333cc33'/><path d='M8,8 L24,8 L24,24 L8,24 Z' fill='%23ffffff'/><path d='M12,12 L20,12 L20,20 L12,20 Z' fill='%2333cc33'/></svg>" alt="Documents">
<span>Documents</span>
</div>
<div class="desktop-icon" style="left: 20px; top: 280px;">
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><rect width='32' height='32' fill='%23ffcc33'/><path d='M8,8 L24,8 L24,24 L8,24 Z' fill='%23ffffff'/><path d='M12,12 L20,12 L20,20 L12,20 Z' fill='%23ffcc33'/></svg>" alt="Pictures">
<span>Pictures</span>
</div>
<!-- Finder Window -->
<div class="window" id="finder-window" style="width: 500px; height: 300px; top: 80px; left: 120px;">
<div class="window-header">
<div class="window-title">Finder</div>
<div class="window-controls">
<div class="window-btn close-btn"></div>
<div class="window-btn minimize-btn"></div>
<div class="window-btn maximize-btn"></div>
</div>
</div>
<div class="window-content">
<div class="finder-content">
<div class="sidebar">
<div class="sidebar-item">Desktop</div>
<div class="sidebar-item">Hard Disk</div>
<div class="sidebar-item">System Folder</div>
<div class="sidebar-item">Applications</div>
<div class="sidebar-item">Documents</div>
<div class="sidebar-item">Pictures</div>
</div>
<div class="main-content">
<div class="folder-icon">
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><rect width='32' height='32' fill='%233399ff'/><path d='M8,8 L24,8 L24,24 L8,24 Z' fill='%23ffffff'/><path d='M12,12 L20,12 L20,20 L12,20 Z' fill='%233399ff'/></svg>" alt="Folder">
<span>My Documents</span>
</div>
<div class="folder-icon">
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><rect width='32' height='32' fill='%23cc3333'/><circle cx='16' cy='16' r='8' fill='%23ffffff'/></svg>" alt="Folder">
<span>Web Pages</span>
</div>
<div class="folder-icon">
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><rect width='32' height='32' fill='%2333cc33'/><path d='M8,8 L24,8 L24,24 L8,24 Z' fill='%23ffffff'/><path d='M12,12 L20,12 L20,20 L12,20 Z' fill='%2333cc33'/></svg>" alt="Folder">
<span>Projects</span>
</div>
</div>
</div>
</div>
</div>
<!-- Trash -->
<div id="trash">
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><rect width='32' height='32' fill='%23333333'/><path d='M10,10 L22,10 L22,26 L10,26 Z' fill='%23ffffff'/><path d='M12,12 L20,12 L20,24 L12,24 Z' fill='%23333333'/></svg>" alt="Trash">
<span>Trash</span>
</div>
<!-- Dock -->
<div id="dock">
<div class="dock-icon">
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><rect width='48' height='48' fill='%233399ff'/><path d='M12,12 L36,12 L36,36 L12,3Retro macOS UI Recreation
About Qwen3 Coder
Capabilities
ConversationReasoningCode GenerationAnalysisFunction CallingTool Use
Categories
TextCode
Specifications
- Provider
- Qwen
- Released
- 2025-07-23
- Size
- XLARGE
