首頁樣式重排 (分頁仍待調整)

app/course/list_new.php

@@ -7,33 +7,29 @@ require_once '../public/load_lang.php';
 require_once '../ucenter/function.php';
 
 global $PDO;
-PDO_Connect("sqlite:"._FILE_DB_COURSE_);
+PDO_Connect("sqlite:" . _FILE_DB_COURSE_);
 $query = "select * from course where 1  order by modify_time DESC limit 0,4";
 $Fetch = PDO_FetchAll($query);
 
-foreach($Fetch as $row){
-    echo '<div class="content_block">';
+foreach ($Fetch as $row) {
     echo '<div class="card">';
-
-    echo '<div class="pd-10">';
-    echo '<div class="title" style="padding-bottom:5px;font-size:110%;font-weight:600;"><a href="../course/course.php?id='.$row["id"].'">'.$row["title"].'</a></div>';
-    echo '<div class="summary"  style="padding-bottom:5px;color: #ad4b00;">'.$row["subtitle"].'</div>';
-    echo '<div class="author"  style="padding-bottom:5px;margin-bottom:0.4em;">'.$_local->gui->speaker.'：';
-    echo '<a href="../uhome/course.php?userid='.$row['teacher'].'">';
+    echo '<div class="card_photo"></div>';
+    echo '<div class="course_right">';
+    echo '<div class="title"><a href="../course/course.php?id=' . $row["id"] . '">' . $row["title"] . '</a></div>';
+    echo '<div class="subtitle"  style="color:gray;">' . $row["subtitle"] . '</div>';
+    echo '<div class="author">' . $_local->gui->speaker . '：';
+    echo '<a href="../uhome/course.php?userid=' . $row['teacher'] . '">';
     echo ucenter_getA($row["teacher"]);
     echo '</a>';
-    echo '</div>';    
-    echo '<div class="summary"  style="padding-bottom:5px;height: 4.5em;line-height: 1.5em;overflow-y: hidden;">'.$row["summary"].'</div>';
     echo '</div>';
+    echo '<div class="summary">' . $row["summary"] . '</div>';
+    echo '</div>';
+    /*
     echo '<div class="pd-10" style="display:flex;justify-content: space-between;">';
     echo '<button><svg t="1600445373282" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2368" width="32" height="32"><path fill="silver" d="M854.00064 412.66688h-275.99872v-35.99872c48-102.00064 35.99872-227.99872 0-288-12.00128-18.00192-35.99872-35.99872-54.00064-35.99872s-35.99872 6.00064-35.99872 54.00064c0 96-6.00064 137.99936-24.00256 179.99872-12.00128 29.99808-77.99808 96-156.00128 120.00256v480c12.00128 6.00064 35.99872 24.00256 54.00064 29.99808 18.00192 12.00128 48 18.00192 60.00128 18.00192h306.00192c77.99808 0 108.00128-29.99808 108.00128-66.00192 0-18.00192 0-29.99808-18.00192-35.99872V796.672c41.99936 0 83.99872-12.00128 83.99872-48 0-29.99808-12.00128-35.99872-18.00192-35.99872v-35.99872h6.00064c24.00256 0 60.00128-35.99872 60.00128-60.00128 0-18.00192-6.00064-35.99872-18.00192-41.99936-6.00064-6.00064-24.00256-6.00064-24.00256-6.00064v-35.99872s12.00128 0 24.00256-12.00128c18.00192-12.00128 18.00192-42.00448 18.00192-42.00448v-12.00128c0-29.99808-48-54.00064-96-54.00064zM67.99872 478.6688l35.99872 408.00256c6.00064 24.00256 24.00256 48 48 48h83.99872c6.00064 0 12.00128-6.00064 18.00192-12.00128s12.00128-6.00064 18.00192-12.00128V412.66688H128c-35.99872 0-60.00128 35.99872-60.00128 66.00192z" p-id="2369"></path></svg></button>';
     echo '<span id="num_like">3</span>';
     echo '<button><svg t="1600445467402" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4462" width="32" height="32"><path d="M604.37 488.16a93.87 93.87 0 1 1-93.92-93.88 94 94 0 0 1 93.92 93.88z" fill="silver" p-id="4463"></path><path d="M510.5 179c-246 0-445.39 227.26-445.39 318.12 0 113.65 199.43 318.17 445.39 318.17s445.39-204.52 445.39-318.17C955.89 406.26 756.46 179 510.5 179z m0 477.33c-92.68 0-168.07-75.44-168.07-168.17S417.77 320 510.45 320s168.17 75.42 168.17 168.13-75.44 168.2-168.17 168.2z" fill="silver" p-id="4464"></path></svg></button>';
     echo '<span id="num_subscribe">23</span>';
-    echo '</div>';
-    
-    echo '</div>';
+    echo '</div>';*/
     echo '</div>';
 }
-
-?>

app/pcdl/html_head.php

@@ -2,17 +2,15 @@
 require_once '../path.php';
 require_once '../public/load_lang.php';
 
-if(isset($_GET["language"])){
-	$currLanguage=$_GET["language"];
-	$_COOKIE["language"]=$currLanguage;
-}
-else{
-	if(isset($_COOKIE["language"])){
-		$currLanguage=$_COOKIE["language"];
-	}
-	else{
-		$currLanguage="en";
-		$_COOKIE["language"]=$currLanguage;
+if (isset($_GET["language"])) {
+	$currLanguage = $_GET["language"];
+	$_COOKIE["language"] = $currLanguage;
+} else {
+	if (isset($_COOKIE["language"])) {
+		$currLanguage = $_COOKIE["language"];
+	} else {
+		$currLanguage = "en";
+		$_COOKIE["language"] = $currLanguage;
 	}
 }
 
@@ -20,14 +18,15 @@ else{
 
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html>
+
 <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
-	<link type="text/css" rel="stylesheet" href="../pcdl/css/font.css"/>
-    <link type="text/css" rel="stylesheet" href="../pcdl/css/basic_style.css"/>
-    <link type="text/css" rel="stylesheet" href="../pcdl/css/style.css"/>
-    <link type="text/css" rel="stylesheet" href="../pcdl/css/color_day.css" id="colorchange" />
-    <link type="text/css" rel="stylesheet" href="../pcdl/css/style_mobile.css" media="screen and (max-width:800px)">
+	<link type="text/css" rel="stylesheet" href="../pcdl/css/font.css" />
+	<link type="text/css" rel="stylesheet" href="../pcdl/css/basic_style.css" />
+	<link type="text/css" rel="stylesheet" href="../pcdl/css/style.css" />
+	<link type="text/css" rel="stylesheet" href="../pcdl/css/color_day.css" id="colorchange" />
+	<link type="text/css" rel="stylesheet" href="../pcdl/css/style_mobile.css" media="screen and (max-width:800px)">
 	<link href="https://fonts.googleapis.com/css2?family=Padauk:wght@400;700&display=swap" rel="stylesheet">
 
 	<!-- generics -->
@@ -61,13 +60,13 @@ else{
 	<link rel="manifest" href="../public/images/favicon/site.webmanifest">
 	<link rel="mask-icon" href="../public/images/favicon/safari-pinned-tab.svg" color="#333333">
 
-    <title>wikipāḷi</title>
+	<title>wikipāḷi</title>
 
 	<script src="../public/js/jquery.js"></script>
 	<script src="../public/js/comm.js"></script>
 	<script src="../studio/js/fixedsticky.js"></script>
 	<script src="../guide/guide.js"></script>
-	<link type="text/css" rel="stylesheet" href="../guide/guide.css"/>
+	<link type="text/css" rel="stylesheet" href="../guide/guide.css" />
 
 	<script src="../ucenter/setting.js"></script>
 
@@ -75,87 +74,104 @@ else{
 	<script src="../public/js/mermaid.min.js"></script>
 
 	<script src="../public/js/notify.js"></script>
-    <link type="text/css" rel="stylesheet" href="../public/css/notify.css"/>
+	<link type="text/css" rel="stylesheet" href="../public/css/notify.css" />
 
 	<script src="../public/js/jquery-ui-1.12.1/jquery-ui.js"></script>
-	<link type="text/css" rel="stylesheet" href="../public/js/jquery-ui-1.12.1/jquery-ui.css"/>	
+	<link type="text/css" rel="stylesheet" href="../public/js/jquery-ui-1.12.1/jquery-ui.css" />
 
 	<script src="../term/term.js"></script>
 	<script src="../term/note.js"></script>
 	<script src="../term/term_popup.js"></script>
-	<link type="text/css" rel="stylesheet" href="../term/term.css"/>
+	<link type="text/css" rel="stylesheet" href="../term/term.css" />
 	<?php
-		if(isset($_GET["display"]) && $_GET["display"]=="para"){
-			echo '<link type="text/css" rel="stylesheet" href="../term/term_para.css"/>';
-		}
+	if (isset($_GET["display"]) && $_GET["display"] == "para") {
+		echo '<link type="text/css" rel="stylesheet" href="../term/term_para.css"/>';
+	}
 	?>
-		<script src="../channal/channal.js"></script>
+	<script src="../channal/channal.js"></script>
 	<script src="../term/popup_note.js"></script>
-	<link type="text/css" rel="stylesheet" href="../term/popup_note.css"/>
+	<link type="text/css" rel="stylesheet" href="../term/popup_note.css" />
 
 	<script src="../term/term_edit_dlg.js"></script>
-	<link type="text/css" rel="stylesheet" href="../term/term_edit_dlg.css"/>
+	<link type="text/css" rel="stylesheet" href="../term/term_edit_dlg.css" />
 	<script src="../uwbw/wbw_channal_list.js"></script>
 	<script src="../usent/historay.js"></script>
 	<script src="../term/pali_sim_sent.js"></script>
-	<link type="text/css" rel="stylesheet" href="../term/pali_sim_dlg.css"/>
+	<link type="text/css" rel="stylesheet" href="../term/pali_sim_dlg.css" />
 	<script src="../term/related_para.js"></script>
-	
+
 	<script src="../inline_dict/inline_dict.js"></script>
 
 	<script src="../widget/click_dropdown.js"></script>
-	<link type="text/css" rel="stylesheet" href="../widget/click_dropdown.css"/>
+	<link type="text/css" rel="stylesheet" href="../widget/click_dropdown.css" />
 
 	<script src="../public/charcode/coverter_my.js"></script>
 
-	<script >
-	<?php require_once '../public/load_lang_js.php';?>
+	<script>
+		<?php require_once '../public/load_lang_js.php'; ?>
 	</script>
 
 	<style>
-	.list_with_head{
-		display:flex;
-		margin: 3px 0;
-	}
-	.head_img{
-		display: inline-flex;
-    min-width: 3em;
-    height: 3em;
-    padding: 0 0px;
-    font-size: 60%;
-    background-color: gray;
-    color: white;
-    border-radius: 1.5em;
-    text-align: center;
-    justify-content: center;
-    margin: auto 2px;
-    line-height: 3em;
-	}
-	.card{
-		box-shadow: 0 0 10px rgba(0,0,0,0.15);
-		font-size: 1em;
-		line-height: 1.3;
-	}
-	.card>.title>a , .card>.title>a:link{
-		color: var(--main-color);
+		.list_with_head {
+			display: flex;
+			margin: 3px 0;
+		}
 
-	}
-	.card a:hover{
-		color: var(--tool-link-hover-color);
-	}
+		.head_img {
+			display: inline-flex;
+			min-width: 3em;
+			height: 3em;
+			padding: 0 0px;
+			font-size: 60%;
+			background-color: gray;
+			color: white;
+			border-radius: 1.5em;
+			text-align: center;
+			justify-content: center;
+			margin: auto 2px;
+			line-height: 3em;
+		}
 
-	.index_inner {
-	width:96vw;
-    max-width: 960px;
-    margin-left: auto;
-    margin-right: auto;
-}
-.card li{
-	white-space: normal;
-}
-.card code{
-	white-space: normal;
-}
+		.card {
+			border-radius: 20px;
+			box-shadow: 0 5px 7px rgba(0, 0, 0, 0.05);
+			margin: 10px 0;
+			background-color: white;
+			padding: 0.7rem;
+			display: flex;
+			position: relative;
+		}
+
+		.card>.title>a,
+		.card>.title>a:link {
+			color: var(--main-color);
+
+		}
+
+		.card a:hover {
+			color: var(--tool-link-hover-color);
+		}
 
+		.card_state {
+			position: absolute;
+			background-color: darkred;
+			color: white;
+			padding: 0 6px;
+			right: -5px;
+		}
+
+		.index_inner {
+
+			margin-left: auto;
+			margin-right: auto;
+		}
+
+		.card li {
+			white-space: normal;
+		}
+
+		.card code {
+			white-space: normal;
+		}
 	</style>
-</head>
+</head>

app/pcdl/index.js

@@ -1,76 +1,79 @@
 function index_onload() {
-  index_load_term_new();
-  index_load_collect_new();
-  index_load_course_new();
+    index_load_term_new();
+    index_load_collect_new();
+    index_load_course_new();
 }
 
 function index_load_collect_new() {
-  $.get(
-    "../article/list_new.php",
-    {
-      begin: 0,
-      page: 4,
-    },
-    function (data, status) {
-      let arrCollectList = JSON.parse(data);
-      let html = "";
-      for (const iterator of arrCollectList.data) {
-        html += "<div style='width:25%;padding:0.5em;'>";
-        html += '<div style="position: relative;">';
-        html +=
-          "<div class='' style='position: absolute;background-color: darkred;color: white;padding: 0 6px;right: 0;'>" + gLocal.gui.ongoing + "</div>";
-        html += "</div>";
-        html += "<div class='card article_list' style='padding:10px;'>";
-          gLocal.gui.ongoing + "</div>";
-        html += "<div class='title' style='font-weight:700'>";
-        html +=
-          "<a href='../article/?id=" +
-          iterator.id +
-          "'>" +
-          iterator.title +
-          "</a>";
-        html += "</div>";
+    $.get(
+        "../article/list_new.php", {
+            begin: 0,
+            page: 4,
+        },
+        function(data, status) {
+            let arrCollectList = JSON.parse(data);
+            let html = "";
+            for (const iterator of arrCollectList.data) {
+                html += "<div class='card'>";
+
+                html +=
+                    "<div class='card_state'>" + gLocal.gui.ongoing + "</div>";
+
+                //！！！！！請協助補上頭像代碼！！！！！
+                html +=
+                    "<div style='padding:10px 10px 0 0;'><span class='head_img'></span></div>";
+
+                html += "<div class='article_right'>";
+                gLocal.gui.ongoing + "</div>";
+
+                html +=
+                    "<div class='title'><a href='../article/?id=" +
+                    iterator.id +
+                    "'>" +
+                    iterator.title +
+                    "</a></div>";
 
-        html += "<div class='collect' style='color:gray'>";
-        if(iterator.collect){
-          html += "<a href='../article/?collect=" +iterator.collect.id + "'>" + iterator.collect.title + "</a>";
-        }
-        else{
-          html += "unkow";
-        }
-        html += "</div>";
-        if(iterator.subtitle){
-          html += "<div style=''>" + iterator.subtitle + "</div>";
-        }
-        
-        html += "<div style=''>" + iterator.username.nickname + "</div>";
 
-        if(iterator.summary){
-          html += "<div style=''>" + iterator.summary + "</div>";
+                html += "<div class='collect' style='color:gray'>";
+                if (iterator.collect) {
+                    html += "<a href='../article/?collect=" + iterator.collect.id + "'>" + iterator.collect.title + "</a>";
+                } else {
+                    html += "unkow";
+                }
+                html += "</div>";
+                if (iterator.subtitle) {
+                    html += "<div>" + iterator.subtitle + "</div>";
+                }
+                if (iterator.summary) {
+                    html += "<div>" + iterator.summary + "</div>";
+                }
+
+                html += "<div style=''>" + iterator.username.nickname + "</div>";
+
+
+
+                html += "</div>";
+                html += "</div>";
+            }
+            $("#article_new").html(html);
         }
-        
-        html += "</div>";
-        html += "</div>";
-      }
-      $("#article_new").html(html);
-    }
-  );
+    );
 }
 
 function index_load_term_new() {
-  $.get("../term/new.php", function (data, status) {
-    let xDiv = document.getElementById("pali_pedia");
-    if (xDiv) {
-      xDiv.innerHTML = data;
-    }
-  });
+    $.get("../term/new.php", function(data, status) {
+        let xDiv = document.getElementById("pali_pedia");
+        if (xDiv) {
+            xDiv.innerHTML = data;
+        }
+    });
 }
 
 function index_load_course_new() {
-  $.get("../course/list_new.php", function (data, status) {
-    let xDiv = document.getElementById("course_list_new");
-    if (xDiv) {
-      xDiv.innerHTML = data;
-    }
-  });
-}
+    $.get("../course/list_new.php", function(data, status) {
+        let xDiv = document.getElementById("course_list_new");
+        if (xDiv) {
+            xDiv.innerHTML = data;
+        }
+    });
+}

app/pcdl/index.php

@@ -12,29 +12,24 @@ require_once '../pcdl/html_head.php';
 			padding: 10px;
 		}
 
-		.index_inner {
-			width: 960px;
-			margin-left: auto;
-			margin-right: auto;
-		}
-
 		.content_inner {
 			display: flex;
 		}
 
 		.title_bar {
-			border-bottom: solid 1px var(--tool-bt-border-line-color);
 			justify-content: space-between;
 			display: flex;
+			margin: 1em 0;
 		}
 
 		.h3 {
-			font-size: 16px;
+			font-size: 18px;
 			font-weight: 700;
 		}
 
 		.index_list_categories {
-			margin: 2em 0;
+
+			padding: 1rem;
 		}
 
 		.index_list_categories a:hover {
@@ -56,26 +51,148 @@ require_once '../pcdl/html_head.php';
 			display: none;
 		}
 
-		#article_new .card {
-			height: 20vh;
-			overflow-y: scroll;
+		.index_article {
+			background-color: #e0e0e0;
+		}
+
+		.index_course {
+			background-color: #313131;
+		}
+
+		.index_course .h3 {
+			color: white;
+		}
+
+		.article_right {
+			width: calc(100% - 80px);
+		}
+
+		.course_right a,
+		.article_right a {
+			color: var(--main-color);
+		}
+
+		.title a,
+		.course_right title {
+			font-size: 120%;
+			font-weight: 700;
 		}
 
 		#course_list_new .card {
-			height: 15em;
+			height: 150px;
+		}
+
+		.card_photo {
+			position: absolute;
+			left: 0;
+			top: 0;
+			height: 100%;
+			width: 150px;
+			background: gray;
+			border-radius: 20px 0 0 20px;
+		}
+
+		.course_right {
+			margin-left: 150px;
+			display: flex;
+			flex-direction: column;
+		}
+
+		.summary {
+			margin-top: auto;
+			display: -webkit-box;
+			-webkit-box-orient: vertical;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			width: 100%;
+			-webkit-line-clamp: 2;
+		}
+
+		#pali_pedia .card {
+			background-color: #F9F9F9;
+			box-shadow: unset;
+			display: grid;
+			grid-template-columns: 2fr 1fr;
+			grid-template-areas:
+				"title author"
+				"summary author";
+		}
+
+		#pali_pedia .title {
+			grid-area: title;
+			font-size: 120%;
+		}
+
+		#pali_pedia .summary {
+			grid-area: summary;
+		}
+
+		#pali_pedia .author {
+			grid-area: author;
+			color: gray;
+		}
+	</style>
+	<style media="screen and (min-width:800px)">
+		.index_list_content {
+			display: flex;
+			margin: auto;
+			max-width: 900px;
+		}
+
+		.index_course .index_list_content {
+			flex-direction: row-reverse;
+		}
+
+		.title_bar {
+			flex: 4;
+			position: relative;
+			margin: 2em;
+		}
 
+		#article_new {
+			flex: 9;
 		}
 
-		#course_list_new .card .pd-10:first-child {
-			height: 12em;
-			overflow-y: scroll;
-			padding-bottom: 2px;
+		#course_list_new {
+			flex: 8;
 		}
 
-		#course_list_new .card .pd-10:last-child {
-			padding-top: 2px;
+		#pali_pedia .card {
+			margin: 0;
+		}
+
+		#pali_pedia {
+			flex: 12;
+			display: grid;
+			grid-template-columns: 1fr 1fr;
+			grid-gap: 10px;
+		}
+
+		.title_bar .h3 {
+			font-size: 250%;
+		}
+
+		.title_more {
+			position: absolute;
+			right: 30px;
+			bottom: 0;
+		}
+
+		.index_pedia .index_list_content {
+			flex-direction: column;
+		}
+
+		.index_pedia .title_bar {
+			display: grid;
+			justify-content: unset;
+			text-align: center;
+		}
+
+		.index_pedia .title_more {
+			all: unset;
 		}
 	</style>
+	<!--
 	<style media="screen and (max-width:800px)">
 		#right_pannal {
 			display: none;
@@ -99,7 +216,11 @@ require_once '../pcdl/html_head.php';
 		.content_inner {
 			display: block;
 		}
-	</style>
+
+
+
+		.article_list {}
+	</style>-->
 	<a name="pagetop"></a>
 	<!-- tool bar begin-->
 	<?php
@@ -110,37 +231,37 @@ require_once '../pcdl/html_head.php';
 
 	<div class="index_inner">
 
-		<div class="index_list_categories">
-			<div class="title_bar">
-				<span class="title h3"><?php echo $_local->gui->composition; ?></span>
-				<span class="title_more"><a href="../collect"><?php echo $_local->gui->more; ?></a></span>
-			</div>
-			<div class="content">
-				<div id="article_new" class="content_inner">
+		<div class="index_list_categories index_article">
+			<div class="index_list_content">
+				<div class="title_bar">
+					<span class="title h3"><?php echo $_local->gui->composition; ?></span>
+					<span class="title_more"><a href="../collect"><?php echo $_local->gui->more; ?></a></span>
+				</div>
+				<div id="article_new">
 				</div>
 			</div>
 		</div>
 
-		<div class="index_list_categories">
-			<div class="title_bar">
-				<span class="title h3"><?php echo $_local->gui->lesson; ?></span>
-				<span class="title_more"><a href="../course"><?php echo $_local->gui->more; ?></a></span>
-			</div>
-			<div class="content">
-				<div id="course_list_new" class="content_inner">
+		<div class="index_list_categories index_course">
+			<div class="index_list_content">
+				<div class="title_bar">
+					<span class="title h3"><?php echo $_local->gui->lesson; ?></span>
+					<span class="title_more"><a href="../course"><?php echo $_local->gui->more; ?></a></span>
+				</div>
+				<div id="course_list_new">
 				</div>
 			</div>
 		</div>
 
 
 
-		<div class="index_list_categories">
-			<div class="title_bar">
-				<span class="title h3"><?php echo $_local->gui->encyclopedia; ?></span>
-				<span class="title_more"><a href="../wiki"><?php echo $_local->gui->more; ?></a></span>
-			</div>
-			<div class="content">
-				<div id="pali_pedia" class="content_inner">
+		<div class="index_list_categories index_pedia">
+			<div class="index_list_content">
+				<div class="title_bar">
+					<span class="title h3"><?php echo $_local->gui->encyclopedia; ?></span>
+					<span class="title_more"><a href="../wiki"><?php echo $_local->gui->more; ?></a></span>
+				</div>
+				<div id="pali_pedia">
 				</div>
 			</div>
 		</div>

app/term/new.php

@@ -7,19 +7,17 @@ require_once '../public/load_lang.php';
 require_once '../public/function.php';
 
 global $PDO;
-PDO_Connect("sqlite:"._FILE_DB_TERM_);
+PDO_Connect("sqlite:" . _FILE_DB_TERM_);
 
 $query = "select word,meaning , owner from term where 1  order by create_time DESC limit 0,4";
 $Fetch = PDO_FetchAll($query);
 
-foreach($Fetch as $row){
-    echo '<div class="content_block">';
-    echo '<div class="card pd-10">';
-    echo '<div class="title" style="padding-bottom:5px;"><a href="../wiki/wiki.php?word='.$row["word"].'">'.$row["word"].'</a></div>';
-    echo '<div class="summary  style="padding-bottom:5px;">'.$row["meaning"].'</div>';
-    echo '<div class="author  style="padding-bottom:5px;">'.$row["owner"].'</div>';
-    echo '</div>';
+foreach ($Fetch as $row) {
+
+    echo '<div class="card">';
+    echo '<div class="title"><a href="../wiki/wiki.php?word=' . $row["word"] . '">' . $row["word"] . '</a></div>';
+    echo '<div class="summary">' . $row["meaning"] . '</div>';
+    echo '<div class="author">' . $row["owner"] . '</div>';
+
     echo '</div>';
 }
-
-?>