{#
This file is part of EC-CUBE
Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.
http://www.ec-cube.co.jp/
For the full copyright and license information, please view the LICENSE
file that was distributed with this source code.
#}
{% extends 'default_frame.twig' %}
{% set body_class = 'front_page' %}
{% block stylesheet %}
<style>
.slick-slider {
margin-bottom: 30px;
}
.slick-dots {
position: absolute;
bottom: -45px;
display: block;
width: 100%;
padding: 0;
list-style: none;
text-align: center;
}
.slick-dots li {
position: relative;
display: inline-block;
width: 20px;
height: 20px;
margin: 0 5px;
padding: 0;
cursor: pointer;
}
.slick-dots li button {
font-size: 0;
line-height: 0;
display: block;
width: 20px;
height: 20px;
padding: 5px;
cursor: pointer;
color: transparent;
border: 0;
outline: none;
background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus {
outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before {
opacity: 1;
}
.slick-dots li button:before {
content: " ";
line-height: 20px;
position: absolute;
top: 0;
left: 0;
width: 12px;
height: 12px;
text-align: center;
opacity: .25;
background-color: black;
border-radius: 50%;
}
.slick-dots li.slick-active button:before {
opacity: .75;
background-color: black;
}
.slick-dots li button.thumbnail img {
width: 0;
height: 0;
}
</style>
{% endblock %}
{% block javascript %}
<script>
$(function() {
$('.main_visual').slick({
dots: true,
arrows: false,
autoplay: true,
speed: 300
});
});
</script>
<script>
/*
<script src="https://code.jquery.com/jquery-3.6.0.min.js">
function showWeather(zipCode) {
const apiKey = 'YOUR_API_KEY';
const url = `https://map.yahooapis.jp/weather/V1/place?coordinates=135.99668266689392,34.634682905099524&appid=dj00aiZpPXM4Y0ZhTXliT3ZaTCZzPWNvbnN1bWVyc2VjcmV0Jng9ODY-`;
$.getJSON(url, function(data) {
const weather = data.query.results.channel;
const weatherWidget = document.getElementById('weather-widget');
weatherWidget.innerHTML = `
<h3>${weather.location.city}の天気</h3>
<p>気温: ${weather.item.condition.temp}°C</p>
<p>天気: ${weather.item.condition.text}</p>
`;
});
}
// 郵便番号を指定して天気を表示
showWeather('6302234');
*/
</script>
{% endblock javascript %}
{% block main %}
<div class="ec-sliderRole position-relative">
<div class="main_visual">
<div class="item slick-slide"><img src="{{ asset('assets/img/top/top_slider_1.jpg') }}"></div>
</div>
<div id="header_wrap" class="position-absolute top-50 end-0">
<div class="inner">
<div class="">奈良県山添村、<br class="sp_on">名阪国道に隣接する<br>総合モータースポーツ施設<br class="sp_on">「名阪スポーツランド」です。</div>
<div class="text-center">
</div>
</div>
</div>
</div>
<section id="course_wrap" class="">
<div class="inner">
<div class="section_title"><span>コース紹介</span></div>
<div class="section_data d-flex flex-wrap justify-content-center">
{% for k,v in courses %}
<a class="course_data " href="{{ url('course_detail',{id:v.id}) }}">
<img src="{{ eccube_config.course_image_dir_default }}{{ v.image_before1 }}" alt="前半画像1" width="100%">
<div class="">{{ v.name }}</div>
</a>
{% endfor %}
</div>
</div>
</section>
<section class="weather_daily">
<div class="inner">
<div class="section_title"><span>お天気情報</span></div>
<div class="daily_data d-flex flex-wrap justify-content-between">
{% for k,v in daily.time %}
<div class="text-center mb-4 border border-secondary rounded p-2">
<div class="day mb-2 fw-bold h4">{{ v|date('m月d日') }}</div>
<div class="d-flex flex-wrap justify-content-center align-items-">
<div class="w-75 mx-auto mb-2">
{% set codes = WeatherInfo(daily.weather_code[k]) %}
<img src="/html/template/default/assets/img/weathers/{{ codes['jma_code']}}.svg">
<div class="">{{ codes['description'] }}</div>
</div>
<div class="w-100 d-flex text-center">
<div class="max col-6 px-2">
<div>最高気温</div>
<div class="h5">{{ daily.temperature_2m_max[k] }}℃</div>
</div>
<div class="min col-6 px-2">
<div>最低気温</div>
<div class="h5">{{ daily.temperature_2m_min[k] }}℃</div>
</div>
</div>
<div class="w-100 d-flex text-center my-2 py-2 border border-secondary border-start-0 border-end-0">
<div class="sunrise col-6 px-2">
<div>日の出</div>
<div class="h5">{{ daily.sunrise[k]|date('H時i分') }}</div>
</div>
<div class="sunset col-6 px-2">
<div>日の入</div>
<div class="h5">{{ daily.sunset[k]|date('H時i分') }}</div>
</div>
</div>
<div class="w-100 d-flex text-center">
<div class="max col-6 px-2">
<div>降水確率</div>
<div class="h5">{{ daily.precipitation_sum[k] }}%</div>
</div>
<div class="min col-6 px-2">
<div>最低気温</div>
<div class="h5">{{ daily.wind_speed_10m_max[k] }}km/h</div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</section>
<section id="product_wrap" class="">
<div class="inner">
<div class="section_title"><span>販売中グッズ</span></div>
</div>
<div class="product_items">
<div class="ec-role">
<div class="ec-newItemRole">
<div class="top_sales_list">
{% for Product in products %}
<div class="top_sales_listItem">
<a href="{{ url('product_detail', {'id': Product.id}) }}">
<div class="img_wrap">
<img src="{{ asset(Product.main_list_image|no_image_product, 'save_image') }}" alt="{{ Product.name }}" {% if loop.index > 5 %} loading="lazy"{% endif %}>
<div class="sales_wrap">
{% if Product.ProductSales %}
<div class="btn fs-6" style="color:{{ Product.ProductSales.color }};background:{{ Product.ProductSales.bg_color }};">{{ Product.ProductSales.label }}</div>
{% else %}
<div class="btn fs-6 btn-outline-secondary">未設定</div>
{% endif %}
</div>
</div>
<p class="ec-newItemRole__listItemTitle">{{ Product.name }}</p>
<p class="ec-newItemRole__listItemPrice">
{% if Product.hasProductClass %}
{% if Product.getPrice02Min == Product.getPrice02Max %}
{{ Product.getPrice02IncTaxMin|price }}
{% else %}
{{ Product.getPrice02IncTaxMin|price }} ~ {{ Product.getPrice02IncTaxMax|price }}
{% endif %}
{% else %}
{{ Product.getPrice02IncTaxMin|price }}
{% endif %}
{{ '(税込)'|trans }}</p>
</a>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</section>
<section id="event_wrap" class="">
<div class="inner">
<div class="section_title"><span>イベント情報</span></div>
<div class="section_data d-flex flex-wrap justify-content-center">
{% for year,values in events %}
<div class="event_items">
<div class="event_year">{{ year }}年度 イベント一覧</div>
<div class="event_data">
{% for k,v in values %}
<div class="row">
<div class="col-3">
<div>{{ v.day_start|date('Y.m.d') }}</div>
{% if v.day_end %}
<div>~{{ v.day_end|date('Y.m.d') }}</div>
{% endif %}
</div>
<div class="col-7">
<a href="{{ url('event_detail', {'id': v.id}) }}">{{ v.name }}
{% if v.sub_title %}
<p>[ {{ v.sub_title }} ]</p>
{% endif %}
</a>
</div>
<div class="col-2">
<a href="{{ url('event_detail', {'id': v.id}) }}">詳細 >> </a>
</div>
</div>
{% endfor %}
</div>
</div>
{% endfor %}
</div>
</div>
</section>
<section id="document_wrap" class="">
<div class="inner">
<div class="section_title"><span>申込書などダウンロード</span></div>
<div class="document_items">
{% for k,v in documents %}
{% if v.pdf %}
<div class="row my-2 py-2 border-bottom border-seconday border-2 col-md-8 col-12 mx-auto">
<div class="col-10 h5">{{ v.label }}</div>
<div class="col-2"><a href="/html/user_data/assets/pdf/{{ v.pdf }}" target="_blank"><i class="bi bi-download"></i></a></div>
</div>
{% endif %}
{% endfor %}
</div>
</div>
</section>
{% endblock %}