Skip to content

Commit

Permalink
correct
Browse files Browse the repository at this point in the history
  • Loading branch information
范丞德 committed Oct 19, 2024
1 parent 4dd15be commit c4ba1c5
Show file tree
Hide file tree
Showing 2 changed files with 4 additions and 215 deletions.
210 changes: 1 addition & 209 deletions spectromotion/css/app.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -156,212 +156,4 @@ span.highlight {
display: inline-block;
margin-left: 0.5em;
margin-right: 0.5em;
}


.switch {
position: relative;
display: inline-block;
width: 60px;
height: 28px;

}

.switch input {display:none;}

.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #4a80f5;
-webkit-transition: .4s;
transition: .4s;
border-radius: 28px;

}

.slider:before {
position: absolute;
content: "";
height: 20px;
width: 20px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
border-radius: 50%;
}

input:checked + .slider {
background-color: #b2b2b2;
}

input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(32px);
}

/*------ ADDED CSS ---------*/
.slider:after
{
content:'';
color: black;
display: block;
position: absolute;
transform: translate(-20%,-50%);
top: 50%;
left: 50%;
font-size: 16px;
font-family: Verdana, sans-serif;
}

input:checked + .slider:after
{
content:'';
transform: translate(80%,-50%);
}

/*--------- END --------*/

.switch-container-wrapper {
display: flex;
justify-content: center; /* Center horizontally */
}

.switch-container {
display: flex;
align-items: center; /* Align items vertically */

}

.switch-label {
color: black;
font-size: 16px;
margin-right: 5px; /* Adjust the margin as needed */
margin-left: 5px; /* Adjust the margin as needed */
}

.video-container {
position: relative;
max-width: 100%;
margin: 0.5em;
}

.overlay {
position: absolute;
top: 50%; /* Adjust the top position as needed */
left: 50%; /* Adjust the left position as needed */
background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent background */
color: black;
font-size: 16px;
}

.thumbnail-img {
max-width: 100%;
height: auto;
width: auto\9;
/* IE8 */
}

.pill {
cursor: pointer;
padding: 5px;
margin: 5px;
border: 1px solid #ddd;
border-radius: 5px;
display: inline-block;
transition: background-color 0.3s;
}

.active-pill {
/* background-color: #b4b4b4; */
/* Adjust the color as needed */
font-weight: bold;
}

.nav-pills {
cursor: pointer;
}

.center-pills {
display: flex;
justify-content: center;
}

.scene-pills > .active {
background: #1772d0;
}

/* .mode-pills > .active {
background: #1772d0;
} */

.button {
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-size-adjust: 100%;
font-family: 'Noto Sans', sans-serif;
font-style: inherit;
font-weight: inherit;
box-sizing: inherit;
text-decoration: none;
user-select: none;
-webkit-appearance: none;
align-items: center;
border: 1px solid transparent;
box-shadow: none;
display: inline-flex;
height: 2.5em;
line-height: 1.5;
position: relative;
vertical-align: top;
border-width: 1px;
cursor: pointer;
justify-content: center;
padding-bottom: calc(.5em - 1px);
padding-top: calc(.5em - 1px);
text-align: center;
white-space: nowrap;
margin-top: 5px;
margin-bottom: 5px;
background-color: #363636;
border-color: transparent;
color: #fff;
font-size: 1.4rem;
border-radius: 290486px;
padding-left: calc(1em + .25em);
padding-right: calc(1em + .25em);
}

.button .icon {
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-size-adjust: 100%;
font-family: 'Noto Sans', sans-serif;
user-select: none;
line-height: 1.5;
cursor: pointer;
text-align: center;
white-space: nowrap;
color: #fff;
font-size: 1rem;
box-sizing: inherit;
font-style: inherit;
font-weight: inherit;
align-items: center;
display: inline-flex;
justify-content: center;
height: 1.5em;
width: 1.5em;
margin-left: calc(-.5em - 1px);
margin-right: .25em;
}
}
9 changes: 3 additions & 6 deletions spectromotion/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,6 @@

<script src="js/app.js"></script>
<script src="js/synced_video_selector.js"></script>
<script src="js/video_comparison.js"></script>

</head>

Expand Down Expand Up @@ -243,14 +242,12 @@ <h3>

<div class="text-center">
<div class="video-container">
<video class="video" width=100% m id="compVideo0" loop playsinline autoplay muted onplay="resizeAndPlay(this)">
<video class="video" style="height: 280px; max-width: 100%;" m id="compVideo0" loop playsinline autoplay muted>
<source src="videos/comparison/as_nerfds_vs_ours_rgb.mp4" />
</video>
<canvas height=0 class="videoMerge" id="compVideoMerge"></canvas>
<video class="video" width=100% id="compVideo1" loop playsinline autoplay muted hidden onplay="resizeAndPlay(this)">
<video class="video" style="height: 280px; max-width: 100%;" id="compVideo1" loop playsinline autoplay muted hidden>
<source src="videos/comparison/as_nerfds_vs_ours_depth.mp4" />
</video>
<canvas height=0 class="videoMerge" id="compVideoMerge2"></canvas>
</div>
<div class="text-center" style="color: black;" id="mode-pills">
<div class="btn-group btn-group-sm">
Expand Down Expand Up @@ -379,7 +376,7 @@ <h3>
</div>
<div class="video-container">
<video id="compVideoabl2" loop playsinline autoplay muted style="max-width: 100%; height: 280px;">
<source src="videos/comparison/static_vs_ours_rgb.mp4" type="video/mp4" />
<source src="videos/comparison/static_vs_ours_rgb.mp4" />
</video>
</div>
</div>
Expand Down

0 comments on commit c4ba1c5

Please sign in to comment.