Nemotron 3 Nano Omni (free)
by NVIDIAReasoningClean
Running live in a sandboxed frame. Click inside it before using the keyboard.
How it went
- Total time
- 18.7 s
- Cost
- $0
- Output tokens
- 1,308
- Spent thinking
- 0 tokens
- Speed
- 71.6 tok/s
- Console errors
- 0
- First token after
- 433 ms
- First visible text after
- 433 ms
- Prompt tokens
- 524
- Code size
- 3.3 KB
- Finish reason
- stop
- Served by
- Nvidia
- Model id
nvidia/nemotron-3-nano-omni-30b-a3b-reasoning:free- Reasoning sent
{"effort":"none"}- Max output
- 32,000 tokens
- Generated
- Nov 9, 2026
What it was asked
The prompt
Create a set of four animated weather cards (sunny, rainy, snowy, stormy), made with HTML and CSS only. Requirements: - Absolutely no JavaScript: the file must not contain any <script> tag or inline event handler. - No images, no SVG, no icon fonts: every weather icon is built from HTML elements and pseudo-elements styled with CSS. - Each card shows an animated icon (rotating sun rays, falling rain drops, drifting snowflakes, flashing lightning), a city name, a temperature and a short description. - Each card has its own background gradient matching the weather. - The cards are displayed in a responsive grid (4 per row on desktop, stacked on mobile) and lift up on hover. - Smooth infinite animations using @keyframes, and respect prefers-reduced-motion.
System prompt, sent with every prompt
You are generating a self-contained web demo. It will be rendered automatically in a sandboxed iframe and compared side by side with the output of other AI models given the exact same task. Output rules: - Reply with exactly ONE fenced code block containing the complete file: ```html (or ```svg when the task asks for an SVG). No text before or after the code block. - Everything must be inline: CSS in <style>, JavaScript in <script>. No external files, images, fonts or network requests, except the CDN URLs explicitly allowed by the task. - Do not use localStorage, sessionStorage, cookies, IndexedDB, alert(), confirm(), prompt() or window.open(): they are blocked in the sandbox and will throw. - The page must look right in a 1280×800 viewport and adapt gracefully down to 375px wide. No horizontal scrollbar. - Something meaningful must be visible on first paint: a screenshot is taken automatically about 3 seconds after load, without any interaction. - Everything that makes the demo interesting must be visible within the first seconds: nothing hidden behind a high score, a later level or a long play session. - Games must start in a self-playing demo mode (a simple AI plays) behind a "Click or press a key to start" message, so the game can be judged in action without playing. - The iframe only receives keyboard events after the user clicks it: if the demo uses the keyboard, display a clear "Click or press a key to start" message. - The code must run with zero errors in the console of the latest Chrome.
Code run-1.html · 159 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Weather Cards</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
:root{
--sun: #ffdd57;
--rain: #6dd5ed;
--snow: #cce5ff;
--storm: #4a4a8c;
}
*{
box-sizing:border-box;
margin:0;
padding:0;
}
html,body{
height:100%;
font-family:Arial,Helvetica,sans-serif;
background:#f0f0f0;
}
body{
display:flex;
justify-content:center;
align-items:center;
padding:1rem;
}
.grid{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
gap:1rem;
width:100%;
max-width:1280px;
}
.card{
background:var(--bg);
border-radius:12px;
padding:1.2rem;
text-align:center;
color:#222;
transition:transform .3s ease, box-shadow .3s ease;
position:relative;
overflow:hidden;
}
.card:hover{
transform:translateY(-8px);
box-shadow:0 12px 20px rgba(0,0,0,.15);
}
.card h3{
margin:0.6rem 0;
font-size:1.2rem;
}
.card p.temp{
margin:0.4rem 0;
font-size:1.5rem;
font-weight:bold;
}
.card p.desc{
margin:0.4rem 0;
font-size:1rem;
}
.icon{
width:80px;
height:80px;
margin:0.5rem auto;
position:relative;
}
.icon::before{
content:"";
position:absolute;
left:50%;
top:50%;
width:50%;
height:50%;
transform:translate(-50%,-50%);
border-radius:50%;
background:currentColor;
}
.icon.sun::before{
background:var(--sun);
animation:sunRay 3s linear infinite;
}
.icon.rain::before{
background:var(--rain);
animation:rain 2s linear infinite;
}
.icon.snow::before{
background:var(--snow);
animation:snow 3s linear infinite;
}
.icon.storm::before{
background:var(--storm);
animation:lightning 1.5s steps(2) infinite;
}
@keyframes sunRay{
0%{transform:translate(-50%,-50%) rotate(0deg);}
100%{transform:translate(-50%,-50%) rotate(360deg);}
}
@keyframes rain{
0%{transform:translate(-50%,-50%) scale(0);}
100%{transform:translate(-50%,120%) scale(1);}
}
@keyframes snow{
0%{transform:translate(-50%,-50%) rotate(0deg) scale(0.5);}
100%{transform:translate(-50%,120%) rotate(360deg) scale(0.5);}
}
@keyframes lightning{
0%{opacity:0;}
10%{opacity:1;}
20%{opacity:0;}
30%{opacity:1;}
40%{opacity:0;}
100%{opacity:0;}
}
@media (prefers-reduced-motion:reduce){
.icon.sun,.icon.rain,.icon.snow,.icon.storm{animation:none;}
}
@media (max-width:600px){
.card h3{font-size:1.1rem;}
.card p.temp{font-size:1.3rem;}
.card p.desc{font-size:.9rem;}
}
</style>
</head>
<body>
<div class="grid">
<div class="card">
<div class="icon sun"></div>
<h3>Sunnyville</h3>
<p class="temp">24°</p>
<p class="desc">Sunny</p>
<style>--bg:linear-gradient(135deg,var(--sun) 0%,#ffb347 100%);</style>
</div>
<div class="card">
<div class="icon rain"></div>
<h3>Rainford</h3>
<p class="temp">18°</p>
<p class="desc">Rain</p>
<style>--bg:linear-gradient(135deg,var(--rain) 0%,#2c8eac 100%);</style>
</div>
<div class="card">
<div class="icon snow"></div>
<h3>Snowland</h3>
<p class="temp">-2°</p>
<p class="desc">Snow</p>
<style>--bg:linear-gradient(135deg,var(--snow) 0%,#b0c4ff 100%);</style>
</div>
<div class="card">
<div class="icon storm"></div>
<h3>Stormhaven</h3>
<p class="temp">12°</p>
<p class="desc">Storm</p>
<style>--bg:linear-gradient(135deg,var(--storm) 0%,#1b1b3b 100%);</style>
</div>
</div>
</body>
</html>