{% extends 'site_layout.html.j2' %}
{% block title %}About Titan{% endblock %}

{% block content %}
<p class="flow-text center-align">In the beginning, there was <strong>silence</strong>.</p>
<p class="center-align">
    <a class="white-text" href="https://www.reddit.com/r/discordapp/comments/3tucod/embedding_discord_via_iframe_disabled/" target="_blank">People</a>
    <a class="white-text" href="https://feedback.discordapp.com/forums/326712-discord-dream-land/suggestions/10821381-please-turn-back-on-iframe-embed-for-discord-chat" target="_blank">like</a>
    <a class="white-text" href="https://feedback.discordapp.com/forums/326712-discord-dream-land/suggestions/18454222-embed-in-forum-chat-option" target="_blank">you</a>,
    would <strong>LOVE</strong> to embed their Discord server on webpages... but simply, there was no other options to do such thing!

<br><br><br>

<p class="flow-text center-align">Well, say no more!</p>
<!-- Say no more! :) http://vignette3.wikia.nocookie.net/mlp/images/7/70/Rainbow_Dash_%22say_no_more%21%22_S03E13.png/revision/latest?cb=20130217125130 -->

<h1 class="center-align">Introducing</h1>
<img class="center-align hide-on-med-and-down" style="width: 50%;" src="{{ url_for('static', filename='img/titanembeds.png') }}">
<img class="center-align hide-on-large-only" style="width: 100%;" src="{{ url_for('static', filename='img/titanembeds.png') }}">
<p class="flow-text center-align">A unique, stripped down version of your Discord server, embeddable on any webpages alike!</p>
<br>
<hr>
<br>
<h3>About</h3>
<p>There was a time when Discord doesn't support embedding the chat on a webpage. One must go into
extreme measures to ensure that they do not break the Cross Origin policy that Discord client is
enforcing, which resulted in many very sad outcomes. Many users have also complained that the Discord's
built in widget does not include the chat itself. What is the point of embedding Discord without
chat?!</p>
<p>This is where <strong>Titan</strong> steps in. By inviting Titan bot into your server,
it acts like a proxy where it relays chat from your website embed to the Discord server. As
soon as you invite Titan to your server, you will be given a unique URL/iframe code to paste
directly onto your website.</p>
<p>It just doesn't ends here! Titan is jam packed with many features, such as guest users
as well as allowing Discord users to participate. Guest users will be treated similar to users without a role.
Discord users however will inherit their own permission abilities. The client itself is designed
with flexibility. It looks good in websites of all taste!</p>
<p>Please note that Titan is just a mere piece of code that runs alongside of Discord. <strong style="text-decoration: underline;">It is never
used to replace Discord itself</strong>. (that's what the mobile apps are for!)
It is used in conjunction for a quick and dirty Discord embed for websites. Some uses include forum shoutboxes,
etc.</p>

<h3>Commands</h3>
<div class="row">
    <div class="col s12">
        <div class="card-panel indigo lighten-5 z-depth-1">
          <div class="row">
            <div class="col s12 black-text">
                <p class="flow-text">All commands start by <strong>mentioning</strong> the bot user, <em>@Titan</em>.</p>
                <h4>Guest User Moderation</h4>
                <p>All guest users are denoted by <strong>square brackets</strong> around their username in the Discord channel, when sending messages.</p>
                <ul class="collection">
                  <li class="collection-item"><strong>ban &lt;username-query&gt;[#&lt;discriminator&gt;]</strong> <br> Bans the user by the username. The username does not need to be the full string. The discriminator is optional. <br> <em>Eg: ban Titan#0001</em></li>
                  <li class="collection-item"><strong>kick &lt;username-query&gt;[#&lt;discriminator&gt;]</strong> <br> Kicks the user by the username. The username does not need to be the full string. The discriminator is optional. <br> <em>Eg: kick Titan#0001</em></li>
                </ul>
            </div>
          </div>
        </div>
    </div>
</div>

<h3>Chat with us!</h3>
<div class="video-container">
    <iframe src="https://titanembeds.tk/embed/295085744249110529" frameborder="0"></iframe>
</div>

<h3>Cool People</h3>
<p class="flow-text">Keep in mind, this project is not complete without these awesome people!</p>
<div class="row">
    <div class="col s12 m6">
        <div class="card-panel indigo lighten-5 z-depth-1 no-height-padding">
          <div class="row valign-wrapper">
            <div class="col s2">
              <img src="{{ url_for('static', filename='img/people/endendragon.png') }}" alt="EndenDragon" class="circle responsive-img">
            </div>
            <div class="col s10">
                <h5 class="black-text card-title">EndenDragon</h5>
                <p class="black-text flow-text">Project Lead</p>
                <p class="black-text">The one who started this project. Legends say that the place he worked at (BronyTV) decided to ditch IRC for Discord, and Titan was the product of this chaos.</p>
            </div>
          </div>
        </div>
    </div>

    <div class="col s12 m6">
        <div class="card-panel indigo lighten-5 z-depth-1 no-height-padding">
          <div class="row valign-wrapper">
            <div class="col s2">
              <img src="{{ url_for('static', filename='img/people/iammaffie.png') }}" alt="iAmMaffie" class="circle responsive-img">
            </div>
            <div class="col s10">
                <h5 class="black-text card-title">iAmMaffie_</h5>
                <p class="black-text flow-text">Developer</p>
                <p class="black-text">A mysterious guy, he helped out Titan with his Python coding skills, he helped primarely with the Emoji parsers and the Discord Bot commands system.</p>
            </div>
          </div>
        </div>
    </div>

    <div class="col s12 m6">
        <div class="card-panel indigo lighten-5 z-depth-1 no-height-padding">
          <div class="row valign-wrapper">
            <div class="col s2">
              <img src="{{ url_for('static', filename='img/people/riva.png') }}" alt="Riva" class="circle responsive-img">
            </div>
            <div class="col s10">
                <h5 class="black-text card-title">Riva</h5>
                <p class="black-text flow-text">Bot Hosting</p>
                <p class="black-text">This guy hosts our lovely bot, without him Titan would probably not exist.</p>
            </div>
          </div>
        </div>
    </div>

    <div class="col s12 m6">
        <div class="card-panel indigo lighten-5 z-depth-1 no-height-padding">
          <div class="row valign-wrapper">
            <div class="col s2">
              <img src="{{ url_for('static', filename='img/people/js.png') }}" alt=".JS" class="circle responsive-img">
            </div>
            <div class="col s10">
                <h5 class="black-text card-title">.JS</h5><!-- Yes this dot is intentional -->
                <p class="black-text flow-text">Embed Theme Architect</p>
                <p class="black-text">.JS didn't make the designs in JavaScript, he helped out Titan with his CSS skillz.</p>
            </div>
          </div>
        </div>
    </div>

    <div class="col s12 m6">
        <div class="card-panel indigo lighten-5 z-depth-1 no-height-padding">
          <div class="row valign-wrapper">
            <div class="col s2">
              <img src="{{ url_for('static', filename='img/people/semic.png') }}" alt="Semic" class="circle responsive-img">
            </div>
            <div class="col s10">
                <h5 class="black-text card-title">Semic</h5>
                <p class="black-text flow-text">Logo/Asset Designer</p>
                <p class="black-text">Semic made most of our graphics such as the Logo and moooooore.</p>
            </div>
          </div>
        </div>
    </div>
</div>

<h3>Partners</h3>
<p class="flow-text">These are awesome communities that offers amazing tools to enhance your Discord experience and are willing to promote us! So do we!! #TitanThoughtOfTheDay</p>
<div class="row">
    <div class="col s12">
        <div class="card-panel indigo lighten-5 z-depth-1">
          <div class="row">
            <div class="col s12 l2">
              <img src="{{ url_for('static', filename='img/partners/discordio.png') }}" alt="" class="circle responsive-img">
            </div>
            <div class="col s12 l10">
                <h5 class="black-text card-title">Discord.io</h5>
                <p class="black-text flow-text">Personalized Discord Invites</p>
                <p class="black-text">Are you tired of having random Discord.gg invite links? Wouldn't it be better if you could customize the letters in your link? Well look no further, we have the perfect solution for you! Discord.io is an unofficial project, which focuses around giving companies and communities on Discord, the option to create their very own personal invitation links.</p>
                <a href="https://discord.io/" class="waves-effect btn" target="_blank">Website</a>
                <a href="https://discord.io/dio" class="waves-effect btn" target="_blank">Discord Server</a>
            </div>
          </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col s12">
        <div class="card-panel indigo lighten-5 z-depth-1">
          <div class="row">
            <div class="col s12 l2">
              <img src="{{ url_for('static', filename='img/partners/waifu.png') }}" alt="" class="circle responsive-img">
            </div>
            <div class="col s12 l10">
                <h5 class="black-text card-title">/waifu/</h5>
                <p class="black-text flow-text">4chan Group Looking to Play</p>
                <p class="black-text">You might have seen us on /a/, or /b/. 4chan is limiting our ability. Let's fix that. Discord allows us to play games, watch anime together, and socialize with your friends from thread reliably. We host game servers (FTB, factorio, terraria), bots, and others for free. Open to anyone, bring your friends!</p>
                <a href="https://discord.io/waifu" class="waves-effect btn" target="_blank">Discord Server</a>
            </div>
          </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col s12">
        <div class="card-panel indigo lighten-5 z-depth-1">
          <div class="row">
            <div class="col s12 l2">
              <img src="{{ url_for('static', filename='img/partners/reddit_tech.png') }}" alt="" class="circle responsive-img">
            </div>
            <div class="col s12 l10">
                <h5 class="black-text card-title">Reddit Tech</h5>
                <p class="black-text flow-text">Reddit Technology Discussions</p>
                <p class="black-text">Are you interested in technology? Want to discuss your PC build with others, or anything else tech related? Just want to hang out with fellow PCMasterRace people? Then Reddit Tech is the place for you!</p>
                <a href="https://discord.gg/WS5DadN" class="waves-effect btn" target="_blank">Discord Server</a>
            </div>
          </div>
        </div>
    </div>
</div>
{% endblock %}