{{-- Part of tuesday_design project. --}}
@extends('front.layouts.app')

@section('style')
    <link href="{{ asset('css/work.css') }}" rel="stylesheet" charset="utf-8"/>
    <link href="{{ asset('plugins/owl/assets/owl.carousel.min.css') }}" rel="stylesheet" charset="utf-8"/>
    <link href="{{ asset('plugins/owl/assets/owl.theme.default.min.css') }}" rel="stylesheet" charset="utf-8"/>
@stop

@section('script')
    <script src="{{ asset('plugins/owl/owl.carousel.min.js') }}"></script>
    <script>
        jQuery(function($){
            let $window = $(window);
            let itemToIphone = 1.2055974166;
            let iphoneTop = 0.5172413793;
            let iphoneBottom = 1 - iphoneTop;
            let mobile_slide = $('.mobile-slide');
            let iphone6 = $('.iphone6-container');
            let item_width, item_height, iphone_height, owl_pt, owl_pb;

            mobile_slide.owlCarousel({
                stagePadding: 50,
                center: true,
                nav: true,
                loop: true,
                margin: 15,
                onInitialized: resizeIphone6,
                responsive: {
                    1200: {
                        margin: 25,
                        items: 5
                    },
                    1000: {
                        stagePadding: 30,
                        items: 4
                    },
                    800: {
                        items: 3
                    }
                }
            });

            iphone6.appendTo(mobile_slide);

            $window.on('load resize', function () {
                resizeIphone6();
            });

            function resizeIphone6() {
                item_width = mobile_slide.find('.owl-item').width();
                item_height = mobile_slide.find('.owl-item').height();
                iphone6.find('img').css('width', item_width * itemToIphone + 'px');

                iphone_height = iphone6.find('img').height();
                owl_pt = (iphone_height - item_height) * iphoneTop;
                owl_pb = (iphone_height - item_height) * iphoneBottom;

                mobile_slide.find('.owl-stage-outer').css('padding', owl_pt + 'px 0 ' + owl_pb + 'px');
                iphone6.fadeTo(800, 1);
            }
        });
    </script>
@stop

{{--Page Class--}}
@section('class', 'work')

@section('main-content')
    <div class="main-content-wrapper">
        <div class="main-content-inner">
            <div class="page-title">
                <div class="title-en">
                    equallove
                </div>
                <h1 class="title-tw">
                    蜂巢行動，飛越同溫層
                </h1>
                <h2 class="work-sub-title">
                    婚姻平權募資專案設計
                </h2>
            </div>

            <div class="content-wrapper row no-gutters">

                <!--Works-->
                <div class="work-info col-md-4 offset-md-1 order-md-2">
                    <div class="work-info-inner">
                        <div class="work-title">
                            蜂巢行動，飛越同溫層
                        </div>
                        <div class="work-sub-title">
                            婚姻平權募資專案設計
                        </div>
                        <div class="infos">
                            <div class="info d-flex">
                                <div class="info-title">
                                    Category
                                </div>
                                <div class="info-content">
                                    <a href="{{ route('works') . '#活動網站' }}">活動網站</a>
                                    <a href="{{ route('works') . '#商業合作' }}">商業合作</a>
                                </div>
                            </div>
                            <div class="info d-flex">
                                <div class="info-title">
                                    Tag
                                </div>
                                <div class="info-content">
                                    <a href="{{ route('works') . '#平面設計' }}">平面設計</a>
                                    <a href="{{ route('works') . '#前端工程' }}">前端工程</a>
                                </div>
                            </div>
                            <div class="info d-flex">
                                <div class="info-title">
                                    Client
                                </div>
                                <div class="info-content">
                                    婚姻平權大平台
                                </div>
                            </div>
                            <div class="info d-flex">
                                <div class="info-title">
                                    Role
                                </div>
                                <div class="info-content">
                                    <p>
                                        網站設計與工程<br/>
                                        火曜日、魏筱蓉、林凱偉
                                    </p>
                                    <p>
                                        視覺設計<br/>
                                        林致維
                                    </p>
                                    <p>
                                        文案整理與規劃<br/>
                                        簡維萱、沈奕均、郭宜婷、陳凌、呂欣潔
                                    </p>
                                </div>
                            </div>
                            <div class="info d-flex">
                                <div class="info-title">
                                    Date
                                </div>
                                <div class="info-content">
                                    May. 2018
                                </div>
                            </div>
                            <div class="info d-flex">
                                <div class="info-title">
                                    Link
                                </div>
                                <div class="info-content work-link">
                                    <a href="http://beebee.equallove.tw">http://beebee.equallove.tw</a>
                                </div>
                            </div>
                        </div>
                        <div class="share-block d-flex d-sm-block">
                            <a href="javascript://"><i class="icon-link"></i>複製連結</a>
                            <a href="javascript://"><i class="icon-facebook-outline"></i>分享</a>
                        </div>
                    </div>
                </div>
                <div class="content col-md-7 order-md-1">
                    <div class="work-description">
                        <div class="description-title">
                            專案介紹
                        </div>
                        <p>
                            與婚姻平權大平台合作，為推廣其理念及募集資金而建置。由林致命擔任主視覺設計，再由敝團隊進行網頁介面的設計及建置。<br/>
                            版面設計以破格的方式連結對話框，傳達出一系列的街頭活動訴求。懸浮固定在右側的募資進度，蜂窩會依照進度的成長改變樣貌，並偷偷的震動吸引使用者目光。
                        </p>
                        <div class="description-title">
                            隱藏的互動小巧思
                        </div>
                        <p>
                            版面設計以破格的方式連結對話框，傳達出一系列的街頭活動訴求。懸浮固定在右側的募資進度，蜂窩會依照進度的成長改變樣貌，並偷偷的震動吸引使用者目光。
                        </p>
                        <img class="img-fluid" src="{{ asset('images/og.png') }}" alt="">
                        <div class="description-title">
                            資訊化整理
                        </div>
                        <p>
                            將業主想要傳達的理念，經過資訊整理後，使用者能夠更加快速的掌握到重點，也用排版的形式呼應全專案的重點：深度對話。
                        </p>
                        <img class="img-fluid" src="{{ asset('images/og.png') }}" alt="">
                        <div class="description-title">
                            清晰的募資區塊
                        </div>
                        <p>
                            為不同的募資方案，規劃出清晰的分隔區塊，並搭配滑鼠的移入及點擊互動效果，引導使用者進入募資詳情頁面。
                        </p>
                    </div>
                </div>
                <div class="content-mobile-wrapper col-md-12 order-md-3">
                    <div class="content-mobile">
                        <div class="content-mobile-title">
                            手機版展示
                        </div>
                        <p>
                            RWD響應式設計，完美重現設計師原稿，讓手機用戶也能擁有很好的使用體驗。
                        </p>
                        <div class="iphone6-container">
                            <img class="img-fluid" src="{{ asset('images/iphone6.png') }}" alt="">
                        </div>
                        <div class="mobile-slide owl-carousel owl-theme">
                            <div><img src="{{ asset('images/mobile-test/01.png') }}" alt=""></div>
                            <div><img src="{{ asset('images/mobile-test/02.png') }}" alt=""></div>
                            <div><img src="{{ asset('images/mobile-test/03.png') }}" alt=""></div>
                            <div><img src="{{ asset('images/mobile-test/04.png') }}" alt=""></div>
                            <div><img src="{{ asset('images/mobile-test/05.png') }}" alt=""></div>
                            <div><img src="{{ asset('images/mobile-test/05.png') }}" alt=""></div>
                            <div><img src="{{ asset('images/mobile-test/05.png') }}" alt=""></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="callAction-wrapper wrapper">
        <div class="callAction-inner">
            <h4>
                喜歡我們的作品？<br class="d-block d-md-none"/>欲知更多合作細節<br/>
                歡迎來信與我們聯繫：）
            </h4>
            <a class="callAction-button" href="{{ route('contact') }}">聯絡我們</a>
        </div>
        <img class="d-none d-sm-block" src="{{ asset('images/about_us_footer_desktop.png') }}" alt="">
        <img class="d-block d-sm-none" src="{{ asset('images/about_us_footer.png') }}" alt="">
    </div>
@stop