TC
/
WebStick


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
							<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="icon" type="image/png" href="/favicon.png">
	<!-- HTML Meta Tags -->
	<title>Homepage | WebStick</title>
	<meta name="description" content="A tiny web server powered by ESP8266, designed by tobychui">
	<meta name="viewport" content="width=device-width, initial-scale=1" >
		
	<!-- Facebook Meta Tags -->
	<meta property="og:url" content="https://imuslab.com">
	<meta property="og:type" content="website">
	<meta property="og:title" content="Welcome to WebStick!">
	<meta property="og:description" content="A tiny web server powered by ESP8266, designed by tobychui">
	<meta property="og:image" content=" ">

	<!-- Twitter Meta Tags -->
	<meta name="twitter:card" content="summary_large_image">
	<meta property="twitter:domain" content="imuslab.com">
	<meta property="twitter:url" content="https://imuslab.com">
	<meta name="twitter:title" content="Welcome to WebStick!">
	<meta name="twitter:description" content="A tiny web server powered by ESP8266, designed by tobychui">
	<meta name="twitter:image" content=" ">

  	<!-- CDN -->
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocas-ui/5.0.2/tocas.min.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/tocas-ui/5.0.2/tocas.min.js"></script>
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&display=swap" rel="stylesheet">

	<style>
		#banner{
			background: linear-gradient(48deg, rgba(108,172,255,1) 8%, rgba(141,235,255,1) 65%)
		}
	</style>
</head>
<body>
	<div class="ts-content">
		<div class="ts-tab is-segmented">
			<a class="item is-active" data-tab="home">Home</a>
			<a class="item" data-tab="about">About</a>
			<a class="item" data-tab="posts">Posts</a>
			<a class="item" data-tab="qr">QR</a>
		</div>
		<div class="has-top-spaced-small"></div>
		<div class="ts-content " id="home">
			<div id="banner" class="ts-content is-rounded is-padded has-top-spaced-large" style=" color: var(--ts-gray-50)">
				<div style="max-width: 300px">
					<div id="site-title" class="ts-header is-huge is-heavy">WebStick</div>
					<p id="site-description">A personal web server hosted on an ESP8266 using a micro SD card</p>
					<a href="/admin" class="ts-button is-outlined" style="color: var(--ts-gray-50)">Login</a>
				</div>
			</div>

			<!-- Contact Information, change these to yours -->
			<div id="contacts_icon" class="ts-content is-center-aligned has-top-spaced-large">
				<a href="https://www.youtube.com/channel/UCzbcGOZHO2BH-ANX7W0MGIg"><span class="ts-icon is-huge is-youtube-icon"></span></a>
				<a class="has-start-spaced-large" href="https://blog.imuslab.com"><span class="ts-icon is-huge is-newspaper-icon"></span></a>
				<a class="has-start-spaced-large" href="mailto:[email protected]"><span class="ts-icon is-huge is-envelope-icon"></span></a>
				<a class="has-start-spaced-large" href="https://github.com/tobychui/webstick"><span class="ts-icon is-huge is-code-icon"></span></a>
			</div>
		</div>
		<div class="ts-content" id="about">
			<!-- Dynmaically loaded by ajax from about.html -->
		</div>
		<div class="ts-content" id="posts">
			<!-- Dynmaically loaded by ajax from post.html -->
		</div>
		<div class="ts-content" id="qr">
			<!-- An iframe will be append here for the QR code generator -->
		</div>
		
		<div class="ts-divider"></div>
		<div class="ts-content">
			<p class="ts-text">This site is hosted on a WebStick designed by <a href="https://imuslab.com" target="_blank">tobychui</a></p>
		</div>
	</div>
	
	<script>
		/* Ajax load of the pages */
		$("#about").load("about.html");
		$("#posts").load("posts.html");
		$("#qr").html('<iframe src="tool/qr.html" style="border: none; width: 100%; height: calc(100vh - 200px);"></iframe>');

		/* Load the site info from pref */
		function loadValue(key, callback){
            $.get("/api/pref/get?key=" + key, function(data){
                callback(data);
            });
        }

		function initSiteInfo(){
			var defaultSettings = {
				siteTitle: "WebStick",
				siteDescription: "A personal web server hosted on an ESP8266 using a micro SD card"
			};

			//Initiate the settings form with current values
			loadValue("site-info", function(data){
				if (data.error != undefined || data == ""){
					data = defaultSettings;
				}else{
					data = JSON.parse(decodeURIComponent(data));
				}
				console.log(data);
				$("#site-title").text(data.siteTitle);
				$("#site-description").text(data.siteDescription);
			});
    	}

    	initSiteInfo();
	</script>
</body>
</html>