Pricing
Docs
Blogs
Customer Stories
You know that moment when a new gadget hits the market and everyone can't stop talking about it? That's exactly where we are in AI right now. Anthropic just rolled out two showstoppers—Claude Opus 4 and Sonnet 4—and Google's Gemini 2.5 Pro isn't ready to hand over the crown without a fight. In the next few minutes, we'll put these models through their paces: testing their coding chops, poking at their reasoning, and exploring the fresh features that could make one of them your next secret weapon. Sound good? Let's get into it.
Coding Prowess: Claude 4 Takes the Lead
Anthropic's latest models, particularly Claude Opus 4, are setting new benchmarks in the realm of AI-powered coding. Claude Opus 4 is positioned as the world's best coding model, a claim supported by its leading performance on rigorous benchmarks.
According to Anthropic, Claude Opus 4 achieves an accuracy of 72.5% on SWE-bench (Software Engineering Benchmark) and 43.2% on Terminal-bench. When utilizing parallel test-time compute, its SWE-bench score further improves to 79.4%.
Claude Sonnet 4 also demonstrates exceptional coding capabilities, with a SWE-bench score of 72.7% (80.2% with parallel test-time compute) and 35.5% on Terminal-bench (41.3% with parallel test-time compute). This makes Sonnet 4 a significant upgrade over its predecessor, Sonnet 3.7 (62.3% on SWE-bench, 70.3% with parallel test-time compute; 35.2% on Terminal-bench).
In comparison, while specific Terminal-bench scores for Gemini 2.5 Pro are not provided, its SWE-bench (verified) performance is listed at 63.2%. OpenAI's models, Codex-1 and GPT-4.1, scored 72.1% and 54.6% on SWE-bench respectively, with OpenAI o3 at 69.1%.
Industry partners have lauded Claude 4's coding abilities. Cursor calls Opus 4 "state-of-the-art for coding," while Replit notes "dramatic advancements for complex changes across multiple files." GitHub plans to introduce Sonnet 4 as the base model for its new coding agent in GitHub Copilot, highlighting its strength in agentic scenarios.
| Model | SWE-bench Accuracy | With Parallel Test-Time Compute |
|---|---|---|
| Claude Sonnet 4 | 72.7% | 80.2% |
| Gemini 2.5 Pro | 63.2% | Not specified |
Claude Sonnet 4 outperforms Gemini 2.5 Pro significantly on the SWE-bench task:
- By 9.5 percentage points in regular test-time accuracy (72.7% vs 63.2%)
- The advantage increases with parallel test-time compute (80.2% for Sonnet 4; no data for Gemini)
Claude Sonnet 4 ranks highest in the chart, while Gemini 2.5 Pro is second to last (just above GPT-4.1). Claude Sonnet 4 shows much stronger performance for software engineering tasks, especially when leveraging parallel compute, suggesting it's more capable for complex coding and reasoning tasks compared to Gemini 2.5 Pro.
Advanced Reasoning and Multitask Performance 🧠
Beyond coding, both Claude 4 and Gemini 2.5 Pro exhibit strong capabilities in various reasoning and multitask benchmarks.
Note: Scores for Claude models with "/" indicate performance with and without parallel test-time compute/bash+editor tools/pass@1 with the same agent as non-Claude models, or with Claude Code as agent framework.
- For Graduate-level reasoning (GPQA Diamond), Claude Opus 4 (83.3%), Claude Sonnet 4 (83.8%), OpenAI o3 (83.3%), and Gemini 2.5 Pro (83.0%) show comparable top-tier performance.
- In Agentic tool use (TAU-bench), Claude Opus 4 and Sonnet 4 demonstrate strong retail domain performance (81.4% and 80.5% respectively), outperforming OpenAI models in this specific metric. Gemini 2.5 Pro data is not available for this benchmark.
- Multilingual Q&A (MMLU³) sees Claude Opus 4 and OpenAI o3 tied at a high 88.8%. Gemini 2.5 Pro data is not available.
- For Visual reasoning (MMMU validation), Gemini 2.5 Pro (79.6%) and OpenAI o3 (82.9%) show strong results, with Claude Opus 4 at 76.5%.
- In High school math competitions (AIME 2025), Claude Opus 4 achieves an impressive 90.0% (with pass@1 using the same agent as non-Claude models), while OpenAI o3 scores 88.9% and Gemini 2.5 Pro reaches 83.0%.
New Capabilities of Claude 4 Models
Anthropic has endowed the Claude 4 series with several significant enhancements:
Extended Thinking with Tool Use (Beta)
Both Opus 4 and Sonnet 4 can now utilize tools, such as web search, during their thought processes. This allows them to alternate between reasoning and tool invocation to generate more comprehensive and accurate responses.
Parallel Tool Execution
The models can use multiple tools simultaneously, further enhancing their efficiency and problem-solving capabilities.
Improved Instruction Following and Memory
Claude 4 models are better at adhering to precise instructions. When granted access to local files by developers, they exhibit significantly improved memory, enabling them to extract and retain key facts for better continuity and tacit knowledge accumulation over extended interactions. This is exemplified by Opus 4 creating a 'Navigation Guide' while playing Pokémon.
Reduced Shortcut-Taking
Both models are 65% less likely to use shortcuts or loopholes to complete tasks compared to Sonnet 3.7, especially on agentic tasks prone to such behaviors.
Thinking Summaries
For lengthy thought processes (occurring about 5% of the time), Claude 4 models use a smaller model to condense these into summaries. Raw chains of thought are available for advanced users via a new Developer Mode.
Hybrid Model Architecture
Opus 4 and Sonnet 4 operate as hybrid models, offering both near-instant responses and an "extended thinking" mode for deeper reasoning on complex tasks. Opus 4, in particular, can work continuously for several hours on tasks requiring thousands of steps.
Claude Code: Enhanced Developer Collaboration
Claude Code is now generally available, extending Claude's capabilities directly into the development workflow.
IDE Integrations
New beta extensions for VS Code and JetBrains allow Claude Code to display proposed edits inline within files, streamlining pair programming.
Claude Code SDK
An extensible SDK enables developers to build custom agents and applications using the same core agent as Claude Code.
Claude Code on GitHub (Beta)
Users can tag Claude Code on pull requests to address reviewer feedback, fix CI errors, or modify code.
Gemini 2.5 Pro: A Strong Contender
While the provided text focuses heavily on the Claude 4 launch, the benchmark data indicates that Gemini 2.5 Pro remains a highly capable model.
- It shows competitive performance in Graduate-level reasoning (83.0%) and High school math competitions (83.0%).
- Gemini 2.5 Pro also demonstrates solid results in Visual reasoning (79.6%) and Agentic coding (63.2% on SWE-bench).
- Its performance in Agentic terminal coding (25.3%) is lower than the Claude 4 models in the provided comparison.
Further details on specific new features or API updates for Gemini 2.5 Pro concurrent with the Claude 4 launch were not included in the provided information.
Availability and Pricing of Claude 4 and Gemini 2.5 Pro
Both Claude Opus 4 and Sonnet 4 are available via the Anthropic API, Amazon Bedrock, and Google Cloud's Vertex AI.
- Claude Opus 4: $15 per million input tokens / $75 per million output tokens
- Claude Sonnet 4: $3 per million input tokens / $15 per million output tokens
These prices are consistent with previous Opus and Sonnet models. The Pro, Max, Team, and Enterprise Claude plans include both models and extended thinking, with Sonnet 4 also available to free users.
Gemini 2.5 Pro: Pricing still in Google Cloud preview (likely around $10–$20 per million tokens based on past tiers).
Both Claude 4 models and Gemini 2.5 Pro are available on major cloud platforms, with pay-as-you-go plans and enterprise agreements.
Coding Task for Gemini 2.5 Pro and Claude 4
Task 1: give me code to develop 16bit ui saas landing page for my ecommerce website
Claude Sonnet 4
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PixelCommerce - 16-bit Ecommerce Platform</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Press Start 2P', cursive;
background: #0f0f0f;
color: #00ff00;
overflow-x: hidden;
cursor: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAFYSURBVCiRpZM9SwNBEIafgwQSCxsLwcJaG1sLG0uxsLGwsLaxsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGwsLGw'), auto;
}
.scanlines {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: repeating-linear-gradient(
0deg,
transparent,
transparent 2px,
rgba(0, 255, 0, 0.03) 2px,
rgba(0, 255, 0, 0.03) 4px
);
pointer-events: none;
z-index: 1000;
}
.pixel-border {
border: 4px solid #00ff00;
border-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><rect width="20" height="20" fill="%2300ff00"/></svg>') 4;
image-rendering: pixelated;
}
.glitch {
animation: glitch 2s infinite;
}
@keyframes glitch {
0%, 90%, 100% { transform: translate(0); }
10% { transform: translate(-2px, 2px); }
20% { transform: translate(-2px, -2px); }
30% { transform: translate(2px, 2px); }
40% { transform: translate(-2px, -2px); }
50% { transform: translate(2px, -2px); }
60% { transform: translate(-2px, 2px); }
70% { transform: translate(2px, 2px); }
80% { transform: translate(-2px, -2px); }
}
.pixel-button {
background: linear-gradient(45deg, #001100, #003300);
border: 3px solid #00ff00;
color: #00ff00;
padding: 12px 24px;
font-family: 'Press Start 2P', cursive;
font-size: 10px;
cursor: pointer;
transition: all 0.1s ease;
text-transform: uppercase;
position: relative;
overflow: hidden;
}
.pixel-button:hover {
background: #00ff00;
color: #000;
box-shadow: 0 0 20px #00ff00;
transform: scale(1.05);
}
.pixel-button:active {
transform: scale(0.95);
}
header {
position: fixed;
top: 0;
width: 100%;
background: rgba(0, 0, 0, 0.9);
border-bottom: 2px solid #00ff00;
padding: 15px 0;
z-index: 100;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.logo {
font-size: 16px;
color: #00ff00;
text-shadow: 2px 2px 0 #004400;
}
.nav-links {
display: flex;
gap: 30px;
}
.nav-links a {
color: #00ff00;
text-decoration: none;
font-size: 10px;
transition: all 0.3s ease;
}
.nav-links a:hover {
text-shadow: 0 0 10px #00ff00;
transform: scale(1.1);
}
main {
margin-top: 80px;
}
.hero {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background:
radial-gradient(circle at 20% 50%, rgba(0, 255, 0, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 50%, rgba(0, 100, 255, 0.1) 0%, transparent 50%),
#0a0a0a;
position: relative;
}
.hero-content {
text-align: center;
max-width: 800px;
padding: 40px;
border: 3px solid #00ff00;
background: rgba(0, 0, 0, 0.8);
margin: 20px;
}
.hero h1 {
font-size: 24px;
margin-bottom: 20px;
text-shadow: 3px 3px 0 #004400;
line-height: 1.4;
}
.hero p {
font-size: 12px;
margin-bottom: 30px;
color: #ccffcc;
line-height: 1.6;
}
.cta-buttons {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
}
.features {
padding: 80px 20px;
background: linear-gradient(45deg, #001100, #000a00);
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.section-title {
text-align: center;
font-size: 20px;
margin-bottom: 60px;
color: #00ff00;
text-shadow: 2px 2px 0 #004400;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 40px;
}
.feature-card {
background: rgba(0, 0, 0, 0.8);
border: 2px solid #00ff00;
padding: 30px;
text-align: center;
transition: all 0.3s ease;
}
.feature-card:hover {
transform: translateY(-10px);
box-shadow: 0 10px 30px rgba(0, 255, 0, 0.3);
}
.feature-icon {
font-size: 32px;
margin-bottom: 20px;
display: block;
}
.feature-card h3 {
font-size: 14px;
margin-bottom: 15px;
color: #00ff00;
}
.feature-card p {
font-size: 10px;
color: #ccffcc;
line-height: 1.5;
}
.pricing {
padding: 80px 20px;
background: #0a0a0a;
}
.pricing-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
margin-top: 60px;
}
.pricing-card {
background: rgba(0, 0, 0, 0.9);
border: 3px solid #00ff00;
padding: 40px 20px;
text-align: center;
position: relative;
transition: all 0.3s ease;
}
.pricing-card.popular {
border-color: #ffff00;
transform: scale(1.05);
}
.pricing-card.popular::before {
content: "MOST POPULAR";
position: absolute;
top: -15px;
left: 50%;
transform: translateX(-50%);
background: #ffff00;
color: #000;
padding: 5px 15px;
font-size: 8px;
}
.pricing-card:hover {
transform: translateY(-10px) scale(1.02);
box-shadow: 0 20px 40px rgba(0, 255, 0, 0.2);
}
.plan-name {
font-size: 16px;
margin-bottom: 20px;
color: #00ff00;
}
.plan-price {
font-size: 24px;
margin-bottom: 30px;
color: #ffffff;
}
.plan-features {
list-style: none;
margin-bottom: 30px;
}
.plan-features li {
font-size: 10px;
margin-bottom: 10px;
color: #ccffcc;
position: relative;
padding-left: 20px;
}
.plan-features li::before {
content: "✓";
position: absolute;
left: 0;
color: #00ff00;
}
.footer {
background: #000;
border-top: 2px solid #00ff00;
padding: 40px 20px;
text-align: center;
}
.footer p {
font-size: 10px;
color: #ccffcc;
}
@media (max-width: 768px) {
.hero h1 {
font-size: 18px;
}
.hero p {
font-size: 10px;
}
.cta-buttons {
flex-direction: column;
align-items: center;
}
.nav-links {
display: none;
}
}
.scroll-indicator {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
color: #00ff00;
font-size: 12px;
animation: bounce 2s infinite;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
40% { transform: translateX(-50%) translateY(-10px); }
60% { transform: translateX(-50%) translateY(-5px); }
}
</style>
</head>
<body>
<div class="scanlines"></div>
<header>
<nav>
<div class="logo glitch">PIXELCOMMERCE</div>
<div class="nav-links">
<a href="#features">FEATURES</a>
<a href="#pricing">PRICING</a>
<a href="#demo">DEMO</a>
<a href="#contact">CONTACT</a>
</div>
</nav>
</header>
<main>
<section class="hero">
<div class="hero-content pixel-border">
<h1 class="glitch">BUILD YOUR PIXEL EMPIRE</h1>
<p>The ultimate 16-bit inspired ecommerce platform. Create stunning retro online stores that customers will never forget. Experience the nostalgia of classic gaming combined with modern ecommerce power.</p>
<div class="cta-buttons">
<button class="pixel-button" onclick="startDemo()">START QUEST</button>
<button class="pixel-button" onclick="showPricing()">VIEW PRICING</button>
</div>
</div>
<div class="scroll-indicator">▼ SCROLL TO CONTINUE ▼</div>
</section>
<section class="features" id="features">
<div class="container">
<h2 class="section-title glitch">POWER-UPS & FEATURES</h2>
<div class="features-grid">
<div class="feature-card pixel-border">
<span class="feature-icon">🛒</span>
<h3>RETRO CART SYSTEM</h3>
<p>Pixel-perfect shopping cart with 8-bit sound effects and smooth animations that transport customers back to the golden age of gaming.</p>
</div>
<div class="feature-card pixel-border">
<span class="feature-icon">💳</span>
<h3>SECURE PAYMENTS</h3>
<p>Bank-grade security with a retro twist. Process payments faster than collecting coins in your favorite platformer game.</p>
</div>
<div class="feature-card pixel-border">
<span class="feature-icon">📊</span>
<h3>PIXEL ANALYTICS</h3>
<p>Track your sales, inventory, and customer data with beautiful 16-bit styled charts and graphs that make data analysis fun.</p>
</div>
<div class="feature-card pixel-border">
<span class="feature-icon">🎮</span>
<h3>GAMIFIED UX</h3>
<p>Turn shopping into an adventure with achievement badges, loyalty points, and interactive elements that engage customers.</p>
</div>
<div class="feature-card pixel-border">
<span class="feature-icon">📱</span>
<h3>MOBILE READY</h3>
<p>Pixel-perfect responsive design that looks amazing on all devices, from Game Boys to modern smartphones.</p>
</div>
<div class="feature-card pixel-border">
<span class="feature-icon">⚡</span>
<h3>LIGHTNING FAST</h3>
<p>Optimized for speed with caching, CDN, and performance features that load faster than pressing the start button.</p>
</div>
</div>
</div>
</section>
<section class="pricing" id="pricing">
<div class="container">
<h2 class="section-title glitch">CHOOSE YOUR LEVEL</h2>
<div class="pricing-grid">
<div class="pricing-card pixel-border">
<h3 class="plan-name">NOVICE</h3>
<div class="plan-price">$29/mo</div>
<ul class="plan-features">
<li>Up to 100 products</li>
<li>Basic retro themes</li>
<li>Standard support</li>
<li>Mobile responsive</li>
<li>SSL certificate</li>
</ul>
<button class="pixel-button" onclick="selectPlan('novice')">SELECT NOVICE</button>
</div>
<div class="pricing-card pixel-border popular">
<h3 class="plan-name">WARRIOR</h3>
<div class="plan-price">$79/mo</div>
<ul class="plan-features">
<li>Unlimited products</li>
<li>Premium retro themes</li>
<li>Priority support</li>
<li>Advanced analytics</li>
<li>Custom 8-bit sounds</li>
<li>SEO optimization</li>
</ul>
<button class="pixel-button" onclick="selectPlan('warrior')">SELECT WARRIOR</button>
</div>
<div class="pricing-card pixel-border">
<h3 class="plan-name">LEGEND</h3>
<div class="plan-price">$199/mo</div>
<ul class="plan-features">
<li>Everything in Warrior</li>
<li>White-label solution</li>
<li>Custom integrations</li>
<li>Dedicated account manager</li>
<li>Advanced customization</li>
<li>Multi-store management</li>
</ul>
<button class="pixel-button" onclick="selectPlan('legend')">SELECT LEGEND</button>
</div>
</div>
</div>
</section>
</main>
<footer class="footer">
<div class="container">
<p>© 2025 PIXELCOMMERCE. ALL RIGHTS RESERVED. PRESS START TO BEGIN YOUR JOURNEY.</p>
</div>
</footer>
<script>
function startDemo() {
alert('🎮 DEMO LOADING... \n\nPrepare to experience the ultimate retro ecommerce platform!\n\n[This would normally redirect to your demo]');
}
function showPricing() {
document.getElementById('pricing').scrollIntoView({ behavior: 'smooth' });
}
function selectPlan(plan) {
alert(`🎯 PLAN SELECTED: ${plan.toUpperCase()}\n\nInitiating signup sequence...\n\n[This would normally redirect to your signup page]`);
}
// Add some interactive pixel dust effect
document.addEventListener('mousemove', function(e) {
if (Math.random() > 0.95) {
createPixelDust(e.clientX, e.clientY);
}
});
function createPixelDust(x, y) {
const dust = document.createElement('div');
dust.style.position = 'fixed';
dust.style.left = x + 'px';
dust.style.top = y + 'px';
dust.style.width = '4px';
dust.style.height = '4px';
dust.style.background = '#00ff00';
dust.style.pointerEvents = 'none';
dust.style.zIndex = '999';
dust.style.transition = 'all 1s ease-out';
document.body.appendChild(dust);
setTimeout(() => {
dust.style.opacity = '0';
dust.style.transform = 'translate(' + (Math.random() * 100 - 50) + 'px, ' + (Math.random() * 100 - 50) + 'px)';
}, 10);
setTimeout(() => {
document.body.removeChild(dust);
}, 1000);
}
// Add typing effect to hero title
const heroTitle = document.querySelector('.hero h1');
const originalText = heroTitle.textContent;
heroTitle.textContent = '';
let i = 0;
function typeWriter() {
if (i < originalText.length) {
heroTitle.textContent += originalText.charAt(i);
i++;
setTimeout(typeWriter, 100);
}
}
// Start typing effect after page loads
window.addEventListener('load', () => {
setTimeout(typeWriter, 1000);
});
// Add retro beep sounds (visual feedback only since we can't play actual audio)
document.querySelectorAll('.pixel-button').forEach(button => {
button.addEventListener('click', function() {
this.style.transform = 'scale(0.95)';
setTimeout(() => {
this.style.transform = 'scale(1.05)';
}, 100);
setTimeout(() => {
this.style.transform = 'scale(1)';
}, 200);
});
});
</script>
</body>
</html>Gemini 2.5 Pro
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your E-commerce SaaS</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
<style>
/* --- Root Variables & Basic Setup --- */
:root {
--primary-color: #4b5320; /* Army Green */
--secondary-color: #d2b48c; /* Tan */
--accent-color: #ff4500; /* OrangeRed */
--bg-color: #f5f5dc; /* Beige */
--font-color: #36454f; /* Charcoal */
--border-color: #36454f;
--font-family: 'Press Start 2P', cursive;
}
body {
background-color: var(--bg-color);
color: var(--font-color);
font-family: var(--font-family);
line-height: 1.6;
margin: 0;
padding: 20px;
-webkit-font-smoothing: none; /* Keep fonts pixelated */
-moz-osx-font-smoothing: grayscale;
}
.container {
max-width: 960px;
margin: 0 auto;
padding: 20px;
}
/* --- Typography & Links --- */
h1, h2, h3 {
color: var(--primary-color);
text-align: center;
}
h1 {
font-size: 2.5rem;
margin-bottom: 10px;
}
h2 {
font-size: 2rem;
margin-bottom: 40px;
text-decoration: underline;
text-decoration-color: var(--accent-color);
text-underline-offset: 8px;
}
p {
text-align: center;
font-size: 0.9rem;
}
a {
color: var(--primary-color);
text-decoration: none;
}
a:hover {
color: var(--accent-color);
text-decoration: underline;
}
/* --- Header & Navigation --- */
header {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 20px;
border-bottom: 4px solid var(--border-color);
flex-wrap: wrap; /* Allows wrapping on small screens */
}
.logo {
font-size: 1.5rem;
font-weight: bold;
flex-shrink: 0; /* Prevents logo from shrinking */
}
nav {
margin-top: 10px;
}
nav a {
margin-left: 20px;
font-size: 1rem;
}
@media (max-width: 600px) {
header {
flex-direction: column;
align-items: center;
}
.logo {
margin-bottom: 15px;
}
nav a {
margin: 0 10px;
}
}
/* --- Buttons --- */
.btn {
display: inline-block;
background-color: var(--secondary-color);
color: var(--font-color);
padding: 12px 24px;
border: 3px solid var(--border-color);
box-shadow: 4px 4px 0 var(--border-color);
text-decoration: none;
transition: all 0.1s ease-in-out;
}
.btn:hover {
background-color: #c1a37c; /* Darker tan */
transform: translate(2px, 2px);
box-shadow: 2px 2px 0 var(--border-color);
text-decoration: none;
}
.btn-primary {
background-color: var(--accent-color);
color: var(--bg-color);
}
.btn-primary:hover {
background-color: #e03e00; /* Darker OrangeRed */
}
/* --- Hero Section --- */
.hero {
text-align: center;
padding: 60px 20px;
}
.hero p {
max-width: 600px;
margin: 20px auto 30px;
}
.hero-image {
margin-top: 40px;
border: 4px solid var(--border-color);
}
.hero-image img {
max-width: 100%;
height: auto;
display: block;
}
/* --- Features Section --- */
.section {
padding: 60px 0;
}
.feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
}
.feature-card {
background: var(--bg-color);
border: 4px solid var(--border-color);
padding: 30px;
text-align: center;
}
.feature-card .icon {
font-size: 2.5rem;
color: var(--accent-color);
margin-bottom: 10px;
}
.feature-card h3 {
font-size: 1.2rem;
margin-bottom: 10px;
}
.feature-card p {
font-size: 0.8rem;
}
/* --- Pricing Section --- */
.pricing-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
justify-content: center;
}
.pricing-card {
border: 4px solid var(--border-color);
padding: 30px;
text-align: center;
position: relative;
background-color: var(--secondary-color);
display: flex;
flex-direction: column;
justify-content: space-between;
}
.pricing-card.highlighted {
background-color: var(--bg-color);
border-color: var(--accent-color);
transform: scale(1.05);
}
@media (max-width: 991px) and (min-width: 601px) {
.pricing-card.highlighted {
transform: none; /* Disable zoom effect on tablet to prevent layout shifts */
}
}
@media (max-width: 600px) {
.pricing-card.highlighted {
transform: none; /* Disable zoom effect on mobile */
}
}
.highlight-banner {
position: absolute;
top: -15px;
left: 50%;
transform: translateX(-50%);
background: var(--accent-color);
color: var(--bg-color);
padding: 5px 15px;
font-size: 0.8rem;
}
.price {
font-size: 2.5rem;
font-weight: bold;
color: var(--primary-color);
margin: 20px 0;
}
.price span {
font-size: 1rem;
font-weight: normal;
}
.pricing-card ul {
list-style: none;
padding: 0;
margin: 20px 0 30px;
text-align: left; /* Align list items left for readability */
}
.pricing-card li {
margin-bottom: 10px;
}
.pricing-card .btn {
margin-top: auto; /* Pushes button to the bottom */
}
/* --- Footer --- */
footer {
text-align: center;
padding: 40px 0;
margin-top: 40px;
border-top: 4px solid var(--border-color);
}
footer p {
font-size: 0.8rem;
}
</style>
</head>
<body>
<header class="container">
<div class="logo">YourStore OS</div>
<nav>
<a href="#features">Features</a>
<a href="#pricing">Pricing</a>
<a href="#">Login</a>
</nav>
</header>
<main class="container hero">
<h1>Level Up Your E-commerce Game</h1>
<p>The ultimate 16-bit toolkit to manage your online store. Simple. Powerful. Nostalgic.</p>
<a href="#" class="btn btn-primary">Start Your Quest!</a>
<div class="hero-image">
<img src="https://via.placeholder.com/400x200.png?text=Product+Pixel+Art" alt="Pixel art of e-commerce dashboard">
</div>
</main>
<section id="features" class="container section">
<h2>System Features</h2>
<div class="feature-grid">
<div class="feature-card">
<div class="icon">[+]</div>
<h3>Inventory Sync</h3>
<p>Sync stock across all your channels automatically.</p>
</div>
<div class="feature-card">
<div class="icon">[$]</div>
<h3>Sales Dashboard</h3>
<p>Track your earnings with retro-style charts.</p>
</div>
<div class="feature-card">
<div class="icon">[*]</div>
<h3>Customer Support</h3>
<p>Manage customer tickets like a classic RPG quest log.</p>
</div>
</div>
</section>
<section id="pricing" class="container section">
<h2>Choose Your Player</h2>
<div class="pricing-grid">
<div class="pricing-card">
<div>
<h3>Player 1</h3>
<div class="price">$19<span>/mo</span></div>
<ul>
<li>- 100 Products</li>
<li>- Basic Analytics</li>
<li>- Community Support</li>
</ul>
</div>
<a href="#" class="btn">Select Plan</a>
</div>
<div class="pricing-card highlighted">
<div class="highlight-banner">POPULAR</div>
<div>
<h3>Player 2</h3>
<div class="price">$49<span>/mo</span></div>
<ul>
<li>- Unlimited Products</li>
<li>- Advanced Analytics</li>
<li>- Email & Chat Support</li>
</ul>
</div>
<a href="#" class="btn btn-primary">Select Plan</a>
</div>
<div class="pricing-card">
<div>
<h3>Player 3</h3>
<div class="price">$99<span>/mo</span></div>
<ul>
<li>- All of Player 2</li>
<li>- API Access</li>
<li>- Dedicated Manager</li>
</ul>
</div>
<a href="#" class="btn">Select Plan</a>
</div>
</div>
</section>
<footer class="container">
<p>Press Start to Continue © 2025 YourStore OS</p>
<p><a href="#">Terms of Service</a> | <a href="#">Privacy Policy</a></p>
</footer>
</body>
</html>Task 2: Create a Colourful and animated weather card that shows current weather conditions including temperature, rainy/cloudy/sunny, wind speed, and other stuff.
Gemini 2.5 Pro
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Weather Card</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
<style>
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(to bottom, #0f0c29, #302b63, #24243e); /* Deep blue/purple gradient */
font-family: 'Poppins', sans-serif;
color: #fff;
margin: 0;
padding: 20px; /* Add some padding for smaller screens */
box-sizing: border-box;
}
.weather-card {
background: rgba(255, 255, 255, 0.1); /* Frosted glass effect */
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px); /* For Safari */
border-radius: 25px;
padding: 25px 30px;
width: 100%;
max-width: 380px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
text-align: center;
border: 1px solid rgba(255, 255, 255, 0.2);
animation: floatCard 6s ease-in-out infinite;
overflow: hidden; /* Ensures nothing spills out awkwardly */
}
@keyframes floatCard {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-12px); }
}
.location-info .city {
font-size: 1.7em; /* Adjusted for better fit */
font-weight: 600;
margin-bottom: 3px;
color: #f0e68c; /* Khaki for city */
}
.location-info .date {
font-size: 0.85em;
color: #b0c4de; /* LightSteelBlue */
margin-bottom: 18px;
}
/* --- Weather Icon & Animation (Clear Night) --- */
.weather-icon-container {
position: relative;
width: 140px; /* Adjusted */
height: 120px; /* Adjusted */
margin: 0 auto 15px auto; /* Adjusted margin */
}
.moon {
width: 80px; /* Adjusted */
height: 80px; /* Adjusted */
background-color: #f5f3ce; /* Pale yellow for moon */
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 0 15px #f5f3ce, 0 0 25px #f5f3ceaa, 0 0 35px #f5f3ce55;
animation: moonGlow 3s infinite alternate;
}
@keyframes moonGlow {
from { box-shadow: 0 0 12px #f5f3ce, 0 0 20px #f5f3ceaa, 0 0 30px #f5f3ce55; }
to { box-shadow: 0 0 20px #f5f3ce, 0 0 35px #f5f3ceaa, 0 0 45px #f5f3ce55; }
}
.moon .crater {
position: absolute;
background-color: #dcdcdc; /* Light grey for craters */
border-radius: 50%;
opacity: 0.5;
}
.moon .crater1 { width: 15px; height: 15px; top: 15px; left: 40px; } /* Adjusted */
.moon .crater2 { width: 12px; height: 12px; top: 40px; left: 15px; } /* Adjusted */
.moon .crater3 { width: 18px; height: 18px; top: 45px; left: 50px; } /* Adjusted */
.stars {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.star {
position: absolute;
background-color: #fff;
border-radius: 50%;
animation: twinkle 1.5s infinite alternate;
box-shadow: 0 0 5px #fff, 0 0 8px #fff;
}
.star1 { width: 2px; height: 2px; top: 15%; left: 10%; animation-delay: 0s; }
.star2 { width: 3px; height: 3px; top: 25%; left: 85%; animation-delay: 0.5s; }
.star3 { width: 1px; height: 1px; top: 65%; left: 5%; animation-delay: 1s; }
.star4 { width: 2px; height: 2px; top: 75%; left: 60%; animation-delay: 0.2s; }
.star5 { width: 2px; height: 2px; top: 5%; left: 40%; animation-delay: 0.8s; }
.star6 { width: 1px; height: 1px; top: 90%; left: 90%; animation-delay: 0.3s; }
@keyframes twinkle {
0% { opacity: 0.4; transform: scale(0.7); }
100% { opacity: 1; transform: scale(1); }
}
/* --- Weather Details --- */
.weather-details .temperature {
font-size: 3.8em; /* Adjusted */
font-weight: 700;
margin: 0;
line-height: 1;
color: #fff; /* Bright white for temp */
text-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}
.weather-details .degree {
font-size: 0.4em; /* Adjusted */
vertical-align: top;
margin-left: 2px;
}
.weather-details .condition {
font-size: 1.3em; /* Adjusted */
font-weight: 400;
color: #add8e6; /* Light blue for condition */
margin: 5px 0 8px 0; /* Adjusted */
}
.weather-details .feels-like {
font-size: 0.9em;
color: #d3d3d3; /* Light grey */
margin-bottom: 20px;
}
/* --- Additional Info --- */
.additional-info {
display: flex;
justify-content: space-around;
align-items: flex-start; /* Align items to the top */
border-top: 1px solid rgba(255, 255, 255, 0.2);
padding-top: 18px;
}
.additional-info .info-item {
text-align: center;
flex: 1; /* Distribute space evenly */
}
.additional-info .info-item i {
font-size: 1.3em; /* Adjusted */
margin-bottom: 6px;
color: #87ceeb; /* Sky blue for icons */
}
.additional-info .info-item p {
font-size: 0.8em; /* Adjusted */
margin: 0;
line-height: 1.3;
}
/* Wind Animation */
.wind-animation {
position: relative;
width: 40px;
height: 16px;
margin-top: 4px;
margin-left: auto;
margin-right: auto;
}
.wind-line {
position: absolute;
height: 1.5px; /* Adjusted */
background-color: #b0e0e6; /* Powder blue */
border-radius: 1px;
opacity: 0;
animation: blowWind 2.2s infinite ease-out;
}
.wind-line:nth-child(1) {
width: 25px;
top: 0;
animation-delay: 0s;
}
.wind-line:nth-child(2) {
width: 35px;
top: 7px; /* Adjusted */
animation-delay: 0.35s;
}
.wind-line:nth-child(3) {
width: 20px;
top: 14px; /* Adjusted */
animation-delay: 0.7s;
}
@keyframes blowWind {
0% { transform: translateX(-25px) scaleX(0.4); opacity: 0; }
20% { opacity: 0.7; }
80% { opacity: 0.7; }
100% { transform: translateX(25px) scaleX(0.4); opacity: 0; }
}
/*
// --- ALTERNATIVE ICON ANIMATIONS (Conceptual - for use with JavaScript) ---
// Sunny Icon Example
.sun {
width: 100px; height: 100px;
background: radial-gradient(circle, #FFD700 50%, #FFA500 100%);
border-radius: 50%;
position: relative;
margin: 20px auto;
box-shadow: 0 0 30px #FFD700, 0 0 40px #FF8C00;
animation: pulseSun 2s infinite ease-in-out, rotateSun 20s linear infinite;
}
@keyframes pulseSun {
0%, 100% { transform: scale(1); box-shadow: 0 0 30px #FFD700, 0 0 40px #FF8C00;}
50% { transform: scale(1.1); box-shadow: 0 0 40px #FFD700, 0 0 60px #FF8C00;}
}
@keyframes rotateSun {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
// For sun rays, you might add pseudo-elements or SVG.
// Cloudy Icon Example
.cloud-icon-group {
position: relative;
width: 150px; height: 100px;
margin: 10px auto;
}
.cloud {
width: 100px; height: 60px;
background: #f0f8ff;
border-radius: 30px;
position: absolute;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
animation: drift 15s infinite linear alternate;
}
.cloud.main { top: 20px; left: 25px; opacity: 0.9; }
.cloud.small1 { width: 70px; height: 40px; top: 0px; left: 10px; animation-duration: 20s; opacity: 0.7;}
.cloud.small2 { width: 80px; height: 50px; top: 40px; left: 50px; animation-duration: 18s; opacity: 0.8;}
.cloud::before, .cloud::after {
content: '';
position: absolute;
background: #f0f8ff;
border-radius: 50%;
box-shadow: inset -2px -3px 5px rgba(0,0,0,0.05);
}
.cloud.main::before { width: 50px; height: 50px; top: -25px; left: 15px; }
.cloud.main::after { width: 70px; height: 70px; top: -20px; right: 5px; }
@keyframes drift {
from { transform: translateX(-15px); }
to { transform: translateX(15px); }
}
// Rainy Icon Example
.rain-container {
position: relative;
width: 120px;
height: 120px;
margin: 0 auto;
}
.rainy-cloud { // A darker cloud for rain
width: 100px; height: 60px; background: #b0c4de; border-radius: 30px;
position: absolute; top: 0; left: 10px; z-index: 1;
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.rainy-cloud::before { content:''; position:absolute; background: #b0c4de; border-radius:50%; width:50px; height:50px; top:-25px; left:15px;}
.rainy-cloud::after { content:''; position:absolute; background: #b0c4de; border-radius:50%; width:70px; height:70px; top:-20px; right:5px;}
.raindrop {
position: absolute;
bottom: 10px;
width: 2px;
height: 12px;
background-color: #87cefa;
border-radius: 0 0 5px 5px;
animation: fall 0.7s linear infinite;
opacity: 0;
transform-origin: top center;
}
@keyframes fall {
0% { transform: translateY(-80px) scaleY(0.5); opacity: 0; }
10% { opacity: 1; }
90% { opacity: 1; }
100% { transform: translateY(20px) scaleY(1); opacity: 0; }
}
// Example raindrops - add more with different delays and left positions
// .raindrop:nth-child(1) { left: 20%; animation-delay: 0s; }
// .raindrop:nth-child(2) { left: 40%; animation-delay: 0.2s; }
// .raindrop:nth-child(3) { left: 60%; animation-delay: 0.1s; }
*/
</style>
</head>
<body>
<div class="weather-card">
<div class="location-info">
<p class="city">Gurugram, Haryana</p>
<p class="date" id="current-datetime">Friday, May 23, 2025, 12:25 AM</p>
</div>
<div class="weather-icon-container">
<div class="moon">
<div class="crater crater1"></div>
<div class="crater crater2"></div>
<div class="crater crater3"></div>
</div>
<div class="stars">
<div class="star star1"></div>
<div class="star star2"></div>
<div class="star star3"></div>
<div class="star star4"></div>
<div class="star star5"></div>
<div class="star star6"></div>
</div>
</div>
<div class="weather-details">
<p class="temperature">30<span class="degree">°C</span></p>
<p class="condition">Clear Night</p>
<p class="feels-like">Feels like: 33°C</p>
</div>
<div class="additional-info">
<div class="info-item">
<i class="fas fa-wind"></i>
<p class="wind">14 km/h SE</p>
<div class="wind-animation">
<div class="wind-line"></div>
<div class="wind-line"></div>
<div class="wind-line"></div>
</div>
</div>
<div class="info-item">
<i class="fas fa-tint"></i> <p class="humidity">Humidity: 60%</p>
</div>
<div class="info-item">
<i class="fas fa-cloud-moon-rain"></i> <p class="precipitation">Precip: Low</p>
</div>
</div>
</div>
<script>
// Simple script to update date/time to be current when the page loads
// (Optional - current values are hardcoded as per scenario)
function updateDateTime() {
const now = new Date();
const optionsDate = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
const dateString = now.toLocaleDateString('en-US', optionsDate);
const timeString = now.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hour12: true });
// document.getElementById('current-datetime').textContent = `${dateString}, ${timeString}`;
// For this example, we are keeping the date fixed to the scenario.
// If you want a live updating clock, uncomment the line above.
}
// updateDateTime(); // Call if you want to use actual current client time
</script>
</body>
</html>Output:
Claude Sonnet 4
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Weather Card</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.weather-card {
background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 50%, #fecfef 100%);
border-radius: 25px;
padding: 30px;
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.2);
max-width: 400px;
width: 100%;
position: relative;
overflow: hidden;
animation: cardFloat 6s ease-in-out infinite;
}
@keyframes cardFloat {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
}
.weather-card::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: conic-gradient(from 0deg, transparent, rgba(255,255,255,0.1), transparent);
animation: rotate 4s linear infinite;
pointer-events: none;
}
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.card-content {
position: relative;
z-index: 2;
}
.location {
text-align: center;
margin-bottom: 20px;
}
.city {
font-size: 24px;
font-weight: 600;
color: #2d3748;
margin-bottom: 5px;
}
.date {
font-size: 14px;
color: #4a5568;
opacity: 0.8;
}
.main-weather {
text-align: center;
margin-bottom: 30px;
}
.weather-icon {
font-size: 80px;
margin-bottom: 15px;
display: block;
animation: bounce 2s ease-in-out infinite;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-10px); }
60% { transform: translateY(-5px); }
}
.temperature {
font-size: 48px;
font-weight: 700;
color: #2d3748;
margin-bottom: 10px;
animation: pulse 3s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
.weather-desc {
font-size: 18px;
color: #4a5568;
font-weight: 500;
text-transform: capitalize;
}
.weather-details {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
margin-top: 20px;
}
.detail-item {
background: rgba(255,255,255,0.2);
padding: 15px;
border-radius: 15px;
text-align: center;
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.3);
transition: transform 0.3s ease, box-shadow 0.3s ease;
animation: slideUp 0.6s ease forwards;
opacity: 0;
}
.detail-item:nth-child(1) { animation-delay: 0.1s; }
.detail-item:nth-child(2) { animation-delay: 0.2s; }
.detail-item:nth-child(3) { animation-delay: 0.3s; }
.detail-item:nth-child(4) { animation-delay: 0.4s; }
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.detail-item:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.detail-icon {
font-size: 24px;
margin-bottom: 8px;
display: block;
}
.detail-value {
font-size: 18px;
font-weight: 600;
color: #2d3748;
margin-bottom: 5px;
}
.detail-label {
font-size: 12px;
color: #4a5568;
opacity: 0.8;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.feels-like {
text-align: center;
margin-top: 20px;
padding: 15px;
background: rgba(255,255,255,0.15);
border-radius: 15px;
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.2);
}
.feels-like-text {
font-size: 14px;
color: #4a5568;
margin-bottom: 5px;
}
.feels-like-temp {
font-size: 20px;
font-weight: 600;
color: #2d3748;
}
.clouds {
position: absolute;
top: 20px;
right: 20px;
opacity: 0.1;
animation: drift 8s ease-in-out infinite;
}
@keyframes drift {
0%, 100% { transform: translateX(0px); }
50% { transform: translateX(10px); }
}
.weather-bg-sunny {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}
.weather-bg-cloudy {
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}
.weather-bg-rainy {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.rain-animation {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
overflow: hidden;
}
.rain-drop {
position: absolute;
background: rgba(255,255,255,0.6);
width: 2px;
animation: rain-fall linear infinite;
}
@keyframes rain-fall {
0% {
transform: translateY(-100vh);
opacity: 1;
}
100% {
transform: translateY(100vh);
opacity: 0;
}
}
.update-btn {
position: absolute;
top: 15px;
right: 15px;
background: rgba(255,255,255,0.2);
border: none;
border-radius: 50%;
width: 40px;
height: 40px;
cursor: pointer;
font-size: 16px;
color: #2d3748;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.update-btn:hover {
background: rgba(255,255,255,0.3);
transform: rotate(180deg);
}
</style>
</head>
<body>
<div class="weather-card" id="weatherCard">
<div class="rain-animation" id="rainAnimation"></div>
<div class="clouds">☁️</div>
<button class="update-btn" onclick="updateWeather()" title="Refresh Weather">🔄</button>
<div class="card-content">
<div class="location">
<div class="city" id="cityName">San Francisco</div>
<div class="date" id="currentDate">Friday, May 23, 2025</div>
</div>
<div class="main-weather">
<span class="weather-icon" id="weatherIcon">☀️</span>
<div class="temperature" id="temperature">24°C</div>
<div class="weather-desc" id="weatherDesc">Sunny</div>
</div>
<div class="weather-details">
<div class="detail-item">
<span class="detail-icon">💨</span>
<div class="detail-value" id="windSpeed">12 km/h</div>
<div class="detail-label">Wind Speed</div>
</div>
<div class="detail-item">
<span class="detail-icon">💧</span>
<div class="detail-value" id="humidity">65%</div>
<div class="detail-label">Humidity</div>
</div>
<div class="detail-item">
<span class="detail-icon">👁️</span>
<div class="detail-value" id="visibility">10 km</div>
<div class="detail-label">Visibility</div>
</div>
<div class="detail-item">
<span class="detail-icon">🌡️</span>
<div class="detail-value" id="pressure">1013 hPa</div>
<div class="detail-label">Pressure</div>
</div>
</div>
<div class="feels-like">
<div class="feels-like-text">Feels like</div>
<div class="feels-like-temp" id="feelsLike">26°C</div>
</div>
</div>
</div>
<script>
const weatherData = [
{
city: "San Francisco",
temp: 24,
feelsLike: 26,
condition: "sunny",
icon: "☀️",
desc: "Sunny",
wind: 12,
humidity: 65,
visibility: 10,
pressure: 1013,
bg: "weather-bg-sunny"
},
{
city: "London",
temp: 18,
feelsLike: 16,
condition: "cloudy",
icon: "☁️",
desc: "Cloudy",
wind: 8,
humidity: 78,
visibility: 8,
pressure: 1008,
bg: "weather-bg-cloudy"
},
{
city: "Tokyo",
temp: 22,
feelsLike: 25,
condition: "rainy",
icon: "🌧️",
desc: "Light Rain",
wind: 15,
humidity: 85,
visibility: 5,
pressure: 1005,
bg: "weather-bg-rainy"
},
{
city: "Sydney",
temp: 28,
feelsLike: 31,
condition: "sunny",
icon: "☀️",
desc: "Sunny",
wind: 20,
humidity: 55,
visibility: 12,
pressure: 1018,
bg: "weather-bg-sunny"
},
{
city: "Mumbai",
temp: 32,
feelsLike: 38,
condition: "cloudy",
icon: "⛅",
desc: "Partly Cloudy",
wind: 18,
humidity: 72,
visibility: 9,
pressure: 1010,
bg: "weather-bg-cloudy"
}
];
let currentIndex = 0;
function updateWeatherDisplay(data) {
document.getElementById('cityName').textContent = data.city;
document.getElementById('temperature').textContent = `${data.temp}°C`;
document.getElementById('weatherIcon').textContent = data.icon;
document.getElementById('weatherDesc').textContent = data.desc;
document.getElementById('windSpeed').textContent = `${data.wind} km/h`;
document.getElementById('humidity').textContent = `${data.humidity}%`;
document.getElementById('visibility').textContent = `${data.visibility} km`;
document.getElementById('pressure').textContent = `${data.pressure} hPa`;
document.getElementById('feelsLike').textContent = `${data.feelsLike}°C`;
const card = document.getElementById('weatherCard');
card.className = 'weather-card ' + data.bg;
// Handle rain animation
const rainAnimation = document.getElementById('rainAnimation');
if (data.condition === 'rainy') {
createRainDrops();
} else {
rainAnimation.innerHTML = '';
}
}
function createRainDrops() {
const rainAnimation = document.getElementById('rainAnimation');
rainAnimation.innerHTML = '';
for (let i = 0; i < 50; i++) {
const drop = document.createElement('div');
drop.className = 'rain-drop';
drop.style.left = Math.random() * 100 + '%';
drop.style.height = Math.random() * 20 + 10 + 'px';
drop.style.animationDuration = Math.random() * 1 + 0.5 + 's';
drop.style.animationDelay = Math.random() * 2 + 's';
rainAnimation.appendChild(drop);
}
}
function updateWeather() {
currentIndex = (currentIndex + 1) % weatherData.length;
updateWeatherDisplay(weatherData[currentIndex]);
}
// Update date
function updateDate() {
const now = new Date();
const options = {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric'
};
document.getElementById('currentDate').textContent = now.toLocaleDateString('en-US', options);
}
// Auto-update weather every 5 seconds for demo
setInterval(updateWeather, 5000);
// Initialize
updateDate();
updateWeatherDisplay(weatherData[currentIndex]);
</script>
</body>
</html>Output:
For both tasks, I would prefer Claude Sonnet 4 due to its more comprehensive features and better interactivity.
Which Should You Choose?
| Use Case | Recommended Model |
|---|---|
| Deep, multi-step coding | Claude Opus 4 (unrivaled SWE-bench & terminal-bench scores) |
| Lightweight coding | Claude Sonnet 4 (cost-effective, instant upgrade over Sonnet 3.7) |
| Complex reasoning & math | Opus 4 (highest AIME), but Gemini 2.5 Pro excels at high-school math tasks |
| Multi-modal tasks | Gemini 2.5 Pro (strongest visual reasoning) |
| Tool-driven agents | Claude 4 (early, robust APIs and parallel tool use) |
| Budget constraints | Sonnet 4 (≈20% cost of Opus 4, with solid capability trade-offs) |
Claude 4 has just been released, and while excitement around its potential is understandable, it's important to avoid jumping to conclusions about its capabilities before thorough testing and independent evaluations are available. Also, the context window might be the issue in coming days but early assumptions—whether optimistic or critical—can often misrepresent what the model can actually do in real-world scenarios. As with any new AI system, a balanced approach rooted in actual performance data and practical use cases is far more valuable than speculation. Let's give it time to be properly explored and understood.
How to Access Claude 4 API?
First get the API from: https://console.anthropic.com/settings/keys
Then begin with the code:
pip install anthropicimport anthropic
client = anthropic.Anthropic()
message = client.messages.create(
model="claude-opus-4-20250514",
max_tokens=1000,
temperature=1,
system="You are a world-class poet. Respond only with short poems.",
messages=[
{
"role": "user",
"content": [
{
"type": "text",
"text": "Why is the ocean salty?"
}
]
}
]
)
print(message.content)Output:
[TextBlock(text="The ocean's salty brine,\nA tale of time and design.\nRocks and rivers, their minerals shed,\nAccumulating in the ocean's bed.\nEvaporation leaves salt behind,\nIn the vast waters, forever enshrined.", type='text')]
Conclusion
The release of Claude Opus 4 and Claude Sonnet 4 marks a leap forward in AI capabilities—especially in coding and agent-driven workflows. Opus 4 sets a new gold standard for sustained, multi-step code generation and tool-augmented reasoning, while Sonnet 4 delivers an optimal blend of performance, cost-efficiency, and precision for everyday development tasks. Key innovations like parallel tool execution, extended thinking, and memory files unlock entirely new classes of applications, from long-running refactors to dynamic multi-modal assistants.
Meanwhile, Gemini 2.5 Pro continues to push the envelope in visual and multi-modal reasoning and holds its own on advanced math benchmarks. For teams whose workloads lean heavily on vision-driven research or specialized reasoning, Gemini 2.5 Pro is a powerful contender.
In the end, your choice depends on priorities:
- Cutting-edge coding & agent robustness: Claude Opus 4
- High performance at lower cost: Claude Sonnet 4
- Vision-centric, multi-modal research: Gemini 2.5 Pro
Whichever model you adopt, this era of fierce competition is driving rapid innovation—bringing truly intelligent AI assistants within reach for every developer and enterprise.
Streamline your Engineering Team
Get started with a Free Trial or Book A Demo with the founder
Building artificial
engineering intelligence.
Product
Home
Log In
Sign Up
Helpful Links
OSS Explore
PR Arena