{% extends 'site_layout.html.j2' %}
{% set title="About Titan" %}

{% 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>

{% include 'card_commands.html.j2' %}

{% include 'card_queryparams.html.j2' %}

<h3>Chat with us!</h3>
<div class="video-container">
    <iframe src="https://titanembeds.com/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" id="cool-people">
    <div class="col s12 m6 person">
        <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 person">
        <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/appledash.png') }}" alt="AppleDash" class="circle responsive-img">
            </div>
            <div class="col s10">
                <h5 class="black-text card-title">AppleDash</h5>
                <p class="black-text flow-text">Server Hosting</p>
                <p class="black-text">From the shadows of Poniverse, AppleDash swiftly jumps in and offered his server to make websockets possible!</p>
            </div>
          </div>
        </div>
    </div>
    
    <div class="col s12 m6 person">
        <div class="card-panel indigo lighten-5 z-depth-1 no-height-padding">
          <div class="row valign-wrapper">
            <div class="col s2">
              <img src="/static/img/people/selina.png" alt="Selina" class="circle responsive-img">
            </div>
            <div class="col s10">
                <h5 class="black-text card-title">Selina</h5>
                <p class="black-text flow-text">Server Witch</p>
                <p class="black-text">This gal manages our server and figures out how to keep the hamsters in the basement in line! Without her they might all run away!</p>
            </div>
          </div>
        </div>
    </div>
    
    <div class="col s12 m6 person">
        <div class="card-panel indigo lighten-5 z-depth-1 no-height-padding">
          <div class="row valign-wrapper">
            <div class="col s2">
              <img src="/static/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">Previous Bot Hosting</p>
                <p class="black-text">This guy hosts our lovely bot, without him Titan would probably not been that great (ahem, indefinitely offline bot).</p>
            </div>
          </div>
        </div>
    </div>
    
    <div class="col s12 m6 person">
        <div class="card-panel indigo lighten-5 z-depth-1 no-height-padding">
          <div class="row valign-wrapper">
            <div class="col s2">
              <img src="/static/img/people/dotjs.jpg" alt="dotJS" class="circle responsive-img">
            </div>
            <div class="col s10">
                <h5 class="black-text card-title">dotJS</h5>
                <p class="black-text flow-text">CSS Architect</p>
                <p class="black-text">Although been well known for his name of JavaScript, he helped us design the embeds with his CSS skillz.</p>
            </div>
          </div>
        </div>
    </div>

    <div class="col s12 m6 person">
        <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">Previous Head Developer</p>
                <p class="black-text">Have you heard of JustMaffie? He has done quite some developing for Titan.</p>
            </div>
          </div>
        </div>
    </div>

    <div class="col s12 m6 person">
        <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 Designer</p>
                <p class="black-text">From our friends over at ProCord, Semic made most of our awesome and heroic Titan logo.</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/everybot.jpg') }}" alt="" class="circle responsive-img">
            </div>
            <div class="col s12 l10">
                <h5 class="black-text card-title">Everybot</h5>
                <p class="black-text flow-text">Multipurpose Bot</p>
                <p class="black-text">Hey, thank you for reading this, Everybot is a Discord Bot created by JustMaffie, we aim to bring fun and moderation to Discord servers using our commands.
                We also want to provide a nice community at our Discord Server.</p>
                <a href="https://discord.gg/7creW7n" class="waves-effect btn" target="_blank">Discord Server</a>
                <a href="https://discordapp.com/oauth2/authorize?client_id=343764326751928320&scope=bot&permissions=8" class="waves-effect btn" target="_blank">Bot Invite</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/ping_salar_hotel.png') }}" alt="" class="circle responsive-img">
            </div>
            <div class="col s12 l10">
                <h5 class="black-text card-title">Ping and Salar's Hotel</h5>
                <p class="black-text flow-text">Discord's Hotel Themed Community</p>
                <p class="black-text">Are you looking for a welcoming and kind Discord community? Well look no further! Ping and Salar's Hotel is a hotel-themed chat community with active members and kind staff. We also do server-wide events and giveaways which you should not miss out on! What are you waiting for? Join the hotel now!</p>
                <a href="https://discord.gg/kwCUFja" 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/streamers_connected.png') }}" alt="" class="circle responsive-img">
            </div>
            <div class="col s12 l10">
                <h5 class="black-text card-title">Streamers Connected</h5>
                <p class="black-text flow-text">Community for all Content Creators, Alike</p>
                <p class="black-text">Streamers Connected is a community for content creators across all platforms of any genre and size. We strive to provide a place for creators to network, grow, and find any resources they may need to produce the best content they can. 
We want to see all of our members rise to their potential and find success in their passion to create and entertain. We work with large and small developers to bring our streamers games at discounted prices, and fund giveaways.</p>
                <a href="https://www.streamersconnected.tv/" class="waves-effect btn" target="_blank">Website</a>
                <a href="https://discord.gg/StreamersConnected" 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/lgbtq_lounge.jpg') }}" alt="" class="circle responsive-img">
            </div>
            <div class="col s12 l10">
                <h5 class="black-text card-title">LGBTQ+</h5>
                <p class="black-text flow-text">A Welcoming Community for People of All Sexuality</p>
                <p class="black-text">LGBTQ+ Lounge is a community that welcomes all, regardless of gender or sexuality, come to our server to enjoy yourself and make new friends and involve yourself with some of the events and activities that the staff will organise.</p>
                <a href="https://discord.io/lgbtq-lounge" 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/dothub.png') }}" alt="" class="circle responsive-img">
            </div>
            <div class="col s12 l10">
                <h5 class="black-text card-title">dotHub</h5>
                <p class="black-text flow-text">Directory of dotJS's State of the Art Works</p>
                <p class="black-text">dotHub - the hub for all the stuff relating to dotJS - my bots, sites, communities, and more! We also have Discord Technology and #code on this server.</p>
                <a href="https://discord.gg/MpnbrX7" class="waves-effect btn" target="_blank">Discord Server</a>
            </div>
          </div>
        </div>
    </div>
</div>
{% endblock %}
{% block script %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.0/masonry.pkgd.min.js" integrity="sha256-YFADoQJIYFj+isdXssMGUrmsVNbVDfN5m8jPgVN+9m4=" crossorigin="anonymous"></script>

<script> 
    $(function() {
        var $container = $('#cool-people');
        $container.masonry({
            itemSelector: '.person'
        });
    });
</script>
{% endblock %}