site/features.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<meta name="description" content="Source 2 Documentation">
	<link rel="stylesheet" href="style.css">
	<link rel="icon" type="image/png" href="/s2favicon.png">
</head>

<body>

<div class="main" >

	<div id="header">
		<img class="headerlogo" src="source2_new.svg" title="Source 2">
		<nav>
			<ul class="buttons">
				<a href="home.html"><li>Home</li></a>
				<a href=""><li class="active">Features</li></a>
				<a href=""><li>Wiki</li></a>
				<a href="about.html"><li>About</li></a>
			</ul>
		</nav>
	</div>

	<div class="content">
		<h1>Source 2 Engine Features</h1>
		<p>
			The Next-Gen S2 Engine is a significant departure to the legacy Source engine, running DX11 and Vulkan natively on their respective platforms.
		</p>
		<hr>
		
		<h1 id="toolsSectionH1">Tools</h1>
		<p>
			Source 2 comes with an integrated development enviornment (IDE), consisting of:
			<br>
			<i>Asset Browser</i>, <i>Level Editor</i>, <i>Material Editor</i>, <i>Model Editor</i>, <i>Particle Editor</i>, and <i>Film Maker</i>.
			<br>
			<img src="features/tools/toolsbar.png">
		</p>

		<div class="contentSection">
			<a href="#toolsSectionAssetBrowser"><h3 id="toolsSectionAssetBrowser">- Asset Browser <img src="features/tools/asset_browser_sm.png"></h3></a>
			<p>
					The Asset Browser allows quick searching, previewing, grouping, and managing assets.
					<br>
					It also serves as the hub for development, launching the other tools either by their icon, or by double clicking an asset.
					<br>
					Assets inside the browser can also be dragged into other tools (such as Hammer).
					<br>
					<div class="mediaContainer">
						<video width="577" height="438" autoplay loop>
								<source src="features/tools/asset_browser_demo.webm" type="video/webm">
								(Unspported video format?)
							</video> 
					</div>
			</p>
		</div>
	
		<div class="contentSection">
				<a href="#toolsSectionHammerEditor"><h3 id="toolsSectionHammerEditor">- Hammer Editor <img src="features/tools/hammer/hammer_sm.png"></h3></a>
			<p>
				The Source 2 Level Editor (Hammer) is a revolutionary leap above even contemporary level editors.
				<br>
				On top of the expected brush-based manipulation, you can edit individual faces, edges, and even verticies, making it a full model editor.
				<br>
				<br>
				The new primitive in S2 is the <i>Mesh</i>, a vertex-based system, allowing concave, and complex geometry to be authored by the level designer.
			</p>
			<p>
				<br>
				<div class="mediaContainer">
					<video width="256" height="256" autoplay loop>
							<source src="features/tools/hammer/editbasics.webm" type="video/webm" title="Mesh editing">
							Mesh Editing (Video)
					</video> 
					<video width="256" height="256" autoplay loop>
							<source src="features/tools/hammer/convexmesh.webm" type="video/webm" title="Convex mesh editing">
							Convex Mesh Editing (Video)
					</video> 
					<video width="256" height="256" autoplay loop>
							<source src="features/tools/hammer/faceremoval.webm" type="video/webm" title="Convex mesh editing">
							Convex Mesh Editing (Video)
					</video>
					<video width="256" height="256" autoplay loop>
							<source src="features/tools/hammer/edittimelapse.webm" type="video/webm" title="Convex mesh editing">
							Convex Mesh Editing (Video)
					</video>
				</div> 
			</p>
		</div>
	
		<h1>H1</h1>
		<h2>H2</h2>
		<h3>H3</h3>
		<h4>H4</h4>
	</div>
	
	<div class="footer">
		<p class="copyright">Source Creator Collective - 2020</p>
	</div>

</div>

</body>

</html>