mirror of
https://github.com/leigest519/ScreenCoder.git
synced 2026-02-14 02:32:47 +00:00
177 lines
8.5 KiB
HTML
177 lines
8.5 KiB
HTML
<!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, & 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 & 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;">
|
||
Trump’s career blends business, entertainment, & 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 Musk’s Wikipedia details his S.African roots, PayPal founding, Tesla’s EV dominance, and SpaceX’s 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>
|