Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
151 changes: 150 additions & 1 deletion src/app/page.tsx
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,152 @@
export default function Home() {
return (<div className={'h-screen'}></div>);
return (
<div className="min-h-screen bg-white">
{/* Header */}
<header className="sticky top-0 z-10 bg-white shadow-sm">
<div className="container mx-auto px-4 py-4 flex items-center justify-between">
<div className="flex items-center space-x-4">
<svg className="w-8 h-8" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20Z" fill="black"/>
<path d="M12 17L17 12H14V7H10V12H7L12 17Z" fill="black"/>
</svg>
<h1 className="text-2xl font-bold">Uber Eats</h1>
</div>
<div className="flex items-center space-x-4">
<button className="text-sm font-medium">Sign In</button>
<button className="bg-black text-white rounded-full px-4 py-2 text-sm font-medium">Sign Up</button>
</div>
</div>
</header>

{/* Hero Section */}
<section className="relative h-96 bg-gray-100">
<div className="absolute inset-0 bg-gradient-to-r from-black/50 to-black/30">
<div className="container mx-auto px-4 h-full flex flex-col justify-center">
<div className="max-w-lg text-white">
<h2 className="text-4xl font-bold mb-4">Order food to your door</h2>

{/* Search Bar */}
<div className="bg-white p-4 rounded-lg shadow-md">
<div className="flex items-center space-x-2 text-gray-700">
<input
type="text"
placeholder="Enter delivery address"
className="flex-1 p-2 border-b-2 border-gray-300 focus:border-black outline-none"
/>
<button className="bg-black text-white px-4 py-3 rounded-md font-medium">
Find Food
</button>
</div>
</div>
</div>
</div>
</div>
</section>

{/* Categories Section */}
<section className="py-12 bg-white">
<div className="container mx-auto px-4">
<h2 className="text-2xl font-bold mb-6">Explore by category</h2>
<div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
{['Pizza', 'Burgers', 'Sushi', 'Chinese', 'Mexican', 'Dessert', 'Italian', 'Healthy', 'Breakfast', 'Indian', 'Thai', 'Fast Food'].map((category, index) => (
<div key={index} className="bg-gray-100 rounded-lg p-4 hover:shadow-md transition-all cursor-pointer">
<div className="aspect-square bg-gray-200 rounded-lg mb-2"></div>
<p className="text-center font-medium">{category}</p>
</div>
))}
</div>
</div>
</section>

{/* Restaurants Section */}
<section className="py-12 bg-gray-50">
<div className="container mx-auto px-4">
<h2 className="text-2xl font-bold mb-6">Popular restaurants near you</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{[1, 2, 3, 4, 5, 6].map((item) => (
<div key={item} className="bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-all cursor-pointer">
<div className="aspect-video bg-gray-200 relative">
<div className="absolute bottom-2 left-2 bg-white text-xs font-medium px-2 py-1 rounded">
25-40 min
</div>
</div>
<div className="p-4">
<div className="flex justify-between items-start">
<h3 className="font-bold">Restaurant Name {item}</h3>
<div className="bg-gray-100 text-sm font-medium px-2 py-1 rounded">4.8</div>
</div>
<p className="text-gray-600 text-sm mt-1">$$ • Cuisine Type</p>
<p className="text-gray-600 text-sm mt-1">1.2 mi • $1.99 delivery fee</p>
</div>
</div>
))}
</div>
</div>
</section>

{/* App Download Section */}
<section className="py-12 bg-black text-white">
<div className="container mx-auto px-4">
<div className="flex flex-col md:flex-row items-center justify-between">
<div className="max-w-lg mb-8 md:mb-0">
<h2 className="text-3xl font-bold mb-4">Order with the Uber Eats app</h2>
<p className="text-gray-300 mb-6">Get the best food delivery experience with the app. Available on iOS and Android.</p>
<div className="flex space-x-4">
<button className="bg-white text-black px-6 py-3 rounded-md font-medium">App Store</button>
<button className="bg-white text-black px-6 py-3 rounded-md font-medium">Google Play</button>
</div>
</div>
<div className="w-full max-w-xs">
<div className="bg-gray-800 aspect-[9/16] rounded-lg"></div>
</div>
</div>
</div>
</section>

{/* Footer */}
<footer className="bg-gray-100 py-12">
<div className="container mx-auto px-4">
<div className="grid grid-cols-2 md:grid-cols-4 gap-8">
<div>
<h3 className="font-bold mb-4">Uber Eats</h3>
<ul className="space-y-2 text-sm">
<li><a href="#" className="hover:underline">About us</a></li>
<li><a href="#" className="hover:underline">Careers</a></li>
<li><a href="#" className="hover:underline">Blog</a></li>
<li><a href="#" className="hover:underline">Engineering Blog</a></li>
</ul>
</div>
<div>
<h3 className="font-bold mb-4">Products</h3>
<ul className="space-y-2 text-sm">
<li><a href="#" className="hover:underline">Restaurants</a></li>
<li><a href="#" className="hover:underline">Merchants</a></li>
<li><a href="#" className="hover:underline">Uber Eats for Business</a></li>
</ul>
</div>
<div>
<h3 className="font-bold mb-4">Help</h3>
<ul className="space-y-2 text-sm">
<li><a href="#" className="hover:underline">Support Center</a></li>
<li><a href="#" className="hover:underline">Contact</a></li>
<li><a href="#" className="hover:underline">Safety</a></li>
</ul>
</div>
<div>
<h3 className="font-bold mb-4">Follow Us</h3>
<ul className="space-y-2 text-sm">
<li><a href="#" className="hover:underline">Facebook</a></li>
<li><a href="#" className="hover:underline">Twitter</a></li>
<li><a href="#" className="hover:underline">Instagram</a></li>
<li><a href="#" className="hover:underline">LinkedIn</a></li>
</ul>
</div>
</div>
<div className="mt-8 pt-8 border-t border-gray-200 text-sm text-gray-500">
<p>© {new Date().getFullYear()} Uber Eats Clone. All rights reserved.</p>
</div>
</div>
</footer>
</div>
);
}
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
151 changes: 150 additions & 1 deletion src/app/page.tsx
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,152 @@
export default function Home() {
return (<div className={'h-screen'}></div>);
return (
<div className="min-h-screen bg-white">
{/* Header */}
<header className="sticky top-0 z-10 bg-white shadow-sm">
<div className="container mx-auto px-4 py-4 flex items-center justify-between">
<div className="flex items-center space-x-4">
<svg className="w-8 h-8" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20Z" fill="black"/>
<path d="M12 17L17 12H14V7H10V12H7L12 17Z" fill="black"/>
</svg>
<h1 className="text-2xl font-bold">Uber Eats</h1>
</div>
<div className="flex items-center space-x-4">
<button className="text-sm font-medium">Sign In</button>
<button className="bg-black text-white rounded-full px-4 py-2 text-sm font-medium">Sign Up</button>
</div>
</div>
</header>

{/* Hero Section */}
<section className="relative h-96 bg-gray-100">
<div className="absolute inset-0 bg-gradient-to-r from-black/50 to-black/30">
<div className="container mx-auto px-4 h-full flex flex-col justify-center">
<div className="max-w-lg text-white">
<h2 className="text-4xl font-bold mb-4">Order food to your door</h2>

{/* Search Bar */}
<div className="bg-white p-4 rounded-lg shadow-md">
<div className="flex items-center space-x-2 text-gray-700">
<input
type="text"
placeholder="Enter delivery address"
className="flex-1 p-2 border-b-2 border-gray-300 focus:border-black outline-none"
/>
<button className="bg-black text-white px-4 py-3 rounded-md font-medium">
Find Food
</button>
</div>
</div>
</div>
</div>
</div>
</section>

{/* Categories Section */}
<section className="py-12 bg-white">
<div className="container mx-auto px-4">
<h2 className="text-2xl font-bold mb-6">Explore by category</h2>
<div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
{['Pizza', 'Burgers', 'Sushi', 'Chinese', 'Mexican', 'Dessert', 'Italian', 'Healthy', 'Breakfast', 'Indian', 'Thai', 'Fast Food'].map((category, index) => (
<div key={index} className="bg-gray-100 rounded-lg p-4 hover:shadow-md transition-all cursor-pointer">
<div className="aspect-square bg-gray-200 rounded-lg mb-2"></div>
<p className="text-center font-medium">{category}</p>
</div>
))}
</div>
</div>
</section>

{/* Restaurants Section */}
<section className="py-12 bg-gray-50">
<div className="container mx-auto px-4">
<h2 className="text-2xl font-bold mb-6">Popular restaurants near you</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{[1, 2, 3, 4, 5, 6].map((item) => (
<div key={item} className="bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-all cursor-pointer">
<div className="aspect-video bg-gray-200 relative">
<div className="absolute bottom-2 left-2 bg-white text-xs font-medium px-2 py-1 rounded">
25-40 min
</div>
</div>
<div className="p-4">
<div className="flex justify-between items-start">
<h3 className="font-bold">Restaurant Name {item}</h3>
<div className="bg-gray-100 text-sm font-medium px-2 py-1 rounded">4.8</div>
</div>
<p className="text-gray-600 text-sm mt-1">$$ • Cuisine Type</p>
<p className="text-gray-600 text-sm mt-1">1.2 mi • $1.99 delivery fee</p>
</div>
</div>
))}
</div>
</div>
</section>

{/* App Download Section */}
<section className="py-12 bg-black text-white">
<div className="container mx-auto px-4">
<div className="flex flex-col md:flex-row items-center justify-between">
<div className="max-w-lg mb-8 md:mb-0">
<h2 className="text-3xl font-bold mb-4">Order with the Uber Eats app</h2>
<p className="text-gray-300 mb-6">Get the best food delivery experience with the app. Available on iOS and Android.</p>
<div className="flex space-x-4">
<button className="bg-white text-black px-6 py-3 rounded-md font-medium">App Store</button>
<button className="bg-white text-black px-6 py-3 rounded-md font-medium">Google Play</button>
</div>
</div>
<div className="w-full max-w-xs">
<div className="bg-gray-800 aspect-[9/16] rounded-lg"></div>
</div>
</div>
</div>
</section>

{/* Footer */}
<footer className="bg-gray-100 py-12">
<div className="container mx-auto px-4">
<div className="grid grid-cols-2 md:grid-cols-4 gap-8">
<div>
<h3 className="font-bold mb-4">Uber Eats</h3>
<ul className="space-y-2 text-sm">
<li><a href="#" className="hover:underline">About us</a></li>
<li><a href="#" className="hover:underline">Careers</a></li>
<li><a href="#" className="hover:underline">Blog</a></li>
<li><a href="#" className="hover:underline">Engineering Blog</a></li>
</ul>
</div>
<div>
<h3 className="font-bold mb-4">Products</h3>
<ul className="space-y-2 text-sm">
<li><a href="#" className="hover:underline">Restaurants</a></li>
<li><a href="#" className="hover:underline">Merchants</a></li>
<li><a href="#" className="hover:underline">Uber Eats for Business</a></li>
</ul>
</div>
<div>
<h3 className="font-bold mb-4">Help</h3>
<ul className="space-y-2 text-sm">
<li><a href="#" className="hover:underline">Support Center</a></li>
<li><a href="#" className="hover:underline">Contact</a></li>
<li><a href="#" className="hover:underline">Safety</a></li>
</ul>
</div>
<div>
<h3 className="font-bold mb-4">Follow Us</h3>
<ul className="space-y-2 text-sm">
<li><a href="#" className="hover:underline">Facebook</a></li>
<li><a href="#" className="hover:underline">Twitter</a></li>
<li><a href="#" className="hover:underline">Instagram</a></li>
<li><a href="#" className="hover:underline">LinkedIn</a></li>
</ul>
</div>
</div>
<div className="mt-8 pt-8 border-t border-gray-200 text-sm text-gray-500">
<p>© {new Date().getFullYear()} Uber Eats Clone. All rights reserved.</p>
</div>
</div>
</footer>
</div>
);
}
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix"); } } catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
151 changes: 150 additions & 1 deletion src/app/page.tsx
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,152 @@
export default function Home() {
return (<div className={'h-screen'}></div>);
return (
<div className="min-h-screen bg-white">
{/* Header */}
<header className="sticky top-0 z-10 bg-white shadow-sm">
<div className="container mx-auto px-4 py-4 flex items-center justify-between">
<div className="flex items-center space-x-4">
<svg className="w-8 h-8" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20Z" fill="black"/>
<path d="M12 17L17 12H14V7H10V12H7L12 17Z" fill="black"/>
</svg>
<h1 className="text-2xl font-bold">Uber Eats</h1>
</div>
<div className="flex items-center space-x-4">
<button className="text-sm font-medium">Sign In</button>
<button className="bg-black text-white rounded-full px-4 py-2 text-sm font-medium">Sign Up</button>
</div>
</div>
</header>

{/* Hero Section */}
<section className="relative h-96 bg-gray-100">
<div className="absolute inset-0 bg-gradient-to-r from-black/50 to-black/30">
<div className="container mx-auto px-4 h-full flex flex-col justify-center">
<div className="max-w-lg text-white">
<h2 className="text-4xl font-bold mb-4">Order food to your door</h2>

{/* Search Bar */}
<div className="bg-white p-4 rounded-lg shadow-md">
<div className="flex items-center space-x-2 text-gray-700">
<input
type="text"
placeholder="Enter delivery address"
className="flex-1 p-2 border-b-2 border-gray-300 focus:border-black outline-none"
/>
<button className="bg-black text-white px-4 py-3 rounded-md font-medium">
Find Food
</button>
</div>
</div>
</div>
</div>
</div>
</section>

{/* Categories Section */}
<section className="py-12 bg-white">
<div className="container mx-auto px-4">
<h2 className="text-2xl font-bold mb-6">Explore by category</h2>
<div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
{['Pizza', 'Burgers', 'Sushi', 'Chinese', 'Mexican', 'Dessert', 'Italian', 'Healthy', 'Breakfast', 'Indian', 'Thai', 'Fast Food'].map((category, index) => (
<div key={index} className="bg-gray-100 rounded-lg p-4 hover:shadow-md transition-all cursor-pointer">
<div className="aspect-square bg-gray-200 rounded-lg mb-2"></div>
<p className="text-center font-medium">{category}</p>
</div>
))}
</div>
</div>
</section>

{/* Restaurants Section */}
<section className="py-12 bg-gray-50">
<div className="container mx-auto px-4">
<h2 className="text-2xl font-bold mb-6">Popular restaurants near you</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{[1, 2, 3, 4, 5, 6].map((item) => (
<div key={item} className="bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-all cursor-pointer">
<div className="aspect-video bg-gray-200 relative">
<div className="absolute bottom-2 left-2 bg-white text-xs font-medium px-2 py-1 rounded">
25-40 min
</div>
</div>
<div className="p-4">
<div className="flex justify-between items-start">
<h3 className="font-bold">Restaurant Name {item}</h3>
<div className="bg-gray-100 text-sm font-medium px-2 py-1 rounded">4.8</div>
</div>
<p className="text-gray-600 text-sm mt-1">$$ • Cuisine Type</p>
<p className="text-gray-600 text-sm mt-1">1.2 mi • $1.99 delivery fee</p>
</div>
</div>
))}
</div>
</div>
</section>

{/* App Download Section */}
<section className="py-12 bg-black text-white">
<div className="container mx-auto px-4">
<div className="flex flex-col md:flex-row items-center justify-between">
<div className="max-w-lg mb-8 md:mb-0">
<h2 className="text-3xl font-bold mb-4">Order with the Uber Eats app</h2>
<p className="text-gray-300 mb-6">Get the best food delivery experience with the app. Available on iOS and Android.</p>
<div className="flex space-x-4">
<button className="bg-white text-black px-6 py-3 rounded-md font-medium">App Store</button>
<button className="bg-white text-black px-6 py-3 rounded-md font-medium">Google Play</button>
</div>
</div>
<div className="w-full max-w-xs">
<div className="bg-gray-800 aspect-[9/16] rounded-lg"></div>
</div>
</div>
</div>
</section>

{/* Footer */}
<footer className="bg-gray-100 py-12">
<div className="container mx-auto px-4">
<div className="grid grid-cols-2 md:grid-cols-4 gap-8">
<div>
<h3 className="font-bold mb-4">Uber Eats</h3>
<ul className="space-y-2 text-sm">
<li><a href="#" className="hover:underline">About us</a></li>
<li><a href="#" className="hover:underline">Careers</a></li>
<li><a href="#" className="hover:underline">Blog</a></li>
<li><a href="#" className="hover:underline">Engineering Blog</a></li>
</ul>
</div>
<div>
<h3 className="font-bold mb-4">Products</h3>
<ul className="space-y-2 text-sm">
<li><a href="#" className="hover:underline">Restaurants</a></li>
<li><a href="#" className="hover:underline">Merchants</a></li>
<li><a href="#" className="hover:underline">Uber Eats for Business</a></li>
</ul>
</div>
<div>
<h3 className="font-bold mb-4">Help</h3>
<ul className="space-y-2 text-sm">
<li><a href="#" className="hover:underline">Support Center</a></li>
<li><a href="#" className="hover:underline">Contact</a></li>
<li><a href="#" className="hover:underline">Safety</a></li>
</ul>
</div>
<div>
<h3 className="font-bold mb-4">Follow Us</h3>
<ul className="space-y-2 text-sm">
<li><a href="#" className="hover:underline">Facebook</a></li>
<li><a href="#" className="hover:underline">Twitter</a></li>
<li><a href="#" className="hover:underline">Instagram</a></li>
<li><a href="#" className="hover:underline">LinkedIn</a></li>
</ul>
</div>
</div>
<div className="mt-8 pt-8 border-t border-gray-200 text-sm text-gray-500">
<p>© {new Date().getFullYear()} Uber Eats Clone. All rights reserved.</p>
</div>
</div>
</footer>
</div>
);
}
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms"); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
151 changes: 150 additions & 1 deletion src/app/page.tsx
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,152 @@
export default function Home() {
return (<div className={'h-screen'}></div>);
return (
<div className="min-h-screen bg-white">
{/* Header */}
<header className="sticky top-0 z-10 bg-white shadow-sm">
<div className="container mx-auto px-4 py-4 flex items-center justify-between">
<div className="flex items-center space-x-4">
<svg className="w-8 h-8" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20Z" fill="black"/>
<path d="M12 17L17 12H14V7H10V12H7L12 17Z" fill="black"/>
</svg>
<h1 className="text-2xl font-bold">Uber Eats</h1>
</div>
<div className="flex items-center space-x-4">
<button className="text-sm font-medium">Sign In</button>
<button className="bg-black text-white rounded-full px-4 py-2 text-sm font-medium">Sign Up</button>
</div>
</div>
</header>

{/* Hero Section */}
<section className="relative h-96 bg-gray-100">
<div className="absolute inset-0 bg-gradient-to-r from-black/50 to-black/30">
<div className="container mx-auto px-4 h-full flex flex-col justify-center">
<div className="max-w-lg text-white">
<h2 className="text-4xl font-bold mb-4">Order food to your door</h2>

{/* Search Bar */}
<div className="bg-white p-4 rounded-lg shadow-md">
<div className="flex items-center space-x-2 text-gray-700">
<input
type="text"
placeholder="Enter delivery address"
className="flex-1 p-2 border-b-2 border-gray-300 focus:border-black outline-none"
/>
<button className="bg-black text-white px-4 py-3 rounded-md font-medium">
Find Food
</button>
</div>
</div>
</div>
</div>
</div>
</section>

{/* Categories Section */}
<section className="py-12 bg-white">
<div className="container mx-auto px-4">
<h2 className="text-2xl font-bold mb-6">Explore by category</h2>
<div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
{['Pizza', 'Burgers', 'Sushi', 'Chinese', 'Mexican', 'Dessert', 'Italian', 'Healthy', 'Breakfast', 'Indian', 'Thai', 'Fast Food'].map((category, index) => (
<div key={index} className="bg-gray-100 rounded-lg p-4 hover:shadow-md transition-all cursor-pointer">
<div className="aspect-square bg-gray-200 rounded-lg mb-2"></div>
<p className="text-center font-medium">{category}</p>
</div>
))}
</div>
</div>
</section>

{/* Restaurants Section */}
<section className="py-12 bg-gray-50">
<div className="container mx-auto px-4">
<h2 className="text-2xl font-bold mb-6">Popular restaurants near you</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{[1, 2, 3, 4, 5, 6].map((item) => (
<div key={item} className="bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-all cursor-pointer">
<div className="aspect-video bg-gray-200 relative">
<div className="absolute bottom-2 left-2 bg-white text-xs font-medium px-2 py-1 rounded">
25-40 min
</div>
</div>
<div className="p-4">
<div className="flex justify-between items-start">
<h3 className="font-bold">Restaurant Name {item}</h3>
<div className="bg-gray-100 text-sm font-medium px-2 py-1 rounded">4.8</div>
</div>
<p className="text-gray-600 text-sm mt-1">$$ • Cuisine Type</p>
<p className="text-gray-600 text-sm mt-1">1.2 mi • $1.99 delivery fee</p>
</div>
</div>
))}
</div>
</div>
</section>

{/* App Download Section */}
<section className="py-12 bg-black text-white">
<div className="container mx-auto px-4">
<div className="flex flex-col md:flex-row items-center justify-between">
<div className="max-w-lg mb-8 md:mb-0">
<h2 className="text-3xl font-bold mb-4">Order with the Uber Eats app</h2>
<p className="text-gray-300 mb-6">Get the best food delivery experience with the app. Available on iOS and Android.</p>
<div className="flex space-x-4">
<button className="bg-white text-black px-6 py-3 rounded-md font-medium">App Store</button>
<button className="bg-white text-black px-6 py-3 rounded-md font-medium">Google Play</button>
</div>
</div>
<div className="w-full max-w-xs">
<div className="bg-gray-800 aspect-[9/16] rounded-lg"></div>
</div>
</div>
</div>
</section>

{/* Footer */}
<footer className="bg-gray-100 py-12">
<div className="container mx-auto px-4">
<div className="grid grid-cols-2 md:grid-cols-4 gap-8">
<div>
<h3 className="font-bold mb-4">Uber Eats</h3>
<ul className="space-y-2 text-sm">
<li><a href="#" className="hover:underline">About us</a></li>
<li><a href="#" className="hover:underline">Careers</a></li>
<li><a href="#" className="hover:underline">Blog</a></li>
<li><a href="#" className="hover:underline">Engineering Blog</a></li>
</ul>
</div>
<div>
<h3 className="font-bold mb-4">Products</h3>
<ul className="space-y-2 text-sm">
<li><a href="#" className="hover:underline">Restaurants</a></li>
<li><a href="#" className="hover:underline">Merchants</a></li>
<li><a href="#" className="hover:underline">Uber Eats for Business</a></li>
</ul>
</div>
<div>
<h3 className="font-bold mb-4">Help</h3>
<ul className="space-y-2 text-sm">
<li><a href="#" className="hover:underline">Support Center</a></li>
<li><a href="#" className="hover:underline">Contact</a></li>
<li><a href="#" className="hover:underline">Safety</a></li>
</ul>
</div>
<div>
<h3 className="font-bold mb-4">Follow Us</h3>
<ul className="space-y-2 text-sm">
<li><a href="#" className="hover:underline">Facebook</a></li>
<li><a href="#" className="hover:underline">Twitter</a></li>
<li><a href="#" className="hover:underline">Instagram</a></li>
<li><a href="#" className="hover:underline">LinkedIn</a></li>
</ul>
</div>
</div>
<div className="mt-8 pt-8 border-t border-gray-200 text-sm text-gray-500">
<p>© {new Date().getFullYear()} Uber Eats Clone. All rights reserved.</p>
</div>
</div>
</footer>
</div>
);
}
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links"); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + '
Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
151 changes: 150 additions & 1 deletion src/app/page.tsx
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,152 @@
export default function Home() {
return (<div className={'h-screen'}></div>);
return (
<div className="min-h-screen bg-white">
{/* Header */}
<header className="sticky top-0 z-10 bg-white shadow-sm">
<div className="container mx-auto px-4 py-4 flex items-center justify-between">
<div className="flex items-center space-x-4">
<svg className="w-8 h-8" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20Z" fill="black"/>
<path d="M12 17L17 12H14V7H10V12H7L12 17Z" fill="black"/>
</svg>
<h1 className="text-2xl font-bold">Uber Eats</h1>
</div>
<div className="flex items-center space-x-4">
<button className="text-sm font-medium">Sign In</button>
<button className="bg-black text-white rounded-full px-4 py-2 text-sm font-medium">Sign Up</button>
</div>
</div>
</header>

{/* Hero Section */}
<section className="relative h-96 bg-gray-100">
<div className="absolute inset-0 bg-gradient-to-r from-black/50 to-black/30">
<div className="container mx-auto px-4 h-full flex flex-col justify-center">
<div className="max-w-lg text-white">
<h2 className="text-4xl font-bold mb-4">Order food to your door</h2>

{/* Search Bar */}
<div className="bg-white p-4 rounded-lg shadow-md">
<div className="flex items-center space-x-2 text-gray-700">
<input
type="text"
placeholder="Enter delivery address"
className="flex-1 p-2 border-b-2 border-gray-300 focus:border-black outline-none"
/>
<button className="bg-black text-white px-4 py-3 rounded-md font-medium">
Find Food
</button>
</div>
</div>
</div>
</div>
</div>
</section>

{/* Categories Section */}
<section className="py-12 bg-white">
<div className="container mx-auto px-4">
<h2 className="text-2xl font-bold mb-6">Explore by category</h2>
<div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
{['Pizza', 'Burgers', 'Sushi', 'Chinese', 'Mexican', 'Dessert', 'Italian', 'Healthy', 'Breakfast', 'Indian', 'Thai', 'Fast Food'].map((category, index) => (
<div key={index} className="bg-gray-100 rounded-lg p-4 hover:shadow-md transition-all cursor-pointer">
<div className="aspect-square bg-gray-200 rounded-lg mb-2"></div>
<p className="text-center font-medium">{category}</p>
</div>
))}
</div>
</div>
</section>

{/* Restaurants Section */}
<section className="py-12 bg-gray-50">
<div className="container mx-auto px-4">
<h2 className="text-2xl font-bold mb-6">Popular restaurants near you</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{[1, 2, 3, 4, 5, 6].map((item) => (
<div key={item} className="bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-all cursor-pointer">
<div className="aspect-video bg-gray-200 relative">
<div className="absolute bottom-2 left-2 bg-white text-xs font-medium px-2 py-1 rounded">
25-40 min
</div>
</div>
<div className="p-4">
<div className="flex justify-between items-start">
<h3 className="font-bold">Restaurant Name {item}</h3>
<div className="bg-gray-100 text-sm font-medium px-2 py-1 rounded">4.8</div>
</div>
<p className="text-gray-600 text-sm mt-1">$$ • Cuisine Type</p>
<p className="text-gray-600 text-sm mt-1">1.2 mi • $1.99 delivery fee</p>
</div>
</div>
))}
</div>
</div>
</section>

{/* App Download Section */}
<section className="py-12 bg-black text-white">
<div className="container mx-auto px-4">
<div className="flex flex-col md:flex-row items-center justify-between">
<div className="max-w-lg mb-8 md:mb-0">
<h2 className="text-3xl font-bold mb-4">Order with the Uber Eats app</h2>
<p className="text-gray-300 mb-6">Get the best food delivery experience with the app. Available on iOS and Android.</p>
<div className="flex space-x-4">
<button className="bg-white text-black px-6 py-3 rounded-md font-medium">App Store</button>
<button className="bg-white text-black px-6 py-3 rounded-md font-medium">Google Play</button>
</div>
</div>
<div className="w-full max-w-xs">
<div className="bg-gray-800 aspect-[9/16] rounded-lg"></div>
</div>
</div>
</div>
</section>

{/* Footer */}
<footer className="bg-gray-100 py-12">
<div className="container mx-auto px-4">
<div className="grid grid-cols-2 md:grid-cols-4 gap-8">
<div>
<h3 className="font-bold mb-4">Uber Eats</h3>
<ul className="space-y-2 text-sm">
<li><a href="#" className="hover:underline">About us</a></li>
<li><a href="#" className="hover:underline">Careers</a></li>
<li><a href="#" className="hover:underline">Blog</a></li>
<li><a href="#" className="hover:underline">Engineering Blog</a></li>
</ul>
</div>
<div>
<h3 className="font-bold mb-4">Products</h3>
<ul className="space-y-2 text-sm">
<li><a href="#" className="hover:underline">Restaurants</a></li>
<li><a href="#" className="hover:underline">Merchants</a></li>
<li><a href="#" className="hover:underline">Uber Eats for Business</a></li>
</ul>
</div>
<div>
<h3 className="font-bold mb-4">Help</h3>
<ul className="space-y-2 text-sm">
<li><a href="#" className="hover:underline">Support Center</a></li>
<li><a href="#" className="hover:underline">Contact</a></li>
<li><a href="#" className="hover:underline">Safety</a></li>
</ul>
</div>
<div>
<h3 className="font-bold mb-4">Follow Us</h3>
<ul className="space-y-2 text-sm">
<li><a href="#" className="hover:underline">Facebook</a></li>
<li><a href="#" className="hover:underline">Twitter</a></li>
<li><a href="#" className="hover:underline">Instagram</a></li>
<li><a href="#" className="hover:underline">LinkedIn</a></li>
</ul>
</div>
</div>
<div className="mt-8 pt-8 border-t border-gray-200 text-sm text-gray-500">
<p>© {new Date().getFullYear()} Uber Eats Clone. All rights reserved.</p>
</div>
</div>
</footer>
</div>
);
}
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default"); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
151 changes: 150 additions & 1 deletion src/app/page.tsx
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,152 @@
export default function Home() {
return (<div className={'h-screen'}></div>);
return (
<div className="min-h-screen bg-white">
{/* Header */}
<header className="sticky top-0 z-10 bg-white shadow-sm">
<div className="container mx-auto px-4 py-4 flex items-center justify-between">
<div className="flex items-center space-x-4">
<svg className="w-8 h-8" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20Z" fill="black"/>
<path d="M12 17L17 12H14V7H10V12H7L12 17Z" fill="black"/>
</svg>
<h1 className="text-2xl font-bold">Uber Eats</h1>
</div>
<div className="flex items-center space-x-4">
<button className="text-sm font-medium">Sign In</button>
<button className="bg-black text-white rounded-full px-4 py-2 text-sm font-medium">Sign Up</button>
</div>
</div>
</header>

{/* Hero Section */}
<section className="relative h-96 bg-gray-100">
<div className="absolute inset-0 bg-gradient-to-r from-black/50 to-black/30">
<div className="container mx-auto px-4 h-full flex flex-col justify-center">
<div className="max-w-lg text-white">
<h2 className="text-4xl font-bold mb-4">Order food to your door</h2>

{/* Search Bar */}
<div className="bg-white p-4 rounded-lg shadow-md">
<div className="flex items-center space-x-2 text-gray-700">
<input
type="text"
placeholder="Enter delivery address"
className="flex-1 p-2 border-b-2 border-gray-300 focus:border-black outline-none"
/>
<button className="bg-black text-white px-4 py-3 rounded-md font-medium">
Find Food
</button>
</div>
</div>
</div>
</div>
</div>
</section>

{/* Categories Section */}
<section className="py-12 bg-white">
<div className="container mx-auto px-4">
<h2 className="text-2xl font-bold mb-6">Explore by category</h2>
<div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
{['Pizza', 'Burgers', 'Sushi', 'Chinese', 'Mexican', 'Dessert', 'Italian', 'Healthy', 'Breakfast', 'Indian', 'Thai', 'Fast Food'].map((category, index) => (
<div key={index} className="bg-gray-100 rounded-lg p-4 hover:shadow-md transition-all cursor-pointer">
<div className="aspect-square bg-gray-200 rounded-lg mb-2"></div>
<p className="text-center font-medium">{category}</p>
</div>
))}
</div>
</div>
</section>

{/* Restaurants Section */}
<section className="py-12 bg-gray-50">
<div className="container mx-auto px-4">
<h2 className="text-2xl font-bold mb-6">Popular restaurants near you</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{[1, 2, 3, 4, 5, 6].map((item) => (
<div key={item} className="bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-all cursor-pointer">
<div className="aspect-video bg-gray-200 relative">
<div className="absolute bottom-2 left-2 bg-white text-xs font-medium px-2 py-1 rounded">
25-40 min
</div>
</div>
<div className="p-4">
<div className="flex justify-between items-start">
<h3 className="font-bold">Restaurant Name {item}</h3>
<div className="bg-gray-100 text-sm font-medium px-2 py-1 rounded">4.8</div>
</div>
<p className="text-gray-600 text-sm mt-1">$$ • Cuisine Type</p>
<p className="text-gray-600 text-sm mt-1">1.2 mi • $1.99 delivery fee</p>
</div>
</div>
))}
</div>
</div>
</section>

{/* App Download Section */}
<section className="py-12 bg-black text-white">
<div className="container mx-auto px-4">
<div className="flex flex-col md:flex-row items-center justify-between">
<div className="max-w-lg mb-8 md:mb-0">
<h2 className="text-3xl font-bold mb-4">Order with the Uber Eats app</h2>
<p className="text-gray-300 mb-6">Get the best food delivery experience with the app. Available on iOS and Android.</p>
<div className="flex space-x-4">
<button className="bg-white text-black px-6 py-3 rounded-md font-medium">App Store</button>
<button className="bg-white text-black px-6 py-3 rounded-md font-medium">Google Play</button>
</div>
</div>
<div className="w-full max-w-xs">
<div className="bg-gray-800 aspect-[9/16] rounded-lg"></div>
</div>
</div>
</div>
</section>

{/* Footer */}
<footer className="bg-gray-100 py-12">
<div className="container mx-auto px-4">
<div className="grid grid-cols-2 md:grid-cols-4 gap-8">
<div>
<h3 className="font-bold mb-4">Uber Eats</h3>
<ul className="space-y-2 text-sm">
<li><a href="#" className="hover:underline">About us</a></li>
<li><a href="#" className="hover:underline">Careers</a></li>
<li><a href="#" className="hover:underline">Blog</a></li>
<li><a href="#" className="hover:underline">Engineering Blog</a></li>
</ul>
</div>
<div>
<h3 className="font-bold mb-4">Products</h3>
<ul className="space-y-2 text-sm">
<li><a href="#" className="hover:underline">Restaurants</a></li>
<li><a href="#" className="hover:underline">Merchants</a></li>
<li><a href="#" className="hover:underline">Uber Eats for Business</a></li>
</ul>
</div>
<div>
<h3 className="font-bold mb-4">Help</h3>
<ul className="space-y-2 text-sm">
<li><a href="#" className="hover:underline">Support Center</a></li>
<li><a href="#" className="hover:underline">Contact</a></li>
<li><a href="#" className="hover:underline">Safety</a></li>
</ul>
</div>
<div>
<h3 className="font-bold mb-4">Follow Us</h3>
<ul className="space-y-2 text-sm">
<li><a href="#" className="hover:underline">Facebook</a></li>
<li><a href="#" className="hover:underline">Twitter</a></li>
<li><a href="#" className="hover:underline">Instagram</a></li>
<li><a href="#" className="hover:underline">LinkedIn</a></li>
</ul>
</div>
</div>
<div className="mt-8 pt-8 border-t border-gray-200 text-sm text-gray-500">
<p>© {new Date().getFullYear()} Uber Eats Clone. All rights reserved.</p>
</div>
</div>
</footer>
</div>
);
}
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers"); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
151 changes: 150 additions & 1 deletion src/app/page.tsx
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,152 @@
export default function Home() {
return (<div className={'h-screen'}></div>);
return (
<div className="min-h-screen bg-white">
{/* Header */}
<header className="sticky top-0 z-10 bg-white shadow-sm">
<div className="container mx-auto px-4 py-4 flex items-center justify-between">
<div className="flex items-center space-x-4">
<svg className="w-8 h-8" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20Z" fill="black"/>
<path d="M12 17L17 12H14V7H10V12H7L12 17Z" fill="black"/>
</svg>
<h1 className="text-2xl font-bold">Uber Eats</h1>
</div>
<div className="flex items-center space-x-4">
<button className="text-sm font-medium">Sign In</button>
<button className="bg-black text-white rounded-full px-4 py-2 text-sm font-medium">Sign Up</button>
</div>
</div>
</header>

{/* Hero Section */}
<section className="relative h-96 bg-gray-100">
<div className="absolute inset-0 bg-gradient-to-r from-black/50 to-black/30">
<div className="container mx-auto px-4 h-full flex flex-col justify-center">
<div className="max-w-lg text-white">
<h2 className="text-4xl font-bold mb-4">Order food to your door</h2>

{/* Search Bar */}
<div className="bg-white p-4 rounded-lg shadow-md">
<div className="flex items-center space-x-2 text-gray-700">
<input
type="text"
placeholder="Enter delivery address"
className="flex-1 p-2 border-b-2 border-gray-300 focus:border-black outline-none"
/>
<button className="bg-black text-white px-4 py-3 rounded-md font-medium">
Find Food
</button>
</div>
</div>
</div>
</div>
</div>
</section>

{/* Categories Section */}
<section className="py-12 bg-white">
<div className="container mx-auto px-4">
<h2 className="text-2xl font-bold mb-6">Explore by category</h2>
<div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
{['Pizza', 'Burgers', 'Sushi', 'Chinese', 'Mexican', 'Dessert', 'Italian', 'Healthy', 'Breakfast', 'Indian', 'Thai', 'Fast Food'].map((category, index) => (
<div key={index} className="bg-gray-100 rounded-lg p-4 hover:shadow-md transition-all cursor-pointer">
<div className="aspect-square bg-gray-200 rounded-lg mb-2"></div>
<p className="text-center font-medium">{category}</p>
</div>
))}
</div>
</div>
</section>

{/* Restaurants Section */}
<section className="py-12 bg-gray-50">
<div className="container mx-auto px-4">
<h2 className="text-2xl font-bold mb-6">Popular restaurants near you</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{[1, 2, 3, 4, 5, 6].map((item) => (
<div key={item} className="bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-all cursor-pointer">
<div className="aspect-video bg-gray-200 relative">
<div className="absolute bottom-2 left-2 bg-white text-xs font-medium px-2 py-1 rounded">
25-40 min
</div>
</div>
<div className="p-4">
<div className="flex justify-between items-start">
<h3 className="font-bold">Restaurant Name {item}</h3>
<div className="bg-gray-100 text-sm font-medium px-2 py-1 rounded">4.8</div>
</div>
<p className="text-gray-600 text-sm mt-1">$$ • Cuisine Type</p>
<p className="text-gray-600 text-sm mt-1">1.2 mi • $1.99 delivery fee</p>
</div>
</div>
))}
</div>
</div>
</section>

{/* App Download Section */}
<section className="py-12 bg-black text-white">
<div className="container mx-auto px-4">
<div className="flex flex-col md:flex-row items-center justify-between">
<div className="max-w-lg mb-8 md:mb-0">
<h2 className="text-3xl font-bold mb-4">Order with the Uber Eats app</h2>
<p className="text-gray-300 mb-6">Get the best food delivery experience with the app. Available on iOS and Android.</p>
<div className="flex space-x-4">
<button className="bg-white text-black px-6 py-3 rounded-md font-medium">App Store</button>
<button className="bg-white text-black px-6 py-3 rounded-md font-medium">Google Play</button>
</div>
</div>
<div className="w-full max-w-xs">
<div className="bg-gray-800 aspect-[9/16] rounded-lg"></div>
</div>
</div>
</div>
</section>

{/* Footer */}
<footer className="bg-gray-100 py-12">
<div className="container mx-auto px-4">
<div className="grid grid-cols-2 md:grid-cols-4 gap-8">
<div>
<h3 className="font-bold mb-4">Uber Eats</h3>
<ul className="space-y-2 text-sm">
<li><a href="#" className="hover:underline">About us</a></li>
<li><a href="#" className="hover:underline">Careers</a></li>
<li><a href="#" className="hover:underline">Blog</a></li>
<li><a href="#" className="hover:underline">Engineering Blog</a></li>
</ul>
</div>
<div>
<h3 className="font-bold mb-4">Products</h3>
<ul className="space-y-2 text-sm">
<li><a href="#" className="hover:underline">Restaurants</a></li>
<li><a href="#" className="hover:underline">Merchants</a></li>
<li><a href="#" className="hover:underline">Uber Eats for Business</a></li>
</ul>
</div>
<div>
<h3 className="font-bold mb-4">Help</h3>
<ul className="space-y-2 text-sm">
<li><a href="#" className="hover:underline">Support Center</a></li>
<li><a href="#" className="hover:underline">Contact</a></li>
<li><a href="#" className="hover:underline">Safety</a></li>
</ul>
</div>
<div>
<h3 className="font-bold mb-4">Follow Us</h3>
<ul className="space-y-2 text-sm">
<li><a href="#" className="hover:underline">Facebook</a></li>
<li><a href="#" className="hover:underline">Twitter</a></li>
<li><a href="#" className="hover:underline">Instagram</a></li>
<li><a href="#" className="hover:underline">LinkedIn</a></li>
</ul>
</div>
</div>
<div className="mt-8 pt-8 border-t border-gray-200 text-sm text-gray-500">
<p>© {new Date().getFullYear()} Uber Eats Clone. All rights reserved.</p>
</div>
</div>
</footer>
</div>
);
}
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode"); } } catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); } })(); })();
Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
151 changes: 150 additions & 1 deletion src/app/page.tsx
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,152 @@
export default function Home() {
return (<div className={'h-screen'}></div>);
return (
<div className="min-h-screen bg-white">
{/* Header */}
<header className="sticky top-0 z-10 bg-white shadow-sm">
<div className="container mx-auto px-4 py-4 flex items-center justify-between">
<div className="flex items-center space-x-4">
<svg className="w-8 h-8" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20Z" fill="black"/>
<path d="M12 17L17 12H14V7H10V12H7L12 17Z" fill="black"/>
</svg>
<h1 className="text-2xl font-bold">Uber Eats</h1>
</div>
<div className="flex items-center space-x-4">
<button className="text-sm font-medium">Sign In</button>
<button className="bg-black text-white rounded-full px-4 py-2 text-sm font-medium">Sign Up</button>
</div>
</div>
</header>

{/* Hero Section */}
<section className="relative h-96 bg-gray-100">
<div className="absolute inset-0 bg-gradient-to-r from-black/50 to-black/30">
<div className="container mx-auto px-4 h-full flex flex-col justify-center">
<div className="max-w-lg text-white">
<h2 className="text-4xl font-bold mb-4">Order food to your door</h2>

{/* Search Bar */}
<div className="bg-white p-4 rounded-lg shadow-md">
<div className="flex items-center space-x-2 text-gray-700">
<input
type="text"
placeholder="Enter delivery address"
className="flex-1 p-2 border-b-2 border-gray-300 focus:border-black outline-none"
/>
<button className="bg-black text-white px-4 py-3 rounded-md font-medium">
Find Food
</button>
</div>
</div>
</div>
</div>
</div>
</section>

{/* Categories Section */}
<section className="py-12 bg-white">
<div className="container mx-auto px-4">
<h2 className="text-2xl font-bold mb-6">Explore by category</h2>
<div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
{['Pizza', 'Burgers', 'Sushi', 'Chinese', 'Mexican', 'Dessert', 'Italian', 'Healthy', 'Breakfast', 'Indian', 'Thai', 'Fast Food'].map((category, index) => (
<div key={index} className="bg-gray-100 rounded-lg p-4 hover:shadow-md transition-all cursor-pointer">
<div className="aspect-square bg-gray-200 rounded-lg mb-2"></div>
<p className="text-center font-medium">{category}</p>
</div>
))}
</div>
</div>
</section>

{/* Restaurants Section */}
<section className="py-12 bg-gray-50">
<div className="container mx-auto px-4">
<h2 className="text-2xl font-bold mb-6">Popular restaurants near you</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{[1, 2, 3, 4, 5, 6].map((item) => (
<div key={item} className="bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-all cursor-pointer">
<div className="aspect-video bg-gray-200 relative">
<div className="absolute bottom-2 left-2 bg-white text-xs font-medium px-2 py-1 rounded">
25-40 min
</div>
</div>
<div className="p-4">
<div className="flex justify-between items-start">
<h3 className="font-bold">Restaurant Name {item}</h3>
<div className="bg-gray-100 text-sm font-medium px-2 py-1 rounded">4.8</div>
</div>
<p className="text-gray-600 text-sm mt-1">$$ • Cuisine Type</p>
<p className="text-gray-600 text-sm mt-1">1.2 mi • $1.99 delivery fee</p>
</div>
</div>
))}
</div>
</div>
</section>

{/* App Download Section */}
<section className="py-12 bg-black text-white">
<div className="container mx-auto px-4">
<div className="flex flex-col md:flex-row items-center justify-between">
<div className="max-w-lg mb-8 md:mb-0">
<h2 className="text-3xl font-bold mb-4">Order with the Uber Eats app</h2>
<p className="text-gray-300 mb-6">Get the best food delivery experience with the app. Available on iOS and Android.</p>
<div className="flex space-x-4">
<button className="bg-white text-black px-6 py-3 rounded-md font-medium">App Store</button>
<button className="bg-white text-black px-6 py-3 rounded-md font-medium">Google Play</button>
</div>
</div>
<div className="w-full max-w-xs">
<div className="bg-gray-800 aspect-[9/16] rounded-lg"></div>
</div>
</div>
</div>
</section>

{/* Footer */}
<footer className="bg-gray-100 py-12">
<div className="container mx-auto px-4">
<div className="grid grid-cols-2 md:grid-cols-4 gap-8">
<div>
<h3 className="font-bold mb-4">Uber Eats</h3>
<ul className="space-y-2 text-sm">
<li><a href="#" className="hover:underline">About us</a></li>
<li><a href="#" className="hover:underline">Careers</a></li>
<li><a href="#" className="hover:underline">Blog</a></li>
<li><a href="#" className="hover:underline">Engineering Blog</a></li>
</ul>
</div>
<div>
<h3 className="font-bold mb-4">Products</h3>
<ul className="space-y-2 text-sm">
<li><a href="#" className="hover:underline">Restaurants</a></li>
<li><a href="#" className="hover:underline">Merchants</a></li>
<li><a href="#" className="hover:underline">Uber Eats for Business</a></li>
</ul>
</div>
<div>
<h3 className="font-bold mb-4">Help</h3>
<ul className="space-y-2 text-sm">
<li><a href="#" className="hover:underline">Support Center</a></li>
<li><a href="#" className="hover:underline">Contact</a></li>
<li><a href="#" className="hover:underline">Safety</a></li>
</ul>
</div>
<div>
<h3 className="font-bold mb-4">Follow Us</h3>
<ul className="space-y-2 text-sm">
<li><a href="#" className="hover:underline">Facebook</a></li>
<li><a href="#" className="hover:underline">Twitter</a></li>
<li><a href="#" className="hover:underline">Instagram</a></li>
<li><a href="#" className="hover:underline">LinkedIn</a></li>
</ul>
</div>
</div>
<div className="mt-8 pt-8 border-t border-gray-200 text-sm text-gray-500">
<p>© {new Date().getFullYear()} Uber Eats Clone. All rights reserved.</p>
</div>
</div>
</footer>
</div>
);
}