| 1 |
<?php |
| 2 |
|
| 3 |
/** |
| 4 |
* Provide a admin area view for the plugin |
| 5 |
* |
| 6 |
* This file is used to markup the admin-facing aspects of the plugin. |
| 7 |
* |
| 8 |
* @link www.scrollsequence.com |
| 9 |
* @since 0.7.0 |
| 10 |
* |
| 11 |
* @package Scrollsequence |
| 12 |
* @subpackage Scrollsequence/admin/partials |
| 13 |
*/ |
| 14 |
?> |
| 15 |
|
| 16 |
<style> |
| 17 |
|
| 18 |
* {box-sizing: border-box} |
| 19 |
|
| 20 |
/* Set height of body and the document to 100% */ |
| 21 |
body, html { |
| 22 |
height: 100%; |
| 23 |
margin: 0; |
| 24 |
font-family: Arial; |
| 25 |
} |
| 26 |
|
| 27 |
/* Style tab links */ |
| 28 |
.tablink { |
| 29 |
background-color: lightgrey; |
| 30 |
/*color: white;*/ |
| 31 |
float: left; |
| 32 |
border: none; |
| 33 |
outline: none; |
| 34 |
cursor: pointer; |
| 35 |
padding: 14px 1px; |
| 36 |
font-size: 17px; |
| 37 |
width:25%; |
| 38 |
} |
| 39 |
|
| 40 |
.tablink:hover { |
| 41 |
background-color: #777; |
| 42 |
|
| 43 |
} |
| 44 |
|
| 45 |
/* Style the tab content (and add height:100% for full page content) */ |
| 46 |
.tabcontent { |
| 47 |
/*color: white;*/ |
| 48 |
display: none; |
| 49 |
padding: 100px 20px; |
| 50 |
height: 100%; |
| 51 |
border: 1px solid #ccd0d4; |
| 52 |
} |
| 53 |
|
| 54 |
#GettingStarted {background-color: #fff;} |
| 55 |
#Settings {background-color: #fff;} |
| 56 |
#GetPro {background-color: #fff;} |
| 57 |
/*#Contact {background-color: grey;} |
| 58 |
#About {background-color: grey;}*/ |
| 59 |
|
| 60 |
.menulink{ |
| 61 |
text-decoration: none; |
| 62 |
color: black; |
| 63 |
} |
| 64 |
|
| 65 |
.ssq-heading{ |
| 66 |
font-size:23px; |
| 67 |
font-weight: 400; |
| 68 |
padding: 9px 0 4px 0; |
| 69 |
line-height: 1.3; |
| 70 |
} |
| 71 |
|
| 72 |
|
| 73 |
.ssq-welcome{ |
| 74 |
background-color: white; |
| 75 |
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='540' height='450' viewBox='0 0 1080 900'%3E%3Cg fill-opacity='.05'%3E%3Cpolygon fill='%23444' points='90 150 0 300 180 300'/%3E%3Cpolygon points='90 150 180 0 0 0'/%3E%3Cpolygon fill='%23AAA' points='270 150 360 0 180 0'/%3E%3Cpolygon fill='%23DDD' points='450 150 360 300 540 300'/%3E%3Cpolygon fill='%23999' points='450 150 540 0 360 0'/%3E%3Cpolygon points='630 150 540 300 720 300'/%3E%3Cpolygon fill='%23DDD' points='630 150 720 0 540 0'/%3E%3Cpolygon fill='%23444' points='810 150 720 300 900 300'/%3E%3Cpolygon fill='%23FFF' points='810 150 900 0 720 0'/%3E%3Cpolygon fill='%23DDD' points='990 150 900 300 1080 300'/%3E%3Cpolygon fill='%23444' points='990 150 1080 0 900 0'/%3E%3Cpolygon fill='%23DDD' points='90 450 0 600 180 600'/%3E%3Cpolygon points='90 450 180 300 0 300'/%3E%3Cpolygon fill='%23666' points='270 450 180 600 360 600'/%3E%3Cpolygon fill='%23AAA' points='270 450 360 300 180 300'/%3E%3Cpolygon fill='%23DDD' points='450 450 360 600 540 600'/%3E%3Cpolygon fill='%23999' points='450 450 540 300 360 300'/%3E%3Cpolygon fill='%23999' points='630 450 540 600 720 600'/%3E%3Cpolygon fill='%23FFF' points='630 450 720 300 540 300'/%3E%3Cpolygon points='810 450 720 600 900 600'/%3E%3Cpolygon fill='%23DDD' points='810 450 900 300 720 300'/%3E%3Cpolygon fill='%23AAA' points='990 450 900 600 1080 600'/%3E%3Cpolygon fill='%23444' points='990 450 1080 300 900 300'/%3E%3Cpolygon fill='%23222' points='90 750 0 900 180 900'/%3E%3Cpolygon points='270 750 180 900 360 900'/%3E%3Cpolygon fill='%23DDD' points='270 750 360 600 180 600'/%3E%3Cpolygon points='450 750 540 600 360 600'/%3E%3Cpolygon points='630 750 540 900 720 900'/%3E%3Cpolygon fill='%23444' points='630 750 720 600 540 600'/%3E%3Cpolygon fill='%23AAA' points='810 750 720 900 900 900'/%3E%3Cpolygon fill='%23666' points='810 750 900 600 720 600'/%3E%3Cpolygon fill='%23999' points='990 750 900 900 1080 900'/%3E%3Cpolygon fill='%23999' points='180 0 90 150 270 150'/%3E%3Cpolygon fill='%23444' points='360 0 270 150 450 150'/%3E%3Cpolygon fill='%23FFF' points='540 0 450 150 630 150'/%3E%3Cpolygon points='900 0 810 150 990 150'/%3E%3Cpolygon fill='%23222' points='0 300 -90 450 90 450'/%3E%3Cpolygon fill='%23FFF' points='0 300 90 150 -90 150'/%3E%3Cpolygon fill='%23FFF' points='180 300 90 450 270 450'/%3E%3Cpolygon fill='%23666' points='180 300 270 150 90 150'/%3E%3Cpolygon fill='%23222' points='360 300 270 450 450 450'/%3E%3Cpolygon fill='%23FFF' points='360 300 450 150 270 150'/%3E%3Cpolygon fill='%23444' points='540 300 450 450 630 450'/%3E%3Cpolygon fill='%23222' points='540 300 630 150 450 150'/%3E%3Cpolygon fill='%23AAA' points='720 300 630 450 810 450'/%3E%3Cpolygon fill='%23666' points='720 300 810 150 630 150'/%3E%3Cpolygon fill='%23FFF' points='900 300 810 450 990 450'/%3E%3Cpolygon fill='%23999' points='900 300 990 150 810 150'/%3E%3Cpolygon points='0 600 -90 750 90 750'/%3E%3Cpolygon fill='%23666' points='0 600 90 450 -90 450'/%3E%3Cpolygon fill='%23AAA' points='180 600 90 750 270 750'/%3E%3Cpolygon fill='%23444' points='180 600 270 450 90 450'/%3E%3Cpolygon fill='%23444' points='360 600 270 750 450 750'/%3E%3Cpolygon fill='%23999' points='360 600 450 450 270 450'/%3E%3Cpolygon fill='%23666' points='540 600 630 450 450 450'/%3E%3Cpolygon fill='%23222' points='720 600 630 750 810 750'/%3E%3Cpolygon fill='%23FFF' points='900 600 810 750 990 750'/%3E%3Cpolygon fill='%23222' points='900 600 990 450 810 450'/%3E%3Cpolygon fill='%23DDD' points='0 900 90 750 -90 750'/%3E%3Cpolygon fill='%23444' points='180 900 270 750 90 750'/%3E%3Cpolygon fill='%23FFF' points='360 900 450 750 270 750'/%3E%3Cpolygon fill='%23AAA' points='540 900 630 750 450 750'/%3E%3Cpolygon fill='%23FFF' points='720 900 810 750 630 750'/%3E%3Cpolygon fill='%23222' points='900 900 990 750 810 750'/%3E%3Cpolygon fill='%23222' points='1080 300 990 450 1170 450'/%3E%3Cpolygon fill='%23FFF' points='1080 300 1170 150 990 150'/%3E%3Cpolygon points='1080 600 990 750 1170 750'/%3E%3Cpolygon fill='%23666' points='1080 600 1170 450 990 450'/%3E%3Cpolygon fill='%23DDD' points='1080 900 1170 750 990 750'/%3E%3C/g%3E%3C/svg%3E"); |
| 76 |
} |
| 77 |
|
| 78 |
|
| 79 |
</style> |
| 80 |
|
| 81 |
|
| 82 |
|
| 83 |
<div class="wrap"> |
| 84 |
|
| 85 |
<div class="ssq-welcome" style="height:200px" > |
| 86 |
<div style=" padding: 30px; width: 190px; float:left; "> |
| 87 |
<svg width="128" height="128" viewBox="-150 -150 1300 1300"> |
| 88 |
<defs> |
| 89 |
<linearGradient id="ssq-logo-gradient" x1="0%" y1="50%" x2="100%" y2="0%"> |
| 90 |
<stop offset="0%" style="stop-color:rgb(23,48,66);stop-opacity:1" /> |
| 91 |
<stop offset="100%" style="stop-color:rgb(35,110,119);stop-opacity:1" /> |
| 92 |
</linearGradient> |
| 93 |
</defs> |
| 94 |
<!-- Background --> |
| 95 |
<rect x="-150" y="-150" rx="225" ry="225" width="1300" height="1300" |
| 96 |
style=" fill:url(#ssq-logo-gradient);" /> |
| 97 |
<!-- Mid Left --> |
| 98 |
<polyline points="162,322 500,500 340,575 0,400 162,322" |
| 99 |
style="fill:rgb(40,183,107);stroke:rgb(40,183,107);stroke-width:5;" /> |
| 100 |
<polyline points="500,500 500,650 340,575" |
| 101 |
style="fill:rgb(74,108,47);stroke:rgb(74,108,47);stroke-width:5;"/> |
| 102 |
<!-- Mid Right --> |
| 103 |
<polyline points="845,675 500,500, 650,425 1000,600 845,675" |
| 104 |
style="fill:rgb(40,183,107);stroke:rgb(40,183,107);stroke-width:5;" /> |
| 105 |
<polyline points="500,500, 500,350 650,425" |
| 106 |
style="fill:rgb(74,108,47);stroke:rgb(74,108,47);stroke-width:5; "/> |
| 107 |
<!-- TOP TOP CHEVRON TOP TOP --> |
| 108 |
<polyline points="500,0 1000,250, 1000,400 500,150 0,400 0,250 500,0" |
| 109 |
style="fill:rgb(207,223,218);stroke:rgb(207,223,218);stroke-width:5;"/> |
| 110 |
<!-- BOTTOM BOTTOM CHEVRON BOTTOM --> |
| 111 |
<polyline points="0,600 500,850 1000,600 1000,750 500,1000 0,750 0,600" |
| 112 |
style="fill:rgb(207,223,218);stroke:rgb(207,223,218);stroke-width:5;"/> |
| 113 |
</svg> |
| 114 |
</div> |
| 115 |
<div > |
| 116 |
<p class ="ssq-heading" style="padding-top: 60px;"><b>Scroll</b>sequence |
| 117 |
|
| 118 |
<?php |
| 119 |
echo 'Free' ; |
| 120 |
?> |
| 121 |
|
| 122 |
</p> |
| 123 |
<p>You are working with Beta version. Use with caution. Backup your work before updating.</p> |
| 124 |
</div> |
| 125 |
</div> |
| 126 |
|
| 127 |
|
| 128 |
|
| 129 |
|
| 130 |
|
| 131 |
|
| 132 |
|
| 133 |
|
| 134 |
|
| 135 |
|
| 136 |
|
| 137 |
<button class="tablink" onclick="openPage('GettingStarted', this, 'darkgrey')" id="defaultOpen"> Get Started</button> |
| 138 |
<!-- <button class="tablink" onclick="openPage('Settings', this, 'darkgrey')" style="width:18%"> Settings</button> --> |
| 139 |
|
| 140 |
|
| 141 |
<?php |
| 142 |
// CODE IN ELSE STATEMENT IS F R E E plan only |
| 143 |
?> |
| 144 |
<a href="<?php |
| 145 |
echo admin_url( 'admin.php?page=scrollsequence-pricing' ) ; |
| 146 |
?>"> |
| 147 |
<button class="tablink" style="width:20%">Get PRO</button> |
| 148 |
</a> |
| 149 |
<?php |
| 150 |
// END OF ELSE |
| 151 |
?> |
| 152 |
|
| 153 |
|
| 154 |
|
| 155 |
<a href="https://scrollsequence.com/examples/" class="menulink" target="_blank"> |
| 156 |
<button class="tablink" ><i aria-hidden="true" class="dashicons dashicons-external"></i>Examples</button> |
| 157 |
</a> |
| 158 |
|
| 159 |
<a href="https://scrollsequence.com/documentation/" class="menulink" target="_blank"> |
| 160 |
<button class="tablink" style="width:30%"><i aria-hidden="true" class="dashicons dashicons-external"></i>Documentation</button> |
| 161 |
</a> |
| 162 |
|
| 163 |
|
| 164 |
<div id="GettingStarted" class="tabcontent"> |
| 165 |
|
| 166 |
|
| 167 |
|
| 168 |
|
| 169 |
<p class ="ssq-heading">Getting Started is easy as one two three! </p> <br> |
| 170 |
|
| 171 |
<table class="form-table" > |
| 172 |
<tbody> |
| 173 |
<tr> |
| 174 |
<th scope="row"><label >Tutorial Video: </label></th> |
| 175 |
<td> |
| 176 |
|
| 177 |
<iframe src="https://player.vimeo.com/video/413362050" width="640" height="336" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe> |
| 178 |
</td> |
| 179 |
</tr> |
| 180 |
|
| 181 |
<tr> |
| 182 |
<th scope="row"><label >Create a new page: </label></th> |
| 183 |
<td> |
| 184 |
Click on <i><strong>(1) Add New Scrollsequence</strong></i>, set a <i><strong>(2) title</strong></i> name and <i><strong>(3) add page</strong></i>.<br><br> |
| 185 |
<img src="<?php |
| 186 |
echo plugin_dir_url( __FILE__ ) . '../img/add-new-scrollsequence-images.png' ; |
| 187 |
?>" width="640"> |
| 188 |
</td> |
| 189 |
</tr> |
| 190 |
|
| 191 |
<tr> |
| 192 |
<th scope="row"><label for="default_post_format">Select images: </label></th> |
| 193 |
<td> |
| 194 |
Click on <i><strong>(4) Select Images</strong></i> (5) confirm selection that you want to use. Hold down CTRL or SHIFT for multiple selection.<br> Take care about the order you select your images. After you made and confirmed your selection, you can easily drag and drop to reorder. <br><br> |
| 195 |
<img src="<?php |
| 196 |
echo plugin_dir_url( __FILE__ ) . '../img/select-images.png' ; |
| 197 |
?>" width="640"> |
| 198 |
<br><br> |
| 199 |
<img src="<?php |
| 200 |
echo plugin_dir_url( __FILE__ ) . '../img/add-content.png' ; |
| 201 |
?>" width="640"> |
| 202 |
</td> |
| 203 |
</tr> |
| 204 |
|
| 205 |
|
| 206 |
<th scope="row"><label for="default_post_format">Animate: </label></th> |
| 207 |
<td> |
| 208 |
Click on <i><strong>(6) Add Animation</strong></i>.The most basic is In/Out Animation.<br>Three basic parameters are required for each animated element. You can add more element animations with the little plus sign. <br> |
| 209 |
<img src="<?php |
| 210 |
echo plugin_dir_url( __FILE__ ) . '../img/animation.png' ; |
| 211 |
?>" width="640"> |
| 212 |
<br> |
| 213 |
<p>Selector example use: </p> |
| 214 |
|
| 215 |
<table class="widefat" style="width:640px;"> |
| 216 |
<thead> |
| 217 |
<tr> |
| 218 |
<th>Selector</th> |
| 219 |
<th>Description</th> |
| 220 |
|
| 221 |
</tr> |
| 222 |
</thead> |
| 223 |
<tbody> |
| 224 |
<tr> |
| 225 |
<td>#my-id</td> |
| 226 |
<td>Select a HTML element with id="my-id". Id's should be unique. This means that only one HTML element can have the same id. </td> |
| 227 |
</tr> |
| 228 |
</tbody> |
| 229 |
<tbody> |
| 230 |
<tr> |
| 231 |
<td>.my-class</td> |
| 232 |
<td>Select each HTML element with class="my-class". Multiple elements can have same class attribute. </td> |
| 233 |
</tr> |
| 234 |
</tbody> |
| 235 |
</table> |
| 236 |
<br> |
| 237 |
Start and End example use: |
| 238 |
<table class="widefat" style="width:640px;"> |
| 239 |
<thead> |
| 240 |
<tr> |
| 241 |
<th> |
| 242 |
<div style="width:70%"><p style="text-align:left;">Start<span style="float:right;">End</span></p><div> |
| 243 |
</th> |
| 244 |
<th>Description</th> |
| 245 |
</tr> |
| 246 |
</thead> |
| 247 |
<tbody> |
| 248 |
<tr> |
| 249 |
<td> |
| 250 |
<div style="width:70%"><p style="text-align:left;">0<span style="float:right;">15</span></p><div> |
| 251 |
</td> |
| 252 |
<td>Element is visible when page is loaded. Once user starts scrolling down, element is hidden once user reaches the fiteenth image.</td> |
| 253 |
</tr> |
| 254 |
</tbody> |
| 255 |
<tbody> |
| 256 |
<tr> |
| 257 |
<td> |
| 258 |
<div style="width:70%"><p style="text-align:left;">5<span style="float:right;">30</span></p><div> |
| 259 |
</td> |
| 260 |
<td>Element is hidden when page is loaded. Once user starts scrolling down, element is displayed from 5th to 30th image in the sequence. </td> |
| 261 |
</tr> |
| 262 |
</tbody> |
| 263 |
</table> |
| 264 |
|
| 265 |
|
| 266 |
|
| 267 |
|
| 268 |
</td> |
| 269 |
</tr> |
| 270 |
</tbody></table> |
| 271 |
|
| 272 |
<p style="padding-top: 45px;" class ="ssq-heading">Tips and Tricks </p> <br> |
| 273 |
|
| 274 |
<table class="form-table" > |
| 275 |
<tbody> |
| 276 |
<tr> |
| 277 |
<th scope="row"><label >Basic Use: </label></th> |
| 278 |
<td> |
| 279 |
<ul style=" list-style-type: circle; padding-left: 50px"> |
| 280 |
<li>Add another page to the sequence. Each page contains image sequence, content and setting like duration, alignment and scale. Pages can be re-ordered by drag and drop. If you wish you can make a copy of a similar page.</li> |
| 281 |
<li>Add "Classic content" after the sequence. This section will allow you to add information after the animated sequence.</li> |
| 282 |
<li>Change background. As a default the content has transparent background. You can pick your own background color if required.</li> |
| 283 |
|
| 284 |
</ul> |
| 285 |
</td> |
| 286 |
</tr> |
| 287 |
<tr> |
| 288 |
<th scope="row"><label >Advanced Use: </label></th> |
| 289 |
<td> |
| 290 |
<ul style=" list-style-type: circle; padding-left: 50px"> |
| 291 |
<li>Custom CSS is a great way how to add a magic touch to your design. Simply write or paste CSS code.</li> |
| 292 |
<li>Read our <a href="https://scrollsequence.com/documentation/" target="_blank">documentation</a>, learn the basics, have a look at some examples and get inspiration for your project. </li> |
| 293 |
<li>Debug mode gives you information when you fall into trouble. If you stumble upon an issue, don't hesitate and <a href="<?php |
| 294 |
echo admin_url( 'admin.php?page=scrollsequence-contact' ) ; |
| 295 |
?>">contact us</a>.</li> |
| 296 |
</ul> |
| 297 |
</td> |
| 298 |
</tr> |
| 299 |
|
| 300 |
|
| 301 |
|
| 302 |
|
| 303 |
|
| 304 |
</div> |
| 305 |
|
| 306 |
<div id="Settings" class="tabcontent"> |
| 307 |
<p>Settings</p> |
| 308 |
<p><strong>Show tips </strong></p> |
| 309 |
<p>Image optimisation (coming soon)</p> |
| 310 |
<p>Image sizing for desktop/mobile (coming soon)</p> |
| 311 |
<p>Custom CSS (coming soon)</p> |
| 312 |
<p>Custom Javascript (coming soon)</p> |
| 313 |
<p>Preloading options (coming soon)</p> |
| 314 |
<p>Animation settings (coming soon)</p> |
| 315 |
<p>Debug console</p> |
| 316 |
</div> |
| 317 |
|
| 318 |
<!-- <div id="GetPro" class="tabcontent"> |
| 319 |
<h3>GetPro</h3> |
| 320 |
<p>There is a Scrollsequence PRO version coming soon. It will become available as soon as Beta testing is over. Keep an eye on this section. </p> |
| 321 |
</div> --> |
| 322 |
|
| 323 |
<!-- <div id="Contact" class="tabcontent"> |
| 324 |
<h3>Contact</h3> |
| 325 |
<p>Get in touch, or swing by for a cup of coffee.</p> |
| 326 |
</div> --> |
| 327 |
|
| 328 |
<!-- <div id="About" class="tabcontent"> |
| 329 |
<h3>About</h3> |
| 330 |
<p>Who we are and what we do.</p> |
| 331 |
</div> --> |
| 332 |
|
| 333 |
|
| 334 |
<script> |
| 335 |
function openPage(pageName,elmnt,color) { |
| 336 |
var i, tabcontent, tablinks; |
| 337 |
tabcontent = document.getElementsByClassName("tabcontent"); |
| 338 |
for (i = 0; i < tabcontent.length; i++) { |
| 339 |
tabcontent[i].style.display = "none"; |
| 340 |
} |
| 341 |
tablinks = document.getElementsByClassName("tablink"); |
| 342 |
for (i = 0; i < tablinks.length; i++) { |
| 343 |
tablinks[i].style.backgroundColor = ""; |
| 344 |
} |
| 345 |
document.getElementById(pageName).style.display = "block"; |
| 346 |
elmnt.style.backgroundColor = color; |
| 347 |
} |
| 348 |
|
| 349 |
// Get the element with id="defaultOpen" and click on it |
| 350 |
document.getElementById("defaultOpen").click(); |
| 351 |
</script> |
| 352 |
|
| 353 |
|
| 354 |
|
| 355 |
|
| 356 |
|
| 357 |
</div> |
| 358 |
|
