Files
ScreenCoder_UI2Code/demo/public/demos/design/0010.html
2025-07-28 18:54:41 +08:00

177 lines
8.5 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>
Bounding Boxes Layout
</title>
<style>
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.container {
position: relative;
width: 100%;
height: 100%;
box-sizing: border-box;
}
.box {
position: absolute;
box-sizing: border-box;
overflow: hidden;
}
.box > .container {
display: grid;
width: 100%;
height: 100%;
}
</style>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
</head>
<body>
<div class="container">
<div class="box" id="1" style="left: 3.7760416666666665%; top: 4.00390625%; width: 92.12239583333334%; height: 8.0859375%;">
<div class="flex items-center p-2 border-b border-gray-300">
<span class="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-green-500 via-red-500 via-yellow-400 mr-4">
Google
</span>
<div class="flex-1 flex items-center border-2 border-gray-700 rounded-full px-3 py-1 max-w-xl">
<input class="w-full outline-none bg-transparent text-gray-800 placeholder-gray-600" placeholder="elon trump" type="text"/>
<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
</path>
</svg>
</div>
<div class="flex items-center space-x-4 ml-auto">
<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M4 6h16M4 12h16M4 18h16" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
</path>
</svg>
<div class="w-8 h-8 bg-gray-300 rounded-full">
</div>
</div>
</div>
</div>
<div class="box" id="2" style="left: 3.7760416666666665%; top: 12.578125%; width: 92.12239583333334%; height: 5.859375%;">
<div class="flex items-center border-b border-black" style="opacity:0;transition:opacity .35s ease-out;">
<a class="px-3 py-2 border-b-2 border-black font-semibold" href="#" style="opacity:0;transition:opacity .35s ease-out;">
All
</a>
<a class="px-3 py-2" href="#" style="opacity:0;transition:opacity .35s ease-out;">
News
</a>
<a class="px-3 py-2" href="#" style="opacity:0;transition:opacity .35s ease-out;">
Images
</a>
<a class="px-3 py-2" href="#" style="opacity:0;transition:opacity .35s ease-out;">
Videos
</a>
<a class="px-3 py-2" href="#" style="opacity:0;transition:opacity .35s ease-out;">
Shopping
</a>
<a class="px-3 py-2" href="#" style="opacity:0;transition:opacity .35s ease-out;">
More
</a>
</div>
</div>
<div class="box" id="3" style="left: 3.7760416666666665%; top: 23.4375%; width: 62.760416666666664%; height: 71.2890625%;">
<div class="flex flex-col items-center p-4 border border-gray-300 rounded-lg" style="opacity:0;transition:opacity .35s ease-out;">
<h2 class="text-2xl font-bold mb-4 self-start" style="opacity:0;transition:opacity .35s ease-out;">
Top stories
</h2>
<div class="flex flex-col space-y-6" style="opacity:0;transition:opacity .35s ease-out;">
<div class="flex flex-row items-start space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
<div class="w-32 h-32 bg-gray-300 rounded" style="opacity:0;transition:opacity .35s ease-out;">
</div>
<div class="flex-1 space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
<p style="opacity:0;transition:opacity .35s ease-out;">
Elon Musk is a visionary entrepreneur leading Tesla, SpaceX, Neuralink, &amp; The Boring Company. His work in EVs, space tech, and brain-computer interfaces reshapes industries.
</p>
</div>
<div class="w-32 h-32 bg-gray-300 rounded" style="opacity:0;transition:opacity .35s ease-out;">
</div>
</div>
<div class="flex flex-row items-start space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
<div class="w-32 h-32 bg-gray-300 rounded" style="opacity:0;transition:opacity .35s ease-out;">
</div>
<div class="flex-1 space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
<p style="opacity:0;transition:opacity .35s ease-out;">
Donald Trump, ex-US President, is a businessman &amp; TV personality. Known for real estate, "The Apprentice," he prioritized immigration, trade, and tax reforms in office.
</p>
</div>
<div class="flex-1 space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
<p style="opacity:0;transition:opacity .35s ease-out;">
Trumps career blends business, entertainment, &amp; politics. Controversies and policy shifts defined his term, leaving a lasting mark on US political culture.
</p>
</div>
</div>
</div>
<button class="bg-gray-200 px-6 py-2 rounded-full text-gray-700 font-semibold mb-6" style="opacity:0;transition:opacity .35s ease-out;">
More news
</button>
<hr class="w-full border-t border-gray-300 my-1" style="opacity:0;transition:opacity .35s ease-out;"/>
<div class="p-4" style="opacity:0;transition:opacity .35s ease-out;">
<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">Wikipedia</h2>
<div class="space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
<p style="opacity:0;transition:opacity .35s ease-out;">
Elon Musks Wikipedia details his S.African roots, PayPal founding, Teslas EV dominance, and SpaceXs reusable rockets—chronicling tech revolution efforts.
</p>
</div>
</div>
</div>
</div>
<div class="box" id="4" style="left: 67.578125%; top: 23.4375%; width: 24.674479166666664%; height: 71.2890625%;">
<div class="max-w-sm mx-auto bg-white border border-gray-300 rounded-lg shadow p-4" style="opacity:0;transition:opacity .35s ease-out;">
<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
Trump-Musk feud
</h2>
<div class="w-full h-32 bg-gray-300 rounded mb-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
<div class="flex items-center mb-3" style="opacity:0;transition:opacity .35s ease-out;">
<svg class="w-6 h-6 text-indigo-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
</path>
</svg>
<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
Source
</span>
<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
Politico
</span>
</div>
<div class="flex items-center mb-3" style="opacity:0;transition:opacity .35s ease-out;">
<svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
</path>
</svg>
<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
Start date
</span>
<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
April 2024
</span>
</div>
<div class="flex items-center mb-5" style="opacity:0;transition:opacity .35s ease-out;">
<svg class="w-6 h-6 text-red-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M13 10V3L4 14h7v7l9-11h-7z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
</path>
</svg>
<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
Cause
</span>
<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
Social media spat
</span>
</div>
<p class="text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
The Trump-Musk feud reflects tensions between tech innovation and conservative politics, marked by public clashes over policy, leadership, and influence, with both figures commanding large, opposing followings.
</p>
</div>
</div>
</div>
</body>
</html>