lyunm1206
commited on
Commit
·
05abb8d
1
Parent(s):
11e42b8
kera
Browse files- index.html +66 -54
index.html
CHANGED
|
@@ -44,7 +44,13 @@
|
|
| 44 |
}
|
| 45 |
|
| 46 |
/* Style for the tab buttons */
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 47 |
.tabs {
|
|
|
|
| 48 |
text-align: center;
|
| 49 |
margin-top: 30px;
|
| 50 |
}
|
|
@@ -55,6 +61,9 @@
|
|
| 55 |
border: 1px solid #007bff;
|
| 56 |
margin-right: 5px;
|
| 57 |
border-radius: 5px;
|
|
|
|
|
|
|
|
|
|
| 58 |
}
|
| 59 |
|
| 60 |
.tab-button:hover, .tab-button.active {
|
|
@@ -62,6 +71,7 @@
|
|
| 62 |
}
|
| 63 |
|
| 64 |
.tab-content {
|
|
|
|
| 65 |
background-color: #fff;
|
| 66 |
padding: 15px;
|
| 67 |
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
@@ -109,60 +119,62 @@
|
|
| 109 |
</model-viewer>
|
| 110 |
</div>
|
| 111 |
|
| 112 |
-
<div class="
|
| 113 |
-
<
|
| 114 |
-
|
| 115 |
-
|
| 116 |
-
|
| 117 |
-
|
| 118 |
-
|
| 119 |
-
|
| 120 |
-
|
| 121 |
-
|
| 122 |
-
<
|
| 123 |
-
|
| 124 |
-
|
| 125 |
-
|
| 126 |
-
|
| 127 |
-
|
| 128 |
-
|
| 129 |
-
|
| 130 |
-
|
| 131 |
-
|
| 132 |
-
<
|
| 133 |
-
|
| 134 |
-
|
| 135 |
-
|
| 136 |
-
|
| 137 |
-
|
| 138 |
-
<
|
| 139 |
-
|
| 140 |
-
|
| 141 |
-
|
| 142 |
-
|
| 143 |
-
|
| 144 |
-
<
|
| 145 |
-
|
| 146 |
-
|
| 147 |
-
|
| 148 |
-
|
| 149 |
-
|
| 150 |
-
<
|
| 151 |
-
|
| 152 |
-
|
| 153 |
-
|
| 154 |
-
|
| 155 |
-
|
| 156 |
-
<
|
| 157 |
-
|
| 158 |
-
|
| 159 |
-
|
| 160 |
-
|
| 161 |
-
|
| 162 |
-
<
|
| 163 |
-
|
| 164 |
-
|
| 165 |
-
|
|
|
|
|
|
|
| 166 |
</div>
|
| 167 |
|
| 168 |
<!-- Import the model-viewer component -->
|
|
|
|
| 44 |
}
|
| 45 |
|
| 46 |
/* Style for the tab buttons */
|
| 47 |
+
.tabbed-interface {
|
| 48 |
+
max-width: 800px; /* Adjust this to suit your design */
|
| 49 |
+
margin: 0 auto; /* Center the entire tabbed interface */
|
| 50 |
+
}
|
| 51 |
+
|
| 52 |
.tabs {
|
| 53 |
+
width: 100px;
|
| 54 |
text-align: center;
|
| 55 |
margin-top: 30px;
|
| 56 |
}
|
|
|
|
| 61 |
border: 1px solid #007bff;
|
| 62 |
margin-right: 5px;
|
| 63 |
border-radius: 5px;
|
| 64 |
+
width: calc(100% / 7); /* Divide by the number of tabs */
|
| 65 |
+
box-sizing: border-box; /* Include padding and border in the width calculation */
|
| 66 |
+
text-align: center; /* Center the text on the tab */
|
| 67 |
}
|
| 68 |
|
| 69 |
.tab-button:hover, .tab-button.active {
|
|
|
|
| 71 |
}
|
| 72 |
|
| 73 |
.tab-content {
|
| 74 |
+
width: 100px;
|
| 75 |
background-color: #fff;
|
| 76 |
padding: 15px;
|
| 77 |
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
|
|
| 119 |
</model-viewer>
|
| 120 |
</div>
|
| 121 |
|
| 122 |
+
<div class="tabbed-interface">
|
| 123 |
+
<div class="tabs">
|
| 124 |
+
<button class="tab-button" data-tab = "tab1" onclick="openTab('tab1')">Kodak 08</button>
|
| 125 |
+
<button class="tab-button" data-tab = "tab2" onclick="openTab('tab2')">Kodak 01</button>
|
| 126 |
+
<button class="tab-button" data-tab = "tab3" onclick="openTab('tab3')">Kodak 02</button>
|
| 127 |
+
<button class="tab-button" data-tab = "tab4" onclick="openTab('tab4')">DIV2K 801</button>
|
| 128 |
+
<button class="tab-button" data-tab = "tab5" onclick="openTab('tab5')">DIV2K 802</button>
|
| 129 |
+
<button class="tab-button" data-tab = "tab6" onclick="openTab('tab6')">CLIC 01</button>
|
| 130 |
+
<button class="tab-button" data-tab = "tab7" onclick="openTab('tab7')">CLIC 02</button>
|
| 131 |
+
</div>
|
| 132 |
+
<div id="tab1" class="tab-content">
|
| 133 |
+
<input type="radio" id="option1a" name="subOption1" value="option1a" checked>
|
| 134 |
+
<label for="option1a">PSNR 50</label>
|
| 135 |
+
<input type="radio" id="option1b" name="subOption1" value="option1b">
|
| 136 |
+
<label for="option1b">PSNR 30</label>
|
| 137 |
+
<input type="radio" id="option1c" name="subOption1" value="option1c">
|
| 138 |
+
<label for="option1c">PSNR 50 with top-eigenvector</label>
|
| 139 |
+
<input type="radio" id="option1d" name="subOption1" value="option1d">
|
| 140 |
+
<label for="option1d">PSNR 30 with top-eigenvector</label>
|
| 141 |
+
</div>
|
| 142 |
+
<div id="tab2" class="tab-content">
|
| 143 |
+
<input type="radio" id="option2a" name="subOption1" value="option2a">
|
| 144 |
+
<label for="option2a">PSNR 50</label>
|
| 145 |
+
<input type="radio" id="option2b" name="subOption1" value="option2b">
|
| 146 |
+
<label for="option2b">PSNR 30</label>
|
| 147 |
+
</div>
|
| 148 |
+
<div id="tab3" class="tab-content">
|
| 149 |
+
<input type="radio" id="option3a" name="subOption1" value="option3a">
|
| 150 |
+
<label for="option3a">PSNR 50</label>
|
| 151 |
+
<input type="radio" id="option3b" name="subOption1" value="option3b">
|
| 152 |
+
<label for="option3b">PSNR 30</label>
|
| 153 |
+
</div>
|
| 154 |
+
<div id="tab4" class="tab-content">
|
| 155 |
+
<input type="radio" id="option4a" name="subOption1" value="option4a">
|
| 156 |
+
<label for="option4a">PSNR 50</label>
|
| 157 |
+
<input type="radio" id="option4b" name="subOption1" value="option4b">
|
| 158 |
+
<label for="option4b">PSNR 30</label>
|
| 159 |
+
</div>
|
| 160 |
+
<div id="tab5" class="tab-content">
|
| 161 |
+
<input type="radio" id="option5a" name="subOption1" value="option5a">
|
| 162 |
+
<label for="option5a">PSNR 50</label>
|
| 163 |
+
<input type="radio" id="option5b" name="subOption1" value="option5b">
|
| 164 |
+
<label for="option5b">PSNR 30</label>
|
| 165 |
+
</div>
|
| 166 |
+
<div id="tab6" class="tab-content">
|
| 167 |
+
<input type="radio" id="option6a" name="subOption1" value="option6a">
|
| 168 |
+
<label for="option6a">PSNR 50</label>
|
| 169 |
+
<input type="radio" id="option6b" name="subOption1" value="option6b">
|
| 170 |
+
<label for="option6b">PSNR 30</label>
|
| 171 |
+
</div>
|
| 172 |
+
<div id="tab7" class="tab-content">
|
| 173 |
+
<input type="radio" id="option7a" name="subOption1" value="option7a">
|
| 174 |
+
<label for="option7a">PSNR 50</label>
|
| 175 |
+
<input type="radio" id="option7b" name="subOption1" value="option7b">
|
| 176 |
+
<label for="option7b">PSNR 30</label>
|
| 177 |
+
</div>
|
| 178 |
</div>
|
| 179 |
|
| 180 |
<!-- Import the model-viewer component -->
|