{% extends "base.html" %}
{% block main %}
<div id="buttons">
	<div class="overview">
		<a href="/">
			<input type="button" name="button" value="Main page"></input>
		</a>
	</div>
	{% if not current_user.is_authenticated %}
	<div class="signin">
		<a href="/login">
			<input type="button" name="button" value="Sign in"></input>
		</a>
	</div>
	<div class="signin">
		<a href="/register">
			<input type="button" name="button" value="Register"></input>
		</a>
	</div>
	{% else %}
	<div class="distribusi">
		<a href="/distribusi">
			<input type="button" name="button" value="Distribusi"></input>
		</a>
	</div>
	<div class="logout">
		<a href="/logout">
			<input type="button" name="button" value="Logout"></input>
		</a>
	</div>
	{% endif %}
	{% if adminuser %}
	<div class="admin">
		<a href="/admin">
			<input type="button" name="button" value="Admin"></input>
		</a>
	</div>
	{% endif %}
</div>
	{% if current_user.is_authenticated %}
	  <h2 id="fancyboi"> Hi {{ current_user.email }}!</h2>
	{% else %}
		<h2 id="fancyboi"> Welcome to distribusi-verse</h2>
	{% endif %}
<div class="maincontent">
	<h2>Distribusi-verse</h2>
	<h3>1. Zipfiles become websites</h3>
	<p>Distribusi is a content management system for the web that produces static
index pages based on folders in the files system. For distrubisverse this means
that you can upload a zip file <em>(".zip file extension")</em> with content and have
distrubsi turn it into a webpage for you. Making a zip file is very easy for all
desktop operating systems (Windows, Mac OS and Linux)</p>
	<h4>Windows 10</h4>
	<h4>Mac OS</h4>
	<hr>
	<h3>2. Media files become visible</h3>
	<p>Whenever Distribusi discovers media files in your zipfile it turns them
into the appropriate html tags. image files become img tags, audio files become
audio tags and so on. Currently distribusi supports images, videos, audio,
pdf and textfiles <em>(only ".txt" see 4. Text files become readable)</em>
</p>
<h4>Example:</h4>
<p>If your zipfile contains the image <strong>"cover.png"</strong> it becomes
the following html in your distribusi page:</p>
<pre class="code-example">&lt;div&nbsp;id=&quot;cover&quot;&nbsp;class=&quot;png&quot;&gt;
&nbsp;&nbsp;&lt;figure&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;img&nbsp;class=&quot;image&quot;&nbsp;src=&quot;cover.png&quot;&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;figcaption&gt;cover.png&lt;/figcaption&gt;
&nbsp;&nbsp;&lt;/figure&gt;
&lt;/div&gt;</pre>
<p>The encapsulating <strong>div</strong> tag gets an id that is the same as the
<em>file name.</em> The <strong>img</strong> tag gets a class attribute <em>image</em>
This is handy for styling your files with css (See 5.)</p>
	<hr>
	<h3>3. Folders become links and pages</h3>
	<p>When you make your zipfile, this zipfile can contain folders with more
content. Distribusi turns these automatically into links and behind those links
a new page! These pages look identical to your main page because they share the
same style. </p>
<h4>Example:</h4>
<pre class="code-example">&lt;div&nbsp;id=&quot;folder&quot;&nbsp;class=&quot;dir&quot;&gt;
&nbsp;&nbsp;&lt;a&nbsp;href=&#39;new_folder/index.html&#39;&gt;new_folder&lt;/a&gt;
&lt;/div&gt;</pre>
<p>The encapsulating <strong>div</strong> tag gets an id
<em>folder.</em> and a class attribute <em>dir</em>
This is handy for styling your files with css (See 5.)</p>
<p>the anchor <em>(a)</em> tag will get an href attribute pointing to the
subfolder</p>
	<hr>
	<h3>4. Text files become readable</h3>
	<p>When distribusi discovers a text file <em>(".txt file extension")</em> it
turns it into a pre tag with the text from the file in it. This enables users to
add simple text elements to their pages.</p>
<h4>Example:</h4>
<pre class="code-example">&lt;div&nbsp;id=&quot;my_textfile&quot;&nbsp;class=&quot;plain&quot;&gt;
&nbsp;&nbsp;&lt;pre&gt;
&nbsp;&nbsp;&nbsp;&nbsp;contents&nbsp;of&nbsp;my_textfile.txt&nbsp;gets&nbsp;rendered&nbsp;inside&nbsp;a&nbsp;pre&nbsp;tag.
&nbsp;&nbsp;&lt;/pre&gt;
&nbsp;&nbsp;&lt;span&nbsp;class=&quot;filename&quot;&gt;my_textfile.txt&lt;/span&gt;
&lt;/div&gt;</pre>
<p>The encapsulating <strong>div</strong> tag gets an id that is the same as the
<em>file name.</em> and a class attribute <em>plain</em>
This is handy for styling your files with css (See 5.)</p>
	<hr>
	<h3>5. Use Css to style your page</h3>
	<p>Distribusi offers almost full support for styling your page with CSS.
Because all content is auto generated your CSS will be placed in a
style tag in the head of each HTML file.</p>
<p>Distrbusi-verse allows its users to skip this step by just selecting a basic
theme or by selecting one of the themes other users have made <em>public.</em>
<p>Alternatively a user can opt to make their own custom theme, either in a
simple online editor or by uploading their own Css file.</p>
	<hr>
</div>
{% endblock %}