Skip to content

Commit cb1272c

Browse files
Yujia-Zhang0913Yujia-Zhang0913
committed
init utonia page
0 parents  commit cb1272c

20 files changed

Lines changed: 5851 additions & 0 deletions

‎.DS_Store‎

6 KB
Binary file not shown.

‎css/bootstrap.min.css‎

Lines changed: 5 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎css/frame-viewer.css‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
.fv-slider {
2+
width: 100%;
3+
-webkit-appearance: none;
4+
appearance: none;
5+
height: 15px;
6+
background: #ddd;
7+
outline: none;
8+
opacity: 0.7;
9+
transition: opacity .2s;
10+
}
11+
12+
.fv-slider:hover {
13+
opacity: 1;
14+
}
15+
16+
.fv-slider::-webkit-slider-thumb {
17+
-webkit-appearance: none;
18+
appearance: none;
19+
width: 25px;
20+
height: 25px;
21+
background: #4CAF50;
22+
cursor: pointer;
23+
}
24+
25+
.fv-slider::-moz-range-thumb {
26+
width: 25px;
27+
height: 25px;
28+
background: #4CAF50;
29+
cursor: pointer;
30+
}
31+
32+
.fv-frame-label {
33+
font-size: 1em;
34+
color: #333;
35+
margin-top: 10px;
36+
}
37+
38+
.fv-slider-container {
39+
display: flex;
40+
align-items: center;
41+
justify-content: center;
42+
margin-top: 10px;
43+
}
44+
45+
.fv-button.play-button,
46+
.fv-button.pause-button {
47+
width: 30px;
48+
height: 30px;
49+
cursor: pointer;
50+
display: flex;
51+
align-items: center;
52+
justify-content: center;
53+
background-color: rgba(255, 255, 255, 0.8);
54+
border: 1px solid #ccc;
55+
border-radius: 5px;
56+
transition: background-color 0.3s ease;
57+
margin-right: 10px;
58+
}
59+
60+
.fv-button.play-button::before,
61+
.fv-button.pause-button::before {
62+
content: '';
63+
display: inline-block;
64+
width: 0;
65+
height: 0;
66+
}
67+
68+
.fv-button.play-button::before {
69+
border-left: 15px solid black;
70+
border-top: 10px solid transparent;
71+
border-bottom: 10px solid transparent;
72+
}
73+
74+
.fv-button.pause-button::before {
75+
content: '';
76+
display: inline-block;
77+
width: 15px;
78+
height: 20px;
79+
background: linear-gradient(to right, black 0%, black 40%, transparent 40%, transparent 60%, black 60%, black 100%);
80+
}
81+
82+
.fv-button.play-button:hover,
83+
.fv-button.pause-button:hover {
84+
background-color: rgba(200, 200, 200, 0.8);
85+
}
86+
87+
.fv-button.play-button:active,
88+
.fv-button.pause-button:active {
89+
background-color: rgba(150, 150, 150, 0.8);
90+
}
91+
92+
.fv-preload-overlay {
93+
position: absolute;
94+
top: 0;
95+
left: 0;
96+
width: 100%;
97+
height: 100%;
98+
background: rgba(255, 255, 255, 0.5);
99+
color: black;
100+
display: flex;
101+
justify-content: center;
102+
align-items: center;
103+
font-size: 20px;
104+
}
105+
106+
.fv-frame-image {
107+
width: 100%;
108+
}

‎css/page.css‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
h1,
2+
h2,
3+
h3 {
4+
font-weight: 500;
5+
}
6+
7+
img {
8+
display: block;
9+
max-width: 100%;
10+
/* max-height: 80vh; */
11+
}

‎css/scene-viewer.css‎

Lines changed: 218 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,218 @@
1+
.sv-canvas-container {
2+
display: flex;
3+
justify-content: space-between;
4+
width: 100%;
5+
gap: 25px;
6+
}
7+
8+
.sv-canvas-wrapper {
9+
flex: 1;
10+
display: flex;
11+
flex-direction: column;
12+
align-items: center;
13+
/* border: 1px solid rgb(192, 192, 192);
14+
padding: 10px; */
15+
position: relative;
16+
}
17+
18+
.sv-canvas {
19+
width: 100%;
20+
position: relative;
21+
cursor: move;
22+
}
23+
24+
.sv-canvas-split-container {
25+
display: flex;
26+
justify-content: space-between;
27+
width: 100%;
28+
gap: 25px;
29+
}
30+
.sv-canvas-split-wrapper {
31+
flex: 1;
32+
display: flex;
33+
flex-direction: column;
34+
align-items: center;
35+
aspect-ratio: 21 / 9;
36+
overflow: hidden;
37+
/* border: 1px solid rgb(192, 192, 192);
38+
padding: 10px; */
39+
position: relative;
40+
}
41+
42+
.sv-split-canvas {
43+
flex:1;
44+
width: 100%;
45+
height: 100%;
46+
position: relative;
47+
cursor: move;
48+
display: block;
49+
}
50+
51+
.sv-splitter {
52+
position: absolute;
53+
top: 0;
54+
bottom: 0;
55+
width: 3px;
56+
background: rgba(0,0,0,0.9);
57+
box-shadow: 0 0 0 1px rgba(255,255,255,0.15);
58+
cursor: ew-resize;
59+
z-index: 9999;
60+
transform: translateX(-1.5px);
61+
touch-action: none;
62+
}
63+
64+
.sv-splitter-handle {
65+
position: absolute;
66+
top: 50%;
67+
left: 50%;
68+
width: 18px;
69+
height: 40px;
70+
transform: translate(-50%, -50%);
71+
border-radius: 10px;
72+
background: rgba(0,0,0,0.65);
73+
display: grid;
74+
place-items: center;
75+
}
76+
77+
.sv-splitter-handle::before {
78+
content: "";
79+
width: 2px;
80+
height: 18px;
81+
background: rgba(255,255,255,0.85);
82+
box-shadow: -4px 0 0 rgba(255,255,255,0.6), 4px 0 0 rgba(255,255,255,0.6);
83+
}
84+
85+
.sv-canvas-label {
86+
margin-top: 10px;
87+
font-size: 1.05em;
88+
color: #333;
89+
}
90+
91+
.sv-button-container {
92+
position: absolute;
93+
top: 10px;
94+
right: 10px;
95+
display: flex;
96+
flex-direction: column;
97+
gap: 5px;
98+
}
99+
100+
.sv-control-button {
101+
width: 30px;
102+
height: 30px;
103+
display: flex;
104+
align-items: center;
105+
justify-content: center;
106+
background-color: rgba(255, 255, 255, 0.8);
107+
border: 1px solid #ccc;
108+
border-radius: 5px;
109+
font-weight: bold;
110+
font-family: 'Menlo', 'Lucida Console', 'Monaco', 'Consolas', monospace;
111+
cursor: pointer;
112+
transition: background-color 0.3s ease;
113+
}
114+
115+
.sv-control-button:hover {
116+
background-color: rgba(200, 200, 200, 0.8);
117+
}
118+
119+
.sv-control-button:active {
120+
background-color: rgba(150, 150, 150, 0.8);
121+
}
122+
123+
@keyframes breathing {
124+
0% {
125+
opacity: 0.4;
126+
}
127+
50% {
128+
opacity: 0.8;
129+
}
130+
100% {
131+
opacity: 0.4;
132+
}
133+
}
134+
135+
.sv-interactive-cursor {
136+
position: absolute;
137+
top: 50%;
138+
left: 50%;
139+
transform: translate(-50%, -50%);
140+
width: 40px;
141+
height: 40px;
142+
pointer-events: none;
143+
background-color: rgba(255, 255, 255, 0.8);
144+
border: 1px solid #ccc;
145+
border-radius: 5px;
146+
display: flex;
147+
align-items: center;
148+
justify-content: center;
149+
animation: breathing 2s ease-in-out infinite;
150+
}
151+
152+
.sv-interactive-cursor::before {
153+
content: '✥';
154+
font-size: 24px;
155+
color: #333;
156+
}
157+
158+
.sv-interactive-cursor.hidden {
159+
opacity: 0;
160+
animation: none;
161+
transition: opacity 0.3s ease;
162+
}
163+
164+
.ply-selector {
165+
background: #ffffff;
166+
border-radius: 18px;
167+
padding: 18px;
168+
box-shadow: 0 12px 30px rgba(0,0,0,0.08);
169+
border: 1px solid rgba(0,0,0,0.06);
170+
margin-bottom: 1rem;
171+
display: flex;
172+
justify-content: center;
173+
flex-wrap: wrap;
174+
gap: 0.5rem;
175+
}
176+
177+
.ply-selector button {
178+
padding: 0.5rem 1rem;
179+
cursor: pointer;
180+
}
181+
182+
.model-grid {
183+
display: flex;
184+
gap: 1.25rem;
185+
flex-wrap: wrap;
186+
}
187+
188+
.model-grid button {
189+
display: flex;
190+
flex-direction: column;
191+
align-items: center;
192+
border: none;
193+
background: #f9f9f9;
194+
padding: 0.75rem;
195+
border-radius: 12px;
196+
cursor: pointer;
197+
transition: transform 0.2s ease;
198+
width: 170px;
199+
}
200+
201+
.model-grid button:hover {
202+
transform: scale(1.05);
203+
}
204+
205+
.model-grid img {
206+
width: 100%;
207+
border-radius: 10px;
208+
object-fit: cover;
209+
210+
aspect-ratio: 16 / 9;
211+
}
212+
213+
.model-grid span {
214+
margin-top: 0.6rem;
215+
font-size: 1.1rem;
216+
font-weight: 600;
217+
color: #333;
218+
}

0 commit comments

Comments
 (0)