Initial Upload Knowledge Index page

nelsonlan01 · nelsonlan01 · commit 96855a34970f · 2024-01-12T23:17:50.000+08:00
diff --git a/side_project/project_knowledge_manage.html b/side_project/project_knowledge_manage.html
@@ -0,0 +1,343 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+	<link rel="stylesheet" href="assets/css/knowledge.css">
+</head>
+
+<title> 【知識管理 / 自修堆疊】 Knowledge Management and Autodidacticism</title>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-teal.css">
+<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+
+<style>
+	body {font-family: "Roboto", sans-serif}
+	.w3-bar-block .w3-bar-item {
+	  padding: 16px;
+	  font-weight: bold;
+	}
+
+	* {
+	  box-sizing: border-box;
+	}
+
+	#myInput, #myInput2 {
+	  background-image: url('/css/searchicon.png');
+	  background-position: 10px 10px;
+	  background-repeat: no-repeat;
+	  width: 100%;
+	  font-size: 16px;
+	  padding: 12px 20px 12px 40px;
+	  border: 1px solid #ddd;
+	  margin-bottom: 12px;
+	}
+
+	#myTable {
+	  border-collapse: collapse;
+	  width: 100%;
+	  border: 1px solid #ddd;
+	  font-size: 18px;
+	}
+
+	#myTable th, #myTable td {
+	  text-align: left;
+	  padding: 12px;
+	}
+
+	#myTable tr {
+	  border-bottom: 1px solid #ddd;
+	}
+
+	#myTable tr.header, #myTable tr:hover {
+	  background-color: #f1f1f1;
+	}
+	/* Style the button that is used to open and close the collapsible content */
+	.collapsible {
+	  background-color: #eee;
+	  color: #444;
+	  cursor: pointer;
+	  padding: 18px;
+	  width: 100%;
+	  border: none;
+	  text-align: left;
+	  outline: none;
+	  font-size: 15px;
+	}
+
+	/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
+	.active, .collapsible:hover {
+	  background-color: #ccc;
+	}
+
+	/* Style the collapsible content. Note: hidden by default */
+	.content {
+	  padding: 0 18px;
+	  display: none;
+	  overflow: hidden;
+	  background-color: #f1f1f1;
+	}
+	.content {
+	  padding: 0 18px;
+	  background-color: white;
+	  max-height: 0;
+	  overflow: hidden;
+	  transition: max-height 0.2s ease-out;
+	  
+	}.collapsible:after {
+	  content: '\02795'; /* Unicode character for "plus" sign (+) */
+	  font-size: 13px;
+	  color: white;
+	  float: right;
+	  margin-left: 5px;
+	}
+
+	.active:after {
+	  content: "\2796"; /* Unicode character for "minus" sign (-) */
+	}
+</style>
+
+<body>
+
+
+	<nav class="w3-sidebar w3-bar-block w3-collapse w3-animate-left w3-card" style="z-index:3;width:250px;" id="mySidebar">
+	  <a class="w3-bar-item w3-button w3-border-bottom w3-large" href="#"></a>
+	  <a class="w3-bar-item w3-button w3-hide-large w3-large" href="javascript:void(0)" onclick="w3_close()">Close <i class="fa fa-remove"></i></a>
+	  <a class="w3-bar-item w3-button " href="https://nelsonlan01.github.io/index.html#">返回【個人主頁】<br> Back to Personal index page</a>
+	  
+	  <div>
+		<a class="w3-bar-item w3-button" onclick="myAccordion('demo')" href="javascript:void(0)">小工具 Script <i class="fa fa-caret-down"></i></a>
+		<div id="demo" class="w3-hide">
+		 <a class="w3-bar-item w3-button" href="  side_project_main.html">小工具 主頁<br> Scripts index</a>
+		  <a class="w3-bar-item w3-button " href="project_subtitle_adding.html">Premiere Pro用 字幕生成腳本<br>Premiere Pro Subtitle Adding Script</a>
+		  <a class="w3-bar-item w3-button" href="project_premiere_pro_text_card.html">Premiere Pro用 特效字卡<br>Premiere Pro Text Card Animations</a>
+		  <a class="w3-bar-item w3-button " href="project_arithmetical_circle.html">「圓環運算」<br> Arithmetical Circle</a>
+		  <a class="w3-bar-item w3-button" href="#">Minecraft桌遊用腳本<br>Minecraft Boardgame Script<br><br>(coming soon)</a>
+		  <a class="w3-bar-item w3-button  w3-teal" href="#"> 【知識點目錄 / 自修堆疊】 <br>Knowledge Management and Autodidacticism<br><br>(本頁)</a>
+		</div>
+	  </div>
+	  
+	</nav>
+
+	<div class="w3-overlay w3-hide-large w3-animate-opacity" onclick="w3_close()" style="cursor:pointer" id="myOverlay"></div>
+
+	<div class="w3-main" style="margin-left:250px;">
+
+	<div id="myTop" class="w3-container w3-top w3-theme w3-large">
+	  <p><i class="fa fa-bars w3-button w3-teal w3-hide-large w3-xlarge" onclick="w3_open()"></i>
+	  <span id="myIntro" class="w3-hide">知識管理 / 自修堆疊 <br> Knowledge Management and Autodidacticism</span></p>
+	</div>
+
+	<header class="w3-container w3-theme" style="padding:64px 32px">
+	  <h1 class="w3-xxxlarge">【知識點目錄 / 自修堆疊】<br>  Knowledge Management and Autodidacticism </h1>
+	</header>
+
+	<div class="w3-container" style="padding:32px">
+	<h2>【知識點 目錄】</h2>
+
+	<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
+
+
+	<table id="myTable">
+	  <tr class="header">
+		<th onclick="sortTable(0)" style="width:10%;">RegID</th>
+		<th onclick="sortTable(1)" style="width:15%;">Disciplines of Learning</th>
+		<th onclick="sortTable(2)" style="width:10%;">Type(s)</th>
+		<th onclick="sortTable(3)" style="width:45%;">Topic / Content</th>
+		<th onclick="sortTable(4)" style="width:10%;">FiledDate</th>
+		<th onclick="sortTable(5)" style="width:10%;">PDF(s)</th>
+	  </tr>
+	  
+
+	  
+	  <tr>
+		<td>test123</td>
+		<td>test123</td>
+		<td>test123</td>
+		<td>test123</td>
+		<td>test123</td>
+		<td>test123</td>
+	  </tr>
+
+	  <tr>
+		<td colspan="6">
+			<button type="button" class="collapsible">Multiple topic on XXX</button>
+				<div class="content">
+					<p>
+						<table id="myTable99">
+							<td>test234</td>
+							<td>test234</td>
+							<td>test234</td>
+							<td>test234</td>
+							<td>test234</td>
+							<td>test234</td>
+					</p>
+				</div>
+			</table>
+	  </tr>
+
+
+	</table>
+
+
+	</div>
+
+	<footer class="w3-center w3-theme w3-padding-64 w3-opacity w3-hover-opacity-off"> 
+		<a href="#home" class="w3-button w3-light-grey">
+		<i class="fa fa-arrow-up w3-margin-right"></i>To the top</a>
+			<div class="w3-xlarge w3-section"> </a> <a href="https://youtube.com/playlist?list=PL9zygzz0hZakBpDPZLevbXaQCUzkf-Ncz"><i class="fa fa-youtube-play w3-hover-opacity" style="font-size:36px";></i></a> <a href="https://github.com/NelsonLAN"><i class="fa fa-github w3-hover-opacity" style="font-size:36px";></i></a> <a href="https://www.linkedin.com/in/nelsonlan574211143"><i class="fa fa-linkedin w3-hover-opacity" style="font-size:36px";></i></a> </div>
+	  <p>  © 版權屬 Nelson LAN 所有 (2012 - 2024)</p>
+	  <p>  © Copyright belong to Nelson LAN (2012 - 2024) </p>
+	</footer>
+		 
+	</div>
+
+	<script>
+	// Open and close the sidebar on medium and small screens
+	function w3_open() {
+	  document.getElementById("mySidebar").style.display = "block";
+	  document.getElementById("myOverlay").style.display = "block";
+	}
+
+	function w3_close() {
+	  document.getElementById("mySidebar").style.display = "none";
+	  document.getElementById("myOverlay").style.display = "none";
+	}
+
+	// Change style of top container on scroll
+	window.onscroll = function() {myFunction()};
+	function myFunction() {
+	  if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
+		document.getElementById("myTop").classList.add("w3-card-4", "w3-animate-opacity");
+		document.getElementById("myIntro").classList.add("w3-show-inline-block");
+	  } else {
+		document.getElementById("myIntro").classList.remove("w3-show-inline-block");
+		document.getElementById("myTop").classList.remove("w3-card-4", "w3-animate-opacity");
+	  }
+	}
+
+	// Accordions
+	function myAccordion(id) {
+	  var x = document.getElementById(id);
+	  if (x.className.indexOf("w3-show") == -1) {
+		x.className += " w3-show";
+		x.previousElementSibling.className += " w3-theme";
+	  } else { 
+		x.className = x.className.replace("w3-show", "");
+		x.previousElementSibling.className = 
+		x.previousElementSibling.className.replace(" w3-theme", "");
+	  }
+	}
+
+	function myFunction() {
+	  var input, filter, table, tr, td, i, txtValue;
+	  input = document.getElementById("myInput");
+	  filter = input.value.toUpperCase();
+	  table = document.getElementById("myTable");
+	  tr = table.getElementsByTagName("tr");
+	  for (i = 0; i < tr.length; i++) {
+		td = tr[i].getElementsByTagName("td")[0];
+		if (td) {
+		  txtValue = td.textContent || td.innerText;
+		  if (txtValue.toUpperCase().indexOf(filter) > -1) {
+			tr[i].style.display = "";
+		  } else {
+			tr[i].style.display = "none";
+		  }
+		}       
+	  }
+	}
+
+
+
+	var coll = document.getElementsByClassName("collapsible");
+	var i;
+
+	for (i = 0; i < coll.length; i++) {
+	  coll[i].addEventListener("click", function() {
+		this.classList.toggle("active");
+		var content = this.nextElementSibling;
+		if (content.style.display === "block") {
+		  content.style.display = "none";
+		} else {
+		  content.style.display = "block";
+		}
+	  });
+	}
+
+	var coll = document.getElementsByClassName("collapsible");
+	var i;
+
+	for (i = 0; i < coll.length; i++) {
+	  coll[i].addEventListener("click", function() {
+		this.classList.toggle("active");
+		var content = this.nextElementSibling;
+		if (content.style.maxHeight){
+		  content.style.maxHeight = null;
+		} else {
+		  content.style.maxHeight = content.scrollHeight + "px";
+		}
+	  });
+	}
+
+	function sortTable(n) {
+	  var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
+	  table = document.getElementById("myTable");
+	  switching = true;
+	  // Set the sorting direction to ascending:
+	  dir = "asc";
+	  /* Make a loop that will continue until
+	  no switching has been done: */
+	  while (switching) {
+		// Start by saying: no switching is done:
+		switching = false;
+		rows = table.rows;
+		/* Loop through all table rows (except the
+		first, which contains table headers): */
+		for (i = 1; i < (rows.length - 1); i++) {
+		  // Start by saying there should be no switching:
+		  shouldSwitch = false;
+		  /* Get the two elements you want to compare,
+		  one from current row and one from the next: */
+		  x = rows[i].getElementsByTagName("TD")[n];
+		  y = rows[i + 1].getElementsByTagName("TD")[n];
+		  /* Check if the two rows should switch place,
+		  based on the direction, asc or desc: */
+		  if (dir == "asc") {
+			if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
+			  // If so, mark as a switch and break the loop:
+			  shouldSwitch = true;
+			  break;
+			}
+		  } else if (dir == "desc") {
+			if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
+			  // If so, mark as a switch and break the loop:
+			  shouldSwitch = true;
+			  break;
+			}
+		  }
+		}
+		if (shouldSwitch) {
+		  /* If a switch has been marked, make the switch
+		  and mark that a switch has been done: */
+		  rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
+		  switching = true;
+		  // Each time a switch is done, increase this count by 1:
+		  switchcount ++;
+		} else {
+		  /* If no switching has been done AND the direction is "asc",
+		  set the direction to "desc" and run the while loop again. */
+		  if (switchcount == 0 && dir == "asc") {
+			dir = "desc";
+			switching = true;
+		  }
+		}
+	  }
+	}
+
+
+	</script>
+		 
+</body>
+</html> 
