Skip to content

Commit 3589791

Browse files
FeiSong123FeiSong123
committed
Label LucidFlux 2K and 4K comparisons
1 parent cd543de commit 3589791

2 files changed

Lines changed: 46 additions & 0 deletions

File tree

‎LucidFlux/index.html‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1233,6 +1233,8 @@ <h3>Example 1</h3>
12331233
<img src="results/before/1.png" alt="Example 1 Input" class="before-image">
12341234
<img src="results/2k/1.jpg" alt="Example 1 LucidFlux 2K" class="after-image">
12351235
<div class="comparison-slider"><div class="slider-handle"><div class="slider-arrow">◀ ▶</div></div></div>
1236+
<span class="compare-label compare-label-before">Input</span>
1237+
<span class="compare-label compare-label-after">LucidFlux 2K</span>
12361238
<span class="resolution">2K</span>
12371239
</div>
12381240
</div>
@@ -1244,6 +1246,8 @@ <h3>Example 1</h3>
12441246
<img src="results/before/1.png" alt="Example 1 Input" class="before-image">
12451247
<img src="results/4k/1.jpg" alt="Example 1 LucidFlux 4K" class="after-image">
12461248
<div class="comparison-slider"><div class="slider-handle"><div class="slider-arrow">◀ ▶</div></div></div>
1249+
<span class="compare-label compare-label-before">Input</span>
1250+
<span class="compare-label compare-label-after">LucidFlux 4K</span>
12471251
<span class="resolution">4K</span>
12481252
</div>
12491253
</div>
@@ -1260,6 +1264,8 @@ <h3>Example 2</h3>
12601264
<img src="results/before/2.png" alt="Example 2 Input" class="before-image">
12611265
<img src="results/2k/2.jpg" alt="Example 2 LucidFlux 2K" class="after-image">
12621266
<div class="comparison-slider"><div class="slider-handle"><div class="slider-arrow">◀ ▶</div></div></div>
1267+
<span class="compare-label compare-label-before">Input</span>
1268+
<span class="compare-label compare-label-after">LucidFlux 2K</span>
12631269
<span class="resolution">2K</span>
12641270
</div>
12651271
</div>
@@ -1271,6 +1277,8 @@ <h3>Example 2</h3>
12711277
<img src="results/before/2.png" alt="Example 2 Input" class="before-image">
12721278
<img src="results/4k/2.jpg" alt="Example 2 LucidFlux 4K" class="after-image">
12731279
<div class="comparison-slider"><div class="slider-handle"><div class="slider-arrow">◀ ▶</div></div></div>
1280+
<span class="compare-label compare-label-before">Input</span>
1281+
<span class="compare-label compare-label-after">LucidFlux 4K</span>
12741282
<span class="resolution">4K</span>
12751283
</div>
12761284
</div>
@@ -1287,6 +1295,8 @@ <h3>Example 3</h3>
12871295
<img src="results/before/3.png" alt="Example 3 Input" class="before-image">
12881296
<img src="results/2k/3.jpg" alt="Example 3 LucidFlux 2K" class="after-image">
12891297
<div class="comparison-slider"><div class="slider-handle"><div class="slider-arrow">◀ ▶</div></div></div>
1298+
<span class="compare-label compare-label-before">Input</span>
1299+
<span class="compare-label compare-label-after">LucidFlux 2K</span>
12901300
<span class="resolution">2K</span>
12911301
</div>
12921302
</div>
@@ -1298,6 +1308,8 @@ <h3>Example 3</h3>
12981308
<img src="results/before/3.png" alt="Example 3 Input" class="before-image">
12991309
<img src="results/4k/3.jpg" alt="Example 3 LucidFlux 4K" class="after-image">
13001310
<div class="comparison-slider"><div class="slider-handle"><div class="slider-arrow">◀ ▶</div></div></div>
1311+
<span class="compare-label compare-label-before">Input</span>
1312+
<span class="compare-label compare-label-after">LucidFlux 4K</span>
13011313
<span class="resolution">4K</span>
13021314
</div>
13031315
</div>
@@ -1314,6 +1326,8 @@ <h3>Example 4</h3>
13141326
<img src="results/before/4.png" alt="Example 4 Input" class="before-image">
13151327
<img src="results/2k/4.jpg" alt="Example 4 LucidFlux 2K" class="after-image">
13161328
<div class="comparison-slider"><div class="slider-handle"><div class="slider-arrow">◀ ▶</div></div></div>
1329+
<span class="compare-label compare-label-before">Input</span>
1330+
<span class="compare-label compare-label-after">LucidFlux 2K</span>
13171331
<span class="resolution">2K</span>
13181332
</div>
13191333
</div>
@@ -1325,6 +1339,8 @@ <h3>Example 4</h3>
13251339
<img src="results/before/4.png" alt="Example 4 Input" class="before-image">
13261340
<img src="results/4k/4.jpg" alt="Example 4 LucidFlux 4K" class="after-image">
13271341
<div class="comparison-slider"><div class="slider-handle"><div class="slider-arrow">◀ ▶</div></div></div>
1342+
<span class="compare-label compare-label-before">Input</span>
1343+
<span class="compare-label compare-label-after">LucidFlux 4K</span>
13281344
<span class="resolution">4K</span>
13291345
</div>
13301346
</div>
@@ -1341,6 +1357,8 @@ <h3>Example 5</h3>
13411357
<img src="results/before/5.png" alt="Example 5 Input" class="before-image">
13421358
<img src="results/2k/5.jpg" alt="Example 5 LucidFlux 2K" class="after-image">
13431359
<div class="comparison-slider"><div class="slider-handle"><div class="slider-arrow">◀ ▶</div></div></div>
1360+
<span class="compare-label compare-label-before">Input</span>
1361+
<span class="compare-label compare-label-after">LucidFlux 2K</span>
13441362
<span class="resolution">2K</span>
13451363
</div>
13461364
</div>
@@ -1352,6 +1370,8 @@ <h3>Example 5</h3>
13521370
<img src="results/before/5.png" alt="Example 5 Input" class="before-image">
13531371
<img src="results/4k/5.jpg" alt="Example 5 LucidFlux 4K" class="after-image">
13541372
<div class="comparison-slider"><div class="slider-handle"><div class="slider-arrow">◀ ▶</div></div></div>
1373+
<span class="compare-label compare-label-before">Input</span>
1374+
<span class="compare-label compare-label-after">LucidFlux 4K</span>
13551375
<span class="resolution">4K</span>
13561376
</div>
13571377
</div>

‎LucidFlux/styles.css‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -497,6 +497,32 @@ tbody tr:hover {
497497
image-rendering: auto;
498498
}
499499

500+
.compare-label {
501+
position: absolute;
502+
top: 10px;
503+
z-index: 12;
504+
max-width: calc(50% - 18px);
505+
padding: 4px 8px;
506+
border-radius: 4px;
507+
background-color: rgba(0, 0, 0, 0.72);
508+
color: #fff;
509+
font-family: 'Montserrat', sans-serif;
510+
font-size: 0.8em;
511+
font-weight: 700;
512+
line-height: 1.2;
513+
pointer-events: none;
514+
white-space: nowrap;
515+
}
516+
517+
.compare-label-before {
518+
left: 10px;
519+
}
520+
521+
.compare-label-after {
522+
right: 10px;
523+
background-color: rgba(0, 122, 204, 0.86);
524+
}
525+
500526
@media (max-width: 900px) {
501527
.resolution-comparison-pair {
502528
grid-template-columns: 1fr;

0 commit comments

Comments
 (0)