Hugging Face's logo

Spaces:
Jimmyzheng-10
/
ScreenCoder
Running

App Files Community
1
ScreenCoder / screencoder /demo /public /demos /design /0010.html
Jimmyzheng-10's picture
Jimmyzheng-10
Add app.py and the screencoder repo
a383d0e
raw
history blame
8.75 kB
 <!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;">
Trump’s 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 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>