@extends('layouts.custom')

@section('headStyleAndScript')
<meta property="og:title" content="Bosen di rumah dan bingung mau ngapain?" />
<meta property="og:description" content="Yuk klik buat ide aktivitas kamu berikutnya" />
<meta property="og:site_name" content="Giladiskon.com" />
<link href='https://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'/>
<link href="{{ mix('plugins/spin/css/style.css') }}" rel="stylesheet"/>
<link href="{{ mix('plugins/spin/css/gdSpinStyle.css')}}" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="https://platform-api.sharethis.com/js/sharethis.js#property=5e8c3e4ba1c1430012f50dcb&product=inline-share-buttons" async="async"></script>
@endsection
@section('content')
<div class="gd-spin">
    <div class="wheel-area">
        <div class="wheel-container">
            <svg class="wheelSVG" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" text-rendering="optimizeSpeed">
                <defs>
                    <filter id="shadow" x="-100%" y="-100%" width="550%" height="550%">
                        <feOffset in="SourceAlpha" dx="0" dy="0" result="offsetOut"></feOffset>
                        <feGaussianBlur stdDeviation="9" in="offsetOut" result="drop" />
                        <feColorMatrix in="drop" result="color-out" type="matrix" values="0 0 0 0   0
                0 0 0 0   0 
                0 0 0 0   0 
                0 0 0 .3 0" />
                        <feBlend in="SourceGraphic" in2="color-out" mode="normal" />
                    </filter>
                </defs>
                <g class="mainContainer">
                    <g class="wheel">
                        
                    </g>
                </g>
                <g class="centerCircle" />
                <g class="wheelOutline" />
                <g class="pegContainer" opacity="1">
                    <path class="peg" fill="#EEEEEE" d="M22.139,0C5.623,0-1.523,15.572,0.269,27.037c3.392,21.707,21.87,42.232,21.87,42.232 s18.478-20.525,21.87-42.232C45.801,15.572,38.623,0,22.139,0z" />
                </g>
                <g class="valueContainer" />
                <g class="centerCircleImageContainer"/>
            </svg>
            <div class="toast">
                <p/>
            </div> 
        </div>
    </div>
    <div class="info-area">
        <div class="info">Daripada bengong bisa liatin diskonan makanan atau online <a href="https://www.giladiskon.com">klik disini</a></div>
        <div class="share">
            <span>Yuk ajak teman kamu coba juga </span><span class="sharethis-inline-share-buttons"></span>
        </div>
    </div>
    <div class="action-area">
        <button class="spinBtn gd-spin-button">Klik untuk putar!</button> 
    </div>
</div>
@endsection

@section('script')
    @parent
    <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/utils/Draggable.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/TextPlugin.min.js'></script>
    <script src="{{ asset(mix('plugins/spin/js/spin.js')) }}"></script>
@endsection