CalvinBackup/ScreenCoder_UI2Code
1
0
Fork 0
mirror of https://github.com/leigest519/ScreenCoder.git synced 2026-02-13 02:02:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Yilei JIANG
2025-07-28 18:43:47 +08:00
parent 0a6e4ab682
commit 06408ffa6a
702 changed files with 153932 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
demo/README.md Normal file
View File

@@ -0,0 +1,57 @@
# UI2Code Demo
UI2Code Demo is an interactive web application that demonstrates how to reconstruct high-fidelity frontend code from UI screenshots or design mockups, step by step. It is designed for research, education, and showcasing code generation techniques for modern web interfaces.
## Features
- **Multiple Real-World Demos:** Includes step-by-step reconstructions of YouTube, Instagram, and Google Search interfaces.
- **Progressive Code Generation:** Visualizes the incremental build-up of complex UIs, showing each step in the process.
- **Live Preview:** Responsive, high-fidelity preview of the generated code at every step.
- **Custom Screenshot Upload:** (Optional) Upload your own screenshot to experience AI-driven code generation (if integrated).
- **Final HTML Output:** Each demo provides a complete, production-quality HTML/CSS result for reference.
- **Modern UI/UX:** Built with React, Tailwind CSS, and Monaco Editor for a smooth developer and user experience.
## Getting Started
### Prerequisites
- Node.js (v16+ recommended)
- pnpm (recommended) or npm
### Installation
```bash
pnpm install
# or
npm install
```
### Running the Development Server
```bash
pnpm run dev
# or
npm run dev
```
Visit [http://localhost:5173](http://localhost:5173) in your browser to use the demo.
## Usage
1. **Select a Demo:** Choose from YouTube, Instagram, or Google Search Design in the left sidebar.
2. **Play the Generation:** Click the "▶️ Play" button to watch the UI being reconstructed step by step, or use the slider to scrub through steps manually.
3. **View Final Result:** At the end, see the complete HTML/CSS for the chosen interface.
4. **(Optional) Upload Screenshot:** If enabled, upload your own screenshot to try AI-powered code generation.
## Demo Data & Extensibility
- **Step Files:** Each demo consists of a manifest and a sequence of HTML files (`0001.html`, `0002.html`, ...), plus a `final_*.html` for the complete result.
- **Adding New Demos:**
1. Prepare your stepwise HTML files and a manifest in a new folder under `public/demos/`.
2. Add a thumbnail image to `public/assets/`.
3. Update `public/demos.json` with the new demo's metadata.
- **Assets:** All images used in demos are stored in `public/assets/` and referenced relatively in HTML.
## Dependencies
- [React](https://react.dev/) 18+
- [Vite](https://vitejs.dev/)
- [Tailwind CSS](https://tailwindcss.com/)
- [@monaco-editor/react](https://github.com/suren-atoyan/monaco-react)
## Scripts
- `script/prepare_steps.py`: Python script to generate stepwise HTML files from a design.
## Tools
- `UIED`: Tradition UI element detection used to detect elements in the screenshot and obtain corresponding bboxes.

13
demo/index.html Normal file
View File

@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>UI Code Demo</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="m-0">
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>

19
demo/package.json Normal file
View File

@@ -0,0 +1,19 @@
{
"name": "screencoder-demo",
"version": "0.0.1",
"private": true,
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"react": "^18.3.0",
"react-dom": "^18.3.0",
"@monaco-editor/react": "^4.7.0"
},
"devDependencies": {
"@vitejs/plugin-react": "^4.0.0",
"vite": "^5.0.0"
}
}

1008
demo/pnpm-lock.yaml generated Normal file
View File

File diff suppressed because it is too large Load Diff

86
demo/public/assets/debug/bboxes.json Normal file
View File

@@ -0,0 +1,86 @@
[
{
"id": "ph0",
"x": 127,
"y": 200,
"w": 1061,
"h": 505
},
{
"id": "ph1",
"x": 148,
"y": 726,
"w": 63,
"h": 63
},
{
"id": "ph2",
"x": 1231,
"y": 200,
"w": 1061,
"h": 505
},
{
"id": "ph3",
"x": 1252,
"y": 726,
"w": 63,
"h": 63
},
{
"id": "ph4",
"x": 2335,
"y": 200,
"w": 1033,
"h": 505
},
{
"id": "ph5",
"x": 2356,
"y": 726,
"w": 63,
"h": 63
},
{
"id": "ph6",
"x": 127,
"y": 937,
"w": 1061,
"h": 505
},
{
"id": "ph7",
"x": 148,
"y": 1463,
"w": 63,
"h": 63
},
{
"id": "ph8",
"x": 1231,
"y": 937,
"w": 1061,
"h": 505
},
{
"id": "ph9",
"x": 1252,
"y": 1463,
"w": 63,
"h": 63
},
{
"id": "ph10",
"x": 2335,
"y": 937,
"w": 1033,
"h": 505
},
{
"id": "ph11",
"x": 2356,
"y": 1463,
"w": 63,
"h": 63
}
]

86
demo/public/assets/debug/bboxes_test.json Normal file
View File

@@ -0,0 +1,86 @@
[
{
"id": "ph0",
"x": 127,
"y": 200,
"w": 1061,
"h": 505
},
{
"id": "ph1",
"x": 148,
"y": 726,
"w": 63,
"h": 63
},
{
"id": "ph2",
"x": 1231,
"y": 200,
"w": 1061,
"h": 505
},
{
"id": "ph3",
"x": 1252,
"y": 726,
"w": 63,
"h": 63
},
{
"id": "ph4",
"x": 2335,
"y": 200,
"w": 1033,
"h": 505
},
{
"id": "ph5",
"x": 2356,
"y": 726,
"w": 63,
"h": 63
},
{
"id": "ph6",
"x": 127,
"y": 937,
"w": 1061,
"h": 505
},
{
"id": "ph7",
"x": 148,
"y": 1463,
"w": 63,
"h": 63
},
{
"id": "ph8",
"x": 1231,
"y": 937,
"w": 1061,
"h": 505
},
{
"id": "ph9",
"x": 1252,
"y": 1463,
"w": 63,
"h": 63
},
{
"id": "ph10",
"x": 2335,
"y": 937,
"w": 1033,
"h": 505
},
{
"id": "ph11",
"x": 2356,
"y": 1463,
"w": 63,
"h": 63
}
]

130
demo/public/assets/debug/bboxes_test_demo1.json Normal file
View File

@@ -0,0 +1,130 @@
{
"regions": [
{
"id": "1",
"x": 0.004750593824228029,
"y": 0.0,
"w": 0.02642517814726841,
"h": 0.9970760233918129
},
{
"id": "2",
"x": 0.027612826603325414,
"y": 0.0,
"w": 0.9706057007125891,
"h": 0.0608187134502924
},
{
"id": "3",
"x": 0.03770783847980998,
"y": 0.05321637426900585,
"w": 0.9706057007125891,
"h": 0.05146198830409357
},
{
"id": "4",
"x": 0.03770783847980998,
"y": 0.10526315789473684,
"w": 0.9706057007125891,
"h": 0.8912280701754386
}
],
"placeholders": [
{
"id": "ph0",
"x": 0.03770783847980998,
"y": 0.10526315789473684,
"w": 0.31502375296912116,
"h": 0.26666666666666666,
"region_id": "4"
},
{
"id": "ph1",
"x": 0.043942992874109264,
"y": 0.3830409356725146,
"w": 0.018705463182897862,
"h": 0.03333333333333333,
"region_id": "4"
},
{
"id": "ph2",
"x": 0.36549881235154397,
"y": 0.10526315789473684,
"w": 0.31502375296912116,
"h": 0.26666666666666666,
"region_id": "4"
},
{
"id": "ph3",
"x": 0.37173396674584325,
"y": 0.3830409356725146,
"w": 0.018705463182897862,
"h": 0.03333333333333333,
"region_id": "4"
},
{
"id": "ph4",
"x": 0.6932897862232779,
"y": 0.10526315789473684,
"w": 0.31502375296912116,
"h": 0.26666666666666666,
"region_id": "4"
},
{
"id": "ph5",
"x": 0.6995249406175772,
"y": 0.3830409356725146,
"w": 0.018705463182897862,
"h": 0.03333333333333333,
"region_id": "4"
},
{
"id": "ph6",
"x": 0.03770783847980998,
"y": 0.49415204678362573,
"w": 0.31502375296912116,
"h": 0.26666666666666666,
"region_id": "4"
},
{
"id": "ph7",
"x": 0.043942992874109264,
"y": 0.7719298245614035,
"w": 0.018705463182897862,
"h": 0.03333333333333333,
"region_id": "4"
},
{
"id": "ph8",
"x": 0.36549881235154397,
"y": 0.49415204678362573,
"w": 0.31502375296912116,
"h": 0.26666666666666666,
"region_id": "4"
},
{
"id": "ph9",
"x": 0.37173396674584325,
"y": 0.7719298245614035,
"w": 0.018705463182897862,
"h": 0.03333333333333333,
"region_id": "4"
},
{
"id": "ph10",
"x": 0.6932897862232779,
"y": 0.49415204678362573,
"w": 0.31502375296912116,
"h": 0.26666666666666666,
"region_id": "4"
},
{
"id": "ph11",
"x": 0.6995249406175772,
"y": 0.7719298245614035,
"w": 0.018705463182897862,
"h": 0.03333333333333333,
"region_id": "4"
}
]
}

122
demo/public/assets/debug/bboxes_test_demo2.json Normal file
View File

@@ -0,0 +1,122 @@
{
"regions": [
{
"id": "1",
"x": 0.004555010511562719,
"y": 0.0011806375442739079,
"w": 0.14856341976173792,
"h": 0.9893742621015348
},
{
"id": "2",
"x": 0.24456902592852137,
"y": 0.0011806375442739079,
"w": 0.8405746320953048,
"h": 0.29988193624557263
},
{
"id": "3",
"x": 0.24456902592852137,
"y": 0.30165289256198347,
"w": 0.8405746320953048,
"h": 0.15348288075560804
},
{
"id": "4",
"x": 0.24456902592852137,
"y": 0.4557260920897285,
"w": 0.8405746320953048,
"h": 0.5348288075560803
}
],
"placeholders": [
{
"id": "ph0",
"x": 0.2697967764540995,
"y": 0.09563164108618655,
"w": 0.11247372109320253,
"h": 0.19952774498229045,
"region_id": "2"
},
{
"id": "ph1",
"x": 0.25718290119131043,
"y": 0.3270365997638725,
"w": 0.06236860546601261,
"h": 0.11097992916174734,
"region_id": "3"
},
{
"id": "ph2",
"x": 0.38297126839523477,
"y": 0.31286894923258557,
"w": 0.06236860546601261,
"h": 0.11097992916174734,
"region_id": "3"
},
{
"id": "ph3",
"x": 0.508759635599159,
"y": 0.3270365997638725,
"w": 0.06236860546601261,
"h": 0.11097992916174734,
"region_id": "3"
},
{
"id": "ph4",
"x": 0.6338472319551507,
"y": 0.3270365997638725,
"w": 0.06236860546601261,
"h": 0.11097992916174734,
"region_id": "3"
},
{
"id": "ph5",
"x": 0.7585844428871759,
"y": 0.3270365997638725,
"w": 0.06236860546601261,
"h": 0.11097992916174734,
"region_id": "3"
},
{
"id": "ph6",
"x": 0.8836720392431675,
"y": 0.3270365997638725,
"w": 0.06236860546601261,
"h": 0.11097992916174734,
"region_id": "3"
},
{
"id": "ph7",
"x": 1.0098107918710582,
"y": 0.31286894923258557,
"w": 0.06236860546601261,
"h": 0.11097992916174734,
"region_id": "3"
},
{
"id": "ph8",
"x": 0.24456902592852137,
"y": 0.5377804014167651,
"w": 0.27610371408549406,
"h": 0.5330578512396694,
"region_id": "4"
},
{
"id": "ph9",
"x": 0.52697967764541,
"y": 0.5377804014167651,
"w": 0.27610371408549406,
"h": 0.5330578512396694,
"region_id": "4"
},
{
"id": "ph10",
"x": 0.8093903293622985,
"y": 0.5377804014167651,
"w": 0.27610371408549406,
"h": 0.5330578512396694,
"region_id": "4"
}
]
}

91
demo/public/assets/debug/bboxes_test_demo4.json Normal file
View File

@@ -0,0 +1,91 @@
{
"regions": [
{
"id": "1",
"x": 0.012174643157010915,
"y": 0.007801418439716312,
"w": 0.9718723761544921,
"h": 0.07730496453900709
},
{
"id": "2",
"x": 0.012174643157010915,
"y": 0.12624113475177304,
"w": 0.6599496221662469,
"h": 0.8631205673758865
},
{
"id": "3",
"x": 0.6863979848866498,
"y": 0.12624113475177304,
"w": 0.2976490344248531,
"h": 0.8631205673758865
}
],
"placeholders": [
{
"id": "ph0",
"x": 0.031066330814441646,
"y": 0.25957446808510637,
"w": 0.09991603694374475,
"h": 0.1773049645390071,
"region_id": "2"
},
{
"id": "ph1",
"x": 0.031066330814441646,
"y": 0.626241134751773,
"w": 0.02476910159529807,
"h": 0.04397163120567376,
"region_id": "2"
},
{
"id": "ph2",
"x": 0.06255247691015953,
"y": 0.626241134751773,
"w": 0.02476910159529807,
"h": 0.04397163120567376,
"region_id": "2"
},
{
"id": "ph3",
"x": 0.09361880772460117,
"y": 0.626241134751773,
"w": 0.02476910159529807,
"h": 0.04397163120567376,
"region_id": "2"
},
{
"id": "ph4",
"x": 0.031066330814441646,
"y": 0.7851063829787234,
"w": 0.018471872376154493,
"h": 0.03333333333333333,
"region_id": "2"
},
{
"id": "ph5",
"x": 0.031066330814441646,
"y": 0.8290780141843972,
"w": 0.018471872376154493,
"h": 0.03333333333333333,
"region_id": "2"
},
{
"id": "ph6",
"x": 0.031066330814441646,
"y": 0.8765957446808511,
"w": 0.015533165407220823,
"h": 0.027659574468085105,
"region_id": "2"
},
{
"id": "ph7",
"x": 0.1570109151973132,
"y": 0.8794326241134752,
"w": 0.012174643157010915,
"h": 0.02198581560283688,
"region_id": "2"
}
]
}

79
demo/public/assets/debug/bboxes_test_ins.json Normal file
View File

@@ -0,0 +1,79 @@
[
{
"id": "ph0",
"x": 758,
"y": 127,
"w": 321,
"h": 321
},
{
"id": "ph3",
"x": 749,
"y": 503,
"w": 178,
"h": 178
},
{
"id": "ph4",
"x": 970,
"y": 503,
"w": 178,
"h": 178
},
{
"id": "ph5",
"x": 1192,
"y": 503,
"w": 178,
"h": 178
},
{
"id": "ph6",
"x": 1406,
"y": 503,
"w": 178,
"h": 178
},
{
"id": "ph7",
"x": 1620,
"y": 503,
"w": 178,
"h": 178
},
{
"id": "ph8",
"x": 1834,
"y": 503,
"w": 178,
"h": 178
},
{
"id": "ph9",
"x": 2057,
"y": 503,
"w": 178,
"h": 178
},
{
"id": "ph10",
"x": 713,
"y": 864,
"w": 701,
"h": 830
},
{
"id": "ph11",
"x": 1432,
"y": 864,
"w": 701,
"h": 830
},
{
"id": "ph12",
"x": 2152,
"y": 864,
"w": 701,
"h": 830
}
]

BIN
demo/public/assets/debug/cropped_images_demo1/ph0.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 407 KiB

BIN
demo/public/assets/debug/cropped_images_demo1/ph1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.5 KiB

BIN
demo/public/assets/debug/cropped_images_demo1/ph10.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 217 KiB

BIN
demo/public/assets/debug/cropped_images_demo1/ph11.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.6 KiB

BIN
demo/public/assets/debug/cropped_images_demo1/ph2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 244 KiB

BIN
demo/public/assets/debug/cropped_images_demo1/ph3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.6 KiB

BIN
demo/public/assets/debug/cropped_images_demo1/ph4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 484 KiB

BIN
demo/public/assets/debug/cropped_images_demo1/ph5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.4 KiB

BIN
demo/public/assets/debug/cropped_images_demo1/ph6.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 712 KiB

BIN
demo/public/assets/debug/cropped_images_demo1/ph7.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.7 KiB

BIN
demo/public/assets/debug/cropped_images_demo1/ph8.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 570 KiB

BIN
demo/public/assets/debug/cropped_images_demo1/ph9.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.6 KiB

BIN
demo/public/assets/debug/cropped_images_demo2/ph0.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 126 KiB

BIN
demo/public/assets/debug/cropped_images_demo2/ph1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 43 KiB

BIN
demo/public/assets/debug/cropped_images_demo2/ph10.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 841 KiB

BIN
demo/public/assets/debug/cropped_images_demo2/ph2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

BIN
demo/public/assets/debug/cropped_images_demo2/ph3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 44 KiB

BIN
demo/public/assets/debug/cropped_images_demo2/ph4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 44 KiB

BIN
demo/public/assets/debug/cropped_images_demo2/ph5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

BIN
demo/public/assets/debug/cropped_images_demo2/ph6.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 44 KiB

BIN
demo/public/assets/debug/cropped_images_demo2/ph7.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

BIN
demo/public/assets/debug/cropped_images_demo2/ph8.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 715 KiB

BIN
demo/public/assets/debug/cropped_images_demo2/ph9.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 846 KiB

BIN
demo/public/assets/debug/debug_gray_bboxes.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.4 MiB

BIN
demo/public/assets/debug/debug_gray_bboxes_test_demo1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.1 MiB

BIN
demo/public/assets/debug/debug_gray_bboxes_test_demo2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 MiB

BIN
demo/public/assets/debug/debug_overlay.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.1 MiB

241
demo/public/assets/debug/final_demo1.html Normal file
View File

@@ -0,0 +1,241 @@
<!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:0.5%;top:0%;width:2.6722%;height:99.7661%;">
<div class="flex flex-col items-center space-y-6 p-4">
<!-- 汉堡菜单 -->
<div class="flex flex-col items-center">
<svg class="h-6 w-8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
<path d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</div>
<!-- 首页 -->
<div class="flex flex-col items-center">
<svg class="h-6 w-8" fill="currentColor" viewbox="0 0 24 24">
<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
</svg>
<span class="text-sm mt-1">首页</span>
</div>
<!-- Shorts -->
<div class="flex flex-col items-center">
<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
<svg class="h-6 w-8" fill="currentColor" viewbox="0 0 24 24">
<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
</svg>
<span class="text-sm mt-1">Shorts</span>
</div>
<!-- 订阅 -->
<div class="flex flex-col items-center">
<svg class="h-6 w-8" fill="currentColor" viewbox="0 0 24 24">
<rect height="12" rx="2" width="20" x="2" y="6"></rect>
<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
</svg>
<span class="text-sm mt-1">订阅</span>
</div>
<!-- 我 -->
<div class="flex flex-col items-center">
<svg class="h-6 w-8" fill="currentColor" viewbox="0 0 24 24">
<circle cx="12" cy="8" r="4"></circle>
<path d="M4 20a8 8 0 0116 0H4z"></path>
</svg>
<span class="text-sm mt-1">我</span>
</div>
</div>
</div>
<!-- ───────────── 顶部导航 ───────────── -->
<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
<div class="flex items-center">
<!-- Logo -->
<div class="flex items-center ml-4 space-x-1">
<svg class="w-8 h-6" viewbox="0 0 90 60">
<rect fill="#FF0000" height="60" rx="12" width="90"></rect>
<polygon fill="#fff" points="36,18 60,30 36,42"></polygon>
</svg>
<span class="text-xl font-bold">YouTube</span>
<span class="text-sm font-medium">HK</span>
</div>
<!-- 搜索 -->
<div class="flex items-center mx-10 flex-grow">
<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" type="text"/>
<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100">
<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z"></path>
</svg>
</button>
<!-- 语音搜索 -->
<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1">
<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 24 24">
<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z"></path>
<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
</svg>
</button>
</div>
<!-- 创建 / 通知 / 头像 -->
<div class="flex items-center mr-4 space-x-4">
<!-- 创建(摄像机 +) -->
<button class="rounded-full p-2 hover:bg-gray-100">
<svg class="h-6 w-6" fill="currentColor" viewbox="0 0 24 24">
<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z"></path>
<rect fill="#fff" height="6" rx="1" width="6" x="9" y="9"></rect>
<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></path>
</svg>
</button>
<!-- 通知铃铛 -->
<button class="rounded-full p-2 hover:bg-gray-100">
<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5"></path>
<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z"></path>
</svg>
</button>
<!-- 头像 -->
<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center">Y</div>
</div>
</div>
</div>
<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
<div class="flex items-center space-x-2">
<span class="bg-black text-white rounded-md px-3 py-2 font-medium">全部</span>
<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">播客</span>
<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">游戏</span>
<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">直播</span>
<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">数学</span>
<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">篮球</span>
<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">足球</span>
<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">动画</span>
<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">最近上传</span>
<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">发现新视频</span>
</div>
</div>
<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
<div class="grid grid-cols-3 gap-4">
<div class="relative bg-white rounded shadow">
<div class="w-full h-48 rounded-t object-cover" style="background-image: url('cropped_images_demo1/ph0.png'); background-size: 100% 100%; background-position: center; background-repeat: no-repeat;"></div>
<div class="absolute bottom-2 right-2 bg-black text-white text-xs px-1 py-0.5 rounded">
26:24
</div>
<div class="p-2 flex">
<div class="w-6 h-6 rounded-full mr-2 object-cover" style="background-image: url('cropped_images_demo1/ph1.png'); background-size: 100% 100%; background-position: center; background-repeat: no-repeat;"></div>
<div class="flex-1">
<h3 class="text-sm font-medium">
The Key Equation Behind Probability
</h3>
<p class="text-xs text-gray-500">
Artem Kirsanov
<span class="font-bold">
✔
</span>
• 27万次观看 • 10个月前
</p>
</div>
</div>
</div>
<div class="relative bg-white rounded shadow">
<div class="w-full h-48 rounded-t object-cover" style="background-image: url('cropped_images_demo1/ph2.png'); background-size: 100% 100%; background-position: center; background-repeat: no-repeat;"></div>
<div class="absolute bottom-2 right-2 bg-black text-white text-xs px-1 py-0.5 rounded">
49:40
</div>
<div class="p-2 flex">
<div class="w-6 h-6 rounded-full mr-2 object-cover" style="background-image: url('cropped_images_demo1/ph3.png'); background-size: 100% 100%; background-position: center; background-repeat: no-repeat;"></div>
<div class="flex-1">
<h3 class="text-sm font-medium">
Statistical mechanics of extensive-width shallow neural networks near interpolation
</h3>
<p class="text-xs text-gray-500">
ICTP Quantitative Life Sciences • 48次观看 • 22小时前
</p>
</div>
</div>
</div>
<div class="relative bg-white rounded shadow">
<div class="w-full h-48 rounded-t object-cover" style="background-image: url('cropped_images_demo1/ph4.png'); background-size: 100% 100%; background-position: center; background-repeat: no-repeat;"></div>
<div class="absolute bottom-2 right-2 bg-black text-white text-xs px-1 py-0.5 rounded">
11:51
</div>
<div class="p-2 flex">
<div class="w-6 h-6 rounded-full mr-2 object-cover" style="background-image: url('cropped_images_demo1/ph5.png'); background-size: 100% 100%; background-position: center; background-repeat: no-repeat;"></div>
<div class="flex-1">
<h3 class="text-sm font-medium">
Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
</h3>
<p class="text-xs text-gray-500">
Hsi-Wei • 9.3万次观看 • 1个月前
</p>
</div>
</div>
</div>
<div class="relative bg-white rounded shadow">
<div class="w-full h-48 rounded-t object-cover" style="background-image: url('cropped_images_demo1/ph6.png'); background-size: 100% 100%; background-position: center; background-repeat: no-repeat;"></div>
<div class="absolute bottom-2 right-2 bg-gray-300 text-gray-700 text-xs px-1 py-0.5 rounded">
→
</div>
<div class="p-2 flex">
<div class="w-6 h-6 rounded-full mr-2 object-cover" style="background-image: url('cropped_images_demo1/ph7.png'); background-size: 100% 100%; background-position: center; background-repeat: no-repeat;"></div>
<div class="flex-1">
<h3 class="text-sm font-medium">
EVE Online: 加入我们，开启宇宙之旅
</h3>
<p class="text-xs text-gray-500">
赞助厂商广告 · EVE Online
</p>
</div>
</div>
</div>
<div class="relative bg-white rounded shadow">
<div class="w-full h-48 rounded-t object-cover" style="background-image: url('cropped_images_demo1/ph8.png'); background-size: 100% 100%; background-position: center; background-repeat: no-repeat;"></div>
<div class="absolute bottom-2 right-2 bg-black text-white text-xs px-1 py-0.5 rounded">
12:44
</div>
<div class="p-2 flex">
<div class="w-6 h-6 rounded-full mr-2 object-cover" style="background-image: url('cropped_images_demo1/ph9.png'); background-size: 100% 100%; background-position: center; background-repeat: no-repeat;"></div>
<div class="flex-1">
<h3 class="text-sm font-medium">
"Dopamine Loading" is the EASIEST way to get ADDICTED to studying
</h3>
<p class="text-xs text-gray-500">
Matthew Smith
</p>
</div>
</div>
</div>
<div class="relative bg-white rounded shadow">
<div class="w-full h-48 rounded-t object-cover" style="background-image: url('cropped_images_demo1/ph10.png'); background-size: 100% 100%; background-position: center; background-repeat: no-repeat;"></div>
<div class="absolute bottom-2 right-2 bg-black text-white text-xs px-1 py-0.5 rounded">
36:54
</div>
<div class="p-2 flex">
<div class="w-6 h-6 rounded-full mr-2 object-cover" style="background-image: url('cropped_images_demo1/ph11.png'); background-size: 100% 100%; background-position: center; background-repeat: no-repeat;"></div>
<div class="flex-1">
<h3 class="text-sm font-medium">
But what is quantum computing? (Grover's Algorithm)
</h3>
<p class="text-xs text-gray-500">
3Blue1Brown
<span class="font-bold">
✔
</span>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

357
demo/public/assets/debug/final_demo2.html Normal file
View File

@@ -0,0 +1,357 @@
<!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: 0.4905395935529082%; top: 0.1770956316410862%; width: 14.891380518570427%; height: 98.99645808736717%;">
<div class="flex flex-col justify-between h-full p-4 bg-white">
<!-- 主要导航区域 -->
<div class="flex flex-col space-y-6">
<div class="text-3xl font-bold">
Instagram
</div>
<div class="flex items-center space-x-4">
<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
</path>
</svg>
<span>
首页
</span>
</div>
<div class="flex items-center space-x-4">
<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
</path>
</svg>
<span>
搜索
</span>
</div>
<div class="flex items-center space-x-4">
<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
</path>
</svg>
<span>
探索
</span>
</div>
<div class="flex items-center space-x-4">
<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
</path>
</svg>
<span>
Reels
</span>
</div>
<div class="flex items-center space-x-4">
<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
</path>
</svg>
<span>
消息
</span>
</div>
<div class="flex items-center space-x-4 relative">
<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
</path>
</svg>
<span>
通知
</span>
<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
•
</span>
</div>
<div class="flex items-center space-x-4">
<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
</path>
</svg>
<span>
创建
</span>
</div>
<div class="flex items-center space-x-4">
<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
<circle cx="12" cy="12" r="4">
</circle>
</svg>
<span>
主页
</span>
</div>
</div>
<!-- 底部导航区域 -->
<div class="flex flex-col space-y-4">
<div class="flex items-center space-x-4">
<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
</path>
</svg>
<span>
Threads
</span>
</div>
<div class="flex items-center space-x-4">
<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
</path>
</svg>
<span>
更多
</span>
</div>
</div>
</div>
</div>
<div class="box" id="2" style="left: 24.487035739313246%; top: 0.1770956316410862%; width: 84.09250175192712%; height: 30.047225501770956%;">
<div class="flex items-center space-x-8 p-6">
<!-- 头像及渐变环 -->
<div class="relative">
<svg class="w-40 h-40" viewbox="0 0 200 200">
<defs>
<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
<stop offset="0%" stop-color="#ff28a4">
</stop>
<stop offset="100%" stop-color="#ffb646">
</stop>
</lineargradient>
</defs>
<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
</circle>
</svg>
<img class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 rounded-full" src="cropped_images_demo2/ph0.png"/>
</div>
<!-- 右侧信息区域 -->
<div class="flex flex-col">
<!-- 顶部栏：用户名 + 认证 + 按钮 -->
<div class="flex items-center space-x-2">
<h1 class="text-xl font-bold">
mirandakerr
</h1>
<!-- 认证徽章 -->
<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z">
</path>
</svg>
<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium">
关注
</button>
<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium">
发消息
</button>
<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z">
</path>
</svg>
</button>
<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z">
</path>
</svg>
</button>
</div>
<!-- 统计数据 -->
<div class="mt-4 flex space-x-6">
<div>
<span class="font-bold">
3206
</span>
帖子
</div>
<div>
<span class="font-bold">
1438万
</span>
粉丝
</div>
<div>
<span class="font-bold">
7496
</span>
关注
</div>
</div>
<!-- 名字 -->
<div class="mt-2 text-lg font-semibold">
Miranda Kerr
</div>
<!-- @用户名 -->
<div class="mt-1 text-gray-600">
@mirandakerr
</div>
<!-- 简介 -->
<div class="mt-1">
Founder &amp; CEO of
<span class="text-blue-600">
@koraorganics
</span>
<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" viewbox="0 0 20 20">
<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z">
</path>
</svg>
</div>
<!-- 链接 -->
<div class="mt-1 text-blue-600">
<svg class="inline w-5 h-5" fill="currentColor" viewbox="0 0 20 20">
<path d="M13.5 6a2.5 2.5 0 10-5 0v8a2.5 2.5 0 005 0V6zm-1.25 7a1.25 1.25 0 112.5 0v1.5a.75.75 0 01-1.5 0v-1.5a1.25 1.25 0 01-1.25-1.25zM6.5 3a1 1 0 00-1 1v12a1 1 0 001 1h7a1 1 0 001-1V4a1 1 0 00-1-1h-7z">
</path>
</svg>
linktr.ee/mirandakerr
</div>
<!-- 关注者提示 -->
<div class="mt-2 text-gray-600">
cristiano关注了
</div>
</div>
</div>
</div>
<div class="box" id="3" style="left: 24.487035739313246%; top: 30.22432113341204%; width: 84.09250175192712%; height: 15.407319952774499%;">
<div class="flex items-center space-x-20 overflow-x-auto px-4 py-2">
<div class="flex flex-col items-center">
<img class="w-20 h-20 rounded-full" src="cropped_images_demo2/ph1.png"/>
<p class="mt-1 text-sm font-medium">
KORA Glow
</p>
</div>
<div class="flex flex-col items-center">
<img class="w-20 h-20 rounded-full" src="cropped_images_demo2/ph2.png"/>
<p class="mt-1 text-sm font-medium">
KORA Orga...
</p>
</div>
<div class="flex flex-col items-center">
<img class="w-20 h-20 rounded-full" src="cropped_images_demo2/ph3.png"/>
<p class="mt-1 text-sm font-medium">
Events
</p>
</div>
<div class="flex flex-col items-center">
<img class="w-20 h-20 rounded-full" src="cropped_images_demo2/ph4.png"/>
<p class="mt-1 text-sm font-medium">
MK Home
</p>
</div>
<div class="flex flex-col items-center">
<img class="w-20 h-20 rounded-full" src="cropped_images_demo2/ph5.png"/>
<p class="mt-1 text-sm font-medium">
Self-care
</p>
</div>
<div class="flex flex-col items-center">
<img class="w-20 h-20 rounded-full" src="cropped_images_demo2/ph6.png"/>
<p class="mt-1 text-sm font-medium">
Tutorials
</p>
</div>
<div class="flex flex-col items-center">
<img class="w-20 h-20 rounded-full" src="cropped_images_demo2/ph7.png"/>
<p class="mt-1 text-sm font-medium">
Wellness W...
</p>
</div>
</div>
</div>
<div class="box" id="4" style="left: 24.487035739313246%; top: 45.63164108618654%; width: 84.09250175192712%; height: 53.54191263282172%;">
<div>
<div class="flex justify-center border-b">
<div class="flex items-center px-4 py-3 border-b-2 border-black">
<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
</path>
</svg>
<span>
帖子
</span>
</div>
<div class="flex items-center px-4 py-3 text-gray-700">
<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
</path>
</svg>
<span>
REELS
</span>
</div>
<div class="flex items-center px-4 py-3 text-gray-700">
<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
</path>
</svg>
<span>
标记内容
</span>
</div>
</div>
<div class="grid grid-cols-3 gap-2 mt-2">
<div class="relative">
<img class="w-full h-96" src="cropped_images_demo2/ph8.png"/>
<div class="absolute top-2 right-2">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
</path>
</svg>
</div>
</div>
<div class="relative">
<img class="w-full h-96" src="cropped_images_demo2/ph9.png"/>
<div class="absolute top-2 right-2">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
</path>
</svg>
</div>
</div>
<div class="relative">
<img class="w-full h-96" src="cropped_images_demo2/ph10.png"/>
<div class="absolute top-2 right-2">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
</path>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

31
demo/public/assets/debug/mapping.json Normal file
View File

@@ -0,0 +1,31 @@
{
"scale": 4.14859437751004,
"dx": -14.623466634208853,
"dy": 16.50960888201257,
"mapping": {
"ph0": [
22
],
"ph2": [
23
],
"ph4": [
24
],
"ph6": [
63
],
"ph8": [
64
],
"ph10": [
65
],
"ph1": [],
"ph3": [],
"ph5": [],
"ph7": [],
"ph9": [],
"ph11": []
}
}

253
demo/public/assets/debug/test_demo1.html Normal file
View File

@@ -0,0 +1,253 @@
<!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:0.5%;top:0%;width:2.6722%;height:99.7661%;">
<div class="flex flex-col items-center space-y-6 p-4">
<!-- 汉堡菜单 -->
<div class="flex flex-col items-center">
<svg class="h-6 w-8" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
<path d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</div>
<!-- 首页 -->
<div class="flex flex-col items-center">
<svg class="h-6 w-8" viewBox="0 0 24 24" fill="currentColor">
<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"/>
</svg>
<span class="text-sm mt-1">首页</span>
</div>
<!-- Shorts -->
<div class="flex flex-col items-center">
<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
<svg class="h-6 w-8" viewBox="0 0 24 24" fill="currentColor">
<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"/>
<polygon fill="#fff" points="9 8 9 16 15 12"/>
</svg>
<span class="text-sm mt-1">Shorts</span>
</div>
<!-- 订阅 -->
<div class="flex flex-col items-center">
<svg class="h-6 w-8" viewBox="0 0 24 24" fill="currentColor">
<rect x="2" y="6" width="20" height="12" rx="2"></rect>
<polygon fill="#fff" points="10 9 16 12 10 15"/>
</svg>
<span class="text-sm mt-1">订阅</span>
</div>
<!-- 我 -->
<div class="flex flex-col items-center">
<svg class="h-6 w-8" viewBox="0 0 24 24" fill="currentColor">
<circle cx="12" cy="8" r="4"></circle>
<path d="M4 20a8 8 0 0116 0H4z"></path>
</svg>
<span class="text-sm mt-1">我</span>
</div>
</div>
</div>
<!-- ───────────── 顶部导航 ───────────── -->
<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
<div class="flex items-center">
<!-- Logo -->
<div class="flex items-center ml-4 space-x-1">
<svg class="w-8 h-6" viewBox="0 0 90 60">
<rect width="90" height="60" rx="12" fill="#FF0000"></rect>
<polygon points="36,18 60,30 36,42" fill="#fff"></polygon>
</svg>
<span class="text-xl font-bold">YouTube</span>
<span class="text-sm font-medium">HK</span>
</div>
<!-- 搜索 -->
<div class="flex items-center mx-10 flex-grow">
<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" type="text"/>
<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100">
<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z"/>
</svg>
</button>
<!-- 语音搜索 -->
<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1">
<svg class="w-5 h-5 text-gray-700" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z"/>
<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12 17v4" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8 21h8" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
</div>
<!-- 创建 / 通知 / 头像 -->
<div class="flex items-center mr-4 space-x-4">
<!-- 创建(摄像机 +) -->
<button class="rounded-full p-2 hover:bg-gray-100">
<svg class="h-6 w-6" viewBox="0 0 24 24" fill="currentColor">
<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z"/>
<rect x="9" y="9" width="6" height="6" rx="1" fill="#fff"/>
<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
<!-- 通知铃铛 -->
<button class="rounded-full p-2 hover:bg-gray-100">
<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5"/>
<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z"/>
</svg>
</button>
<!-- 头像 -->
<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center">Y</div>
</div>
</div>
</div>
<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
<div class="flex items-center space-x-2">
<span class="bg-black text-white rounded-md px-3 py-2 font-medium">全部</span>
<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">播客</span>
<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">游戏</span>
<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">直播</span>
<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">数学</span>
<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">篮球</span>
<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">足球</span>
<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">动画</span>
<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">最近上传</span>
<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">发现新视频</span>
</div>
</div>
<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
<div class="grid grid-cols-3 gap-4">
<div class="relative bg-white rounded shadow">
<div class="w-full h-48 rounded-t object-cover bg-gray-400"></div>
<div class="absolute bottom-2 right-2 bg-black text-white text-xs px-1 py-0.5 rounded">
26:24
</div>
<div class="p-2 flex">
<div class="w-6 h-6 rounded-full mr-2 object-cover bg-gray-400"></div>
<div class="flex-1">
<h3 class="text-sm font-medium">
The Key Equation Behind Probability
</h3>
<p class="text-xs text-gray-500">
Artem Kirsanov
<span class="font-bold">
✔
</span>
• 27万次观看 • 10个月前
</p>
</div>
</div>
</div>
<div class="relative bg-white rounded shadow">
<div class="w-full h-48 rounded-t object-cover bg-gray-400"></div>
<div class="absolute bottom-2 right-2 bg-black text-white text-xs px-1 py-0.5 rounded">
49:40
</div>
<div class="p-2 flex">
<div class="w-6 h-6 rounded-full mr-2 object-cover bg-gray-400"></div>
<div class="flex-1">
<h3 class="text-sm font-medium">
Statistical mechanics of extensive-width shallow neural networks near interpolation
</h3>
<p class="text-xs text-gray-500">
ICTP Quantitative Life Sciences • 48次观看 • 22小时前
</p>
</div>
</div>
</div>
<div class="relative bg-white rounded shadow">
<div class="w-full h-48 rounded-t object-cover bg-gray-400"></div>
<div class="absolute bottom-2 right-2 bg-black text-white text-xs px-1 py-0.5 rounded">
11:51
</div>
<div class="p-2 flex">
<div class="w-6 h-6 rounded-full mr-2 object-cover bg-gray-400"></div>
<div class="flex-1">
<h3 class="text-sm font-medium">
Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
</h3>
<p class="text-xs text-gray-500">
Hsi-Wei • 9.3万次观看 • 1个月前
</p>
</div>
</div>
</div>
<div class="relative bg-white rounded shadow">
<div class="w-full h-48 rounded-t object-cover bg-gray-400"></div>
<div class="absolute bottom-2 right-2 bg-gray-300 text-gray-700 text-xs px-1 py-0.5 rounded">
→
</div>
<div class="p-2 flex">
<div class="w-6 h-6 rounded-full mr-2 object-cover bg-gray-400"></div>
<div class="flex-1">
<h3 class="text-sm font-medium">
EVE Online: 加入我们，开启宇宙之旅
</h3>
<p class="text-xs text-gray-500">
赞助厂商广告 · EVE Online
</p>
</div>
</div>
</div>
<div class="relative bg-white rounded shadow">
<div class="w-full h-48 rounded-t object-cover bg-gray-400"></div>
<div class="absolute bottom-2 right-2 bg-black text-white text-xs px-1 py-0.5 rounded">
12:44
</div>
<div class="p-2 flex">
<div class="w-6 h-6 rounded-full mr-2 object-cover bg-gray-400"></div>
<div class="flex-1">
<h3 class="text-sm font-medium">
"Dopamine Loading" is the EASIEST way to get ADDICTED to studying
</h3>
<p class="text-xs text-gray-500">
Matthew Smith
</p>
</div>
</div>
</div>
<div class="relative bg-white rounded shadow">
<div class="w-full h-48 rounded-t object-cover bg-gray-400"></div>
<div class="absolute bottom-2 right-2 bg-black text-white text-xs px-1 py-0.5 rounded">
36:54
</div>
<div class="p-2 flex">
<div class="w-6 h-6 rounded-full mr-2 object-cover bg-gray-400"></div>
<div class="flex-1">
<h3 class="text-sm font-medium">
But what is quantum computing? (Grover's Algorithm)
</h3>
<p class="text-xs text-gray-500">
3Blue1Brown
<span class="font-bold">
✔
</span>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

382
demo/public/assets/debug/test_demo2.html Normal file
View File

@@ -0,0 +1,382 @@
<!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: 0.4905395935529082%; top: 0.1770956316410862%; width: 14.891380518570427%; height: 98.99645808736717%;">
<div class="flex flex-col justify-between h-full p-4 bg-white">
<!-- 主要导航区域 -->
<div class="flex flex-col space-y-6">
<div class="text-3xl font-bold">
Instagram
</div>
<div class="flex items-center space-x-4">
<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
</path>
</svg>
<span>
首页
</span>
</div>
<div class="flex items-center space-x-4">
<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
</path>
</svg>
<span>
搜索
</span>
</div>
<div class="flex items-center space-x-4">
<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
</path>
</svg>
<span>
探索
</span>
</div>
<div class="flex items-center space-x-4">
<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
</path>
</svg>
<span>
Reels
</span>
</div>
<div class="flex items-center space-x-4">
<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
</path>
</svg>
<span>
消息
</span>
</div>
<div class="flex items-center space-x-4 relative">
<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
</path>
</svg>
<span>
通知
</span>
<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
•
</span>
</div>
<div class="flex items-center space-x-4">
<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
</path>
</svg>
<span>
创建
</span>
</div>
<div class="flex items-center space-x-4">
<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
<circle cx="12" cy="12" r="4">
</circle>
</svg>
<span>
主页
</span>
</div>
</div>
<!-- 底部导航区域 -->
<div class="flex flex-col space-y-4">
<div class="flex items-center space-x-4">
<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
</path>
</svg>
<span>
Threads
</span>
</div>
<div class="flex items-center space-x-4">
<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
</path>
</svg>
<span>
更多
</span>
</div>
</div>
</div>
</div>
<div class="box" id="2" style="left: 24.487035739313246%; top: 0.1770956316410862%; width: 84.09250175192712%; height: 30.047225501770956%;">
<div class="flex items-center space-x-8 p-6">
<!-- 头像及渐变环 -->
<div class="relative">
<svg class="w-40 h-40" viewbox="0 0 200 200">
<defs>
<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
<stop offset="0%" stop-color="#ff28a4">
</stop>
<stop offset="100%" stop-color="#ffb646">
</stop>
</lineargradient>
</defs>
<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
</circle>
</svg>
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
</div>
</div>
<!-- 右侧信息区域 -->
<div class="flex flex-col">
<!-- 顶部栏：用户名 + 认证 + 按钮 -->
<div class="flex items-center space-x-2">
<h1 class="text-xl font-bold">
mirandakerr
</h1>
<!-- 认证徽章 -->
<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z">
</path>
</svg>
<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium">
关注
</button>
<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium">
发消息
</button>
<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z">
</path>
</svg>
</button>
<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z">
</path>
</svg>
</button>
</div>
<!-- 统计数据 -->
<div class="mt-4 flex space-x-6">
<div>
<span class="font-bold">
3206
</span>
帖子
</div>
<div>
<span class="font-bold">
1438万
</span>
粉丝
</div>
<div>
<span class="font-bold">
7496
</span>
关注
</div>
</div>
<!-- 名字 -->
<div class="mt-2 text-lg font-semibold">
Miranda Kerr
</div>
<!-- @用户名 -->
<div class="mt-1 text-gray-600">
@mirandakerr
</div>
<!-- 简介 -->
<div class="mt-1">
Founder &amp; CEO of
<span class="text-blue-600">
@koraorganics
</span>
<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" viewbox="0 0 20 20">
<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z">
</path>
</svg>
</div>
<!-- 链接 -->
<div class="mt-1 text-blue-600">
<svg class="inline w-5 h-5" fill="currentColor" viewbox="0 0 20 20">
<path d="M13.5 6a2.5 2.5 0 10-5 0v8a2.5 2.5 0 005 0V6zm-1.25 7a1.25 1.25 0 112.5 0v1.5a.75.75 0 01-1.5 0v-1.5a1.25 1.25 0 01-1.25-1.25zM6.5 3a1 1 0 00-1 1v12a1 1 0 001 1h7a1 1 0 001-1V4a1 1 0 00-1-1h-7z">
</path>
</svg>
linktr.ee/mirandakerr
</div>
<!-- 关注者提示 -->
<div class="mt-2 text-gray-600">
cristiano关注了
</div>
</div>
</div>
</div>
<div class="box" id="3" style="left: 24.487035739313246%; top: 30.22432113341204%; width: 84.09250175192712%; height: 15.407319952774499%;">
<div class="flex items-center space-x-20 overflow-x-auto px-4 py-2">
<div class="flex flex-col items-center">
<svg class="w-20 h-20 rounded-full bg-gray-400" viewbox="0 0 24 24">
<rect fill="gray" height="24" width="24" x="0" y="0">
</rect>
</svg>
<p class="mt-1 text-sm font-medium">
KORA Glow
</p>
</div>
<div class="flex flex-col items-center">
<svg class="w-20 h-20 rounded-full bg-gray-400" viewbox="0 0 24 24">
<rect fill="gray" height="24" width="24" x="0" y="0">
</rect>
</svg>
<p class="mt-1 text-sm font-medium">
KORA Orga...
</p>
</div>
<div class="flex flex-col items-center">
<svg class="w-20 h-20 rounded-full bg-gray-400" viewbox="0 0 24 24">
<rect fill="gray" height="24" width="24" x="0" y="0">
</rect>
</svg>
<p class="mt-1 text-sm font-medium">
Events
</p>
</div>
<div class="flex flex-col items-center">
<svg class="w-20 h-20 rounded-full bg-gray-400" viewbox="0 0 24 24">
<rect fill="gray" height="24" width="24" x="0" y="0">
</rect>
</svg>
<p class="mt-1 text-sm font-medium">
MK Home
</p>
</div>
<div class="flex flex-col items-center">
<svg class="w-20 h-20 rounded-full bg-gray-400" viewbox="0 0 24 24">
<rect fill="gray" height="24" width="24" x="0" y="0">
</rect>
</svg>
<p class="mt-1 text-sm font-medium">
Self-care
</p>
</div>
<div class="flex flex-col items-center">
<svg class="w-20 h-20 rounded-full bg-gray-400" viewbox="0 0 24 24">
<rect fill="gray" height="24" width="24" x="0" y="0">
</rect>
</svg>
<p class="mt-1 text-sm font-medium">
Tutorials
</p>
</div>
<div class="flex flex-col items-center">
<svg class="w-20 h-20 rounded-full bg-gray-400" viewbox="0 0 24 24">
<rect fill="gray" height="24" width="24" x="0" y="0">
</rect>
</svg>
<p class="mt-1 text-sm font-medium">
Wellness W...
</p>
</div>
</div>
</div>
<div class="box" id="4" style="left: 24.487035739313246%; top: 45.63164108618654%; width: 84.09250175192712%; height: 53.54191263282172%;">
<div>
<div class="flex justify-center border-b">
<div class="flex items-center px-4 py-3 border-b-2 border-black">
<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
</path>
</svg>
<span>
帖子
</span>
</div>
<div class="flex items-center px-4 py-3 text-gray-700">
<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
</path>
</svg>
<span>
REELS
</span>
</div>
<div class="flex items-center px-4 py-3 text-gray-700">
<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
</path>
</svg>
<span>
标记内容
</span>
</div>
</div>
<div class="grid grid-cols-3 gap-2 mt-2">
<div class="relative">
<div class="bg-gray-400 w-full h-96">
</div>
<div class="absolute top-2 right-2">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
</path>
</svg>
</div>
</div>
<div class="relative">
<div class="bg-gray-400 w-full h-96">
</div>
<div class="absolute top-2 right-2">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
</path>
</svg>
</div>
</div>
<div class="relative">
<div class="bg-gray-400 w-full h-96">
</div>
<div class="absolute top-2 right-2">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
</path>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

310
demo/public/assets/debug/test_demo4.html Normal file
View File

@@ -0,0 +1,310 @@
<!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: 1.2594458438287155%; top: 0.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
<div class="flex flex-row items-center">
<!-- LinkedIn Logo -->
<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
<text fill="blue" font-family="sans-serif" font-size="20" x="0" y="20">
Linked
</text>
<rect fill="blue" height="16" width="20" x="54" y="4">
</rect>
<text fill="white" font-family="sans-serif" font-size="16" x="58" y="18">
in
</text>
</svg>
<!-- Top Content -->
<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
<svg class="h-6 w-6" viewbox="0 0 24 24">
<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
</path>
</svg>
<span class="text-xs">
Top Content
</span>
</div>
<!-- People (with underline) -->
<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
<svg class="h-6 w-6" viewbox="0 0 24 24">
<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
</path>
</svg>
<span class="text-xs">
People
</span>
</div>
<!-- Learning -->
<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
<svg class="h-6 w-6" viewbox="0 0 24 24">
<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
</path>
</svg>
<span class="text-xs">
Learning
</span>
</div>
<!-- Jobs -->
<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
<svg class="h-6 w-6" viewbox="0 0 24 24">
<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
</path>
</svg>
<span class="text-xs">
Jobs
</span>
</div>
<!-- Games -->
<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
<svg class="h-6 w-6" viewbox="0 0 24 24">
<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-3a1 1 0 0 1-1-1V6z" fill="currentColor">
</path>
</svg>
<span class="text-xs">
Games
</span>
</div>
<!-- Divider -->
<div class="border-l border-gray-300 h-6 mx-4">
</div>
<!-- Join now -->
<div class="text-black text-sm font-medium cursor-pointer mr-4">
Join now
</div>
<!-- Sign in button -->
<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer">
Sign in
</button>
</div>
</div>
<div class="box" id="2" style="left: 1.2594458438287155%; top: 12.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
<div class="bg-white shadow rounded">
<div class="w-full h-40 bg-gray-300">
</div>
<div class="relative ml-6 -mt-16">
<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500">
</div>
</div>
<div class="p-6">
<div class="flex justify-between items-center mb-2">
<h1 class="text-2xl font-bold">
Andrej Karpathy
</h1>
<div class="text-gray-500">
...
</div>
</div>
<div class="flex items-center space-x-2 text-gray-700 mb-2">
<span>
San Francisco, California, United States
</span>
<span class="text-gray-500">
·
</span>
<a class="text-blue-600" href="#">
Contact Info
</a>
</div>
<div class="flex items-center space-x-2 text-gray-600 mb-4">
<span>
80K followers
</span>
<span class="text-gray-500">
·
</span>
<span>
280 connections
</span>
</div>
<div class="flex items-center space-x-2 mb-4">
<div class="flex space-x-2">
<div class="w-8 h-8 bg-gray-400 rounded-full">
</div>
<div class="w-8 h-8 bg-gray-400 rounded-full">
</div>
<div class="w-8 h-8 bg-gray-400 rounded-full">
</div>
</div>
<a class="text-blue-600" href="#">
See your mutual connections
</a>
</div>
<div class="flex space-x-4 mb-6">
<button class="bg-blue-600 text-white px-5 py-2 rounded-md">
Join to view profile
</button>
<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md">
Message
</button>
</div>
<div class="flex flex-col space-y-2">
<div class="flex items-center space-x-2">
<div class="w-6 h-6 bg-gray-400">
</div>
<a class="text-blue-600" href="#">
Tesla
</a>
</div>
<div class="flex items-center space-x-2">
<div class="w-6 h-6 bg-gray-400">
</div>
<a class="text-blue-600" href="#">
Stanford University
</a>
</div>
<div class="flex items-center space-x-2">
<div class="w-5 h-5 bg-gray-400">
</div>
<a class="text-blue-600" href="#">
Personal Website
</a>
<div class="w-4 h-4 bg-gray-400">
</div>
</div>
</div>
<div class="mt-8">
<h2 class="text-xl font-bold mb-2">
About
</h2>
<div class="flex items-center space-x-2">
<span>
https://karpathy.ai/
</span>
<a class="text-blue-600" href="#">
see more
</a>
</div>
</div>
</div>
</div>
</div>
<div class="box" id="3" style="left: 68.68178001679262%; top: 12.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
<h2 class="text-2xl font-bold mb-4">
Other similar profiles
</h2>
<div class="flex items-center mb-4">
<img alt="Manohar Paluri" class="w-12 h-12 rounded-full mr-4" src="manohar.jpg"/>
<div>
<h3 class="text-lg font-semibold">
Manohar Paluri
</h3>
<p class="text-gray-600">
Menlo Park, CA
</p>
<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
</path>
</svg>
Connect
</button>
</div>
</div>
<div class="flex items-center mb-4">
<img alt="Renjun Xu, PhD" class="w-12 h-12 rounded-full mr-4" src="renjun.jpg"/>
<div>
<h3 class="text-lg font-semibold">
Renjun Xu, PhD
</h3>
<p class="text-gray-600">
San Francisco Bay Area
</p>
<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
</path>
</svg>
Connect
</button>
</div>
</div>
<div class="flex items-center mb-4">
<img alt="Christopher Kanan" class="w-12 h-12 rounded-full mr-4" src="christopher.jpg"/>
<div>
<h3 class="text-lg font-semibold">
Christopher Kanan
</h3>
<p class="text-gray-600">
Rochester, New York Metropolitan Area
</p>
<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
</path>
</svg>
Connect
</button>
</div>
</div>
<div class="flex items-center mb-4">
<img alt="Micael Carvalho" class="w-12 h-12 rounded-full mr-4" src="micael.jpg"/>
<div>
<h3 class="text-lg font-semibold">
Micael Carvalho
</h3>
<p class="text-gray-600">
Menlo Park, CA
</p>
<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
</path>
</svg>
Connect
</button>
</div>
</div>
<div class="flex items-center mb-4">
<img alt="Joel Tetreault" class="w-12 h-12 rounded-full mr-4" src="joel.jpg"/>
<div>
<h3 class="text-lg font-semibold">
Joel Tetreault
</h3>
<p class="text-gray-600">
New York, NY
</p>
<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
</path>
</svg>
Connect
</button>
</div>
</div>
</div>
</div>
</body>
</html>

BIN
demo/public/assets/demo1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 MiB

BIN
demo/public/assets/demo1_cropped/demo1_1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 424 KiB

BIN
demo/public/assets/demo1_cropped/demo1_2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 204 KiB

BIN
demo/public/assets/demo1_cropped/demo1_3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 438 KiB

BIN
demo/public/assets/demo1_cropped/demo1_4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 778 KiB

BIN
demo/public/assets/demo1_cropped/demo1_5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 638 KiB

BIN
demo/public/assets/demo1_cropped/demo1_6.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 194 KiB

BIN
demo/public/assets/demo1_output/ip/demo1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 150 KiB

969
demo/public/assets/demo1_output/ip/demo1.json Normal file
View File

@@ -0,0 +1,969 @@
{
"img_shape": [
406,
799,
3
],
"compos": [
{
"id": 1,
"class": "Compo",
"column_min": 262,
"row_min": 0,
"column_max": 511,
"row_max": 18,
"width": 249,
"height": 18
},
{
"id": 2,
"class": "Compo",
"column_min": 23,
"row_min": 5,
"column_max": 62,
"row_max": 13,
"width": 39,
"height": 8
},
{
"id": 3,
"class": "Compo",
"column_min": 64,
"row_min": 3,
"column_max": 70,
"row_max": 7,
"width": 6,
"height": 4
},
{
"id": 4,
"class": "Compo",
"column_min": 513,
"row_min": 0,
"column_max": 518,
"row_max": 17,
"width": 5,
"height": 17
},
{
"id": 5,
"class": "Compo",
"column_min": 525,
"row_min": 0,
"column_max": 542,
"row_max": 18,
"width": 17,
"height": 18
},
{
"id": 6,
"class": "Compo",
"column_min": 711,
"row_min": 0,
"column_max": 747,
"row_max": 17,
"width": 36,
"height": 17
},
{
"id": 7,
"class": "Compo",
"column_min": 755,
"row_min": 5,
"column_max": 763,
"row_max": 14,
"width": 8,
"height": 9
},
{
"id": 8,
"class": "Compo",
"column_min": 777,
"row_min": 2,
"column_max": 791,
"row_max": 16,
"width": 14,
"height": 14
},
{
"id": 9,
"class": "Compo",
"column_min": 3,
"row_min": 6,
"column_max": 11,
"row_max": 12,
"width": 8,
"height": 6
},
{
"id": 10,
"class": "Compo",
"column_min": 3,
"row_min": 30,
"column_max": 12,
"row_max": 39,
"width": 9,
"height": 9
},
{
"id": 11,
"class": "Compo",
"column_min": 60,
"row_min": 26,
"column_max": 83,
"row_max": 40,
"width": 23,
"height": 14
},
{
"id": 12,
"class": "Compo",
"column_min": 87,
"row_min": 26,
"column_max": 110,
"row_max": 40,
"width": 23,
"height": 14
},
{
"id": 13,
"class": "Compo",
"column_min": 142,
"row_min": 26,
"column_max": 164,
"row_max": 40,
"width": 22,
"height": 14
},
{
"id": 14,
"class": "Compo",
"column_min": 170,
"row_min": 26,
"column_max": 192,
"row_max": 40,
"width": 22,
"height": 14
},
{
"id": 15,
"class": "Compo",
"column_min": 224,
"row_min": 26,
"column_max": 247,
"row_max": 40,
"width": 23,
"height": 14
},
{
"id": 16,
"class": "Compo",
"column_min": 252,
"row_min": 26,
"column_max": 286,
"row_max": 40,
"width": 34,
"height": 14
},
{
"id": 17,
"class": "Compo",
"column_min": 33,
"row_min": 26,
"column_max": 55,
"row_max": 40,
"width": 22,
"height": 14
},
{
"id": 18,
"class": "Compo",
"column_min": 115,
"row_min": 26,
"column_max": 137,
"row_max": 40,
"width": 22,
"height": 14
},
{
"id": 19,
"class": "Compo",
"column_min": 197,
"row_min": 26,
"column_max": 219,
"row_max": 40,
"width": 22,
"height": 14
},
{
"id": 20,
"class": "Compo",
"column_min": 291,
"row_min": 26,
"column_max": 331,
"row_max": 40,
"width": 40,
"height": 14
},
{
"id": 21,
"class": "Compo",
"column_min": 3,
"row_min": 43,
"column_max": 11,
"row_max": 48,
"width": 8,
"height": 5
},
{
"id": 22,
"class": "Compo",
"column_min": 33,
"row_min": 46,
"column_max": 282,
"row_max": 186,
"width": 249,
"height": 140
},
{
"id": 23,
"class": "Compo",
"column_min": 288,
"row_min": 46,
"column_max": 537,
"row_max": 186,
"width": 249,
"height": 140
},
{
"id": 24,
"class": "Compo",
"column_min": 544,
"row_min": 46,
"column_max": 793,
"row_max": 186,
"width": 249,
"height": 140
},
{
"id": 25,
"class": "Compo",
"column_min": 3,
"row_min": 62,
"column_max": 11,
"row_max": 71,
"width": 8,
"height": 9
},
{
"id": 26,
"class": "Compo",
"column_min": 1,
"row_min": 75,
"column_max": 13,
"row_max": 79,
"width": 12,
"height": 4
},
{
"id": 27,
"class": "Compo",
"column_min": 3,
"row_min": 94,
"column_max": 12,
"row_max": 101,
"width": 9,
"height": 7
},
{
"id": 28,
"class": "Compo",
"column_min": 4,
"row_min": 107,
"column_max": 11,
"row_max": 111,
"width": 7,
"height": 4
},
{
"id": 29,
"class": "Compo",
"column_min": 3,
"row_min": 125,
"column_max": 12,
"row_max": 134,
"width": 9,
"height": 9
},
{
"id": 30,
"class": "Compo",
"column_min": 33,
"row_min": 191,
"column_max": 48,
"row_max": 207,
"width": 15,
"height": 16
},
{
"id": 31,
"class": "Compo",
"column_min": 53,
"row_min": 193,
"column_max": 65,
"row_max": 199,
"width": 12,
"height": 6
},
{
"id": 32,
"class": "Compo",
"column_min": 67,
"row_min": 193,
"column_max": 78,
"row_max": 200,
"width": 11,
"height": 7
},
{
"id": 33,
"class": "Compo",
"column_min": 80,
"row_min": 193,
"column_max": 106,
"row_max": 200,
"width": 26,
"height": 7
},
{
"id": 34,
"class": "Compo",
"column_min": 108,
"row_min": 193,
"column_max": 129,
"row_max": 199,
"width": 21,
"height": 6
},
{
"id": 35,
"class": "Compo",
"column_min": 131,
"row_min": 193,
"column_max": 164,
"row_max": 200,
"width": 33,
"height": 7
},
{
"id": 36,
"class": "Compo",
"column_min": 288,
"row_min": 191,
"column_max": 304,
"row_max": 207,
"width": 16,
"height": 16
},
{
"id": 37,
"class": "Compo",
"column_min": 309,
"row_min": 193,
"column_max": 339,
"row_max": 199,
"width": 30,
"height": 6
},
{
"id": 38,
"class": "Compo",
"column_min": 434,
"row_min": 193,
"column_max": 478,
"row_max": 199,
"width": 44,
"height": 6
},
{
"id": 39,
"class": "Compo",
"column_min": 480,
"row_min": 193,
"column_max": 508,
"row_max": 199,
"width": 28,
"height": 6
},
{
"id": 40,
"class": "Compo",
"column_min": 510,
"row_min": 194,
"column_max": 524,
"row_max": 199,
"width": 14,
"height": 5
},
{
"id": 41,
"class": "Compo",
"column_min": 544,
"row_min": 191,
"column_max": 560,
"row_max": 207,
"width": 16,
"height": 16
},
{
"id": 42,
"class": "Compo",
"column_min": 564,
"row_min": 193,
"column_max": 577,
"row_max": 198,
"width": 13,
"height": 5
},
{
"id": 43,
"class": "Compo",
"column_min": 580,
"row_min": 193,
"column_max": 598,
"row_max": 199,
"width": 18,
"height": 6
},
{
"id": 44,
"class": "Compo",
"column_min": 600,
"row_min": 193,
"column_max": 618,
"row_max": 199,
"width": 18,
"height": 6
},
{
"id": 45,
"class": "Compo",
"column_min": 620,
"row_min": 193,
"column_max": 647,
"row_max": 199,
"width": 27,
"height": 6
},
{
"id": 46,
"class": "Compo",
"column_min": 649,
"row_min": 193,
"column_max": 656,
"row_max": 199,
"width": 7,
"height": 6
},
{
"id": 47,
"class": "Compo",
"column_min": 658,
"row_min": 193,
"column_max": 672,
"row_max": 199,
"width": 14,
"height": 6
},
{
"id": 48,
"class": "Compo",
"column_min": 678,
"row_min": 192,
"column_max": 739,
"row_max": 199,
"width": 61,
"height": 7
},
{
"id": 49,
"class": "Compo",
"column_min": 741,
"row_min": 192,
"column_max": 779,
"row_max": 200,
"width": 38,
"height": 8
},
{
"id": 50,
"class": "Compo",
"column_min": 53,
"row_min": 204,
"column_max": 94,
"row_max": 209,
"width": 41,
"height": 5
},
{
"id": 51,
"class": "Compo",
"column_min": 96,
"row_min": 204,
"column_max": 102,
"row_max": 209,
"width": 6,
"height": 5
},
{
"id": 52,
"class": "Compo",
"column_min": 309,
"row_min": 202,
"column_max": 348,
"row_max": 209,
"width": 39,
"height": 7
},
{
"id": 53,
"class": "Compo",
"column_min": 565,
"row_min": 204,
"column_max": 585,
"row_max": 209,
"width": 20,
"height": 5
},
{
"id": 54,
"class": "Compo",
"column_min": 54,
"row_min": 212,
"column_max": 84,
"row_max": 218,
"width": 30,
"height": 6
},
{
"id": 55,
"class": "Compo",
"column_min": 90,
"row_min": 212,
"column_max": 114,
"row_max": 218,
"width": 24,
"height": 6
},
{
"id": 56,
"class": "Compo",
"column_min": 309,
"row_min": 214,
"column_max": 355,
"row_max": 219,
"width": 46,
"height": 5
},
{
"id": 57,
"class": "Compo",
"column_min": 357,
"row_min": 213,
"column_max": 392,
"row_max": 219,
"width": 35,
"height": 6
},
{
"id": 58,
"class": "Compo",
"column_min": 565,
"row_min": 212,
"column_max": 597,
"row_max": 218,
"width": 32,
"height": 6
},
{
"id": 59,
"class": "Compo",
"column_min": 603,
"row_min": 212,
"column_max": 624,
"row_max": 218,
"width": 21,
"height": 6
},
{
"id": 60,
"class": "Compo",
"column_min": 309,
"row_min": 222,
"column_max": 333,
"row_max": 228,
"width": 24,
"height": 6
},
{
"id": 61,
"class": "Compo",
"column_min": 339,
"row_min": 222,
"column_max": 349,
"row_max": 228,
"width": 10,
"height": 6
},
{
"id": 62,
"class": "Compo",
"column_min": 350,
"row_min": 222,
"column_max": 364,
"row_max": 228,
"width": 14,
"height": 6
},
{
"id": 63,
"class": "Compo",
"column_min": 33,
"row_min": 243,
"column_max": 282,
"row_max": 383,
"width": 249,
"height": 140
},
{
"id": 64,
"class": "Compo",
"column_min": 288,
"row_min": 243,
"column_max": 537,
"row_max": 383,
"width": 249,
"height": 140
},
{
"id": 65,
"class": "Block",
"column_min": 544,
"row_min": 243,
"column_max": 793,
"row_max": 383,
"width": 249,
"height": 140
},
{
"id": 66,
"class": "Compo",
"column_min": 609,
"row_min": 254,
"column_max": 728,
"row_max": 373,
"width": 119,
"height": 119
},
{
"id": 67,
"class": "Compo",
"column_min": 775,
"row_min": 373,
"column_max": 788,
"row_max": 377,
"width": 13,
"height": 4
},
{
"id": 68,
"class": "Compo",
"column_min": 33,
"row_min": 388,
"column_max": 48,
"row_max": 403,
"width": 15,
"height": 15
},
{
"id": 69,
"class": "Compo",
"column_min": 54,
"row_min": 390,
"column_max": 88,
"row_max": 395,
"width": 34,
"height": 5
},
{
"id": 70,
"class": "Compo",
"column_min": 90,
"row_min": 389,
"column_max": 120,
"row_max": 396,
"width": 30,
"height": 7
},
{
"id": 71,
"class": "Compo",
"column_min": 124,
"row_min": 389,
"column_max": 165,
"row_max": 396,
"width": 41,
"height": 7
},
{
"id": 72,
"class": "Compo",
"column_min": 288,
"row_min": 388,
"column_max": 304,
"row_max": 403,
"width": 16,
"height": 15
},
{
"id": 73,
"class": "Compo",
"column_min": 309,
"row_min": 390,
"column_max": 342,
"row_max": 396,
"width": 33,
"height": 6
},
{
"id": 74,
"class": "Compo",
"column_min": 344,
"row_min": 390,
"column_max": 371,
"row_max": 396,
"width": 27,
"height": 6
},
{
"id": 75,
"class": "Compo",
"column_min": 373,
"row_min": 390,
"column_max": 377,
"row_max": 395,
"width": 4,
"height": 5
},
{
"id": 76,
"class": "Compo",
"column_min": 391,
"row_min": 390,
"column_max": 417,
"row_max": 395,
"width": 26,
"height": 5
},
{
"id": 77,
"class": "Compo",
"column_min": 419,
"row_min": 390,
"column_max": 450,
"row_max": 397,
"width": 31,
"height": 7
},
{
"id": 78,
"class": "Compo",
"column_min": 452,
"row_min": 390,
"column_max": 484,
"row_max": 395,
"width": 32,
"height": 5
},
{
"id": 79,
"class": "Compo",
"column_min": 486,
"row_min": 390,
"column_max": 492,
"row_max": 395,
"width": 6,
"height": 5
},
{
"id": 80,
"class": "Compo",
"column_min": 494,
"row_min": 390,
"column_max": 520,
"row_max": 397,
"width": 26,
"height": 7
},
{
"id": 81,
"class": "Compo",
"column_min": 544,
"row_min": 388,
"column_max": 560,
"row_max": 403,
"width": 16,
"height": 15
},
{
"id": 82,
"class": "Compo",
"column_min": 565,
"row_min": 390,
"column_max": 575,
"row_max": 395,
"width": 10,
"height": 5
},
{
"id": 83,
"class": "Compo",
"column_min": 577,
"row_min": 390,
"column_max": 598,
"row_max": 395,
"width": 21,
"height": 5
},
{
"id": 84,
"class": "Compo",
"column_min": 629,
"row_min": 390,
"column_max": 665,
"row_max": 396,
"width": 36,
"height": 6
},
{
"id": 85,
"class": "Compo",
"column_min": 667,
"row_min": 389,
"column_max": 728,
"row_max": 396,
"width": 61,
"height": 7
},
{
"id": 86,
"class": "Compo",
"column_min": 379,
"row_min": 390,
"column_max": 389,
"row_max": 395,
"width": 10,
"height": 5
},
{
"id": 87,
"class": "Compo",
"column_min": 600,
"row_min": 390,
"column_max": 627,
"row_max": 396,
"width": 27,
"height": 6
},
{
"id": 88,
"class": "Compo",
"column_min": 85,
"row_min": 400,
"column_max": 95,
"row_max": 405,
"width": 10,
"height": 5
},
{
"id": 89,
"class": "Compo",
"column_min": 97,
"row_min": 400,
"column_max": 114,
"row_max": 405,
"width": 17,
"height": 5
},
{
"id": 90,
"class": "Compo",
"column_min": 309,
"row_min": 400,
"column_max": 349,
"row_max": 405,
"width": 40,
"height": 5
},
{
"id": 91,
"class": "Compo",
"column_min": 565,
"row_min": 400,
"column_max": 600,
"row_max": 405,
"width": 35,
"height": 5
},
{
"id": 92,
"class": "Compo",
"column_min": 53,
"row_min": 400,
"column_max": 80,
"row_max": 405,
"width": 27,
"height": 5
},
{
"id": 93,
"class": "Compo",
"column_min": 602,
"row_min": 400,
"column_max": 607,
"row_max": 405,
"width": 5,
"height": 5
},
{
"id": 94,
"class": "Compo",
"column_min": 731,
"row_min": 54,
"column_max": 790,
"row_max": 111,
"width": 59,
"height": 57
},
{
"id": 95,
"class": "Compo",
"column_min": 625,
"row_min": 269,
"column_max": 713,
"row_max": 357,
"width": 88,
"height": 88
},
{
"id": 96,
"class": "Compo",
"column_min": 625,
"row_min": 269,
"column_max": 713,
"row_max": 357,
"width": 88,
"height": 88
}
]
}

919
demo/public/assets/demo1_output/ip/demo1_filtered.json Normal file
View File

@@ -0,0 +1,919 @@
{
"img_shape": [
406,
799,
3
],
"compos": [
{
"id": 1,
"class": "Compo",
"column_min": 262,
"row_min": 0,
"column_max": 511,
"row_max": 18,
"width": 249,
"height": 18
},
{
"id": 2,
"class": "Compo",
"column_min": 23,
"row_min": 5,
"column_max": 62,
"row_max": 13,
"width": 39,
"height": 8
},
{
"id": 3,
"class": "Compo",
"column_min": 64,
"row_min": 3,
"column_max": 70,
"row_max": 7,
"width": 6,
"height": 4
},
{
"id": 4,
"class": "Compo",
"column_min": 513,
"row_min": 0,
"column_max": 518,
"row_max": 17,
"width": 5,
"height": 17
},
{
"id": 5,
"class": "Compo",
"column_min": 525,
"row_min": 0,
"column_max": 542,
"row_max": 18,
"width": 17,
"height": 18
},
{
"id": 6,
"class": "Compo",
"column_min": 711,
"row_min": 0,
"column_max": 747,
"row_max": 17,
"width": 36,
"height": 17
},
{
"id": 7,
"class": "Compo",
"column_min": 755,
"row_min": 5,
"column_max": 763,
"row_max": 14,
"width": 8,
"height": 9
},
{
"id": 8,
"class": "Compo",
"column_min": 777,
"row_min": 2,
"column_max": 791,
"row_max": 16,
"width": 14,
"height": 14
},
{
"id": 9,
"class": "Compo",
"column_min": 3,
"row_min": 6,
"column_max": 11,
"row_max": 12,
"width": 8,
"height": 6
},
{
"id": 10,
"class": "Compo",
"column_min": 3,
"row_min": 30,
"column_max": 12,
"row_max": 39,
"width": 9,
"height": 9
},
{
"id": 11,
"class": "Compo",
"column_min": 60,
"row_min": 26,
"column_max": 83,
"row_max": 40,
"width": 23,
"height": 14
},
{
"id": 12,
"class": "Compo",
"column_min": 87,
"row_min": 26,
"column_max": 110,
"row_max": 40,
"width": 23,
"height": 14
},
{
"id": 13,
"class": "Compo",
"column_min": 142,
"row_min": 26,
"column_max": 164,
"row_max": 40,
"width": 22,
"height": 14
},
{
"id": 14,
"class": "Compo",
"column_min": 170,
"row_min": 26,
"column_max": 192,
"row_max": 40,
"width": 22,
"height": 14
},
{
"id": 15,
"class": "Compo",
"column_min": 224,
"row_min": 26,
"column_max": 247,
"row_max": 40,
"width": 23,
"height": 14
},
{
"id": 16,
"class": "Compo",
"column_min": 252,
"row_min": 26,
"column_max": 286,
"row_max": 40,
"width": 34,
"height": 14
},
{
"id": 17,
"class": "Compo",
"column_min": 33,
"row_min": 26,
"column_max": 55,
"row_max": 40,
"width": 22,
"height": 14
},
{
"id": 18,
"class": "Compo",
"column_min": 115,
"row_min": 26,
"column_max": 137,
"row_max": 40,
"width": 22,
"height": 14
},
{
"id": 19,
"class": "Compo",
"column_min": 197,
"row_min": 26,
"column_max": 219,
"row_max": 40,
"width": 22,
"height": 14
},
{
"id": 20,
"class": "Compo",
"column_min": 291,
"row_min": 26,
"column_max": 331,
"row_max": 40,
"width": 40,
"height": 14
},
{
"id": 21,
"class": "Compo",
"column_min": 3,
"row_min": 43,
"column_max": 11,
"row_max": 48,
"width": 8,
"height": 5
},
{
"id": 22,
"class": "Compo",
"column_min": 33,
"row_min": 46,
"column_max": 282,
"row_max": 186,
"width": 249,
"height": 140
},
{
"id": 23,
"class": "Compo",
"column_min": 288,
"row_min": 46,
"column_max": 537,
"row_max": 186,
"width": 249,
"height": 140
},
{
"id": 24,
"class": "Compo",
"column_min": 544,
"row_min": 46,
"column_max": 793,
"row_max": 186,
"width": 249,
"height": 140
},
{
"id": 25,
"class": "Compo",
"column_min": 3,
"row_min": 62,
"column_max": 11,
"row_max": 71,
"width": 8,
"height": 9
},
{
"id": 26,
"class": "Compo",
"column_min": 1,
"row_min": 75,
"column_max": 13,
"row_max": 79,
"width": 12,
"height": 4
},
{
"id": 27,
"class": "Compo",
"column_min": 3,
"row_min": 94,
"column_max": 12,
"row_max": 101,
"width": 9,
"height": 7
},
{
"id": 28,
"class": "Compo",
"column_min": 4,
"row_min": 107,
"column_max": 11,
"row_max": 111,
"width": 7,
"height": 4
},
{
"id": 29,
"class": "Compo",
"column_min": 3,
"row_min": 125,
"column_max": 12,
"row_max": 134,
"width": 9,
"height": 9
},
{
"id": 30,
"class": "Compo",
"column_min": 33,
"row_min": 191,
"column_max": 48,
"row_max": 207,
"width": 15,
"height": 16
},
{
"id": 31,
"class": "Compo",
"column_min": 53,
"row_min": 193,
"column_max": 65,
"row_max": 199,
"width": 12,
"height": 6
},
{
"id": 32,
"class": "Compo",
"column_min": 67,
"row_min": 193,
"column_max": 78,
"row_max": 200,
"width": 11,
"height": 7
},
{
"id": 33,
"class": "Compo",
"column_min": 80,
"row_min": 193,
"column_max": 106,
"row_max": 200,
"width": 26,
"height": 7
},
{
"id": 34,
"class": "Compo",
"column_min": 108,
"row_min": 193,
"column_max": 129,
"row_max": 199,
"width": 21,
"height": 6
},
{
"id": 35,
"class": "Compo",
"column_min": 131,
"row_min": 193,
"column_max": 164,
"row_max": 200,
"width": 33,
"height": 7
},
{
"id": 36,
"class": "Compo",
"column_min": 288,
"row_min": 191,
"column_max": 304,
"row_max": 207,
"width": 16,
"height": 16
},
{
"id": 37,
"class": "Compo",
"column_min": 309,
"row_min": 193,
"column_max": 339,
"row_max": 199,
"width": 30,
"height": 6
},
{
"id": 38,
"class": "Compo",
"column_min": 434,
"row_min": 193,
"column_max": 478,
"row_max": 199,
"width": 44,
"height": 6
},
{
"id": 39,
"class": "Compo",
"column_min": 480,
"row_min": 193,
"column_max": 508,
"row_max": 199,
"width": 28,
"height": 6
},
{
"id": 40,
"class": "Compo",
"column_min": 510,
"row_min": 194,
"column_max": 524,
"row_max": 199,
"width": 14,
"height": 5
},
{
"id": 41,
"class": "Compo",
"column_min": 544,
"row_min": 191,
"column_max": 560,
"row_max": 207,
"width": 16,
"height": 16
},
{
"id": 42,
"class": "Compo",
"column_min": 564,
"row_min": 193,
"column_max": 577,
"row_max": 198,
"width": 13,
"height": 5
},
{
"id": 43,
"class": "Compo",
"column_min": 580,
"row_min": 193,
"column_max": 598,
"row_max": 199,
"width": 18,
"height": 6
},
{
"id": 44,
"class": "Compo",
"column_min": 600,
"row_min": 193,
"column_max": 618,
"row_max": 199,
"width": 18,
"height": 6
},
{
"id": 45,
"class": "Compo",
"column_min": 620,
"row_min": 193,
"column_max": 647,
"row_max": 199,
"width": 27,
"height": 6
},
{
"id": 46,
"class": "Compo",
"column_min": 649,
"row_min": 193,
"column_max": 656,
"row_max": 199,
"width": 7,
"height": 6
},
{
"id": 47,
"class": "Compo",
"column_min": 658,
"row_min": 193,
"column_max": 672,
"row_max": 199,
"width": 14,
"height": 6
},
{
"id": 48,
"class": "Compo",
"column_min": 678,
"row_min": 192,
"column_max": 739,
"row_max": 199,
"width": 61,
"height": 7
},
{
"id": 49,
"class": "Compo",
"column_min": 741,
"row_min": 192,
"column_max": 779,
"row_max": 200,
"width": 38,
"height": 8
},
{
"id": 50,
"class": "Compo",
"column_min": 53,
"row_min": 204,
"column_max": 94,
"row_max": 209,
"width": 41,
"height": 5
},
{
"id": 51,
"class": "Compo",
"column_min": 96,
"row_min": 204,
"column_max": 102,
"row_max": 209,
"width": 6,
"height": 5
},
{
"id": 52,
"class": "Compo",
"column_min": 309,
"row_min": 202,
"column_max": 348,
"row_max": 209,
"width": 39,
"height": 7
},
{
"id": 53,
"class": "Compo",
"column_min": 565,
"row_min": 204,
"column_max": 585,
"row_max": 209,
"width": 20,
"height": 5
},
{
"id": 54,
"class": "Compo",
"column_min": 54,
"row_min": 212,
"column_max": 84,
"row_max": 218,
"width": 30,
"height": 6
},
{
"id": 55,
"class": "Compo",
"column_min": 90,
"row_min": 212,
"column_max": 114,
"row_max": 218,
"width": 24,
"height": 6
},
{
"id": 56,
"class": "Compo",
"column_min": 309,
"row_min": 214,
"column_max": 355,
"row_max": 219,
"width": 46,
"height": 5
},
{
"id": 57,
"class": "Compo",
"column_min": 357,
"row_min": 213,
"column_max": 392,
"row_max": 219,
"width": 35,
"height": 6
},
{
"id": 58,
"class": "Compo",
"column_min": 565,
"row_min": 212,
"column_max": 597,
"row_max": 218,
"width": 32,
"height": 6
},
{
"id": 59,
"class": "Compo",
"column_min": 603,
"row_min": 212,
"column_max": 624,
"row_max": 218,
"width": 21,
"height": 6
},
{
"id": 60,
"class": "Compo",
"column_min": 309,
"row_min": 222,
"column_max": 333,
"row_max": 228,
"width": 24,
"height": 6
},
{
"id": 61,
"class": "Compo",
"column_min": 339,
"row_min": 222,
"column_max": 349,
"row_max": 228,
"width": 10,
"height": 6
},
{
"id": 62,
"class": "Compo",
"column_min": 350,
"row_min": 222,
"column_max": 364,
"row_max": 228,
"width": 14,
"height": 6
},
{
"id": 63,
"class": "Compo",
"column_min": 33,
"row_min": 243,
"column_max": 282,
"row_max": 383,
"width": 249,
"height": 140
},
{
"id": 64,
"class": "Compo",
"column_min": 288,
"row_min": 243,
"column_max": 537,
"row_max": 383,
"width": 249,
"height": 140
},
{
"id": 65,
"class": "Block",
"column_min": 544,
"row_min": 243,
"column_max": 793,
"row_max": 383,
"width": 249,
"height": 140
},
{
"id": 68,
"class": "Compo",
"column_min": 33,
"row_min": 388,
"column_max": 48,
"row_max": 403,
"width": 15,
"height": 15
},
{
"id": 69,
"class": "Compo",
"column_min": 54,
"row_min": 390,
"column_max": 88,
"row_max": 395,
"width": 34,
"height": 5
},
{
"id": 70,
"class": "Compo",
"column_min": 90,
"row_min": 389,
"column_max": 120,
"row_max": 396,
"width": 30,
"height": 7
},
{
"id": 71,
"class": "Compo",
"column_min": 124,
"row_min": 389,
"column_max": 165,
"row_max": 396,
"width": 41,
"height": 7
},
{
"id": 72,
"class": "Compo",
"column_min": 288,
"row_min": 388,
"column_max": 304,
"row_max": 403,
"width": 16,
"height": 15
},
{
"id": 73,
"class": "Compo",
"column_min": 309,
"row_min": 390,
"column_max": 342,
"row_max": 396,
"width": 33,
"height": 6
},
{
"id": 74,
"class": "Compo",
"column_min": 344,
"row_min": 390,
"column_max": 371,
"row_max": 396,
"width": 27,
"height": 6
},
{
"id": 75,
"class": "Compo",
"column_min": 373,
"row_min": 390,
"column_max": 377,
"row_max": 395,
"width": 4,
"height": 5
},
{
"id": 76,
"class": "Compo",
"column_min": 391,
"row_min": 390,
"column_max": 417,
"row_max": 395,
"width": 26,
"height": 5
},
{
"id": 77,
"class": "Compo",
"column_min": 419,
"row_min": 390,
"column_max": 450,
"row_max": 397,
"width": 31,
"height": 7
},
{
"id": 78,
"class": "Compo",
"column_min": 452,
"row_min": 390,
"column_max": 484,
"row_max": 395,
"width": 32,
"height": 5
},
{
"id": 79,
"class": "Compo",
"column_min": 486,
"row_min": 390,
"column_max": 492,
"row_max": 395,
"width": 6,
"height": 5
},
{
"id": 80,
"class": "Compo",
"column_min": 494,
"row_min": 390,
"column_max": 520,
"row_max": 397,
"width": 26,
"height": 7
},
{
"id": 81,
"class": "Compo",
"column_min": 544,
"row_min": 388,
"column_max": 560,
"row_max": 403,
"width": 16,
"height": 15
},
{
"id": 82,
"class": "Compo",
"column_min": 565,
"row_min": 390,
"column_max": 575,
"row_max": 395,
"width": 10,
"height": 5
},
{
"id": 83,
"class": "Compo",
"column_min": 577,
"row_min": 390,
"column_max": 598,
"row_max": 395,
"width": 21,
"height": 5
},
{
"id": 84,
"class": "Compo",
"column_min": 629,
"row_min": 390,
"column_max": 665,
"row_max": 396,
"width": 36,
"height": 6
},
{
"id": 85,
"class": "Compo",
"column_min": 667,
"row_min": 389,
"column_max": 728,
"row_max": 396,
"width": 61,
"height": 7
},
{
"id": 86,
"class": "Compo",
"column_min": 379,
"row_min": 390,
"column_max": 389,
"row_max": 395,
"width": 10,
"height": 5
},
{
"id": 87,
"class": "Compo",
"column_min": 600,
"row_min": 390,
"column_max": 627,
"row_max": 396,
"width": 27,
"height": 6
},
{
"id": 88,
"class": "Compo",
"column_min": 85,
"row_min": 400,
"column_max": 95,
"row_max": 405,
"width": 10,
"height": 5
},
{
"id": 89,
"class": "Compo",
"column_min": 97,
"row_min": 400,
"column_max": 114,
"row_max": 405,
"width": 17,
"height": 5
},
{
"id": 90,
"class": "Compo",
"column_min": 309,
"row_min": 400,
"column_max": 349,
"row_max": 405,
"width": 40,
"height": 5
},
{
"id": 91,
"class": "Compo",
"column_min": 565,
"row_min": 400,
"column_max": 600,
"row_max": 405,
"width": 35,
"height": 5
},
{
"id": 92,
"class": "Compo",
"column_min": 53,
"row_min": 400,
"column_max": 80,
"row_max": 405,
"width": 27,
"height": 5
},
{
"id": 93,
"class": "Compo",
"column_min": 602,
"row_min": 400,
"column_max": 607,
"row_max": 405,
"width": 5,
"height": 5
}
]
}

BIN
demo/public/assets/demo2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.6 MiB

BIN
demo/public/assets/demo2_cropped/demo2_1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 849 KiB

BIN
demo/public/assets/demo2_cropped/demo2_2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 792 KiB

BIN
demo/public/assets/demo2_cropped/demo2_3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 939 KiB

BIN
demo/public/assets/demo2_cropped/demo3_10.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 46 KiB

BIN
demo/public/assets/demo2_cropped/demo3_11.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 53 KiB

BIN
demo/public/assets/demo2_cropped/demo3_4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 152 KiB

BIN
demo/public/assets/demo2_cropped/demo3_5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 47 KiB

BIN
demo/public/assets/demo2_cropped/demo3_6.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 50 KiB

BIN
demo/public/assets/demo2_cropped/demo3_7.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 54 KiB

BIN
demo/public/assets/demo2_cropped/demo3_8.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 52 KiB

BIN
demo/public/assets/demo2_cropped/demo3_9.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

BIN
demo/public/assets/demo2_output/ip/demo2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 128 KiB

629
demo/public/assets/demo2_output/ip/demo2.json Normal file
View File

@@ -0,0 +1,629 @@
{
"img_shape": [
474,
798,
3
],
"compos": [
{
"id": 1,
"class": "Compo",
"column_min": 7,
"row_min": 19,
"column_max": 59,
"row_max": 34,
"width": 52,
"height": 15
},
{
"id": 2,
"class": "Compo",
"column_min": 534,
"row_min": 17,
"column_max": 570,
"row_max": 34,
"width": 36,
"height": 17
},
{
"id": 3,
"class": "Compo",
"column_min": 574,
"row_min": 17,
"column_max": 611,
"row_max": 34,
"width": 37,
"height": 17
},
{
"id": 4,
"class": "Compo",
"column_min": 615,
"row_min": 17,
"column_max": 632,
"row_max": 34,
"width": 17,
"height": 17
},
{
"id": 5,
"class": "Compo",
"column_min": 457,
"row_min": 22,
"column_max": 511,
"row_max": 30,
"width": 54,
"height": 8
},
{
"id": 6,
"class": "Compo",
"column_min": 515,
"row_min": 22,
"column_max": 525,
"row_max": 31,
"width": 10,
"height": 9
},
{
"id": 7,
"class": "Compo",
"column_min": 329,
"row_min": 29,
"column_max": 413,
"row_max": 113,
"width": 84,
"height": 84
},
{
"id": 8,
"class": "Compo",
"column_min": 456,
"row_min": 49,
"column_max": 495,
"row_max": 57,
"width": 39,
"height": 8
},
{
"id": 9,
"class": "Compo",
"column_min": 515,
"row_min": 49,
"column_max": 561,
"row_max": 57,
"width": 46,
"height": 8
},
{
"id": 10,
"class": "Compo",
"column_min": 581,
"row_min": 49,
"column_max": 619,
"row_max": 57,
"width": 38,
"height": 8
},
{
"id": 11,
"class": "Compo",
"column_min": 7,
"row_min": 57,
"column_max": 19,
"row_max": 69,
"width": 12,
"height": 12
},
{
"id": 12,
"class": "Compo",
"column_min": 27,
"row_min": 59,
"column_max": 44,
"row_max": 67,
"width": 17,
"height": 8
},
{
"id": 13,
"class": "Compo",
"column_min": 457,
"row_min": 69,
"column_max": 485,
"row_max": 75,
"width": 28,
"height": 6
},
{
"id": 14,
"class": "Compo",
"column_min": 488,
"row_min": 69,
"column_max": 503,
"row_max": 75,
"width": 15,
"height": 6
},
{
"id": 15,
"class": "Compo",
"column_min": 456,
"row_min": 80,
"column_max": 509,
"row_max": 93,
"width": 53,
"height": 13
},
{
"id": 16,
"class": "Compo",
"column_min": 7,
"row_min": 85,
"column_max": 19,
"row_max": 97,
"width": 12,
"height": 12
},
{
"id": 17,
"class": "Compo",
"column_min": 27,
"row_min": 87,
"column_max": 44,
"row_max": 96,
"width": 17,
"height": 9
},
{
"id": 18,
"class": "Compo",
"column_min": 456,
"row_min": 97,
"column_max": 571,
"row_max": 114,
"width": 115,
"height": 17
},
{
"id": 19,
"class": "Compo",
"column_min": 574,
"row_min": 97,
"column_max": 581,
"row_max": 104,
"width": 7,
"height": 7
},
{
"id": 20,
"class": "Compo",
"column_min": 7,
"row_min": 113,
"column_max": 19,
"row_max": 125,
"width": 12,
"height": 12
},
{
"id": 21,
"class": "Compo",
"column_min": 27,
"row_min": 115,
"column_max": 44,
"row_max": 124,
"width": 17,
"height": 9
},
{
"id": 22,
"class": "Compo",
"column_min": 456,
"row_min": 122,
"column_max": 502,
"row_max": 129,
"width": 46,
"height": 7
},
{
"id": 23,
"class": "Compo",
"column_min": 7,
"row_min": 141,
"column_max": 19,
"row_max": 153,
"width": 12,
"height": 12
},
{
"id": 24,
"class": "Compo",
"column_min": 28,
"row_min": 145,
"column_max": 48,
"row_max": 152,
"width": 20,
"height": 7
},
{
"id": 25,
"class": "Compo",
"column_min": 321,
"row_min": 154,
"column_max": 365,
"row_max": 197,
"width": 44,
"height": 43
},
{
"id": 26,
"class": "Compo",
"column_min": 387,
"row_min": 154,
"column_max": 431,
"row_max": 197,
"width": 44,
"height": 43
},
{
"id": 27,
"class": "Compo",
"column_min": 454,
"row_min": 154,
"column_max": 498,
"row_max": 197,
"width": 44,
"height": 43
},
{
"id": 28,
"class": "Compo",
"column_min": 520,
"row_min": 154,
"column_max": 564,
"row_max": 197,
"width": 44,
"height": 43
},
{
"id": 29,
"class": "Compo",
"column_min": 587,
"row_min": 154,
"column_max": 631,
"row_max": 197,
"width": 44,
"height": 43
},
{
"id": 30,
"class": "Compo",
"column_min": 653,
"row_min": 154,
"column_max": 697,
"row_max": 197,
"width": 44,
"height": 43
},
{
"id": 31,
"class": "Compo",
"column_min": 720,
"row_min": 154,
"column_max": 766,
"row_max": 197,
"width": 46,
"height": 43
},
{
"id": 32,
"class": "Compo",
"column_min": 8,
"row_min": 170,
"column_max": 19,
"row_max": 181,
"width": 11,
"height": 11
},
{
"id": 33,
"class": "Compo",
"column_min": 27,
"row_min": 172,
"column_max": 44,
"row_max": 180,
"width": 17,
"height": 8
},
{
"id": 34,
"class": "Compo",
"column_min": 7,
"row_min": 197,
"column_max": 21,
"row_max": 209,
"width": 14,
"height": 12
},
{
"id": 35,
"class": "Compo",
"column_min": 27,
"row_min": 200,
"column_max": 44,
"row_max": 208,
"width": 17,
"height": 8
},
{
"id": 36,
"class": "Compo",
"column_min": 325,
"row_min": 204,
"column_max": 343,
"row_max": 209,
"width": 18,
"height": 5
},
{
"id": 37,
"class": "Compo",
"column_min": 345,
"row_min": 204,
"column_max": 361,
"row_max": 209,
"width": 16,
"height": 5
},
{
"id": 38,
"class": "Compo",
"column_min": 388,
"row_min": 204,
"column_max": 406,
"row_max": 209,
"width": 18,
"height": 5
},
{
"id": 39,
"class": "Compo",
"column_min": 408,
"row_min": 204,
"column_max": 429,
"row_max": 210,
"width": 21,
"height": 6
},
{
"id": 40,
"class": "Compo",
"column_min": 465,
"row_min": 204,
"column_max": 486,
"row_max": 209,
"width": 21,
"height": 5
},
{
"id": 41,
"class": "Compo",
"column_min": 527,
"row_min": 204,
"column_max": 537,
"row_max": 209,
"width": 10,
"height": 5
},
{
"id": 42,
"class": "Compo",
"column_min": 539,
"row_min": 204,
"column_max": 558,
"row_max": 209,
"width": 19,
"height": 5
},
{
"id": 43,
"class": "Compo",
"column_min": 594,
"row_min": 204,
"column_max": 623,
"row_max": 209,
"width": 29,
"height": 5
},
{
"id": 44,
"class": "Compo",
"column_min": 661,
"row_min": 204,
"column_max": 689,
"row_max": 209,
"width": 28,
"height": 5
},
{
"id": 45,
"class": "Compo",
"column_min": 720,
"row_min": 204,
"column_max": 748,
"row_max": 209,
"width": 28,
"height": 5
},
{
"id": 46,
"class": "Compo",
"column_min": 750,
"row_min": 204,
"column_max": 762,
"row_max": 209,
"width": 12,
"height": 5
},
{
"id": 47,
"class": "Compo",
"column_min": 7,
"row_min": 226,
"column_max": 19,
"row_max": 238,
"width": 12,
"height": 12
},
{
"id": 48,
"class": "Compo",
"column_min": 27,
"row_min": 228,
"column_max": 44,
"row_max": 237,
"width": 17,
"height": 9
},
{
"id": 49,
"class": "Compo",
"column_min": 461,
"row_min": 249,
"column_max": 466,
"row_max": 254,
"width": 5,
"height": 5
},
{
"id": 50,
"class": "Compo",
"column_min": 470,
"row_min": 249,
"column_max": 482,
"row_max": 255,
"width": 12,
"height": 6
},
{
"id": 51,
"class": "Compo",
"column_min": 513,
"row_min": 249,
"column_max": 519,
"row_max": 255,
"width": 6,
"height": 6
},
{
"id": 52,
"class": "Compo",
"column_min": 522,
"row_min": 249,
"column_max": 543,
"row_max": 254,
"width": 21,
"height": 5
},
{
"id": 53,
"class": "Compo",
"column_min": 574,
"row_min": 249,
"column_max": 580,
"row_max": 255,
"width": 6,
"height": 6
},
{
"id": 54,
"class": "Compo",
"column_min": 582,
"row_min": 249,
"column_max": 608,
"row_max": 255,
"width": 26,
"height": 6
},
{
"id": 55,
"class": "Compo",
"column_min": 7,
"row_min": 254,
"column_max": 19,
"row_max": 266,
"width": 12,
"height": 12
},
{
"id": 56,
"class": "Compo",
"column_min": 28,
"row_min": 256,
"column_max": 44,
"row_max": 265,
"width": 16,
"height": 9
},
{
"id": 57,
"class": "Compo",
"column_min": 298,
"row_min": 265,
"column_max": 454,
"row_max": 473,
"width": 156,
"height": 208
},
{
"id": 58,
"class": "Compo",
"column_min": 456,
"row_min": 265,
"column_max": 611,
"row_max": 473,
"width": 155,
"height": 208
},
{
"id": 59,
"class": "Compo",
"column_min": 613,
"row_min": 265,
"column_max": 768,
"row_max": 473,
"width": 155,
"height": 208
},
{
"id": 60,
"class": "Compo",
"column_min": 8,
"row_min": 422,
"column_max": 18,
"row_max": 434,
"width": 10,
"height": 12
},
{
"id": 61,
"class": "Compo",
"column_min": 27,
"row_min": 425,
"column_max": 59,
"row_max": 432,
"width": 32,
"height": 7
},
{
"id": 62,
"class": "Compo",
"column_min": 27,
"row_min": 453,
"column_max": 44,
"row_max": 461,
"width": 17,
"height": 8
}
]
}

BIN
demo/public/assets/demo3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 MiB

BIN
demo/public/assets/demo3_cropped/demo3_1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 290 KiB

BIN
demo/public/assets/demo3_cropped/demo3_2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.6 MiB

BIN
demo/public/assets/demo3_cropped/demo3_3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 201 KiB

BIN
demo/public/assets/demo3_cropped/demo3_4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
demo/public/assets/demo3_cropped/demo3_5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 MiB

BIN
demo/public/assets/demo4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 MiB

BIN
demo/public/assets/demo4_cropped/demo4_1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 380 KiB

BIN
demo/public/assets/demo4_cropped/demo4_10.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 79 KiB

BIN
demo/public/assets/demo4_cropped/demo4_11.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 53 KiB

BIN
demo/public/assets/demo4_cropped/demo4_12.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 48 KiB

BIN
demo/public/assets/demo4_cropped/demo4_2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 50 KiB

BIN
demo/public/assets/demo4_cropped/demo4_3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 90 KiB

BIN
demo/public/assets/demo4_cropped/demo4_4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 87 KiB

BIN
demo/public/assets/demo4_cropped/demo4_5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 82 KiB

BIN
demo/public/assets/demo4_cropped/demo4_6.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.5 KiB

BIN
demo/public/assets/demo4_cropped/demo4_7.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
demo/public/assets/demo4_cropped/demo4_8.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 35 KiB

BIN
demo/public/assets/demo4_cropped/demo4_9.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 35 KiB

BIN
demo/public/assets/demo4_output/ip/demo4.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 150 KiB

649
demo/public/assets/demo4_output/ip/demo4.json Normal file
View File

@@ -0,0 +1,649 @@
{
"img_shape": [
473,
799,
3
],
"compos": [
{
"id": 1,
"class": "Compo",
"column_min": 701,
"row_min": 5,
"column_max": 769,
"row_max": 39,
"width": 68,
"height": 34
},
{
"id": 2,
"class": "Compo",
"column_min": 424,
"row_min": 8,
"column_max": 437,
"row_max": 22,
"width": 13,
"height": 14
},
{
"id": 3,
"class": "Compo",
"column_min": 531,
"row_min": 9,
"column_max": 545,
"row_max": 21,
"width": 14,
"height": 12
},
{
"id": 4,
"class": "Compo",
"column_min": 585,
"row_min": 9,
"column_max": 598,
"row_max": 23,
"width": 13,
"height": 14
},
{
"id": 5,
"class": "Compo",
"column_min": 63,
"row_min": 13,
"column_max": 80,
"row_max": 31,
"width": 17,
"height": 18
},
{
"id": 6,
"class": "Compo",
"column_min": 370,
"row_min": 11,
"column_max": 383,
"row_max": 24,
"width": 13,
"height": 13
},
{
"id": 7,
"class": "Compo",
"column_min": 476,
"row_min": 11,
"column_max": 492,
"row_max": 23,
"width": 16,
"height": 12
},
{
"id": 8,
"class": "Compo",
"column_min": 11,
"row_min": 15,
"column_max": 61,
"row_max": 28,
"width": 50,
"height": 13
},
{
"id": 9,
"class": "Compo",
"column_min": 635,
"row_min": 18,
"column_max": 656,
"row_max": 27,
"width": 21,
"height": 9
},
{
"id": 10,
"class": "Compo",
"column_min": 659,
"row_min": 20,
"column_max": 680,
"row_max": 27,
"width": 21,
"height": 7
},
{
"id": 11,
"class": "Compo",
"column_min": 353,
"row_min": 27,
"column_max": 367,
"row_max": 35,
"width": 14,
"height": 8
},
{
"id": 12,
"class": "Compo",
"column_min": 370,
"row_min": 27,
"column_max": 400,
"row_max": 34,
"width": 30,
"height": 7
},
{
"id": 13,
"class": "Compo",
"column_min": 418,
"row_min": 26,
"column_max": 443,
"row_max": 34,
"width": 25,
"height": 8
},
{
"id": 14,
"class": "Compo",
"column_min": 468,
"row_min": 27,
"column_max": 500,
"row_max": 35,
"width": 32,
"height": 8
},
{
"id": 15,
"class": "Compo",
"column_min": 529,
"row_min": 27,
"column_max": 547,
"row_max": 34,
"width": 18,
"height": 7
},
{
"id": 16,
"class": "Compo",
"column_min": 578,
"row_min": 27,
"column_max": 604,
"row_max": 34,
"width": 26,
"height": 7
},
{
"id": 17,
"class": "Compo",
"column_min": 11,
"row_min": 61,
"column_max": 537,
"row_max": 384,
"width": 526,
"height": 323
},
{
"id": 18,
"class": "Compo",
"column_min": 554,
"row_min": 65,
"column_max": 593,
"row_max": 78,
"width": 39,
"height": 13
},
{
"id": 19,
"class": "Compo",
"column_min": 597,
"row_min": 65,
"column_max": 620,
"row_max": 78,
"width": 23,
"height": 13
},
{
"id": 20,
"class": "Compo",
"column_min": 621,
"row_min": 65,
"column_max": 642,
"row_max": 78,
"width": 21,
"height": 13
},
{
"id": 21,
"class": "Compo",
"column_min": 646,
"row_min": 65,
"column_max": 696,
"row_max": 80,
"width": 50,
"height": 15
},
{
"id": 22,
"class": "Compo",
"column_min": 555,
"row_min": 93,
"column_max": 590,
"row_max": 128,
"width": 35,
"height": 35
},
{
"id": 23,
"class": "Compo",
"column_min": 594,
"row_min": 98,
"column_max": 639,
"row_max": 107,
"width": 45,
"height": 9
},
{
"id": 24,
"class": "Compo",
"column_min": 642,
"row_min": 98,
"column_max": 670,
"row_max": 107,
"width": 28,
"height": 9
},
{
"id": 25,
"class": "Compo",
"column_min": 594,
"row_min": 115,
"column_max": 620,
"row_max": 123,
"width": 26,
"height": 8
},
{
"id": 26,
"class": "Compo",
"column_min": 623,
"row_min": 115,
"column_max": 644,
"row_max": 124,
"width": 21,
"height": 9
},
{
"id": 27,
"class": "Compo",
"column_min": 648,
"row_min": 115,
"column_max": 660,
"row_max": 123,
"width": 12,
"height": 8
},
{
"id": 28,
"class": "Compo",
"column_min": 588,
"row_min": 134,
"column_max": 665,
"row_max": 159,
"width": 77,
"height": 25
},
{
"id": 29,
"class": "Compo",
"column_min": 558,
"row_min": 171,
"column_max": 587,
"row_max": 205,
"width": 29,
"height": 34
},
{
"id": 30,
"class": "Compo",
"column_min": 594,
"row_min": 175,
"column_max": 628,
"row_max": 186,
"width": 34,
"height": 11
},
{
"id": 31,
"class": "Compo",
"column_min": 651,
"row_min": 175,
"column_max": 672,
"row_max": 184,
"width": 21,
"height": 9
},
{
"id": 32,
"class": "Compo",
"column_min": 631,
"row_min": 176,
"column_max": 648,
"row_max": 186,
"width": 17,
"height": 10
},
{
"id": 33,
"class": "Compo",
"column_min": 594,
"row_min": 192,
"column_max": 610,
"row_max": 200,
"width": 16,
"height": 8
},
{
"id": 34,
"class": "Compo",
"column_min": 613,
"row_min": 192,
"column_max": 655,
"row_max": 200,
"width": 42,
"height": 8
},
{
"id": 35,
"class": "Compo",
"column_min": 658,
"row_min": 193,
"column_max": 673,
"row_max": 202,
"width": 15,
"height": 9
},
{
"id": 36,
"class": "Compo",
"column_min": 676,
"row_min": 193,
"column_max": 695,
"row_max": 200,
"width": 19,
"height": 7
},
{
"id": 37,
"class": "Compo",
"column_min": 588,
"row_min": 211,
"column_max": 665,
"row_max": 236,
"width": 77,
"height": 25
},
{
"id": 38,
"class": "Compo",
"column_min": 555,
"row_min": 247,
"column_max": 590,
"row_max": 283,
"width": 35,
"height": 36
},
{
"id": 39,
"class": "Compo",
"column_min": 594,
"row_min": 252,
"column_max": 655,
"row_max": 263,
"width": 61,
"height": 11
},
{
"id": 40,
"class": "Compo",
"column_min": 657,
"row_min": 253,
"column_max": 688,
"row_max": 261,
"width": 31,
"height": 8
},
{
"id": 41,
"class": "Compo",
"column_min": 594,
"row_min": 270,
"column_max": 638,
"row_max": 277,
"width": 44,
"height": 7
},
{
"id": 42,
"class": "Compo",
"column_min": 643,
"row_min": 270,
"column_max": 662,
"row_max": 277,
"width": 19,
"height": 7
},
{
"id": 43,
"class": "Compo",
"column_min": 664,
"row_min": 270,
"column_max": 683,
"row_max": 277,
"width": 19,
"height": 7
},
{
"id": 44,
"class": "Compo",
"column_min": 686,
"row_min": 270,
"column_max": 740,
"row_max": 279,
"width": 54,
"height": 9
},
{
"id": 45,
"class": "Compo",
"column_min": 743,
"row_min": 270,
"column_max": 763,
"row_max": 277,
"width": 20,
"height": 7
},
{
"id": 46,
"class": "Compo",
"column_min": 588,
"row_min": 288,
"column_max": 665,
"row_max": 313,
"width": 77,
"height": 25
},
{
"id": 47,
"class": "Compo",
"column_min": 555,
"row_min": 326,
"column_max": 589,
"row_max": 360,
"width": 34,
"height": 34
},
{
"id": 48,
"class": "Compo",
"column_min": 594,
"row_min": 329,
"column_max": 626,
"row_max": 338,
"width": 32,
"height": 9
},
{
"id": 49,
"class": "Compo",
"column_min": 630,
"row_min": 329,
"column_max": 675,
"row_max": 338,
"width": 45,
"height": 9
},
{
"id": 50,
"class": "Compo",
"column_min": 594,
"row_min": 347,
"column_max": 620,
"row_max": 354,
"width": 26,
"height": 7
},
{
"id": 51,
"class": "Compo",
"column_min": 623,
"row_min": 347,
"column_max": 644,
"row_max": 356,
"width": 21,
"height": 9
},
{
"id": 52,
"class": "Compo",
"column_min": 648,
"row_min": 347,
"column_max": 660,
"row_max": 354,
"width": 12,
"height": 7
},
{
"id": 53,
"class": "Compo",
"column_min": 588,
"row_min": 365,
"column_max": 665,
"row_max": 391,
"width": 77,
"height": 26
},
{
"id": 54,
"class": "Compo",
"column_min": 555,
"row_min": 402,
"column_max": 590,
"row_max": 437,
"width": 35,
"height": 35
},
{
"id": 55,
"class": "Compo",
"column_min": 27,
"row_min": 410,
"column_max": 69,
"row_max": 422,
"width": 42,
"height": 12
},
{
"id": 56,
"class": "Compo",
"column_min": 594,
"row_min": 407,
"column_max": 615,
"row_max": 415,
"width": 21,
"height": 8
},
{
"id": 57,
"class": "Compo",
"column_min": 618,
"row_min": 407,
"column_max": 663,
"row_max": 415,
"width": 45,
"height": 8
},
{
"id": 58,
"class": "Compo",
"column_min": 594,
"row_min": 424,
"column_max": 613,
"row_max": 432,
"width": 19,
"height": 8
},
{
"id": 59,
"class": "Compo",
"column_min": 616,
"row_min": 424,
"column_max": 637,
"row_max": 433,
"width": 21,
"height": 9
},
{
"id": 60,
"class": "Compo",
"column_min": 641,
"row_min": 424,
"column_max": 653,
"row_max": 431,
"width": 12,
"height": 7
},
{
"id": 61,
"class": "Compo",
"column_min": 28,
"row_min": 437,
"column_max": 118,
"row_max": 448,
"width": 90,
"height": 11
},
{
"id": 62,
"class": "Compo",
"column_min": 121,
"row_min": 441,
"column_max": 136,
"row_max": 447,
"width": 15,
"height": 6
},
{
"id": 63,
"class": "Compo",
"column_min": 139,
"row_min": 441,
"column_max": 161,
"row_max": 447,
"width": 22,
"height": 6
},
{
"id": 64,
"class": "Compo",
"column_min": 588,
"row_min": 443,
"column_max": 665,
"row_max": 468,
"width": 77,
"height": 25
}
]
}

70
demo/public/demos.json Normal file
View File

@@ -0,0 +1,70 @@
{
"demos": [
{
"id": "youtube-interface",
"name": "YouTube Interface",
"description": "Step-by-step construction process of YouTube homepage interface",
"thumbnail": "/assets/demo1.png",
"category": "video-platform",
"estimatedTime": "20 seconds",
"manifest": "/demos/youtube-interface/manifest.json",
"steps": 108,
"finalHtml": "/demos/youtube-interface/final_youtube.html"
},
{
"id": "instagram",
"name": "Instagram Profile",
"description": "Step-by-step construction demo of Instagram profile page",
"thumbnail": "/assets/demo2.png",
"category": "social-media",
"estimatedTime": "25 seconds",
"manifest": "/demos/instagram/manifest.json",
"steps": 143,
"finalHtml": "/demos/instagram/final_ins.html"
},
{
"id": "linkedin",
"name": "LinkedIn Profile",
"description": "Step-by-step construction demo of LinkedIn profile page",
"thumbnail": "/assets/demo4.png",
"category": "personal-website",
"estimatedTime": "20 seconds",
"manifest": "/demos/linkedin/manifest.json",
"steps": 112,
"finalHtml": "/demos/linkedin/final_linkedin.html"
},
{
"id": "design",
"name": "Google Search Design",
"description": "Step-by-step construction demo of Google search results page",
"thumbnail": "/assets/demo3.png",
"category": "design",
"estimatedTime": "10 seconds",
"manifest": "/demos/design/manifest.json",
"steps": 58,
"finalHtml": "/demos/design/final_design.html"
}
],
"categories": [
{
"id": "video-platform",
"name": "Video Platform",
"description": "YouTube platform interfaces"
},
{
"id": "social-media",
"name": "Social Media",
"description": "Instagram, LinkedIn interfaces"
},
{
"id": "personal-website",
"name": "Personal Website",
"description": "Personal website interfaces"
},
{
"id": "design",
"name": "Design",
"description": "Design interfaces"
}
]
}

176
demo/public/demos/design/0001.html Normal file
View File

@@ -0,0 +1,176 @@
<!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" style="opacity:0;transition:opacity .35s ease-out;">
Google
</span>
<div class="flex-1 flex items-center border-2 border-gray-700 rounded-full px-3 py-1 max-w-xl" style="opacity:0;transition:opacity .35s ease-out;">
<input class="w-full outline-none bg-transparent text-gray-800 placeholder-gray-600" placeholder="elon trump" style="opacity:0;transition:opacity .35s ease-out;" type="text"/>
<svg class="w-6 h-6 text-gray-700" 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
</path>
</svg>
</div>
<div class="flex items-center space-x-4 ml-auto" style="opacity:0;transition:opacity .35s ease-out;">
<svg class="w-6 h-6 text-gray-700" 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="M4 6h16M4 12h16M4 18h16" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
</path>
</svg>
<div class="w-8 h-8 bg-gray-300 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
</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>

176
demo/public/demos/design/0002.html Normal file
View File

@@ -0,0 +1,176 @@
<!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" style="opacity:0;transition:opacity .35s ease-out;">
<input class="w-full outline-none bg-transparent text-gray-800 placeholder-gray-600" placeholder="elon trump" style="opacity:0;transition:opacity .35s ease-out;" type="text"/>
<svg class="w-6 h-6 text-gray-700" 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
</path>
</svg>
</div>
<div class="flex items-center space-x-4 ml-auto" style="opacity:0;transition:opacity .35s ease-out;">
<svg class="w-6 h-6 text-gray-700" 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="M4 6h16M4 12h16M4 18h16" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
</path>
</svg>
<div class="w-8 h-8 bg-gray-300 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
</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>

176
demo/public/demos/design/0003.html Normal file
View File

@@ -0,0 +1,176 @@
<!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" style="opacity:0;transition:opacity .35s ease-out;" type="text"/>
<svg class="w-6 h-6 text-gray-700" 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
</path>
</svg>
</div>
<div class="flex items-center space-x-4 ml-auto" style="opacity:0;transition:opacity .35s ease-out;">
<svg class="w-6 h-6 text-gray-700" 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="M4 6h16M4 12h16M4 18h16" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
</path>
</svg>
<div class="w-8 h-8 bg-gray-300 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
</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>

176
demo/public/demos/design/0004.html Normal file
View File

@@ -0,0 +1,176 @@
<!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" style="opacity:0;transition:opacity .35s ease-out;" 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" style="opacity:0;transition:opacity .35s ease-out;">
</path>
</svg>
</div>
<div class="flex items-center space-x-4 ml-auto" style="opacity:0;transition:opacity .35s ease-out;">
<svg class="w-6 h-6 text-gray-700" 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="M4 6h16M4 12h16M4 18h16" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
</path>
</svg>
<div class="w-8 h-8 bg-gray-300 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
</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>

176
demo/public/demos/design/0005.html Normal file
View File

@@ -0,0 +1,176 @@
<!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" style="opacity:0;transition:opacity .35s ease-out;">
</path>
</svg>
</div>
<div class="flex items-center space-x-4 ml-auto" style="opacity:0;transition:opacity .35s ease-out;">
<svg class="w-6 h-6 text-gray-700" 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="M4 6h16M4 12h16M4 18h16" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
</path>
</svg>
<div class="w-8 h-8 bg-gray-300 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
</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>

176
demo/public/demos/design/0006.html Normal file
View File

@@ -0,0 +1,176 @@
<!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" style="opacity:0;transition:opacity .35s ease-out;">
<svg class="w-6 h-6 text-gray-700" 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="M4 6h16M4 12h16M4 18h16" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
</path>
</svg>
<div class="w-8 h-8 bg-gray-300 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
</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>

176
demo/public/demos/design/0007.html Normal file
View File

@@ -0,0 +1,176 @@
<!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" style="opacity:0;transition:opacity .35s ease-out;" 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" style="opacity:0;transition:opacity .35s ease-out;">
</path>
</svg>
<div class="w-8 h-8 bg-gray-300 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
</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>

176
demo/public/demos/design/0008.html Normal file
View File

@@ -0,0 +1,176 @@
<!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" style="opacity:0;transition:opacity .35s ease-out;">
</path>
</svg>
<div class="w-8 h-8 bg-gray-300 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
</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>

176
demo/public/demos/design/0009.html Normal file
View File

@@ -0,0 +1,176 @@
<!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" style="opacity:0;transition:opacity .35s ease-out;">
</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>

176
demo/public/demos/design/0010.html Normal file
View File

@@ -0,0 +1,176 @@
<!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>

176
demo/public/demos/design/0011.html Normal file
View File

@@ -0,0 +1,176 @@
<!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">
<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>

Some files were not shown because too many files have changed in this diff Show More