Sijuade commited on
Commit
17519f5
1 Parent(s): 81d8245

Create utils_html.py

Browse files
Files changed (1) hide show
  1. utils_html.py +103 -0
utils_html.py ADDED
@@ -0,0 +1,103 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ HTML_TEMPLATE = """
2
+ <style>
3
+ body {
4
+ background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
5
+ }
6
+ #app-header {
7
+ text-align: center;
8
+ background: rgba(255, 255, 255, 0.8); /* Semi-transparent white */
9
+ padding: 20px;
10
+ border-radius: 10px;
11
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
12
+ position: relative; /* To position the artifacts */
13
+ }
14
+ #app-header h1 {
15
+ color: #4CAF50;
16
+ font-size: 2em;
17
+ margin-bottom: 10px;
18
+ }
19
+ .concept {
20
+ position: relative;
21
+ transition: transform 0.3s;
22
+ }
23
+ .concept:hover {
24
+ transform: scale(1.1);
25
+ }
26
+ .concept img {
27
+ width: 100px;
28
+ border-radius: 10px;
29
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
30
+ }
31
+ .concept-description {
32
+ position: absolute;
33
+ bottom: -30px;
34
+ left: 50%;
35
+ transform: translateX(-50%);
36
+ background-color: #4CAF50;
37
+ color: white;
38
+ padding: 5px 10px;
39
+ border-radius: 5px;
40
+ opacity: 0;
41
+ transition: opacity 0.3s;
42
+ }
43
+ .concept:hover .concept-description {
44
+ opacity: 1;
45
+ }
46
+ /* Artifacts */
47
+ .artifact {
48
+ position: absolute;
49
+ background: rgba(76, 175, 80, 0.1); /* Semi-transparent green */
50
+ border-radius: 50%; /* Make it circular */
51
+ }
52
+ .artifact.large {
53
+ width: 300px;
54
+ height: 300px;
55
+ top: -50px;
56
+ left: -150px;
57
+ }
58
+ .artifact.medium {
59
+ width: 200px;
60
+ height: 200px;
61
+ bottom: -50px;
62
+ right: -100px;
63
+ }
64
+ .artifact.small {
65
+ width: 100px;
66
+ height: 100px;
67
+ top: 50%;
68
+ left: 50%;
69
+ transform: translate(-50%, -50%);
70
+ }
71
+ </style>
72
+ <div id="app-header">
73
+ <!-- Artifacts -->
74
+ <div class="artifact large"></div>
75
+ <div class="artifact medium"></div>
76
+ <div class="artifact small"></div>
77
+ <!-- Content -->
78
+ <h1>Casa AI</h1>
79
+ <p>ReImagine your spaces.</p>
80
+ <div style="display: flex; justify-content: center; gap: 20px; margin-top: 20px;">
81
+ <div class="concept">
82
+ <img src="https://github.com/Capybara-AI/Image-Caption-Editor/assets/11761529/5f6668df-7806-4b25-8d3e-ab1d51940a4d" alt="Rustic Style">
83
+ <div class="concept-description">Rustic and Farmhouse</div>
84
+ </div>
85
+ <div class="concept">
86
+ <img src="https://github.com/Capybara-AI/Image-Caption-Editor/assets/11761529/8e656841-df89-446b-9285-9532dab23023" alt="Art Deco">
87
+ <div class="concept-description">Art Deco and Coastal</div>
88
+ </div>
89
+ <div class="concept">
90
+ <img src="https://github.com/Capybara-AI/Image-Caption-Editor/assets/11761529/526ae86d-4c1c-496c-b2c3-cd808ffc6161" alt="Scandinavian">
91
+ <div class="concept-description">Minimalist Scandinavian</div>
92
+ </div>
93
+ <div class="concept">
94
+ <img src="https://github.com/Capybara-AI/Image-Caption-Editor/assets/11761529/503760a4-412c-455d-a5fa-27b616e25ca8" alt="Japanese">
95
+ <div class="concept-description">Japanese Style</div>
96
+ </div>
97
+ <div class="concept">
98
+ <img src="https://github.com/Capybara-AI/Image-Caption-Editor/assets/11761529/45c4299f-b8a5-4bae-8435-62af5ed1d238" alt="Traditional">
99
+ <div class="concept-description">Traditional</div>
100
+ </div>
101
+ </div>
102
+ </div>
103
+ """