mirror of
https://github.com/hanzoai/jube-fork.git
synced 2026-11-02 09:25:40 +00:00
245 lines
13 KiB
HTML
Executable File
245 lines
13 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Templates</title>
|
|
<meta charset="utf-8">
|
|
<link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
|
|
<link href="../../styles/kendo.common.min.css" rel="stylesheet">
|
|
<link href="../../styles/kendo.rtl.min.css" rel="stylesheet">
|
|
<link href="../../styles/kendo.default.min.css" rel="stylesheet">
|
|
<link href="../../styles/kendo.default.mobile.min.css" rel="stylesheet">
|
|
<script src="../../js/jquery.min.js"></script>
|
|
<script src="../../js/jszip.min.js"></script>
|
|
<script src="../../js/kendo.all.min.js"></script>
|
|
<script src="../content/shared/js/console.js"></script>
|
|
<script>
|
|
|
|
</script>
|
|
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<a class="offline-button" href="../index.html">Back</a>
|
|
|
|
<div id="example">
|
|
<div class="demo-section k-content wide">
|
|
<div id="page-overlay" class="k-overlay"></div>
|
|
<textarea id="editor" rows="10" cols="30" style="width:100%; height:550px" aria-label="editor">
|
|
<br />
|
|
<p style="text-align:center;">
|
|
<span style="font-family:Verdana, Geneva, sans-serif;font-size:large;"><strong>One of the Most Beautiful Islands on Earth - Tenerife</strong>
|
|
</span>
|
|
</p>
|
|
<p>
|
|
<span style="font-family:Verdana, Geneva, sans-serif;font-size:medium;"><strong>Overview</strong>
|
|
</span>
|
|
</p>
|
|
<p style="font-size: small;">
|
|
<strong>Tenerife </strong>is the largest and most populated island of the eight <a href="https://en.wikipedia.org/wiki/Canary_Islands" target="_blank">Canary Islands</a>. It is also the most populated island of <strong>Spain</strong>, with a land area of 2,034.38 square kilometers (785 sq mi) and 904,713 inhabitants, 43% of the total population of the <strong>Canary Islands</strong>.&nbsp;The archipelago's beaches, climate and important natural attractions, make it a major tourist destination with over 12 million visitors per year.
|
|
</p>
|
|
<br />
|
|
<img src="../content/web/editor/tenerife.png" style="float: right;" alt="" width="350" height="206" />
|
|
|
|
<p><span style="font-family:Verdana, Geneva, sans-serif;font-size:medium;">
|
|
<strong>Trip Highlights in Tenerife</strong></span></p><span style="white-space:pre;"></span>
|
|
<ul>
|
|
<li>
|
|
<strong style="color: rgb(0,80,5);">Trip to Loro Parque </strong> <br /> Out top tip is to visit the famous <em>Loro Parque</em> or 'Loro Park. It is a 13.5-hectare zoo on the outskirts of Puerto de la Cruz on Tenerife, Spain where it houses an extensive and diverse reserve of animal and plant species.
|
|
<br />
|
|
<br />
|
|
</li>
|
|
<li>
|
|
<strong><span style="color: rgb(46,125,50);">Whale and Dolphin Watching Tour&nbsp;<br /></span></strong> Another great option is to take boat excursion with almost guaranteed sightings of whales and dolphins. This is a day-long trip that includes lunch, island visits, fishing, and amazing views of ocean sceneries.
|
|
<br />
|
|
<br />
|
|
</li>
|
|
<li>
|
|
<strong><span style="color: rgb(96,173,94);">Teide National Park Stargazing</span></strong><br />Last, but not least you can take a stargaze trip to Teide National Park, the 3rd best place in the world to view stars and described by NASA as a window to the universe.
|
|
<br />
|
|
</li>
|
|
</ul>
|
|
<br />
|
|
<p>
|
|
<span style="font-family:Verdana, Geneva, sans-serif;font-size:medium;"><strong>Climate</strong></span>
|
|
</p>
|
|
|
|
<table style="width:100%;height:225px;text-align:center;">
|
|
<tbody>
|
|
<tr style="height:20%;background-color: rgb(96,173,94);">
|
|
<td style="width:473px;text-align:center; font-size:medium; color: rgb(255,255,255);" colspan="14"><strong>Climate Data for <a href="https://en.wikipedia.org/wiki/Santa_Cruz_de_Tenerife" target="_blank">Santa Cruz de Tenerife</a></strong>
|
|
</td>
|
|
</tr>
|
|
<tr style="height:9.33333%;">
|
|
<td style="width:230px;">
|
|
<span style="font-size:small; color: rgb(46,125,50);">
|
|
<strong>Month</strong>
|
|
</span>
|
|
</td>
|
|
<td><strong><span style="color: rgb(0,80,5);">Jan</span></strong></td>
|
|
<td><strong><span style="color: rgb(0,80,5);">Feb</span></strong></td>
|
|
<td><strong><span style="color: rgb(0,80,5);">Mar</span></strong></td>
|
|
<td><strong><span style="color: rgb(0,80,5);">Apr</span></strong></td>
|
|
<td><strong><span style="color: rgb(0,80,5);">May</span></strong></td>
|
|
<td><strong><span style="color: rgb(0,80,5);">Jun</span></strong></td>
|
|
<td><strong><span style="color: rgb(0,80,5);">Jul</span></strong></td>
|
|
<td><strong><span style="color: rgb(0,80,5);">Aug</span></strong></td>
|
|
<td><strong><span style="color: rgb(0,80,5);">Sep</span></strong></td>
|
|
<td><strong><span style="color: rgb(0,80,5);">Oct</span></strong></td>
|
|
<td><strong><span style="color: rgb(0,80,5);">Nov</span></strong></td>
|
|
<td><strong><span style="color: rgb(0,80,5);">Dec</span></strong></td>
|
|
<td><strong><span style="color: rgb(0,80,5);">Year</span></strong></td>
|
|
</tr>
|
|
<tr style="height:23%;">
|
|
<td style="width:230px; color: rgb(46,125,50);"><strong>Daily mean &deg;C (&deg;F)</strong></td>
|
|
<td style="">18.2<br />(64.8)<br /></td>
|
|
<td style="">18.3<br />(64.9)<br /></td>
|
|
<td style="">19.0<br />(66.2)<br /></td>
|
|
<td style="">19.7<br />(67.5)<br /></td>
|
|
<td style="">21.0<br />(69.8)<br /></td>
|
|
<td style="">22.9<br />(73.2)<br /></td>
|
|
<td style="">25.0<br />(77.0)<br /></td>
|
|
<td style="">25.5<br />(77.9)<br /></td>
|
|
<td style="">24.9<br />(76.8)<br /></td>
|
|
<td style="">23.4<br />(74.1)<br /></td>
|
|
<td style="">21.3<br />(70.3)<br /></td>
|
|
<td style="">19.4<br />(66.9)<br /></td>
|
|
<td style="">21.5<br />(70.7)<br /></td>
|
|
</tr>
|
|
<tr style="height:23%;">
|
|
<td style="width:230px; color: rgb(46,125,50);"><strong>Average rainy days (&ge; 1.0 mm)</strong></td>
|
|
<td style="">8.0</td>
|
|
<td style="">7.2</td>
|
|
<td style="">6.9</td>
|
|
<td style="">5.5 </td>
|
|
<td style="">2.9</td>
|
|
<td style="">0.9</td>
|
|
<td style="">0.2</td>
|
|
<td style="">0.8 </td>
|
|
<td style="">2.7</td>
|
|
<td style="">6.1</td>
|
|
<td style="">8.8</td>
|
|
<td style="">9.4</td>
|
|
<td style="">59.4</td>
|
|
</tr>
|
|
<tr style="height:23%;">
|
|
<td style="width:230px; color: rgb(46,125,50);"><strong>Mean monthly <a href="https://en.wikipedia.org/wiki/Sunshine_duration" target="_blank">sunshine hours</strong></a><br /></td>
|
|
<td style="">178</td>
|
|
<td style="">186</td>
|
|
<td style="">221</td>
|
|
<td style="">237</td>
|
|
<td style="">282</td>
|
|
<td style="">306</td>
|
|
<td style="">337</td>
|
|
<td style="">319</td>
|
|
<td style="">253</td>
|
|
<td style="">222</td>
|
|
<td style="">178</td>
|
|
<td style="">168</td>
|
|
<td style="">2,887</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<p>
|
|
<em>* The data used in this demo is taken from <a href="https://wikipedia.com" target="_blank">wikipedia.com</a>.</em><br />
|
|
<em>** The displayed photos are sourced from <a href="https://pixabay.com" target="_blank">pixabay.com</a></em>
|
|
</p>
|
|
</textarea>
|
|
<button id="fab-bottom-end" style="z-index:10001;"></button>
|
|
</div>
|
|
|
|
<script>
|
|
$(document).ready(function () {
|
|
$("#editor").kendoEditor({
|
|
stylesheets: [
|
|
"../content/shared/styles/editor.css",
|
|
]
|
|
});
|
|
|
|
var itemTemplate = kendo.template($("#fabItemTemplate").html());
|
|
|
|
$("#fab-bottom-end").kendoFloatingActionButton({
|
|
icon: 'share',
|
|
positionMode: "absolute",
|
|
align: "bottom end",
|
|
alignOffset: {
|
|
x: 100,
|
|
y: 100
|
|
},
|
|
themeColor: "primary",
|
|
size: "medium",
|
|
items: [{
|
|
label: "Darrel Sollis",
|
|
template: itemTemplate({
|
|
text: "Share with Darrel Sollis",
|
|
image: "AROUT.jpg"
|
|
}),
|
|
click: function (e) {
|
|
kendo.alert("Shared with " + $(e.target).text());
|
|
}
|
|
}, {
|
|
label: "Mia Caldwell",
|
|
template: itemTemplate({
|
|
text: "Share with Mia Caldwell",
|
|
image: "BSBEV.jpg"
|
|
}),
|
|
click: function (e) {
|
|
kendo.alert("Shared with " + $(e.target).text());
|
|
}
|
|
}, {
|
|
label: "Mallory Gillian",
|
|
template: itemTemplate({
|
|
text: "Share with Mallory Gillian",
|
|
image: "FISSA.jpg"
|
|
}),
|
|
click: function (e) {
|
|
kendo.alert("Shared with " + $(e.target).text());
|
|
}
|
|
}],
|
|
expand: function (ev) {
|
|
toggleOverlay(true);
|
|
ev.sender.icon("close");
|
|
},
|
|
collapse: function (ev) {
|
|
toggleOverlay(false);
|
|
ev.sender.icon("share");
|
|
}
|
|
});
|
|
|
|
function toggleOverlay(visible) {
|
|
var overlay = $("#page-overlay");
|
|
|
|
overlay.toggle(visible);
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<script id="fabItemTemplate" type="text/x-kendo-template">
|
|
<span class="k-fab-item-text">#:text#</span>
|
|
|
|
<span class="k-avatar k-avatar-circle k-avatar-image k-avatar-md k-fab-item-icon">
|
|
<img src="../content/web/Customers/#:image#" />
|
|
</span>
|
|
</script>
|
|
</div>
|
|
|
|
<style>
|
|
#page-overlay {
|
|
display: none;
|
|
position: absolute;
|
|
}
|
|
|
|
.k-fab {
|
|
z-index: 10002;
|
|
}
|
|
|
|
.k-fab-item-icon{
|
|
padding:0px;
|
|
}
|
|
</style>
|
|
|
|
|
|
|
|
</body>
|
|
</html>
|