ealemadi/myweb1
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add 3 HTML mockups

Browse Source
This commit is contained in:
ealemadi
2026-07-28 15:14:34 +03:00
parent 0920860b51
commit ba5c09bf50
3 changed files with 435 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
mockup1.html
+103
View File
@@ -0,0 +1,103 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MyWeb1 - AI Model Differences</title>
<link rel="stylesheet" href="css/style.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', sans-serif; background: #0f0f1a; color: #fff; }
.hero {
text-align: center;
padding: 100px 20px 60px;
background: linear-gradient(135deg, #0f0f1a 0%, #1a1a3e 50%, #0f0f1a 100%);
}
.hero h1 { font-size: 3rem; margin-bottom: 10px; }
.hero h1 span { color: #7c5cfc; }
.hero p { font-size: 1.2rem; color: #aaa; max-width: 600px; margin: 0 auto; }
.cards {
display: flex;
justify-content: center;
gap: 30px;
padding: 60px 20px;
flex-wrap: wrap;
max-width: 1200px;
margin: 0 auto;
}
.card {
background: #1a1a2e;
border: 1px solid #2a2a4a;
border-radius: 16px;
padding: 40px 30px;
width: 340px;
text-align: center;
transition: transform 0.3s, box-shadow 0.3s;
}
.card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(124, 92, 252, 0.15);
}
.card-icon { font-size: 3rem; margin-bottom: 20px; }
.card h3 { font-size: 1.4rem; margin-bottom: 12px; }
.card p { color: #999; line-height: 1.6; }
.table-section {
max-width: 1100px;
margin: 0 auto;
padding: 60px 20px;
}
.table-section h2 { text-align: center; font-size: 2rem; margin-bottom: 40px; color: #7c5cfc; }
table { width: 100%; border-collapse: collapse; background: #1a1a2e; border-radius: 12px; overflow: hidden; }
th { background: #7c5cfc; color: #fff; padding: 16px 20px; text-align: left; }
td { padding: 14px 20px; border-bottom: 1px solid #2a2a4a; color: #ccc; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: #22223a; }
footer { text-align: center; padding: 40px; color: #555; border-top: 1px solid #2a2a4a; }
</style>
</head>
<body>
<section class="hero">
<h1>AI <span>Model</span> Differences</h1>
<p>Explore how AI models compare in architecture, performance, and real-world capabilities.</p>
</section>
<section class="cards">
<div class="card">
<div class="card-icon">🧠</div>
<h3>Architecture</h3>
<p>Understand the structural differences between transformer, CNN, RNN, and hybrid models.</p>
</div>
<div class="card">
<div class="card-icon">⚡</div>
<h3>Performance</h3>
<p>Compare speed, accuracy, and resource usage across leading AI models.</p>
</div>
<div class="card">
<div class="card-icon">🎯</div>
<h3>Use Cases</h3>
<p>Discover which model works best for text, images, audio, and multimodal tasks.</p>
</div>
</section>
<section class="table-section">
<h2>Quick Comparison</h2>
<table>
<thead>
<tr><th>Model</th><th>Type</th><th>Best For</th><th>Parameters</th></tr>
</thead>
<tbody>
<tr><td>GPT-4</td><td>Transformer (LLM)</td><td>Text Generation</td><td>~1.7T</td></tr>
<tr><td>ResNet-50</td><td>CNN</td><td>Image Classification</td><td>25M</td></tr>
<tr><td>Whisper</td><td>Encoder-Decoder</td><td>Speech Recognition</td><td>1.5B</td></tr>
<tr><td>Stable Diffusion</td><td>Diffusion Model</td><td>Image Generation</td><td>~1B</td></tr>
</tbody>
</table>
</section>
<footer>MyWeb1 &copy; 2026</footer>
</body>
</html>
mockup2.html
+164
View File
@@ -0,0 +1,164 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MyWeb1 - AI Model Differences</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Helvetica Neue', sans-serif; background: #fafafa; color: #1a1a1a; }
nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 60px;
background: #fff;
border-bottom: 1px solid #eee;
position: sticky;
top: 0;
z-index: 10;
}
nav .logo { font-size: 1.5rem; font-weight: 700; color: #2563eb; }
nav ul { list-style: none; display: flex; gap: 30px; }
nav a { text-decoration: none; color: #555; font-weight: 500; }
nav a:hover { color: #2563eb; }
.hero {
display: flex;
align-items: center;
justify-content: space-between;
padding: 80px 60px;
max-width: 1200px;
margin: 0 auto;
}
.hero-text h1 { font-size: 3.2rem; line-height: 1.2; margin-bottom: 20px; }
.hero-text h1 span { color: #2563eb; }
.hero-text p { font-size: 1.1rem; color: #666; max-width: 480px; margin-bottom: 30px; line-height: 1.7; }
.hero-text .btn {
display: inline-block;
padding: 14px 36px;
background: #2563eb;
color: #fff;
border: none;
border-radius: 8px;
font-size: 1rem;
cursor: pointer;
text-decoration: none;
}
.hero-visual {
width: 400px; height: 400px;
background: linear-gradient(135deg, #2563eb, #7c3aed);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 8rem;
opacity: 0.9;
}
.features {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
padding: 80px 60px;
max-width: 1200px;
margin: 0 auto;
}
.feature { padding: 10px; }
.feature-num { font-size: 3rem; font-weight: 800; color: #2563eb; margin-bottom: 10px; }
.feature h3 { font-size: 1.3rem; margin-bottom: 10px; }
.feature p { color: #666; line-height: 1.7; }
.compare {
background: #fff;
padding: 80px 60px;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
}
.compare-inner { max-width: 1000px; margin: 0 auto; }
.compare h2 { font-size: 2rem; margin-bottom: 40px; }
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.compare-card {
border: 1px solid #eee;
border-radius: 12px;
padding: 30px;
transition: box-shadow 0.3s;
}
.compare-card:hover { box-shadow: 0 8px 30px rgba(0,0,0,0.08); }
.compare-card h4 { font-size: 1.2rem; margin-bottom: 8px; color: #2563eb; }
.compare-card .tag { display: inline-block; background: #eff6ff; color: #2563eb; padding: 4px 12px; border-radius: 20px; font-size: 0.8rem; margin-bottom: 12px; }
.compare-card p { color: #666; line-height: 1.6; }
footer { text-align: center; padding: 40px; color: #999; font-size: 0.9rem; }
</style>
</head>
<body>
<nav>
<div class="logo">MyWeb1</div>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Models</a></li>
<li><a href="#">Compare</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
<section class="hero">
<div class="hero-text">
<h1>Understanding<br><span>AI Models</span></h1>
<p>A deep dive into the differences between AI architectures, training methods, and real-world performance benchmarks.</p>
<a href="#" class="btn">Start Exploring</a>
</div>
<div class="hero-visual">🤖</div>
</section>
<section class="features">
<div class="feature">
<div class="feature-num">01</div>
<h3>Architecture Breakdown</h3>
<p>From transformers to CNNs, learn what makes each model type unique and how they process information differently.</p>
</div>
<div class="feature">
<div class="feature-num">02</div>
<h3>Benchmark Data</h3>
<p>Side-by-side performance metrics on standard benchmarks like MMLU, HumanEval, and ImageNet.</p>
</div>
<div class="feature">
<div class="feature-num">03</div>
<h3>Practical Insights</h3>
<p>Real-world guidance on choosing the right model for your specific application and budget.</p>
</div>
</section>
<section class="compare">
<div class="compare-inner">
<h2>Model Comparisons</h2>
<div class="compare-grid">
<div class="compare-card">
<span class="tag">Language</span>
<h4>GPT-4 vs Claude 3</h4>
<p>Both are frontier LLMs, but differ in context window size, reasoning style, and safety alignment approaches.</p>
</div>
<div class="compare-card">
<span class="tag">Vision</span>
<h4>GPT-4V vs Gemini</h4>
<p>Multi-modal models compared on image understanding, document parsing, and visual reasoning tasks.</p>
</div>
<div class="compare-card">
<span class="tag">Generation</span>
<h4>DALL-E vs Midjourney</h4>
<p>Image generation models compared on prompt adherence, artistic quality, and photorealism.</p>
</div>
<div class="compare-card">
<span class="tag">Open Source</span>
<h4>Llama 3 vs Mistral</h4>
<p>Open-weight models compared on efficiency, fine-tuning flexibility, and community support.</p>
</div>
</div>
</div>
</section>
<footer>MyWeb1 &copy; 2026</footer>
</body>
</html>
mockup3.html
+168
View File
@@ -0,0 +1,168 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MyWeb1 - AI Model Differences</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Inter', sans-serif; background: #111; color: #fff; }
.hero {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 40px 20px;
background: radial-gradient(ellipse at 50% 30%, #1a2a6c 0%, #111 70%);
}
.badge {
display: inline-block;
padding: 6px 18px;
border: 1px solid #333;
border-radius: 30px;
font-size: 0.85rem;
color: #aaa;
margin-bottom: 30px;
}
.badge span { color: #22d3ee; }
.hero h1 { font-size: 4rem; font-weight: 800; line-height: 1.1; margin-bottom: 20px; max-width: 700px; }
.hero h1 span { background: linear-gradient(90deg, #22d3ee, #a78bfa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.hero p { font-size: 1.15rem; color: #777; max-width: 550px; line-height: 1.7; margin-bottom: 40px; }
.hero-buttons { display: flex; gap: 16px; }
.btn-primary { padding: 14px 32px; background: #22d3ee; color: #000; border: none; border-radius: 8px; font-weight: 600; font-size: 1rem; cursor: pointer; }
.btn-secondary { padding: 14px 32px; background: transparent; color: #fff; border: 1px solid #444; border-radius: 8px; font-size: 1rem; cursor: pointer; }
.btn-secondary:hover { border-color: #22d3ee; color: #22d3ee; }
.grid-section {
max-width: 1200px;
margin: 0 auto;
padding: 80px 20px;
}
.section-header { text-align: center; margin-bottom: 60px; }
.section-header h2 { font-size: 2.2rem; margin-bottom: 12px; }
.section-header p { color: #666; font-size: 1.05rem; }
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.grid-item {
background: #1a1a1a;
border: 1px solid #222;
border-radius: 16px;
padding: 36px 28px;
transition: border-color 0.3s, transform 0.3s;
}
.grid-item:hover { border-color: #22d3ee; transform: translateY(-4px); }
.grid-item .icon {
width: 50px; height: 50px;
background: #22d3ee15;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
margin-bottom: 20px;
}
.grid-item h3 { font-size: 1.15rem; margin-bottom: 10px; }
.grid-item p { color: #777; line-height: 1.6; font-size: 0.95rem; }
.stats {
display: flex;
justify-content: center;
gap: 80px;
padding: 80px 20px;
border-top: 1px solid #1a1a1a;
border-bottom: 1px solid #1a1a1a;
}
.stat { text-align: center; }
.stat .num { font-size: 3rem; font-weight: 800; background: linear-gradient(90deg, #22d3ee, #a78bfa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.stat .label { color: #666; margin-top: 8px; font-size: 0.95rem; }
.cta {
text-align: center;
padding: 100px 20px;
}
.cta h2 { font-size: 2.5rem; margin-bottom: 16px; }
.cta p { color: #666; margin-bottom: 30px; font-size: 1.1rem; }
footer { text-align: center; padding: 30px; color: #444; font-size: 0.85rem; border-top: 1px solid #1a1a1a; }
</style>
</head>
<body>
<section class="hero">
<div class="badge">AI Research &middot; <span>Updated 2026</span></div>
<h1>The Differences Behind <span>AI Models</span></h1>
<p>An interactive guide to understanding how AI models differ in design, training, and output.</p>
<div class="hero-buttons">
<button class="btn-primary">Explore Models</button>
<button class="btn-secondary">View Comparisons</button>
</div>
</section>
<section class="grid-section">
<div class="section-header">
<h2>What You'll Learn</h2>
<p>Key areas where AI models differ from each other</p>
</div>
<div class="grid">
<div class="grid-item">
<div class="icon">🏗️</div>
<h3>Model Architecture</h3>
<p>Transformers, diffusion models, GANs, and more — how each processes data internally.</p>
</div>
<div class="grid-item">
<div class="icon">📊</div>
<h3>Training Data</h3>
<p>How dataset size, quality, and diversity shape model behavior and bias.</p>
</div>
<div class="grid-item">
<div class="icon">🔧</div>
<h3>Fine-Tuning</h3>
<p>RLHF, LoRA, and prompt engineering — adapting models to specific tasks.</p>
</div>
<div class="grid-item">
<div class="icon">📈</div>
<h3>Benchmarks</h3>
<p>Standardized tests that reveal strengths and weaknesses across models.</p>
</div>
<div class="grid-item">
<div class="icon">💰</div>
<h3>Cost & Access</h3>
<p>Open-source vs proprietary, pricing, and API limitations compared.</p>
</div>
<div class="grid-item">
<div class="icon">🔮</div>
<h3>Future Trends</h3>
<p>Emerging architectures and where the AI field is heading next.</p>
</div>
</div>
</section>
<section class="stats">
<div class="stat">
<div class="num">50+</div>
<div class="label">Models Compared</div>
</div>
<div class="stat">
<div class="num">12</div>
<div class="label">Categories</div>
</div>
<div class="stat">
<div class="num">100+</div>
<div class="label">Benchmarks Tracked</div>
</div>
</section>
<section class="cta">
<h2>Start Comparing</h2>
<p>Dive into detailed model breakdowns and find the right AI for your needs.</p>
<button class="btn-primary">Get Started</button>
</section>
<footer>MyWeb1 &copy; 2026</footer>
</body>
</html>