Page adjustments

docs/css/page.css

@@ -0,0 +1,35 @@
+.which-image-container {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    flex-direction: column;
+    justify-content: space-between;
+    height: 100%;
+}
+
+.which-image-container :nth-child(2) {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    flex-direction: column;
+    justify-content: flex-end;
+}
+
+.which-image {
+    display: inline-block;
+    flex: 1;
+    flex-basis: 45%;
+    margin: 1% 1% 1% 1%;
+    width: 100%;
+    height: auto;
+}
+
+.which-image img {
+    float: right;
+    width: 100%;
+}
+
+.image-display img {
+    float: right;
+    width: 65%;
+}

docs/index.html

@@ -20,10 +20,12 @@
 
     <!-- Custom styles for this template -->
     <link href="./css/jumbotron.css" rel="stylesheet">
+    <link href="./css/page.css" rel="stylesheet">
 
     <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
     <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
     <script src="./js/ie-emulation-modes-warning.js"></script>
+    <script src="./js/which-image.js"></script>
 
     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
     <!--[if lt IE 9]>
@@ -143,14 +145,36 @@
         </div>
         <div class="row">
             <div class="col-md-*">
-                <h3>Single Face Video Swap</h2>
+                <h3>Single Face Video Swap</h3>
             </div>
         </div>
         <div class="row">
-            <img width=24% src="./img/anni.webp" />
-            <img width=24% src="./img/chenglong.webp" />
+            <div class="col-md-12">
+                <div class="col-md-3 which-image-container">
+                    <div class="which-image" id=anni>
+                        <img src="./img/id/anni.jpg" onclick="select_source(0)" />
+                    </div>
+                    <div class="which-image" id=chenglong>
+                        <img src="./img/id/chenglong.jpg" onclick="select_source(1)" />
+                    </div>
+                </div>
+                <div class="col-md-3 which-image-container">
+                    <div class="which-image" id=zhoujielun>
+                        <img src="./img/id/zhoujielun.jpg" onclick="select_source(2)" />
+                    </div>
+                    <div class="which-image" id=zhuyin>
+                        <img src="./img/id/zhuyin.jpg" onclick="select_source(3)" />
+                    </div>
+                </div>
+                <div class="col-md-6 image-display" height=100%>
+                    <img id=jiroujinlun src="./img/anni.webp" />
+                </div>
+            </div>
+
+
+            <!-- <img width=24% src="./img/chenglong.webp" />
             <img width=24% src="./img/zhoujielun.webp" />
-            <img width=24% src="./img/zhuyin.webp" />
+            <img width=24% src="./img/zhuyin.webp" /> -->
         </div>
         <div class="row">
             <div class="col-md-*">

docs/js/which-image.js

@@ -0,0 +1,27 @@
+/*
+ * @FilePath: \SimSwap\docs\js\which-image.js
+ * @Author: Ziang Liu
+ * @Date: 2021-07-03 16:34:56
+ * @LastEditors: Ziang Liu
+ * @LastEditTime: 2021-07-03 16:44:10
+ * Copyright (C) 2021 SJTU. All rights reserved.
+ */
+
+
+
+function select_source(number) {
+    var items = ['anni', 'chenglong', 'zhoujielun', 'zhuyin'];
+    var item_id = items[number];
+
+    for (i = 0; i < 4; i++) {
+        if (number == i) {
+            document.getElementById(items[i]).style.borderWidth = '5px';
+            document.getElementById(items[i]).style.borderColor = 'red';
+            document.getElementById(items[i]).style.borderStyle = 'outset';
+        } else {
+            document.getElementById(items[i]).style.border = 'none';
+        }
+    }
+    document.getElementById('jiroujinlun').src = './img/' + item_id + '.webp';
+
+}