builder.html

<!DOCTYPE html>
<html lang="en-GB">

<head>
	<link rel="preload" href="fonts/Fascinate.woff2" as="font" type="font/woff2">
	<link rel="preload" href="fonts/Kavivanar.woff2" as="font" type="font/woff2">
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/main.css">
	<script>
		if ("serviceWorker" in navigator) {
			navigator.serviceWorker.register("/sw.js", { scope: "/" });
		}
		/* read data from local storage and set css vars*/
		let settingData = JSON.parse(localStorage.getItem('com.base24'));
		const rootStyles = document.styleSheets[0].cssRules[0].style;
		const darkStyles = document.styleSheets[0].cssRules[1].cssRules[0].style;
		rootStyles.setProperty("--text-mod", (settingData.textSize.size ? settingData.textSize.size : "1"))
		if (settingData.theme.name !== "auto"){
			rootStyles.setProperty("--var-c-primary", (settingData.theme.cPrimary ? settingData.theme.cPrimary : "#FAFAFA"))
			rootStyles.setProperty("--var-c-secondary", (settingData.theme.cSecondary ? settingData.theme.cSecondary : "#EAEAEB"))
			rootStyles.setProperty("--var-c-text", (settingData.theme.cText ? settingData.theme.cText : "#383A42"))
			darkStyles.setProperty("--var-c-primary", (settingData.theme.cPrimary ? settingData.theme.cPrimary : "#181A1F"))
			darkStyles.setProperty("--var-c-secondary", (settingData.theme.cSecondary ? settingData.theme.cSecondary : "#282C34"))
			darkStyles.setProperty("--var-c-text", (settingData.theme.cText ? settingData.theme.cText : "#ABB2BF"))
			rootStyles.setProperty("--var-c-black", (settingData.theme.cBlack ? settingData.theme.cBlack : "0"))
		}
	</script>

	<meta name="Description" content="Author: Base24; Cost: Free">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

	<!--Android app icon-->
	<link rel="manifest" href="/manifest.json">
	<meta name="theme-color" content="#fbfdfa" />

	<!--iOS touch icon-->
	<link rel="apple-touch-icon" sizes="180x180" href="images/appicons/square-180.png">

	<!--Bookmark, Browser favicon-->
	<link rel="icon" type="image/png" sizes="256x256" href="images/appicons/squircle-256.png">
	<link rel="icon" type="image/png" sizes="32x32" href="images/appicons/squircle-256.png">

	<!--Windows 8, 10 tile -->
	<meta name="msapplication-TileColor" content="#fbfdfa">
	<meta name="msapplication-TileImage" sizes="150x150" content="images/appicons/square-180.png">
	<meta name="msapplication-starturl" content="/">

	<!--Title-->
	<title>Builder</title>


</head>

<body>

	<div class="section--nav-bar c-accent--2 border">

		<div class="app-bar">
			<div class="section__content">
				<div class="left">
					<h1>Base24</h1>
				</div>
				<div class="pair right">
					<a href="info.html">

						<h1>&#xf449;</h1>
					</a>
					<a href="settings.html">

						<h1>&#xf423;</h1>
					</a>
				</div>
			</div>
		</div>

		<nav id="js-nav">
			<ul class="nav__content" id="js-nav__content">
				<li>
					<a href="index.html" >Templates</a>
				</li>
				<li>
					<a href="styles.html" >Styles</a>
				</li>
				<li>
					<a href="builder.html" class="current">Builder</a>
				</li>
				<li>
					<a href="readme.html" >README</a>
				</li>

			</ul>
			<a class="overflow" id="js-overflow">More...</a>
			<ul class="nav__overflow" id="js-nav__overflow">
			</ul>
		</nav>
	</div>

	<div class="buffer--nav-bar">
	</div>

	<div id="js-toast" >
		<div><p id="js-toast__text" class="c-toast"></p></div>
	</div>

	<div class="section c-primary">
		<div class="section__content">

	<h1>Combine a template and a scheme to generate a theme:</h1>
	<form>
		<p>Use custom template?</p>
		<label class="css-radio" for="custom-template">
			Yes
			<input type="radio" name="custom-template" value="1" id="custom-template">
			<span class="check-mark"></span><br>
			<label class="css-file" for="template">
				&#xF47B; Upload
				<input type="file" id="template" onchange="uploadTemplate()">
			</label>
			<textarea style="display: none;" rows="20" cols="1" id="custom-template-data"></textarea>
		</label>
		<label class="css-radio" for="custom-template-no">
			No
			<input type="radio" name="custom-template" value="2" id="custom-template-no" checked="checked">
			<span class="check-mark"></span><br>
			<label for="templates-list">
				Template
			</label>
			<select id="templates-list">

			</select>
		</label>


		<p>Use custom scheme?</p>
		<label class="css-radio" for="custom-scheme">
			Yes
			<input type="radio" name="custom-scheme" value="1" id="custom-scheme">
			<span class="check-mark"></span><br>
			<label class="css-file" for="scheme">
				&#xF47B; Upload
				<input type="file" id="scheme" onchange="uploadScheme()">
			</label>
			<textarea style="display: none;" rows="20" cols="1" id="custom-scheme-data"></textarea>
		</label>
		<label class="css-radio" for="custom-scheme-no">
			No
			<input type="radio" name="custom-scheme" value="2" id="custom-scheme-no" checked="checked">
			<span class="check-mark"></span><br>
			<label for="schemes-list">
				Scheme
			</label>
			<select id="schemes-list">

			</select>
		</label>

		<label for="filename">
			Filename:
		</label>
		<input type="text" placeholder="Filename" id="filename">

		<label for="output">
			Output:
		</label>
		<textarea rows="20" cols="1" id="output"></textarea>
	</form>
	<div class="pair">
		<button onclick="run()">&#xF489; Run</button>
		<button onclick="copy()">&#xF429; Copy Output </button>
	</div>
	<button onclick="downloadTheme()">&#xF47C; Download</button>


		</div>
	</div>

	<div class="app-bar c-accent--2  border">
		<div class="section__content">
			<h3 style="width: 100%; text-align: center;">Made with ❤ - MIT Base24</h3>
		</div>
	</div>


	<script src="scripts/script.js"></script>
	<script src="scripts/navbar.js"></script>

	<script>
	populateSchemeAndTemplates()
</script>


</body>

</html>