| 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 |
<style> |
| 16 |
.ssq-heading{ |
| 17 |
font-size:23px; |
| 18 |
font-weight: 400; |
| 19 |
padding: 9px 0 4px 0; |
| 20 |
line-height: 1.3; |
| 21 |
} |
| 22 |
.nav-tab-active{ |
| 23 |
background-color:white; |
| 24 |
} |
| 25 |
.nav-tab-active, .nav-tab-active:focus, .nav-tab-active:focus:active, .nav-tab-active:hover{ |
| 26 |
border-bottom:1px solid white; |
| 27 |
} |
| 28 |
.nodeco { |
| 29 |
text-decoration: none; |
| 30 |
} |
| 31 |
</style> |
| 32 |
<!-- Create the default WordPress 'wrap' container --> |
| 33 |
<div class="wrap scrollsequence-admin-wrap"> |
| 34 |
<!-- Admin Notices Display --> |
| 35 |
<?php |
| 36 |
settings_errors(); |
| 37 |
?><h2></h2> |
| 38 |
|
| 39 |
<div class="ssq-welcome" style="height:225px" > |
| 40 |
<div style=" padding: 30px; width: 150px; float:left; "> |
| 41 |
<svg width="128" height="128" viewBox="-150 -150 1300 1300"> |
| 42 |
<defs> |
| 43 |
<linearGradient id="ssq-logo-gradient" x1="0%" y1="50%" x2="100%" y2="0%"> |
| 44 |
<stop offset="0%" style="stop-color:rgb(23,48,66);stop-opacity:1" /> |
| 45 |
<stop offset="100%" style="stop-color:rgb(35,110,119);stop-opacity:1" /> |
| 46 |
</linearGradient> |
| 47 |
</defs> |
| 48 |
<!-- Background --> |
| 49 |
<rect x="-150" y="-150" rx="225" ry="225" width="1300" height="1300" |
| 50 |
style=" fill:url(#ssq-logo-gradient);" /> |
| 51 |
<!-- Mid Left --> |
| 52 |
<polyline points="162,322 500,500 340,575 0,400 162,322" |
| 53 |
style="fill:rgb(40,183,107);stroke:rgb(40,183,107);stroke-width:5;" /> |
| 54 |
<polyline points="500,500 500,650 340,575" |
| 55 |
style="fill:rgb(74,108,47);stroke:rgb(74,108,47);stroke-width:5;"/> |
| 56 |
<!-- Mid Right --> |
| 57 |
<polyline points="845,675 500,500, 650,425 1000,600 845,675" |
| 58 |
style="fill:rgb(40,183,107);stroke:rgb(40,183,107);stroke-width:5;" /> |
| 59 |
<polyline points="500,500, 500,350 650,425" |
| 60 |
style="fill:rgb(74,108,47);stroke:rgb(74,108,47);stroke-width:5; "/> |
| 61 |
<!-- TOP TOP CHEVRON TOP TOP --> |
| 62 |
<polyline points="500,0 1000,250, 1000,400 500,150 0,400 0,250 500,0" |
| 63 |
style="fill:rgb(207,223,218);stroke:rgb(207,223,218);stroke-width:5;"/> |
| 64 |
<!-- BOTTOM BOTTOM CHEVRON BOTTOM --> |
| 65 |
<polyline points="0,600 500,850 1000,600 1000,750 500,1000 0,750 0,600" |
| 66 |
style="fill:rgb(207,223,218);stroke:rgb(207,223,218);stroke-width:5;"/> |
| 67 |
</svg> |
| 68 |
</div> |
| 69 |
<div style="position:relative"> |
| 70 |
|
| 71 |
<p class ="ssq-heading" style="padding-top: 60px;"><b>Scroll</b>sequence |
| 72 |
<?php |
| 73 |
echo 'Free'; |
| 74 |
?> |
| 75 |
</p> |
| 76 |
<p><?php |
| 77 |
/*_e( 'You are working with Beta version. Use with caution. Backup your work before updating.', 'scrollsequence' ); */ |
| 78 |
?></p> |
| 79 |
<div style="position:absolute;right:20px;top:20px;"> |
| 80 |
<span style="margin-right:20px"><?php |
| 81 |
echo SCROLLSEQUENCE_VERSION; |
| 82 |
?> </span> |
| 83 |
<a href="https://www.youtube.com/channel/UCfS4p0R5ZYr4GTQ9DIBbEgg"><span class="nodeco dashicons dashicons-youtube" style="color:#FF0000;"></span></a> |
| 84 |
<a href="https://www.facebook.com/scrollsequence"><span class="nodeco dashicons dashicons-facebook" style="color:#4267B2;"></span></a> |
| 85 |
<a href="https://twitter.com/scrollsequence"><span class="nodeco dashicons dashicons-twitter" style="color:#1DA1F2;"></span></a> |
| 86 |
<a href="https://www.instagram.com/scrollsequence/"><span class="nodeco dashicons dashicons-instagram" style="color:#fb3958;"></span></a> |
| 87 |
<!-- <a href="https://www.facebook.com/scrollsequence"><span class="nodeco dashicons dashicons-facebook"></span></a> --> |
| 88 |
</div> |
| 89 |
</div> |
| 90 |
</div><!-- /.ssq-welcome --> |
| 91 |
|
| 92 |
|
| 93 |
|
| 94 |
<?php |
| 95 |
/* |
| 96 |
Inspiration taken from: |
| 97 |
https://code.tutsplus.com/tutorials/the-wordpress-settings-api-part-5-tabbed-navigation-for-settings--wp-24971 |
| 98 |
*/ |
| 99 |
?> |
| 100 |
|
| 101 |
<!-- Create Tabs Menu --> |
| 102 |
|
| 103 |
|
| 104 |
<?php |
| 105 |
$active_tab = ( isset( $_GET['tab'] ) ? $_GET['tab'] : 'get_started' ); |
| 106 |
// set the default tab here |
| 107 |
if ( isset( $_GET['tab'] ) ) { |
| 108 |
$active_tab = $_GET['tab']; |
| 109 |
} |
| 110 |
// end if |
| 111 |
?> |
| 112 |
|
| 113 |
<h2 class="nav-tab-wrapper" style="position:relative; top:-45px"> |
| 114 |
<!-- Internal Links --> |
| 115 |
<a href="?page=scrollsequence-dashboard&tab=get_started" class="nav-tab <?php |
| 116 |
echo ( $active_tab == 'get_started' ? 'nav-tab-active' : '' ); |
| 117 |
?>"> |
| 118 |
<i aria-hidden="true" class="dashicons dashicons-welcome-learn-more" ></i> |
| 119 |
<?php |
| 120 |
_e( 'Get Started', 'scrollsequence' ); |
| 121 |
?> |
| 122 |
</a> |
| 123 |
<a href="?page=scrollsequence-dashboard&tab=media-tools" class="nav-tab <?php |
| 124 |
echo ( $active_tab == 'media-tools' ? 'nav-tab-active' : '' ); |
| 125 |
?>"> |
| 126 |
<i aria-hidden="true" class="dashicons dashicons-editor-video" ></i> |
| 127 |
<?php |
| 128 |
_e( 'Media Tools', 'scrollsequence' ); |
| 129 |
?> |
| 130 |
</a> |
| 131 |
<a href="?page=scrollsequence-dashboard&tab=options" class="nav-tab <?php |
| 132 |
echo ( $active_tab == 'options' ? 'nav-tab-active' : '' ); |
| 133 |
?>"> |
| 134 |
<i aria-hidden="true" class="dashicons dashicons-admin-generic" ></i> |
| 135 |
<?php |
| 136 |
_e( 'Options', 'scrollsequence' ); |
| 137 |
?> |
| 138 |
</a> |
| 139 |
|
| 140 |
<!-- Upgrade Link (shown only on Free) --> |
| 141 |
<?php |
| 142 |
?> |
| 143 |
<a href="<?php |
| 144 |
echo admin_url( 'admin.php?page=scrollsequence-pricing' ); |
| 145 |
?>" class="nav-tab"> |
| 146 |
<i aria-hidden="true" class="dashicons dashicons-cart" style="color:rgb(40,183,107);"></i> |
| 147 |
<?php |
| 148 |
_e( 'Upgrade', 'scrollsequence' ); |
| 149 |
?> |
| 150 |
</a> |
| 151 |
<?php |
| 152 |
// end of else |
| 153 |
?> |
| 154 |
<!-- External Links --> |
| 155 |
<a href="https://scrollsequence.com/examples/?utm_source=plugin&utm_medium=<?php |
| 156 |
echo getenv( 'HTTP_HOST' ); |
| 157 |
?>&utm_campaign=dashboard" class="nav-tab" target="_blank"> |
| 158 |
<i aria-hidden="true" class="dashicons dashicons-external" ></i> |
| 159 |
<?php |
| 160 |
_e( 'Examples', 'scrollsequence' ); |
| 161 |
?> |
| 162 |
</a> |
| 163 |
<a href="https://scrollsequence.com/documentation/?utm_source=plugin&utm_medium=<?php |
| 164 |
echo getenv( 'HTTP_HOST' ); |
| 165 |
?>&utm_campaign=dashboard" class="nav-tab" target="_blank"> |
| 166 |
<i aria-hidden="true" class="dashicons dashicons-external"></i> |
| 167 |
<?php |
| 168 |
_e( 'Docs', 'scrollsequence' ); |
| 169 |
?> |
| 170 |
</a> |
| 171 |
|
| 172 |
<a href="https://help.scrollsequence.com/?utm_source=plugin&utm_medium=<?php |
| 173 |
echo getenv( 'HTTP_HOST' ); |
| 174 |
?>&utm_campaign=dashboard" class="nav-tab" target="_blank"> |
| 175 |
<i aria-hidden="true" class="dashicons dashicons-external"></i> |
| 176 |
<?php |
| 177 |
_e( 'Knowledge Base', 'scrollsequence' ); |
| 178 |
?> |
| 179 |
</a> |
| 180 |
|
| 181 |
|
| 182 |
</h2> |
| 183 |
|
| 184 |
<!-- TAB CONTENTS ARE CREATED HERE --> |
| 185 |
<div id="GettingStarted" style="padding: 45px 20px; height: 100%; border: 1px solid #ccd0d4; border-top:0; margin-top:-45px; background-color:white"> |
| 186 |
<?php |
| 187 |
if ( $active_tab == 'get_started' ) { |
| 188 |
require_once "scrollsequence-admin-display-get-started.php"; |
| 189 |
} elseif ( $active_tab == 'media-tools' ) { |
| 190 |
require_once "scrollsequence-admin-display-media-tools.php"; |
| 191 |
} elseif ( $active_tab == 'options' ) { |
| 192 |
require_once "scrollsequence-admin-display-options.php"; |
| 193 |
} else { |
| 194 |
echo '<h1>Error: Tab does not exist.</h1>'; |
| 195 |
} |
| 196 |
// end if/else |
| 197 |
?> |
| 198 |
</div> |
| 199 |
|
| 200 |
</div><!-- /.wrap --> |
