| 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 |
<?php |
| 169 |
// FREE START |
| 170 |
?> |
| 171 |
|
| 172 |
|
| 173 |
<table class="form-table" > |
| 174 |
<tbody> |
| 175 |
<tr> |
| 176 |
<th scope="row"><labe ></label></th> |
| 177 |
<td> |
| 178 |
|
| 179 |
<p class ="ssq-heading" style="width:640px; text-align: center; border:1px solid black" ><br><strong>For limited time only we offer a trial period of PRO version. |
| 180 |
<br>No credit card, no risk. Grab yours while they last!</strong><br><br> |
| 181 |
<a class="button button-primary button-hero" href="<?php |
| 182 |
echo admin_url( 'admin.php?page=scrollsequence-pricing&trial=true' ) ; |
| 183 |
?>">14 DAYS FREE TRIAL</a> |
| 184 |
<br><br><br> |
| 185 |
</p> |
| 186 |
<p> </p> |
| 187 |
|
| 188 |
</td> |
| 189 |
</tr> |
| 190 |
</tbody> |
| 191 |
</table> |
| 192 |
|
| 193 |
|
| 194 |
<?php |
| 195 |
// FREE END |
| 196 |
?> |
| 197 |
|
| 198 |
|
| 199 |
|
| 200 |
|
| 201 |
|
| 202 |
|
| 203 |
<p class ="ssq-heading">Getting Started is easy as one two three! </p> <br> |
| 204 |
<table class="form-table" > |
| 205 |
<tbody> |
| 206 |
<tr> |
| 207 |
<th scope="row"><label >Tutorial Video: </label></th> |
| 208 |
<td> |
| 209 |
|
| 210 |
<iframe src="https://player.vimeo.com/video/413362050" width="640" height="336" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe> |
| 211 |
</td> |
| 212 |
</tr> |
| 213 |
|
| 214 |
<tr> |
| 215 |
<th scope="row"><label >Create a new page: </label></th> |
| 216 |
<td> |
| 217 |
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> |
| 218 |
<img src="<?php |
| 219 |
echo plugin_dir_url( __FILE__ ) . '../img/add-new-scrollsequence-images.png' ; |
| 220 |
?>" width="640"> |
| 221 |
</td> |
| 222 |
</tr> |
| 223 |
|
| 224 |
<tr> |
| 225 |
<th scope="row"><label for="default_post_format">Select images: </label></th> |
| 226 |
<td> |
| 227 |
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> |
| 228 |
<img src="<?php |
| 229 |
echo plugin_dir_url( __FILE__ ) . '../img/select-images.png' ; |
| 230 |
?>" width="640"> |
| 231 |
<br><br> |
| 232 |
<img src="<?php |
| 233 |
echo plugin_dir_url( __FILE__ ) . '../img/add-content.png' ; |
| 234 |
?>" width="640"> |
| 235 |
</td> |
| 236 |
</tr> |
| 237 |
|
| 238 |
|
| 239 |
<th scope="row"><label for="default_post_format">Create Page Content: </label></th> |
| 240 |
<td> |
| 241 |
Standard TinyMCE editor is being used for writing the content. It's the most advanced editor on the market. Supports shortcodes, oEmbed and many other features. <br>HTML content is made up of elements. Each element can have one unique <b>ID</b> and multiple <b>class</b>es.<br><br> |
| 242 |
<img src="<?php |
| 243 |
echo plugin_dir_url( __FILE__ ) . '../img/add-page-content.png' ; |
| 244 |
?>" width="640"> |
| 245 |
<br> |
| 246 |
<b>Class</b>es and <b>ID</b>'s are used as selectors for on scroll animation, details are described in paragraphs below. <br><br> |
| 247 |
</td> |
| 248 |
</tr> |
| 249 |
|
| 250 |
<th scope="row"><label for="default_post_format">Animate: </label></th> |
| 251 |
<td> |
| 252 |
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> |
| 253 |
<img src="<?php |
| 254 |
echo plugin_dir_url( __FILE__ ) . '../img/animation.png' ; |
| 255 |
?>" width="640"> |
| 256 |
<br> |
| 257 |
<p>Selector example use: </p> |
| 258 |
|
| 259 |
<table class="widefat" style="width:640px;"> |
| 260 |
<thead> |
| 261 |
<tr> |
| 262 |
<th>Selector</th> |
| 263 |
<th>Description</th> |
| 264 |
|
| 265 |
</tr> |
| 266 |
</thead> |
| 267 |
<tbody> |
| 268 |
<tr> |
| 269 |
<td>#my-id</td> |
| 270 |
<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> |
| 271 |
</tr> |
| 272 |
</tbody> |
| 273 |
<tbody> |
| 274 |
<tr> |
| 275 |
<td>.my-class</td> |
| 276 |
<td>Select each HTML element with class="my-class". Multiple elements can have same class attribute. </td> |
| 277 |
</tr> |
| 278 |
</tbody> |
| 279 |
</table> |
| 280 |
<br> |
| 281 |
Start and End example use: |
| 282 |
<table class="widefat" style="width:640px;"> |
| 283 |
<thead> |
| 284 |
<tr> |
| 285 |
<th> |
| 286 |
<div style="width:70%"><p style="text-align:left;">Start<span style="float:right;">End</span></p><div> |
| 287 |
</th> |
| 288 |
<th>Description</th> |
| 289 |
</tr> |
| 290 |
</thead> |
| 291 |
<tbody> |
| 292 |
<tr> |
| 293 |
<td> |
| 294 |
<div style="width:70%"><p style="text-align:left;">0<span style="float:right;">15</span></p><div> |
| 295 |
</td> |
| 296 |
<td>Element is visible when page is loaded. Once user starts scrolling down, element is hidden once user reaches the fiteenth image.</td> |
| 297 |
</tr> |
| 298 |
</tbody> |
| 299 |
<tbody> |
| 300 |
<tr> |
| 301 |
<td> |
| 302 |
<div style="width:70%"><p style="text-align:left;">5<span style="float:right;">30</span></p><div> |
| 303 |
</td> |
| 304 |
<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> |
| 305 |
</tr> |
| 306 |
</tbody> |
| 307 |
</table> |
| 308 |
|
| 309 |
|
| 310 |
|
| 311 |
|
| 312 |
</td> |
| 313 |
</tr> |
| 314 |
</tbody></table> |
| 315 |
|
| 316 |
<p style="padding-top: 45px;" class ="ssq-heading">Tips and Tricks </p> <br> |
| 317 |
|
| 318 |
<table class="form-table" > |
| 319 |
<tbody> |
| 320 |
<tr> |
| 321 |
<th scope="row"><label >Basic Use: </label></th> |
| 322 |
<td> |
| 323 |
<ul style=" list-style-type: circle; padding-left: 50px"> |
| 324 |
<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> |
| 325 |
<li>Add [scrollsequence] shortcode to control position of the image animation in the content. Margintop, marginbottom shortcode options give you control of the margins. Use negative margin to overlap with classic content before or after the animation. Example [scrollsequence id="####" margintop="-200px"]</li> |
| 326 |
|
| 327 |
</ul> |
| 328 |
</td> |
| 329 |
</tr> |
| 330 |
<tr> |
| 331 |
<th scope="row"><label >Advanced Use: </label></th> |
| 332 |
<td> |
| 333 |
<ul style=" list-style-type: circle; padding-left: 50px"> |
| 334 |
<li>Custom CSS is a great way how to add a magic touch to your design. Simply write or paste CSS code.</li> |
| 335 |
<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> |
| 336 |
<li>Debug mode gives you information when you fall into trouble. If you stumble upon an issue, don't hesitate and <a href="<?php |
| 337 |
echo admin_url( 'admin.php?page=scrollsequence-contact' ) ; |
| 338 |
?>">contact us</a>.</li> |
| 339 |
</ul> |
| 340 |
</td> |
| 341 |
</tr> |
| 342 |
|
| 343 |
|
| 344 |
|
| 345 |
|
| 346 |
|
| 347 |
</div> |
| 348 |
|
| 349 |
<div id="Settings" class="tabcontent"> |
| 350 |
<p>Settings</p> |
| 351 |
<p><strong>Show tips </strong></p> |
| 352 |
<p>Image optimisation (coming soon)</p> |
| 353 |
<p>Image sizing for desktop/mobile (coming soon)</p> |
| 354 |
<p>Custom CSS (coming soon)</p> |
| 355 |
<p>Custom Javascript (coming soon)</p> |
| 356 |
<p>Preloading options (coming soon)</p> |
| 357 |
<p>Animation settings (coming soon)</p> |
| 358 |
<p>Debug console</p> |
| 359 |
</div> |
| 360 |
|
| 361 |
<!-- <div id="GetPro" class="tabcontent"> |
| 362 |
<h3>GetPro</h3> |
| 363 |
<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> |
| 364 |
</div> --> |
| 365 |
|
| 366 |
<!-- <div id="Contact" class="tabcontent"> |
| 367 |
<h3>Contact</h3> |
| 368 |
<p>Get in touch, or swing by for a cup of coffee.</p> |
| 369 |
</div> --> |
| 370 |
|
| 371 |
<!-- <div id="About" class="tabcontent"> |
| 372 |
<h3>About</h3> |
| 373 |
<p>Who we are and what we do.</p> |
| 374 |
</div> --> |
| 375 |
|
| 376 |
|
| 377 |
<script> |
| 378 |
function openPage(pageName,elmnt,color) { |
| 379 |
var i, tabcontent, tablinks; |
| 380 |
tabcontent = document.getElementsByClassName("tabcontent"); |
| 381 |
for (i = 0; i < tabcontent.length; i++) { |
| 382 |
tabcontent[i].style.display = "none"; |
| 383 |
} |
| 384 |
tablinks = document.getElementsByClassName("tablink"); |
| 385 |
for (i = 0; i < tablinks.length; i++) { |
| 386 |
tablinks[i].style.backgroundColor = ""; |
| 387 |
} |
| 388 |
document.getElementById(pageName).style.display = "block"; |
| 389 |
elmnt.style.backgroundColor = color; |
| 390 |
} |
| 391 |
|
| 392 |
// Get the element with id="defaultOpen" and click on it |
| 393 |
document.getElementById("defaultOpen").click(); |
| 394 |
</script> |
| 395 |
|
| 396 |
|
| 397 |
|
| 398 |
|
| 399 |
|
| 400 |
</div> |
| 401 |
|
