{% extends "base.html" %}
{% load account socialaccount %}
{% load compress staticfiles i18n %}
{% load number_of_collabs_and_artworks %}
{% load embed_video_tags %}
{% get_current_language as LANGUAGE_CODE %}
{% load thumbnail %}
{% block page_title %}
{% endblock %}
{% block content %}
<div class="main-three-sections-wraper">
<section id="first_page_video" class="first_page_top main-top-section">
<div class="container">
<div class="main-header-section">
<div class="first_page_video_wrapper">
<div class="video_title video_title-main-content">
<h1>Your Creative Network</h1>
</div>
<div class="main-body-content-image-section">
<img class="img-responsive video_bg" alt="" src="{% static 'images/home-video-bg.png' %}">
<div class="main-body-content-image-section-sub">
<img class="img-responsive video_icon" alt="" src="{% static 'images/icons/video-icon.png' %}" data-toggle="modal" data-target="#video_modal">
</div>
</div>
<!-- Modal -->
<div id="video_modal" class="modal fade" role="dialog">
<div class="modal-content">
<div class="modal-body">
{% if video %}
<iframe align="center" src="{{ video.link }}" frameborder="0" allowfullscreen></iframe>
{% endif %}
</div>
</div>
</div>
</div>
<div class="first_page_top_details">
<div class="">
<div class="row">
<div class="col-md-12 first_page_top_details-section">
<h1>Collaboration</br>The super power of creatives!</h1>
<p>Blaenks is the Platform to build your Network, showcase your portfolio, find inspiration or connect to your clients and fans. Artworks are the dots that connect the creative world.</p>
</div>
<div class="col-md-12">
<div class="home_socialaccount_wrapper socio-content-subset">
<!-- For facebook login -->
{% get_providers as socialaccount_providers %}
{% if socialaccount_providers %}
<div class="socialaccount_ballot">
<ul class="socialaccount_providers">
{% include "socialaccount/snippets/provider_list.html" with process="login" %}
</ul>
</div>
{% include "socialaccount/snippets/login_extra.html" %}
{% endif %}
<!-- End For facebook login -->
<a title="Facebook" class="socialaccount_provider email" href="/accounts/login">
<i class="fa fa-envelope-o" aria-hidden="true"></i>
<span>Log in with Email</span>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
{% if articles %}
<section id="spotlight" class="home_featured_wrapper first_page_spotlight front_spotlight">
<div class="container">
<div class="row">
<div class="col-md-12 nopadding">
<div class="heading-content">
<h2>Spotlight </h2>
</div>
<div class="slider spotlight-id" id="home_featured">
{% for article in articles %}
<div class="featured-main-content">
<div class="featured-main-content-image">
<button class="myBox">
<div class="feature-image-section">
{% if article.cover_photo %}
<a href="{% url 'articles:article-details' article.slug %}">
<img class="img-responsive lazy" src="{% thumbnail article.cover_photo 650x364 crop=',0' upscale %}">
</a>
{% endif %}
</div>
<div class="copntent-feature text-left">
{% if article.title %}
<h4>
{{ article.title|truncatechars:20 }}
</h4>
{% endif %}
<div>
<p>
{% if article.subheadline %}
{% autoescape off %}
{{ article.subheadline|truncatechars_html:120 }}
{% endautoescape %}
{% endif %}
</p>
</div>
</button>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</section>
{% endif %}
<!-- Latest Artworks Section -->
<section id="spotlight latest-artwork" class="main-section-artwork">
<div class="container">
<div class="row one">
<div class="col-md-12 nopadding">
<div class="heading-content">
<h2>Latest artworks</h2>
</div>
<div class="slider latest-artworks" id="artwork_featured" data-interval="false">
{% for artworks in latest_artworks %}
<div class="featured-main-content">
<div class="featured-main-content-image">
<div class="feature-image-section home-artworks-list" style="height: inherit;" data-artwork-url="{% url 'artwork:artwork-item' artworks.id %}" data-toggle="modal">
{% if artworks.artwork_cover_thumbnail %}
<a href="{% url 'artwork:artwork-item' artworks.id %}">
<img class="img-responsive lazy" src="
{% if artworks.artwork_type.artwork_type == 'image' %}
{% if not artworks.artwork_cover_thumbnail and artworks.gallery_images.all %}
{% thumbnail artworks.gallery_images.all.0.gallery_image 250x249 crop=',0' upscale %}
{% else %}
{% thumbnail artworks.artwork_cover_thumbnail 250x249 crop=',0' upscale %}
{% endif %}
{% else %}
{% thumbnail artworks.artwork_cover_thumbnail 250x249 crop=',0' upscale %}
{% endif %}">
</a>
{% else %}
<a href="{% url 'artwork:artwork-item' artworks.id %}">
<img class="img-responsive lazy" src="{% static 'images/not_available.png' %}">
</a>
{% endif %}
</div>
<div class="crousal-caption copntent-feature">
<h4>{{artworks.artwork_name|truncatechars:15}}</h4>
<div class="video_details blur_bg_image">
<div class="small_artwork_details_item">
{% if artworks.collaborators %}
<span>
<img src="{% static 'images/icons/collaborator-icon.png' %}" height="15">
{{ artworks.collaborators.count }}
</span>
<span class="artwork_pub_date"> {{artworks.pub_date|date:'d.m.Y'}} </span>
{% endif %}
</div>
<div class="clearfix"></div>
<div class="small_artwork_details_item">
<span>
<img src="{% static 'images/icons/making-of.png' %}" height="15">
{% if artworks.making_of.all and artworks.making_of.all.0.makingof_images.count %}
{{ artworks.making_of.all.0.makingof_images.count }}
{% else %}
0
{% endif %}
</span>
<span class="artwork_location">
{% if artworks.location %}
<i class="fa fa-map-marker"> {{artworks.location|truncatechars:20}} </i>
{% endif %}
</span>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
<div class="row two">
<div class="col-md-12 nopadding">
<div class="heading-content">
<h2>New Artists</h2>
</div>
<div class="slider latest-artworks" id="artwork_featured" data-interval="false">
{% for recent_users in recent_artists %}
{% get_number_of_artworks recent_users.id as number_of_artworks %}
<!-- div start here loop -->
<div class="featured-main-content tooltip-div">
<div class="featured-main-content-image">
<div class="feature-image-section">
<a href="{% url 'profile:my_profile' recent_users.id %}" type="button">
<img class="img-responsive lazy" src="
{% if not recent_users.socialaccount_set.all.0.get_avatar_url %}
{% if recent_users.profile_thumbnail %}
{{ recent_users.profile_thumbnail.url }}
{% else %}
{% static 'images/person.jpg' %}
{% endif %}
{% else %}
{{ recent_users.socialaccount_set.all.0.get_avatar_url }}
{% endif %}">
</a>
</div>
<div class="crousal-caption copntent-feature">
<h4 style="padding: 11px 0px 12px 0;">
{{recent_users.first_name}} {{recent_users.last_name}}
</h4>
<div class="sub-section-socio">
<ul>
<li><a href="{% url 'profile:my_profile' recent_users.id %}">
{% if recent_users.get_user_expertises_comma %}
<img class="" src="{% static 'images/skill.png' %}">
{{recent_users.get_user_expertises_comma|truncatechars:25}}</a></li>
{% endif %}
<li><a href="{% url 'profile:my_profile' recent_users.id %}">
{% if recent_users.city %}
<img class="" src="{% static 'images/location-grey.png' %}">
{{recent_users.city}}
{% endif %}
</a></li>
<li ><a href="{% url 'profile:my_profile' recent_users.id %}">
{% get_number_of_collaborators recent_users.id as number_of_collborators %}
{% if number_of_collborators %}
<img class="" src="{% static 'images/collaborators-grey.png' %}">
{{ number_of_collborators }}
{% endif %}
</a></li>
</ul>
<ul>
<li class="play-list"><a href="{% url 'profile:my_profile' recent_users.id %}"><img class="" src="{% static 'images/artwork_sample.png' %}">{{number_of_artworks}}</a></li>
</ul>
</div>
<div class="hover-image content-hover {% if forloop.counter == 4 or forloop.counter == 8 or forloop.counter == 12 %}back-hover {% endif %}">
<ul>
{% for artist_image in recent_users.getArtworks %}
<li class="home-artworks-list" data-artwork-url="{% url 'artwork:artwork-item' artist_image.id %}" data-name="{{ artist_image.artwork_name }}"><img class="img-responsive lazy" src="
{% if artist_image.artwork_type.artwork_type == 'image' %}
{% if not artist_image.artwork_cover_thumbnail and artist_image.gallery_images.all %}
{% thumbnail artist_image.gallery_images.all.0.gallery_image 100x100 crop=',0' upscale %}
{% else %}
{% thumbnail artist_image.artwork_cover_thumbnail 100x100 crop=',0' upscale %}
{% endif %}
{% else %}
{% thumbnail artist_image.artwork_cover_thumbnail 100x100 crop=',0' upscale %}
{% endif %}">
</li>
{% endfor %}
</ul>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
<!--Latest Job Entites-->
<div class="row three">
<div class="col-md-12 nopadding">
<div class="heading-content">
<h2>Latest Job entries</h2>
</div>
<div class="slider latest-artworks" id="artwork_featured" data-interval="false">
{% for jobs in latest_jobs %}
<div class="featured-main-content text-left" style="margin-left: -75px;">
<div class="featured-main-content-image">
<div class="crousal-caption copntent-feature caption-detail">
<a href="/jobs/{{jobs.id}}">
<h4>{{jobs.title}}</h4>
</a>
<a href="/jobs/{{jobs.id}}">
<p><b> {{jobs.select_job}} / {{jobs.job_location}} / {{jobs.created_date|date:'d.m.Y'}} / {{jobs.job_type}}
</b><br>
{% if jobs.job_description %}
{% autoescape off %}
{{ jobs.job_description|truncatechars_html:120 }}
{% endautoescape %}
{% endif %}
</p></a>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<section id="discover">
<div class="container-fluid nopadding">
<div class="row">
<div class="col-md-4 col-sm-4 discover_left_site">
<h3>Discover</h3>
<p>
Travel the world of<br>
creativity and get inspired
</p>
<p>
Find inspiring artists and<br>
build your crew
</p>
<p>
Show & grow your network<br>
Connect to clients and find jobs
</p>
<a class="red_button" href="#">Discover</a>
</div>
<div class="col-md-8 col-sm-8">
<img class="img-responsive" alt="" src="{% static 'images/network.png' %}">
</div>
</div>
</div>
</section>
<section id="home_feed">
<div class="home_feed_tab_head">
<div class="container">
<div class="row">
<div class="col-md-12 nopadding">
<div class="col-md-12 col-sm-12">
<h4 class="active">Creatives</h4>
</div>
</div>
</div>
</div>
</div>
<div class="home_feed_tab_body">
<div class="container-fluid">
<div class="row">
<div class="col-md-12 home_feed_tab_body_item">
{% if categories %}
{% for category in categories %}
<div class="custom_col_5">
<div class="home_feed_tab_body_inner">
<a class="" href="/browse/?cat-id={{ category.id }}&origin=HOME">
<img class="img-responsive" src="
{% if category.cover_pic %}
{% thumbnail category.cover_pic 440x290 crop=',0' upscale %}
{% else %}
{% static 'images/expertise_cover.png' %}
{% endif %}
">
<h5>{{ category.name }}</h5>
</a>
</div>
</div>
{% endfor %}
{% endif %}
</div>
</div>
</div>
</div>
</section>
<section id="showcase">
<div class="container">
<div class="row">
<div class="col-md-8 col-sm-8 showcase_left_bar">
<img class="img-responsive" src="{% static 'images/bildschirmfoto.png' %}">
</div>
<div class="col-md-4 col-sm-4 showcase_right_bar">
<h3>Showcase</h3>
<p>
Work, experiment,<br>
and build your portfolio
</p>
<p>
Pitch your skills and<br>
references to Clients
</p>
<p>
Give fans insight into<br>
your creative process
</p>
<p>
Contribute & inspire others
</p>
<a class="red_button" href="
{% if request.user.is_authenticated %}
{% url 'profile:my_profile' request.user.id %}
{% else %}
{% url 'account_login' %}
{% endif %}">My Profile
</a>
</div>
</div>
</div>
</section>
<section id="home_collaborate">
<div class="container-fluid">
<div class="row">
<div class="col-md-4 col-sm-4 home_collaborate_left_bar">
<h3>Collaborate</h3>
<p>
Upload your work<br>
and link collaborators - now your<br>
team shares one artwork
</p>
<p>
Someone links you in a artwork,<br>
your portfolio grows automatically
</p>
<p>
Credits never get lost
</p>
</div>
<div class="col-md-8 col-sm-8 home_collaborate_right_bar">
<img class="img-responsive" src="{% static 'images/collaborate-frame.png' %}">
</div>
</div>
</div>
</section>
<section id="the_app">
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-4 col-md-offset-8 col-sm-offset-8 the_app_content">
<h3>The App</h3>
<p>
We are very close, but not yet<br>
finished - still confident enough<br>
to tease it to you.
</p>
<p>
Yes, the App will visualize the<br>
creative network
</p>
<p>
No, it is not going to look like this :)
</p>
</div>
</div>
</div>
</section>
<div id="artwork_home" class="video_wrapper">
<div id="artwork_popup_modal" class="modal fade article_artwork_modal" data-backdrop="static" data-keyboard="false" style="display: none; padding: 5px; overflow: auto;">
</div>
</div>
{% endblock %}
{% block extra_js %}
{% compress js %}
<script src="{% static 'js/imagesloaded.js' %}"></script>
<script src="{% static 'js/masonry.min.js' %}"></script>
<script src="{% static 'js/simple-gallery.js' %}"></script>
<script src="{% static 'js/artwork.js' %}"></script>
{% endcompress %}
<script type="text/javascript">
(function($){
$(document).ready(function(){
$("#first_page_video").on('click', 'img.video_icon', function(event) {
var windowWidthValue = $( window ).width();
var windowReplaceValue = windowWidthValue * 0.8;
var iframeHeight = windowReplaceValue * 0.56;
$("#video_modal iframe").css('height', iframeHeight);
});
});
})(jQuery);
</script>
<script>
$(".myBox").click(function() {
window.location = $(this).find("a").attr("href");
return false;
});
</script>
{% endblock %}