mirror of
https://github.com/WenPai-org/wpnav-links.git
synced 2025-08-04 20:08:59 +08:00
调整目录结构
This commit is contained in:
文派备案
parent
5c4a7cdeac
commit
10a07c42a0
15 changed files with 27 additions and 23 deletions
925
assets/css/admin.css
Normal file
925
assets/css/admin.css
Normal file
|
|
@ -0,0 +1,925 @@
|
|||
.card {
|
||||
background: #fff;
|
||||
border: 1px solid #c3c4c7;
|
||||
border-radius: 4px;
|
||||
max-width: unset;
|
||||
margin-top: 20px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 1px 1px rgba(0,0,0,0.04);
|
||||
}
|
||||
|
||||
.card h2 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 15px;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
padding-bottom: 10px;
|
||||
color: #23282d;
|
||||
}
|
||||
|
||||
.card p {
|
||||
color: #50575e;
|
||||
}
|
||||
|
||||
.wpnav-tabs {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 5px;
|
||||
border-bottom: 1px solid #c3c4c7;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.wpnav-tab {
|
||||
padding: 8px 16px;
|
||||
border: none;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
border-bottom: 2px solid transparent;
|
||||
color: #646970;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.wpnav-tab:hover:not(.active) {
|
||||
background: #f0f0f1;
|
||||
border-bottom-color: #dcdcde;
|
||||
color: #1d2327;
|
||||
}
|
||||
|
||||
.wpnav-tab.active {
|
||||
border-bottom: 2px solid #0073aa;
|
||||
font-weight: 600;
|
||||
background: #f0f0f1;
|
||||
color: #1d2327;
|
||||
}
|
||||
|
||||
.wpnav-tab:focus {
|
||||
outline: 2px solid #0073aa;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
.wpnav-tab-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.wpnav-tab-section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.wpnav-section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.wpnav-section-header h3 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #23282d;
|
||||
}
|
||||
|
||||
.wpnav-section-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.wpnav-info-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.wpnav-info-item {
|
||||
background: #f9f9f9;
|
||||
border: 1px solid #e5e5e5;
|
||||
border-radius: 4px;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.wpnav-info-item h3,
|
||||
.wpnav-info-item h4 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 10px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #23282d;
|
||||
}
|
||||
|
||||
.wpnav-export-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.wpnav-export-item {
|
||||
background: #f6f7f7;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
padding: 20px;
|
||||
margin-top: 20px;
|
||||
box-shadow: 0 1px 1px rgba(0,0,0,0.04);
|
||||
}
|
||||
|
||||
.wpnav-export-item h2 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 15px;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
border-bottom: 1px solid #ddd;
|
||||
padding-bottom: 10px;
|
||||
color: #23282d;
|
||||
}
|
||||
|
||||
.wpnav-export-item p {
|
||||
font-size: 13px;
|
||||
color: #50575e;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.wpnav-notice {
|
||||
padding: 8px 12px;
|
||||
border-radius: 3px;
|
||||
margin: 10px 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.wpnav-notice-success {
|
||||
background-color: #d1e7dd;
|
||||
border: 1px solid #badbcc;
|
||||
color: #0f5132;
|
||||
}
|
||||
|
||||
.wpnav-notice-error {
|
||||
background-color: #f8d7da;
|
||||
border: 1px solid #f5c2c7;
|
||||
color: #842029;
|
||||
}
|
||||
|
||||
.wpnav-auto-rules {
|
||||
margin-top: 20px;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.wpnav-auto-rules h4 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 15px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #23282d;
|
||||
}
|
||||
|
||||
.wpnav-auto-rules .wp-list-table td {
|
||||
padding: 15px 12px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.wpnav-auto-rules label {
|
||||
font-weight: 600;
|
||||
margin-bottom: 5px;
|
||||
display: block;
|
||||
color: #23282d;
|
||||
}
|
||||
|
||||
.wpnav-auto-rules .description {
|
||||
margin-top: 5px;
|
||||
font-size: 13px;
|
||||
color: #50575e;
|
||||
}
|
||||
|
||||
.wpnav-quick-domains {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.wpnav-quick-domains .button-small {
|
||||
font-size: 12px;
|
||||
padding: 4px 10px;
|
||||
height: auto;
|
||||
line-height: 1.4;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.wpnav-stats-overview {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
margin: 20px 0;
|
||||
padding: 15px;
|
||||
background: #f8f9fa;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.wpnav-stat-item {
|
||||
text-align: center;
|
||||
flex: 1;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.wpnav-stat-number {
|
||||
display: block;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #495057;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.wpnav-stat-label {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: #6c757d;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.wpnav-url-link {
|
||||
color: #0073aa;
|
||||
text-decoration: none;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.wpnav-url-link:hover {
|
||||
color: #005a87;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.wpnav-url-link .dashicons {
|
||||
opacity: 0.6;
|
||||
margin-left: 3px;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.wpnav-url-link:hover .dashicons {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.wpnav-no-data,
|
||||
.wpnav-no-data-message {
|
||||
color: #50575e;
|
||||
font-style: italic;
|
||||
text-align: center;
|
||||
padding: 30px 20px;
|
||||
}
|
||||
|
||||
.wpnav-no-data-message p {
|
||||
margin: 8px 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.wpnav-no-data-message .description {
|
||||
font-size: 13px;
|
||||
color: #8c8f94;
|
||||
}
|
||||
|
||||
.wpnav-https-badge {
|
||||
display: inline-block;
|
||||
padding: 2px 8px;
|
||||
border-radius: 12px;
|
||||
color: white;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
min-width: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.wpnav-https-badge.secure {
|
||||
background-color: #00a32a;
|
||||
}
|
||||
|
||||
.wpnav-https-badge.insecure {
|
||||
background-color: #d63638;
|
||||
}
|
||||
|
||||
.wpnav-top-links {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.wpnav-top-link-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 5px 0;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.wpnav-top-link-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.wpnav-rank {
|
||||
font-weight: 700;
|
||||
color: #0073aa;
|
||||
margin-right: 12px;
|
||||
min-width: 30px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.wpnav-link-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.wpnav-link-title {
|
||||
display: block;
|
||||
color: #0073aa;
|
||||
text-decoration: none;
|
||||
font-size: 13px;
|
||||
margin-bottom: 3px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.wpnav-link-title:hover {
|
||||
color: #005a87;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.wpnav-click-count {
|
||||
font-size: 11px;
|
||||
color: #50575e;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.column-target-url { width: 30%; }
|
||||
.column-source-page { width: 25%; }
|
||||
.column-click-time { width: 15%; }
|
||||
.column-ip-address { width: 15%; }
|
||||
.column-https-status { width: 15%; }
|
||||
|
||||
.wp-list-table tbody tr:hover,
|
||||
.wpnav-row-hover {
|
||||
background-color: #f6f7f7;
|
||||
}
|
||||
|
||||
.button-small {
|
||||
font-size: 12px;
|
||||
padding: 6px 10px;
|
||||
line-height: 1.4;
|
||||
height: auto;
|
||||
border-radius: 3px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.button-small:hover {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.wp-list-table.fixed {
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
.wp-list-table th:first-child {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.wp-list-table td code {
|
||||
background: #f1f1f1;
|
||||
padding: 3px 6px;
|
||||
border-radius: 3px;
|
||||
font-family: Consolas, Monaco, monospace;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.form-table th {
|
||||
font-weight: 600;
|
||||
color: #23282d;
|
||||
}
|
||||
|
||||
.form-table td .description {
|
||||
font-size: 13px;
|
||||
color: #50575e;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.form-table input[type="number"],
|
||||
.form-table select {
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
.wpnav-redirect-preview {
|
||||
border: 2px solid #ddd;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
background: #919191;
|
||||
margin-top: 20px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background-image: url(../icons/i-like-food.svg);
|
||||
background-position: left top;
|
||||
background-size: auto;
|
||||
background-repeat: repeat;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
.wpnav-redirect-preview::before {
|
||||
content: "Preview";
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 15px;
|
||||
background: #0073aa;
|
||||
color: white;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.preview-container {
|
||||
padding: 20px;
|
||||
border-radius: 12px;
|
||||
min-height: 400px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transform: scale(0.8);
|
||||
transform-origin: center;
|
||||
transition: all 0.3s ease;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.preview-container .wpnav-container {
|
||||
max-width: 400px;
|
||||
width: 100%;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(20px);
|
||||
border-radius: 16px;
|
||||
padding: 30px;
|
||||
text-align: center;
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.preview-container .wpnav-container.wpnav-simple {
|
||||
max-width: 320px;
|
||||
padding: 25px;
|
||||
}
|
||||
|
||||
.preview-container .wpnav-container.wpnav-minimal {
|
||||
max-width: 360px;
|
||||
padding: 28px;
|
||||
}
|
||||
|
||||
.preview-container .wpnav-container.wpnav-full {
|
||||
max-width: 480px;
|
||||
padding: 35px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.preview-container .wpnav-container.wpnav-default {
|
||||
max-width: 400px;
|
||||
padding: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.preview-container .wpnav-title {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
margin: 0 0 15px;
|
||||
color: #2c3e50;
|
||||
transition: font-size 0.3s ease;
|
||||
}
|
||||
|
||||
.preview-container .wpnav-simple .wpnav-title {
|
||||
font-size: 20px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.preview-container .wpnav-minimal .wpnav-title {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.preview-container .wpnav-full .wpnav-title {
|
||||
font-size: 28px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.preview-container .wpnav-default .wpnav-title {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.preview-container .wpnav-subtitle {
|
||||
font-size: 14px;
|
||||
color: #7f8c8d;
|
||||
margin: 5px 0 20px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.preview-container .wpnav-warning {
|
||||
background: #fff3cd;
|
||||
border: 1px solid #f39c12;
|
||||
border-radius: 8px;
|
||||
padding: 15px;
|
||||
margin: 20px 0;
|
||||
color: #8b4513;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.preview-container .wpnav-url-container {
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
.preview-container .wpnav-url-label {
|
||||
font-size: 12px;
|
||||
color: #7f8c8d;
|
||||
margin-bottom: 8px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.preview-container .wpnav-url {
|
||||
background: #f8f9fa;
|
||||
border: 2px solid #e9ecef;
|
||||
border-radius: 8px;
|
||||
padding: 15px;
|
||||
margin: 10px 0;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.preview-container .wpnav-simple .wpnav-url {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.preview-container .wpnav-url-domain {
|
||||
font-weight: 700;
|
||||
color: #2c3e50;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.preview-container .wpnav-simple .wpnav-url-domain {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.preview-container .wpnav-url-full {
|
||||
font-size: 11px;
|
||||
color: #95a5a6;
|
||||
margin-top: 8px;
|
||||
font-family: 'Monaco', 'Consolas', monospace;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.preview-container .wpnav-security-status {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.preview-container .wpnav-security-tips {
|
||||
background: #f8f9fa;
|
||||
border: 1px solid #e9ecef;
|
||||
border-radius: 8px;
|
||||
padding: 15px;
|
||||
margin: 15px 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.preview-container .wpnav-security-tips h4 {
|
||||
margin: 0 0 10px;
|
||||
font-size: 14px;
|
||||
color: #2c3e50;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.preview-container .wpnav-security-tips ul {
|
||||
margin: 0;
|
||||
padding-left: 15px;
|
||||
font-size: 12px;
|
||||
color: #5a6c7d;
|
||||
}
|
||||
|
||||
.preview-container .wpnav-security-tips li {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.preview-container .wpnav-buttons {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-top: 20px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.preview-container .wpnav-simple .wpnav-buttons {
|
||||
gap: 8px;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.preview-container .wpnav-btn {
|
||||
flex: 1;
|
||||
padding: 12px 16px;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
cursor: default;
|
||||
transition: all 0.3s ease;
|
||||
max-width: 140px;
|
||||
}
|
||||
|
||||
.preview-container .wpnav-simple .wpnav-btn {
|
||||
padding: 10px 14px;
|
||||
font-size: 13px;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.preview-container .wpnav-btn-primary {
|
||||
background: #667eea;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.preview-container .wpnav-btn-secondary {
|
||||
background: rgba(248, 249, 250, 0.9);
|
||||
color: #5a6c7d;
|
||||
border: 2px solid #e9ecef;
|
||||
}
|
||||
|
||||
.preview-container .wpnav-options {
|
||||
margin: 20px 0 10px;
|
||||
}
|
||||
|
||||
.preview-container .wpnav-checkbox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
font-size: 12px;
|
||||
color: #5a6c7d;
|
||||
}
|
||||
|
||||
.preview-container .wpnav-simple .wpnav-checkbox {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.preview-container .checkmark {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 2px solid #bdc3c7;
|
||||
border-radius: 3px;
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.preview-container .wpnav-countdown {
|
||||
margin-top: 15px;
|
||||
font-size: 12px;
|
||||
color: #7f8c8d;
|
||||
padding: 10px;
|
||||
background: rgba(52, 152, 219, 0.1);
|
||||
border-radius: 6px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.preview-container .wpnav-simple .wpnav-countdown {
|
||||
margin-top: 10px;
|
||||
padding: 8px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.preview-container .wpnav-progress-bar {
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
border-radius: 2px;
|
||||
margin-top: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.preview-container .wpnav-progress-fill {
|
||||
height: 100%;
|
||||
background: #667eea;
|
||||
border-radius: 2px;
|
||||
width: 60%;
|
||||
animation: wpnav-progress 5s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes wpnav-progress {
|
||||
0% { width: 100%; }
|
||||
100% { width: 0%; }
|
||||
}
|
||||
|
||||
.preview-container .wpnav-btn-rounded {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.preview-container .wpnav-btn-square {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.preview-container .wpnav-btn-pill {
|
||||
border-radius: 25px;
|
||||
}
|
||||
|
||||
.preview-container.wpnav-color-blue .wpnav-btn-primary {
|
||||
background: #3498db;
|
||||
}
|
||||
|
||||
.preview-container.wpnav-color-green .wpnav-btn-primary {
|
||||
background: #27ae60;
|
||||
}
|
||||
|
||||
.preview-container.wpnav-color-red .wpnav-btn-primary {
|
||||
background: #e74c3c;
|
||||
}
|
||||
|
||||
.wpnav-loading {
|
||||
opacity: 0.6;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.wpnav-loading::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: -10px 0 0 -10px;
|
||||
border: 2px solid #0073aa;
|
||||
border-radius: 50%;
|
||||
border-top-color: transparent;
|
||||
animation: wpnav-spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes wpnav-spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.wpnav-info-grid,
|
||||
.wpnav-export-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.wrap {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 15px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.wpnav-stats-overview {
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.wpnav-section-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.wpnav-section-actions {
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.wpnav-quick-domains {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.wpnav-quick-domains .button-small {
|
||||
text-align: center;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.preview-container {
|
||||
transform: scale(0.7);
|
||||
min-height: 320px;
|
||||
}
|
||||
|
||||
.wpnav-redirect-preview {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.wpnav-activity-stats {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.wpnav-activity-item {
|
||||
padding: 12px 8px;
|
||||
}
|
||||
|
||||
.wpnav-activity-number {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.wpnav-stat-number {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.wp-list-table {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.wp-list-table th,
|
||||
.wp-list-table td {
|
||||
padding: 8px 5px;
|
||||
}
|
||||
|
||||
.column-target-url,
|
||||
.column-source-page {
|
||||
width: 35%;
|
||||
}
|
||||
|
||||
.column-click-time,
|
||||
.column-ip-address,
|
||||
.column-https-status {
|
||||
width: 10%;
|
||||
}
|
||||
|
||||
.preview-container {
|
||||
transform: scale(0.6);
|
||||
min-height: 280px;
|
||||
}
|
||||
|
||||
.wpnav-activity-stats {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.wpnav-activity-item {
|
||||
padding: 10px 6px;
|
||||
}
|
||||
|
||||
.wpnav-activity-number {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.wpnav-activity-label {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.wpnav-activity-stats {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 15px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.wpnav-activity-item {
|
||||
text-align: center;
|
||||
padding: 5px 5px;
|
||||
background: #ffffff;
|
||||
border: 1px solid #e2e4e7;
|
||||
border-radius: 6px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.wpnav-activity-item:hover {
|
||||
background: #ffffff;
|
||||
border-color: #72aee6;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.wpnav-activity-number {
|
||||
display: block;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #2271b1;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.wpnav-activity-label {
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
color: #646970;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.wpnav-tabs .nav-tab:focus,
|
||||
.button:focus,
|
||||
input:focus,
|
||||
textarea:focus,
|
||||
select:focus {
|
||||
outline: 2px solid #0073aa;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
135
assets/css/external-indicator.css
Normal file
135
assets/css/external-indicator.css
Normal file
|
|
@ -0,0 +1,135 @@
|
|||
a[data-wpnav-external] {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
a[data-wpnav-external] .wpnav-external-icon {
|
||||
display: inline-block;
|
||||
font-size: 0.8em;
|
||||
margin-left: 3px;
|
||||
opacity: 0.6;
|
||||
transition: opacity 0.2s ease;
|
||||
vertical-align: super;
|
||||
line-height: 1;
|
||||
color: #646970;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a[data-wpnav-external]:hover .wpnav-external-icon {
|
||||
opacity: 1;
|
||||
color: #1d2327;
|
||||
}
|
||||
|
||||
a[data-wpnav-external]:focus .wpnav-external-icon {
|
||||
opacity: 1;
|
||||
color: #2271b1;
|
||||
}
|
||||
|
||||
.wpnav-external-icon-box::after {
|
||||
content: "⧉";
|
||||
font-size: 0.7em;
|
||||
margin-left: 2px;
|
||||
opacity: 0.5;
|
||||
color: #646970;
|
||||
}
|
||||
|
||||
.wpnav-external-icon-arrow::after {
|
||||
content: "↗";
|
||||
font-size: 0.8em;
|
||||
margin-left: 2px;
|
||||
opacity: 0.6;
|
||||
color: #646970;
|
||||
}
|
||||
|
||||
.entry-content a[data-wpnav-external] .wpnav-external-icon,
|
||||
.comment-content a[data-wpnav-external] .wpnav-external-icon {
|
||||
color: #2271b1;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.entry-content a[data-wpnav-external]:hover .wpnav-external-icon,
|
||||
.comment-content a[data-wpnav-external]:hover .wpnav-external-icon {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.widget a[data-wpnav-external] .wpnav-external-icon {
|
||||
color: #50575e;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.widget a[data-wpnav-external]:hover .wpnav-external-icon {
|
||||
opacity: 1;
|
||||
color: #2271b1;
|
||||
}
|
||||
|
||||
.menu a[data-wpnav-external] .wpnav-external-icon,
|
||||
.nav-menu a[data-wpnav-external] .wpnav-external-icon {
|
||||
font-size: 0.7em;
|
||||
margin-left: 2px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.site-footer a[data-wpnav-external] .wpnav-external-icon {
|
||||
color: #8c8f94;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.site-footer a[data-wpnav-external]:hover .wpnav-external-icon {
|
||||
opacity: 1;
|
||||
color: #50575e;
|
||||
}
|
||||
|
||||
.wp-block-button__link[data-wpnav-external] .wpnav-external-icon,
|
||||
.button[data-wpnav-external] .wpnav-external-icon {
|
||||
color: inherit;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
@media (prefers-contrast: high) {
|
||||
a[data-wpnav-external] .wpnav-external-icon {
|
||||
opacity: 1;
|
||||
font-weight: bold;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
a[data-wpnav-external]:hover .wpnav-external-icon {
|
||||
color: #2271b1;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
a[data-wpnav-external] .wpnav-external-icon {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media print {
|
||||
.wpnav-external-icon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.screen-reader-text.wpnav-external-text {
|
||||
position: absolute !important;
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
word-wrap: normal !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
a[data-wpnav-external]:focus-visible {
|
||||
outline: 2px solid #2271b1;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
a[data-wpnav-external] .wpnav-external-icon {
|
||||
font-size: 0.75em;
|
||||
margin-left: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
a[data-wpnav-external] .wpnav-external-icon {
|
||||
font-size: 0.7em;
|
||||
margin-left: 1px;
|
||||
}
|
||||
}
|
||||
837
assets/css/frontend.css
Normal file
837
assets/css/frontend.css
Normal file
|
|
@ -0,0 +1,837 @@
|
|||
.wpnav-redirect-page *,
|
||||
.wpnav-redirect-page *::before,
|
||||
.wpnav-redirect-page *::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.wpnav-redirect-page {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: #f0f2f5;
|
||||
color: #2c3e50;
|
||||
min-height: 100vh;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.wpnav-redirect-page.wpnav-color-blue {
|
||||
background: #e3f2fd;
|
||||
}
|
||||
|
||||
.wpnav-redirect-page.wpnav-color-green {
|
||||
background: #e8f5e8;
|
||||
}
|
||||
|
||||
.wpnav-redirect-page.wpnav-color-red {
|
||||
background: #ffebee;
|
||||
}
|
||||
|
||||
.wpnav-page-overlay {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.wpnav-container {
|
||||
max-width: 780px;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 40px;
|
||||
background: #ffffff;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid #e1e5e9;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
animation: wpnav-slideUp 0.6s ease-out;
|
||||
}
|
||||
|
||||
@keyframes wpnav-slideUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px) scale(0.95);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.wpnav-simple {
|
||||
max-width: 480px;
|
||||
padding: 30px 25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.wpnav-simple .wpnav-title {
|
||||
font-size: 22px;
|
||||
margin-bottom: 20px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.wpnav-simple .wpnav-url-container {
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.wpnav-simple .wpnav-url {
|
||||
padding: 15px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.wpnav-simple .wpnav-url-domain {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.wpnav-simple .wpnav-buttons {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.wpnav-simple .wpnav-btn {
|
||||
padding: 12px 20px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.wpnav-simple .wpnav-countdown {
|
||||
margin-top: 15px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.wpnav-minimal {
|
||||
max-width: 680px;
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.wpnav-full {
|
||||
max-width: 880px;
|
||||
padding: 50px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.wpnav-logo img {
|
||||
max-height: 60px;
|
||||
margin-bottom: 20px;
|
||||
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
|
||||
width: auto;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
@keyframes wpnav-pulse {
|
||||
0%, 100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
.wpnav-title {
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
margin: 0 0 10px;
|
||||
color: #2c3e50;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
|
||||
.wpnav-subtitle {
|
||||
font-size: 16px;
|
||||
color: #7f8c8d;
|
||||
margin: 0 0 30px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.wpnav-minimal .wpnav-title {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.wpnav-full .wpnav-title {
|
||||
font-size: 36px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.wpnav-header {
|
||||
margin-bottom: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.wpnav-warning {
|
||||
background: #fff3cd;
|
||||
border: 1px solid #f39c12;
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
padding: 20px;
|
||||
margin: 30px 0;
|
||||
color: #8b4513;
|
||||
font-weight: 400;
|
||||
box-shadow: 0 2px 4px rgba(243, 156, 18, 0.1);
|
||||
}
|
||||
|
||||
.wpnav-url-container {
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
.wpnav-url-label {
|
||||
font-size: 14px;
|
||||
color: #7f8c8d;
|
||||
margin-bottom: 10px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.wpnav-url {
|
||||
background: #f8f9fa;
|
||||
border: 2px solid #e9ecef;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
margin: 15px 0;
|
||||
word-break: break-all;
|
||||
position: relative;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.wpnav-url:hover {
|
||||
border-color: #667eea;
|
||||
}
|
||||
|
||||
.wpnav-url-domain {
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
color: #2c3e50;
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.wpnav-url-path {
|
||||
color: #7f8c8d;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.wpnav-url-full {
|
||||
font-size: 12px;
|
||||
color: #95a5a6;
|
||||
margin-top: 10px;
|
||||
font-family: 'Monaco', 'Consolas', monospace;
|
||||
}
|
||||
|
||||
.wpnav-security-status {
|
||||
margin-top: 15px;
|
||||
padding-top: 15px;
|
||||
border-top: 1px solid #e9ecef;
|
||||
}
|
||||
|
||||
.wpnav-security-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.wpnav-security-label {
|
||||
font-weight: 600;
|
||||
color: #2c3e50;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.wpnav-https-badge {
|
||||
display: inline-block;
|
||||
padding: 4px 8px;
|
||||
border-radius: 12px;
|
||||
color: white;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
min-width: 60px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.wpnav-https-badge.secure {
|
||||
background-color: #00a32a;
|
||||
}
|
||||
|
||||
.wpnav-https-badge.insecure {
|
||||
background-color: #d63638;
|
||||
}
|
||||
|
||||
.wpnav-security-warning {
|
||||
background: rgba(231, 76, 60, 0.1);
|
||||
border: 1px solid rgba(231, 76, 60, 0.3);
|
||||
border-radius: 8px;
|
||||
padding: 10px;
|
||||
margin-top: 10px;
|
||||
font-size: 13px;
|
||||
color: #c0392b;
|
||||
}
|
||||
|
||||
.wpnav-security-tips {
|
||||
background: #f8f9fa;
|
||||
border: 1px solid #e9ecef;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
margin: 20px 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.wpnav-security-tips h4 {
|
||||
margin: 0 0 15px;
|
||||
color: #2c3e50;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.wpnav-security-tips ul {
|
||||
margin: 0;
|
||||
padding-left: 20px;
|
||||
color: #5a6c7d;
|
||||
}
|
||||
|
||||
.wpnav-security-tips li {
|
||||
margin-bottom: 8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.wpnav-copy-btn {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
background: #667eea;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
padding: 8px 12px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.wpnav-copy-btn:hover {
|
||||
background: #5a67d8;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.wpnav-info {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 30px;
|
||||
margin: 40px 0;
|
||||
}
|
||||
|
||||
.wpnav-info-item {
|
||||
background: #f8f9fa;
|
||||
border: 1px solid #e9ecef;
|
||||
border-radius: 8px;
|
||||
padding: 25px;
|
||||
}
|
||||
|
||||
.wpnav-info-title {
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
margin: 0 0 15px;
|
||||
color: #2c3e50;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.wpnav-tips-list {
|
||||
margin: 0;
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
color: #5a6c7d;
|
||||
}
|
||||
|
||||
.wpnav-tips-list li {
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
margin-bottom: 10px;
|
||||
padding-left: 25px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.wpnav-tips-list li:before {
|
||||
content: "✓";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: #27ae60;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.wpnav-warning-tips {
|
||||
background: rgba(231, 76, 60, 0.1);
|
||||
border: 1px solid rgba(231, 76, 60, 0.3);
|
||||
border-radius: 8px;
|
||||
padding: 15px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.wpnav-warning-tips h4 {
|
||||
color: #e74c3c;
|
||||
margin: 0 0 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.wpnav-actions {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.wpnav-buttons {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
justify-content: center;
|
||||
margin-bottom: 30px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.wpnav-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
padding: 10px 20px;
|
||||
border-radius: 8px;
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
border: 2px solid transparent;
|
||||
font-family: inherit;
|
||||
min-width: 140px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.wpnav-btn:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
||||
}
|
||||
|
||||
.wpnav-btn:hover:before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.wpnav-btn-primary {
|
||||
background: #667eea;
|
||||
color: white;
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
|
||||
}
|
||||
|
||||
.wpnav-btn-primary:hover {
|
||||
background: #5a67d8;
|
||||
}
|
||||
|
||||
.wpnav-btn-secondary {
|
||||
background: #f8f9fa;
|
||||
color: #5a6c7d;
|
||||
border: 2px solid #e9ecef;
|
||||
}
|
||||
|
||||
.wpnav-btn-secondary:hover {
|
||||
background: white;
|
||||
color: #2c3e50;
|
||||
border-color: #bdc3c7;
|
||||
}
|
||||
|
||||
.wpnav-options {
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
.wpnav-checkbox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
color: #5a6c7d;
|
||||
transition: color 0.3s ease;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.wpnav-checkbox:hover {
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
.wpnav-checkbox input[type="checkbox"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.checkmark {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 2px solid #bdc3c7;
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
transition: all 0.3s ease;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.wpnav-checkbox input:checked + .checkmark {
|
||||
background: #667eea;
|
||||
border-color: #667eea;
|
||||
}
|
||||
|
||||
.wpnav-checkbox input:checked + .checkmark:after {
|
||||
content: '✓';
|
||||
position: absolute;
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.wpnav-countdown {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 15px;
|
||||
font-size: 14px;
|
||||
color: #7f8c8d;
|
||||
margin-top: 20px;
|
||||
padding: 15px;
|
||||
background: rgba(52, 152, 219, 0.1);
|
||||
border-radius: 8px;
|
||||
border: 1px solid rgba(52, 152, 219, 0.2);
|
||||
}
|
||||
|
||||
.countdown-circle {
|
||||
position: relative;
|
||||
animation: wpnav-rotate 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes wpnav-rotate {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
#countdown-progress {
|
||||
transition: stroke-dashoffset 1s linear;
|
||||
}
|
||||
|
||||
.wpnav-footer {
|
||||
margin-top: 40px;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid rgba(233, 236, 239, 0.8);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.wpnav-footer-text {
|
||||
font-size: 12px;
|
||||
color: #95a5a6;
|
||||
}
|
||||
|
||||
.wpnav-footer-text a {
|
||||
color: #667eea;
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.wpnav-toast {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(-100px);
|
||||
background: rgba(39, 174, 96, 0.95);
|
||||
color: white;
|
||||
padding: 12px 24px;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
z-index: 10000;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.wpnav-toast.show {
|
||||
transform: translateX(-50%) translateY(0);
|
||||
}
|
||||
|
||||
.wpnav-color-blue .wpnav-container {
|
||||
border-color: #e3f2fd;
|
||||
}
|
||||
|
||||
.wpnav-color-blue .wpnav-btn-primary {
|
||||
background: #3498db;
|
||||
}
|
||||
|
||||
.wpnav-color-blue .wpnav-btn-primary:hover {
|
||||
background: #2980b9;
|
||||
}
|
||||
|
||||
.wpnav-color-blue .wpnav-copy-btn {
|
||||
background: #3498db;
|
||||
}
|
||||
|
||||
.wpnav-color-green .wpnav-container {
|
||||
border-color: #e8f5e8;
|
||||
}
|
||||
|
||||
.wpnav-color-green .wpnav-btn-primary {
|
||||
background: #27ae60;
|
||||
}
|
||||
|
||||
.wpnav-color-green .wpnav-btn-primary:hover {
|
||||
background: #229954;
|
||||
}
|
||||
|
||||
.wpnav-color-green .wpnav-copy-btn {
|
||||
background: #27ae60;
|
||||
}
|
||||
|
||||
.wpnav-color-red .wpnav-container {
|
||||
border-color: #ffebee;
|
||||
}
|
||||
|
||||
.wpnav-color-red .wpnav-btn-primary {
|
||||
background: #e74c3c;
|
||||
}
|
||||
|
||||
.wpnav-color-red .wpnav-btn-primary:hover {
|
||||
background: #c0392b;
|
||||
}
|
||||
|
||||
.wpnav-color-red .wpnav-copy-btn {
|
||||
background: #e74c3c;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.wpnav-page-overlay {
|
||||
padding: 15px;
|
||||
align-items: flex-start;
|
||||
padding-top: 40px;
|
||||
}
|
||||
|
||||
.wpnav-container {
|
||||
padding: 30px 25px;
|
||||
margin: 0;
|
||||
border-radius: 8px;
|
||||
max-width: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.wpnav-simple {
|
||||
padding: 25px 20px;
|
||||
}
|
||||
|
||||
.wpnav-simple .wpnav-title {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.wpnav-simple .wpnav-url {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.wpnav-simple .wpnav-btn {
|
||||
padding: 10px 16px;
|
||||
font-size: 13px;
|
||||
min-width: auto;
|
||||
}
|
||||
|
||||
.wpnav-full {
|
||||
padding: 30px 25px;
|
||||
}
|
||||
|
||||
.wpnav-title {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.wpnav-minimal .wpnav-title {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.wpnav-full .wpnav-title {
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
.wpnav-buttons {
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.wpnav-btn {
|
||||
width: 100%;
|
||||
padding: 18px 20px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.wpnav-info {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 20px;
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
.wpnav-info-item {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.wpnav-url {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.wpnav-copy-btn {
|
||||
position: static;
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.wpnav-warning {
|
||||
padding: 15px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.wpnav-countdown {
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.wpnav-security-tips {
|
||||
padding: 15px;
|
||||
margin: 15px 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
.wpnav-container {
|
||||
padding: 25px 20px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.wpnav-simple {
|
||||
padding: 20px 15px;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.wpnav-simple .wpnav-title {
|
||||
font-size: 18px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.wpnav-simple .wpnav-url-container {
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
.wpnav-simple .wpnav-url {
|
||||
padding: 10px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.wpnav-simple .wpnav-url-domain {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.wpnav-simple .wpnav-buttons {
|
||||
gap: 8px;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.wpnav-simple .wpnav-btn {
|
||||
width: 100%;
|
||||
padding: 12px 16px;
|
||||
font-size: 14px;
|
||||
min-width: auto;
|
||||
}
|
||||
|
||||
.wpnav-title {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.wpnav-btn {
|
||||
padding: 16px 20px;
|
||||
font-size: 15px;
|
||||
min-width: auto;
|
||||
}
|
||||
|
||||
.wpnav-url-domain {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (hover: none) and (pointer: coarse) {
|
||||
.wpnav-btn:hover {
|
||||
transform: none;
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
|
||||
}
|
||||
|
||||
.wpnav-btn:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.wpnav-url:hover {
|
||||
transform: none;
|
||||
border-color: #e9ecef;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.wpnav-btn-rounded {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.wpnav-btn-square {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.wpnav-btn-pill {
|
||||
border-radius: 25px;
|
||||
}
|
||||
|
||||
.wpnav-progress-bar {
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
border-radius: 2px;
|
||||
margin-top: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.wpnav-progress-fill {
|
||||
height: 100%;
|
||||
background: #667eea;
|
||||
border-radius: 2px;
|
||||
width: 100%;
|
||||
transition: width 1s linear;
|
||||
}
|
||||
|
||||
.wpnav-color-blue .wpnav-progress-fill {
|
||||
background: #3498db;
|
||||
}
|
||||
|
||||
.wpnav-color-green .wpnav-progress-fill {
|
||||
background: #27ae60;
|
||||
}
|
||||
|
||||
.wpnav-color-red .wpnav-progress-fill {
|
||||
background: #e74c3c;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.wpnav-redirect-page *,
|
||||
.wpnav-redirect-page *::before,
|
||||
.wpnav-redirect-page *::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 9.6 KiB |
1
assets/icons/i-like-food.svg
Normal file
1
assets/icons/i-like-food.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 9.6 KiB |
|
Before Width: | Height: | Size: 739 B After Width: | Height: | Size: 739 B |
494
assets/js/admin.js
Normal file
494
assets/js/admin.js
Normal file
|
|
@ -0,0 +1,494 @@
|
|||
jQuery(document).ready(function($) {
|
||||
$('.wpnav-tab').click(function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
$('.wpnav-tab').removeClass('active');
|
||||
$(this).addClass('active');
|
||||
|
||||
var tab = $(this).data('tab');
|
||||
$('.wpnav-tab-section').hide();
|
||||
$('.wpnav-tab-section[data-section="' + tab + '"]').show();
|
||||
|
||||
if (history.pushState) {
|
||||
var newUrl = updateUrlParameter(window.location.href, 'tab', tab);
|
||||
history.pushState({path: newUrl}, '', newUrl);
|
||||
}
|
||||
});
|
||||
|
||||
$('.wpnav-add-domain').click(function(e) {
|
||||
e.preventDefault();
|
||||
var domain = $(this).data('domain');
|
||||
var $textarea = $('textarea[name="whitelist_domains"]');
|
||||
var domains = $textarea.val().split('\n').filter(function(d) { return d.trim(); });
|
||||
|
||||
if (domains.indexOf(domain) >= 0) {
|
||||
showNotice('wpnav-whitelist-status', wpnav_admin.strings.domain_exists.replace('%s', domain), 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
domains.push(domain);
|
||||
$textarea.val(domains.join('\n'));
|
||||
showNotice('wpnav-whitelist-status', wpnav_admin.strings.domain_added.replace('%s', domain), 'success');
|
||||
|
||||
$(this).addClass('wpnav-loading').prop('disabled', true);
|
||||
setTimeout(function() {
|
||||
$(this).removeClass('wpnav-loading').prop('disabled', false);
|
||||
}.bind(this), 1000);
|
||||
});
|
||||
|
||||
$('#wpnav-select-all-domains').click(function(e) {
|
||||
e.preventDefault();
|
||||
var commonDomains = [
|
||||
'google.com', 'facebook.com', 'youtube.com', 'twitter.com',
|
||||
'instagram.com', 'linkedin.com', 'baidu.com', 'bing.com'
|
||||
];
|
||||
var $textarea = $('textarea[name="whitelist_domains"]');
|
||||
var currentDomains = $textarea.val().split('\n').filter(function(d) { return d.trim(); });
|
||||
var newDomains = [...new Set([...currentDomains, ...commonDomains])];
|
||||
|
||||
$textarea.val(newDomains.join('\n'));
|
||||
showNotice('wpnav-whitelist-status', wpnav_admin.strings.common_domains_added, 'success');
|
||||
});
|
||||
|
||||
$('#wpnav-clear-domains').click(function(e) {
|
||||
e.preventDefault();
|
||||
if (confirm(wpnav_admin.strings.confirm_clear)) {
|
||||
$('textarea[name="whitelist_domains"]').val('');
|
||||
showNotice('wpnav-whitelist-status', wpnav_admin.strings.whitelist_cleared, 'success');
|
||||
}
|
||||
});
|
||||
|
||||
$('#wpnav-export-whitelist').click(function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
var whitelist = $('textarea[name="whitelist_domains"]').val();
|
||||
var domains = whitelist.split('\n').filter(function(d) { return d.trim(); });
|
||||
|
||||
if (domains.length === 0) {
|
||||
showNotice('wpnav-whitelist-status', wpnav_admin.strings.whitelist_empty, 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
var csv = domains.join('\n');
|
||||
var blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
|
||||
var link = document.createElement('a');
|
||||
|
||||
if (link.download !== undefined) {
|
||||
var url = URL.createObjectURL(blob);
|
||||
link.setAttribute('href', url);
|
||||
link.setAttribute('download', 'wpnav_whitelist_' + getFormattedDate() + '.csv');
|
||||
link.style.visibility = 'hidden';
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
|
||||
showNotice('wpnav-whitelist-status', wpnav_admin.strings.export_success, 'success');
|
||||
} else {
|
||||
showNotice('wpnav-whitelist-status', wpnav_admin.strings.export_unsupported, 'error');
|
||||
}
|
||||
});
|
||||
|
||||
$('form').submit(function(e) {
|
||||
var $form = $(this);
|
||||
var $submitButton = $form.find('input[type="submit"], button[type="submit"]');
|
||||
|
||||
if ($form.attr('id') === 'sync-settings-form' || $form.attr('id') === 'sync-config-form') {
|
||||
return true;
|
||||
}
|
||||
|
||||
var formValid = validateForm($form);
|
||||
if (!formValid) {
|
||||
e.preventDefault();
|
||||
return false;
|
||||
}
|
||||
|
||||
if ($submitButton.length) {
|
||||
var originalValue = $submitButton.val() || $submitButton.text();
|
||||
$submitButton.prop('disabled', true).addClass('wpnav-loading');
|
||||
|
||||
if ($submitButton.is('input')) {
|
||||
$submitButton.val(wpnav_admin.strings.saving);
|
||||
} else {
|
||||
$submitButton.text(wpnav_admin.strings.saving);
|
||||
}
|
||||
|
||||
setTimeout(function() {
|
||||
$submitButton.prop('disabled', false).removeClass('wpnav-loading');
|
||||
if ($submitButton.is('input')) {
|
||||
$submitButton.val(originalValue);
|
||||
} else {
|
||||
$submitButton.text(originalValue);
|
||||
}
|
||||
}, 10000);
|
||||
}
|
||||
});
|
||||
|
||||
if (window.location.search.indexOf('settings-updated=true') !== -1) {
|
||||
var message = wpnav_admin.strings.settings_saved || 'Settings saved successfully!';
|
||||
if (window.location.search.indexOf('imported=') !== -1) {
|
||||
var match = window.location.search.match(/imported=(\d+)/);
|
||||
if (match) {
|
||||
message = wpnav_admin.strings.domains_imported ?
|
||||
wpnav_admin.strings.domains_imported.replace('%d', match[1]) :
|
||||
'Successfully imported ' + match[1] + ' domains.';
|
||||
}
|
||||
}
|
||||
|
||||
$('.wrap h1').after('<div class="notice notice-success is-dismissible"><p>' + message + '</p></div>');
|
||||
|
||||
setTimeout(function() {
|
||||
$('.notice-success').fadeIn();
|
||||
}, 100);
|
||||
}
|
||||
|
||||
if (window.location.search.indexOf('tab=') !== -1) {
|
||||
setTimeout(function() {
|
||||
$('.notice-success').fadeIn();
|
||||
}, 100);
|
||||
}
|
||||
|
||||
$('.wp-list-table tbody tr').hover(
|
||||
function() {
|
||||
$(this).addClass('wpnav-row-hover');
|
||||
},
|
||||
function() {
|
||||
$(this).removeClass('wpnav-row-hover');
|
||||
}
|
||||
);
|
||||
|
||||
$('#auto_redirect_enabled').change(function() {
|
||||
if ($(this).is(':checked')) {
|
||||
$('#redirect_delay_row').show();
|
||||
} else {
|
||||
$('#redirect_delay_row').hide();
|
||||
}
|
||||
});
|
||||
|
||||
// Enhanced preview functionality
|
||||
$('#page_title').on('input', function() {
|
||||
$('#preview-page-title').text($(this).val());
|
||||
});
|
||||
|
||||
$('#page_subtitle').on('input', function() {
|
||||
var subtitle = $(this).val();
|
||||
if (subtitle) {
|
||||
$('#preview-page-subtitle').text(subtitle).show();
|
||||
} else {
|
||||
$('#preview-page-subtitle').hide();
|
||||
}
|
||||
});
|
||||
|
||||
$('#url_label').on('input', function() {
|
||||
$('#preview-url-label').text($(this).val());
|
||||
});
|
||||
|
||||
$('#warning_text').on('input', function() {
|
||||
$('#preview-warning-text').text($(this).val());
|
||||
});
|
||||
|
||||
$('#countdown_text').on('input', function() {
|
||||
var text = $(this).val().replace('{seconds}', '5');
|
||||
$('#preview-countdown-text').text(text);
|
||||
});
|
||||
|
||||
$('#button_text_continue').on('input', function() {
|
||||
$('#preview-continue-btn').text($(this).val());
|
||||
});
|
||||
|
||||
$('#button_text_back').on('input', function() {
|
||||
$('#preview-back-btn').text($(this).val());
|
||||
});
|
||||
|
||||
// Show/hide warning message functionality
|
||||
$('input[name="show_warning_message"], textarea[name="warning_text"]').on('change input', function() {
|
||||
var showWarning = $('input[name="show_warning_message"]').is(':checked');
|
||||
var warningText = $('textarea[name="warning_text"]').val().trim();
|
||||
|
||||
if (showWarning && warningText !== '') {
|
||||
$('#preview-warning').show();
|
||||
} else {
|
||||
$('#preview-warning').hide();
|
||||
}
|
||||
});
|
||||
|
||||
function setupRedirectPagePreview() {
|
||||
function updatePreview() {
|
||||
var colorScheme = $('select[name="color_scheme"]').val();
|
||||
var template = $('input[name="template"]:checked').val();
|
||||
var warningText = $('textarea[name="warning_text"]').val();
|
||||
var showWarningMessage = $('input[name="show_warning_message"]').is(':checked');
|
||||
var continueText = $('input[name="button_text_continue"]').val();
|
||||
var backText = $('input[name="button_text_back"]').val();
|
||||
var showLogo = $('input[name="show_logo"]').is(':checked');
|
||||
var showUrlFull = $('input[name="show_url_full"]').is(':checked');
|
||||
var showSecurityTips = $('input[name="show_security_tips"]').is(':checked');
|
||||
var showBackButton = $('input[name="show_back_button"]').is(':checked');
|
||||
|
||||
console.log('Updating preview - Template:', template, 'Color:', colorScheme);
|
||||
|
||||
var $preview = $('.preview-container');
|
||||
$preview.removeClass('wpnav-color-blue wpnav-color-green wpnav-color-red');
|
||||
$preview.addClass('wpnav-color-' + colorScheme);
|
||||
|
||||
var $container = $preview.find('.wpnav-container');
|
||||
$container.removeClass('wpnav-simple wpnav-minimal wpnav-default wpnav-full');
|
||||
$container.addClass('wpnav-' + template);
|
||||
|
||||
$('#preview-warning-text').text(warningText);
|
||||
$('#preview-continue-btn').text(continueText);
|
||||
$('#preview-back-btn').text(backText);
|
||||
|
||||
$('.wpnav-site-logo').toggle(showLogo);
|
||||
$('.wpnav-url-full').toggle(showUrlFull);
|
||||
$('.wpnav-security-tips').toggle(showSecurityTips);
|
||||
$('#preview-back-btn').toggle(showBackButton);
|
||||
$('#preview-warning').toggle(showWarningMessage && warningText.trim() !== '');
|
||||
|
||||
updateTemplateSpecificElements(template);
|
||||
}
|
||||
|
||||
function updateTemplateSpecificElements(template) {
|
||||
var $container = $('.wpnav-container');
|
||||
var $header = $('.wpnav-header');
|
||||
|
||||
switch(template) {
|
||||
case 'simple':
|
||||
$container.css({
|
||||
'max-width': '480px',
|
||||
'padding': '30px 25px',
|
||||
'text-align': 'center'
|
||||
});
|
||||
$header.find('.wpnav-title').css('font-size', '22px');
|
||||
break;
|
||||
|
||||
case 'minimal':
|
||||
$container.css({
|
||||
'max-width': '680px',
|
||||
'padding': '30px',
|
||||
'text-align': 'center'
|
||||
});
|
||||
$header.find('.wpnav-title').css('font-size', '24px');
|
||||
break;
|
||||
|
||||
case 'full':
|
||||
$container.css({
|
||||
'max-width': '880px',
|
||||
'padding': '50px',
|
||||
'text-align': 'left'
|
||||
});
|
||||
$header.find('.wpnav-title').css('font-size', '36px');
|
||||
break;
|
||||
|
||||
default: // default
|
||||
$container.css({
|
||||
'max-width': '780px',
|
||||
'padding': '40px',
|
||||
'text-align': 'center'
|
||||
});
|
||||
$header.find('.wpnav-title').css('font-size', '28px');
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
$('select[name="color_scheme"]').on('change', updatePreview);
|
||||
$('input[name="template"]').on('change', updatePreview);
|
||||
$('textarea[name="warning_text"]').on('input', updatePreview);
|
||||
$('input[name="show_warning_message"]').on('change', updatePreview);
|
||||
$('input[name="button_text_continue"]').on('input', updatePreview);
|
||||
$('input[name="button_text_back"]').on('input', updatePreview);
|
||||
$('input[name="show_logo"]').on('change', updatePreview);
|
||||
$('input[name="show_url_full"]').on('change', updatePreview);
|
||||
$('input[name="show_security_tips"]').on('change', updatePreview);
|
||||
$('input[name="show_back_button"]').on('change', updatePreview);
|
||||
|
||||
updatePreview();
|
||||
}
|
||||
|
||||
if ($('.wpnav-tab[data-tab="redirect_page"]').length) {
|
||||
setupRedirectPagePreview();
|
||||
}
|
||||
|
||||
$('#redirect_delay, #cookie_duration, #stats_retention').on('input', function() {
|
||||
var $this = $(this);
|
||||
var val = parseInt($this.val());
|
||||
var min = parseInt($this.attr('min'));
|
||||
var max = parseInt($this.attr('max'));
|
||||
|
||||
if (val < min || val > max) {
|
||||
$this.addClass('error').css('border-color', '#dc3232');
|
||||
} else {
|
||||
$this.removeClass('error').css('border-color', '');
|
||||
}
|
||||
});
|
||||
|
||||
var draftTimeout;
|
||||
$('textarea[name="whitelist_domains"], textarea[name="warning_text"], textarea[name="custom_css"]').on('input', function() {
|
||||
var $this = $(this);
|
||||
clearTimeout(draftTimeout);
|
||||
|
||||
draftTimeout = setTimeout(function() {
|
||||
var draftKey = 'wpnav_draft_' + $this.attr('name');
|
||||
try {
|
||||
sessionStorage.setItem(draftKey, $this.val());
|
||||
|
||||
if ($this.siblings('.draft-saved').length === 0) {
|
||||
$this.after('<span class="draft-saved" style="font-size: 11px; color: #46b450; margin-left: 5px;">' + wpnav_admin.strings.draft_saved + '</span>');
|
||||
setTimeout(function() {
|
||||
$('.draft-saved').fadeOut();
|
||||
}, 2000);
|
||||
}
|
||||
} catch (e) {
|
||||
console.log('Session storage not available');
|
||||
}
|
||||
}, 2000);
|
||||
});
|
||||
|
||||
$('textarea[name="whitelist_domains"], textarea[name="warning_text"], textarea[name="custom_css"]').each(function() {
|
||||
var $this = $(this);
|
||||
var draftKey = 'wpnav_draft_' + $this.attr('name');
|
||||
|
||||
try {
|
||||
var draft = sessionStorage.getItem(draftKey);
|
||||
if (draft && draft !== $this.val() && draft.trim() !== '') {
|
||||
var restore = confirm(wpnav_admin.strings.restore_draft);
|
||||
if (restore) {
|
||||
$this.val(draft);
|
||||
if ($this.attr('name') === 'warning_text') {
|
||||
$('#preview-warning-text').text(draft);
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.log('Session storage not available');
|
||||
}
|
||||
});
|
||||
|
||||
$('form').on('submit', function() {
|
||||
setTimeout(function() {
|
||||
if (window.location.search.indexOf('settings-updated=true') !== -1) {
|
||||
try {
|
||||
sessionStorage.removeItem('wpnav_draft_whitelist_domains');
|
||||
sessionStorage.removeItem('wpnav_draft_warning_text');
|
||||
sessionStorage.removeItem('wpnav_draft_custom_css');
|
||||
} catch (e) {
|
||||
console.log('Session storage not available');
|
||||
}
|
||||
}
|
||||
}, 100);
|
||||
});
|
||||
|
||||
function validateForm($form) {
|
||||
var isValid = true;
|
||||
var errors = [];
|
||||
|
||||
var redirectDelay = $('#redirect_delay').val();
|
||||
if (redirectDelay && (redirectDelay < 1 || redirectDelay > 30)) {
|
||||
errors.push('Redirect delay must be between 1 and 30 seconds.');
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
var cookieDuration = $('#cookie_duration').val();
|
||||
if (cookieDuration && (cookieDuration < 1 || cookieDuration > 365)) {
|
||||
errors.push('Cookie duration must be between 1 and 365 days.');
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
var statsRetention = $('#stats_retention').val();
|
||||
if (statsRetention && (statsRetention < 1 || statsRetention > 365)) {
|
||||
errors.push('Stats retention must be between 1 and 365 days.');
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
if (!isValid) {
|
||||
var tabName = $form.closest('.wpnav-tab-section').attr('data-section');
|
||||
var statusId = 'wpnav-settings-status';
|
||||
|
||||
if (tabName === 'whitelist') {
|
||||
statusId = 'wpnav-whitelist-status';
|
||||
} else if (tabName === 'redirect_page') {
|
||||
statusId = 'wpnav-redirect-status';
|
||||
} else if (tabName === 'logs_statistics') {
|
||||
statusId = 'wpnav-logs-status';
|
||||
}
|
||||
|
||||
showNotice(statusId, errors.join(' '), 'error');
|
||||
}
|
||||
|
||||
return isValid;
|
||||
}
|
||||
|
||||
function updateUrlParameter(url, param, paramVal) {
|
||||
var newAdditionalURL = "";
|
||||
var tempArray = url.split("?");
|
||||
var baseURL = tempArray[0];
|
||||
var additionalURL = tempArray[1];
|
||||
var temp = "";
|
||||
|
||||
if (additionalURL) {
|
||||
tempArray = additionalURL.split("&");
|
||||
for (var i = 0; i < tempArray.length; i++) {
|
||||
if (tempArray[i].split('=')[0] != param) {
|
||||
newAdditionalURL += temp + tempArray[i];
|
||||
temp = "&";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var rows_txt = temp + "" + param + "=" + paramVal;
|
||||
return baseURL + "?" + newAdditionalURL + rows_txt;
|
||||
}
|
||||
|
||||
function showNotice(elementId, message, type) {
|
||||
var $notice = $('#' + elementId);
|
||||
|
||||
if ($notice.length === 0) {
|
||||
$notice = $('<span id="' + elementId + '" class="wpnav-notice"></span>');
|
||||
$('.card h2').first().after($notice);
|
||||
}
|
||||
|
||||
$notice.removeClass('wpnav-notice-success wpnav-notice-error')
|
||||
.addClass('wpnav-notice-' + type)
|
||||
.text(message)
|
||||
.show()
|
||||
.delay(4000)
|
||||
.fadeOut();
|
||||
}
|
||||
|
||||
function getFormattedDate() {
|
||||
var now = new Date();
|
||||
var year = now.getFullYear();
|
||||
var month = ('0' + (now.getMonth() + 1)).slice(-2);
|
||||
var day = ('0' + now.getDate()).slice(-2);
|
||||
return year + month + day;
|
||||
}
|
||||
|
||||
function initColorSchemePreview() {
|
||||
$('select[name="color_scheme"]').on('change', function() {
|
||||
var scheme = $(this).val();
|
||||
var $preview = $('.wpnav-redirect-preview');
|
||||
$preview.removeClass('wpnav-color-blue wpnav-color-green wpnav-color-red wpnav-color-light');
|
||||
$preview.addClass('wpnav-color-' + scheme);
|
||||
});
|
||||
}
|
||||
|
||||
if ($('.wpnav-redirect-preview').length) {
|
||||
initColorSchemePreview();
|
||||
}
|
||||
|
||||
console.log('WPNav Links Admin initialized');
|
||||
|
||||
var activeTab = $('.wpnav-tab.active').data('tab') || 'basic_settings';
|
||||
if (activeTab) {
|
||||
$('.wpnav-tab-section').hide();
|
||||
$('.wpnav-tab-section[data-section="' + activeTab + '"]').show();
|
||||
}
|
||||
|
||||
var urlParams = new URLSearchParams(window.location.search);
|
||||
var tabFromUrl = urlParams.get('tab');
|
||||
if (tabFromUrl) {
|
||||
$('.wpnav-tab').removeClass('active');
|
||||
$('.wpnav-tab[data-tab="' + tabFromUrl + '"]').addClass('active');
|
||||
$('.wpnav-tab-section').hide();
|
||||
$('.wpnav-tab-section[data-section="' + tabFromUrl + '"]').show();
|
||||
}
|
||||
});
|
||||
343
assets/js/redirect.js
Normal file
343
assets/js/redirect.js
Normal file
|
|
@ -0,0 +1,343 @@
|
|||
(function($) {
|
||||
'use strict';
|
||||
|
||||
var wpnavRedirect = {
|
||||
init: function() {
|
||||
this.processExistingLinks();
|
||||
this.setupMutationObserver();
|
||||
this.setupEventHandlers();
|
||||
this.optimizeForMobile();
|
||||
},
|
||||
|
||||
processExistingLinks: function() {
|
||||
var self = this;
|
||||
$('a:not([data-wpnav-processed])').each(function() {
|
||||
self.processLink($(this));
|
||||
});
|
||||
},
|
||||
|
||||
processLink: function($link) {
|
||||
var href = $link.attr('href');
|
||||
|
||||
if (!href || this.shouldSkipLink(href, $link)) {
|
||||
$link.attr('data-wpnav-processed', '1');
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.isExternalLink(href) && !this.isWhitelistedDomain(href)) {
|
||||
this.processExternalLink($link, href);
|
||||
}
|
||||
|
||||
$link.attr('data-wpnav-processed', '1');
|
||||
},
|
||||
|
||||
shouldSkipLink: function(href, $link) {
|
||||
if (href.startsWith('#') || href.startsWith('javascript:') || href.startsWith('mailto:') || href.startsWith('tel:')) {
|
||||
return true;
|
||||
}
|
||||
|
||||
if (wpnav_params.exclude_class && $link.hasClass(wpnav_params.exclude_class)) {
|
||||
return true;
|
||||
}
|
||||
|
||||
if ($link.attr('data-wpnav-external') || $link.attr('data-wpnav-processed')) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
},
|
||||
|
||||
isExternalLink: function(url) {
|
||||
if (!url.match(/^(https?:)?\/\//i)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
try {
|
||||
var parser = document.createElement('a');
|
||||
parser.href = url;
|
||||
var linkDomain = parser.hostname.toLowerCase();
|
||||
var siteDomain = wpnav_params.site_domain.toLowerCase();
|
||||
|
||||
return linkDomain !== siteDomain;
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
|
||||
isWhitelistedDomain: function(url) {
|
||||
if (!wpnav_params.whitelist_domains || wpnav_params.whitelist_domains.length === 0) {
|
||||
return false;
|
||||
}
|
||||
|
||||
try {
|
||||
var parser = document.createElement('a');
|
||||
parser.href = url;
|
||||
var hostname = parser.hostname.toLowerCase();
|
||||
|
||||
for (var i = 0; i < wpnav_params.whitelist_domains.length; i++) {
|
||||
var whitelistDomain = wpnav_params.whitelist_domains[i].toLowerCase();
|
||||
if (hostname === whitelistDomain) {
|
||||
return true;
|
||||
}
|
||||
if (whitelistDomain.indexOf('*') !== -1) {
|
||||
var pattern = whitelistDomain.replace(/\*/g, '.*');
|
||||
var regex = new RegExp('^' + pattern + '$', 'i');
|
||||
if (regex.test(hostname)) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return false;
|
||||
},
|
||||
|
||||
processExternalLink: function($link, href) {
|
||||
var rel = $link.attr('rel') || '';
|
||||
var relValues = rel ? rel.split(' ') : [];
|
||||
|
||||
['nofollow', 'noopener', 'noreferrer'].forEach(function(value) {
|
||||
if (relValues.indexOf(value) === -1) {
|
||||
relValues.push(value);
|
||||
}
|
||||
});
|
||||
|
||||
$link.attr('rel', relValues.join(' '));
|
||||
|
||||
if (wpnav_params.open_new_tab) {
|
||||
$link.attr('target', '_blank');
|
||||
}
|
||||
|
||||
var redirectUrl = this.getRedirectUrl(href);
|
||||
$link.attr('href', redirectUrl);
|
||||
$link.attr('data-wpnav-external', '1');
|
||||
|
||||
this.addExternalIndicator($link);
|
||||
},
|
||||
|
||||
addExternalIndicator: function($link) {
|
||||
if (!$link.find('.wpnav-external-icon').length) {
|
||||
var iconHtml = '<span class="wpnav-external-icon" style="font-size: 0.8em; margin-left: 3px; opacity: 0.6; vertical-align: super; color: #646970; transition: opacity 0.2s ease;">↗</span>';
|
||||
$link.append(iconHtml);
|
||||
}
|
||||
},
|
||||
|
||||
getRedirectUrl: function(url) {
|
||||
var currentPage = encodeURIComponent(window.location.href);
|
||||
var baseParams = 'wpnav_redirect=1&ref=' + currentPage;
|
||||
|
||||
switch(wpnav_params.redirect_method) {
|
||||
case 'path':
|
||||
var encodedUrl = this.encodeUrl(url);
|
||||
if (wpnav_params.permalink_structure) {
|
||||
return wpnav_params.home_url + '/go/' + encodedUrl;
|
||||
} else {
|
||||
return wpnav_params.home_url + '?' + baseParams + '&url_param=' + encodeURIComponent(encodedUrl);
|
||||
}
|
||||
|
||||
case 'target':
|
||||
return wpnav_params.home_url + '?' + baseParams + '&target=' + encodeURIComponent(url);
|
||||
|
||||
default:
|
||||
var encodedUrl = this.encodeUrl(url);
|
||||
return wpnav_params.home_url + '?' + baseParams + '&url=' + encodeURIComponent(encodedUrl);
|
||||
}
|
||||
},
|
||||
|
||||
encodeUrl: function(url) {
|
||||
if (wpnav_params.redirect_method === 'target') {
|
||||
return url;
|
||||
}
|
||||
|
||||
switch(wpnav_params.url_encoding) {
|
||||
case 'base64':
|
||||
try {
|
||||
return btoa(encodeURIComponent(url)).replace(/[+/=]/g, function(match) {
|
||||
return {'+': '-', '/': '_', '=': ''}[match];
|
||||
});
|
||||
} catch (e) {
|
||||
return encodeURIComponent(url);
|
||||
}
|
||||
|
||||
case 'urlencode':
|
||||
return encodeURIComponent(url);
|
||||
|
||||
case 'none':
|
||||
return url;
|
||||
|
||||
default:
|
||||
try {
|
||||
return btoa(encodeURIComponent(url)).replace(/[+/=]/g, function(match) {
|
||||
return {'+': '-', '/': '_', '=': ''}[match];
|
||||
});
|
||||
} catch (e) {
|
||||
return encodeURIComponent(url);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
setupMutationObserver: function() {
|
||||
if (!window.MutationObserver) {
|
||||
return;
|
||||
}
|
||||
|
||||
var self = this;
|
||||
var observer = new MutationObserver(function(mutations) {
|
||||
mutations.forEach(function(mutation) {
|
||||
if (mutation.addedNodes && mutation.addedNodes.length > 0) {
|
||||
mutation.addedNodes.forEach(function(node) {
|
||||
if (node.nodeType === 1) {
|
||||
if (node.nodeName === 'A' && !node.hasAttribute('data-wpnav-processed')) {
|
||||
self.processLink($(node));
|
||||
}
|
||||
|
||||
var $links = $(node).find('a:not([data-wpnav-processed])');
|
||||
$links.each(function() {
|
||||
self.processLink($(this));
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
observer.observe(document.body, {
|
||||
childList: true,
|
||||
subtree: true
|
||||
});
|
||||
},
|
||||
|
||||
setupEventHandlers: function() {
|
||||
var self = this;
|
||||
|
||||
$(document).ajaxComplete(function() {
|
||||
setTimeout(function() {
|
||||
self.processExistingLinks();
|
||||
}, 100);
|
||||
});
|
||||
|
||||
$(document).on('click', 'a[data-wpnav-external]', function(e) {
|
||||
var $link = $(this);
|
||||
var href = $link.attr('href');
|
||||
|
||||
if (typeof gtag !== 'undefined') {
|
||||
gtag('event', 'click', {
|
||||
event_category: 'external_link',
|
||||
event_label: href,
|
||||
transport_type: 'beacon'
|
||||
});
|
||||
}
|
||||
|
||||
$(document).trigger('wpnav.external_link_click', {
|
||||
link: $link,
|
||||
url: href,
|
||||
target: $link.attr('target')
|
||||
});
|
||||
});
|
||||
|
||||
$(document).keydown(function(e) {
|
||||
if (e.keyCode === 27 && window.parent !== window) {
|
||||
if (typeof window.parent.postMessage === 'function') {
|
||||
window.parent.postMessage('wpnav_close', '*');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$(document).on('mouseenter', 'a[data-wpnav-external]', function() {
|
||||
$(this).find('.wpnav-external-icon').css('opacity', '1');
|
||||
});
|
||||
|
||||
$(document).on('mouseleave', 'a[data-wpnav-external]', function() {
|
||||
$(this).find('.wpnav-external-icon').css('opacity', '0.6');
|
||||
});
|
||||
},
|
||||
|
||||
optimizeForMobile: function() {
|
||||
if (!('ontouchstart' in window)) {
|
||||
return;
|
||||
}
|
||||
|
||||
$(document).on('touchstart', 'a[data-wpnav-external]', function(e) {
|
||||
var $this = $(this);
|
||||
$this.addClass('wpnav-touch-active');
|
||||
|
||||
setTimeout(function() {
|
||||
$this.removeClass('wpnav-touch-active');
|
||||
}, 150);
|
||||
});
|
||||
|
||||
var style = document.createElement('style');
|
||||
style.textContent = `
|
||||
a[data-wpnav-external].wpnav-touch-active {
|
||||
opacity: 0.7;
|
||||
transform: scale(0.98);
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
@media (hover: none) and (pointer: coarse) {
|
||||
a[data-wpnav-external]:hover {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.wpnav-external-icon {
|
||||
opacity: 0.8 !important;
|
||||
}
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
},
|
||||
|
||||
refresh: function() {
|
||||
this.processExistingLinks();
|
||||
}
|
||||
};
|
||||
|
||||
$(document).ready(function() {
|
||||
wpnavRedirect.init();
|
||||
});
|
||||
|
||||
window.wpnavRedirect = wpnavRedirect;
|
||||
|
||||
if (typeof addComment !== 'undefined') {
|
||||
var originalAddComment = addComment.moveForm;
|
||||
addComment.moveForm = function() {
|
||||
var result = originalAddComment.apply(this, arguments);
|
||||
setTimeout(function() {
|
||||
wpnavRedirect.processExistingLinks();
|
||||
}, 100);
|
||||
return result;
|
||||
};
|
||||
}
|
||||
|
||||
if (typeof wp !== 'undefined' && wp.data) {
|
||||
wp.data.subscribe(function() {
|
||||
setTimeout(function() {
|
||||
wpnavRedirect.processExistingLinks();
|
||||
}, 500);
|
||||
});
|
||||
}
|
||||
|
||||
$(document).on('wpcf7mailsent wpcf7invalid wpcf7spam wpcf7mailfailed', function() {
|
||||
setTimeout(function() {
|
||||
wpnavRedirect.processExistingLinks();
|
||||
}, 100);
|
||||
});
|
||||
|
||||
$(document.body).on('updated_wc_div updated_cart_totals', function() {
|
||||
setTimeout(function() {
|
||||
wpnavRedirect.processExistingLinks();
|
||||
}, 100);
|
||||
});
|
||||
|
||||
if ('serviceWorker' in navigator) {
|
||||
window.addEventListener('load', function() {
|
||||
setTimeout(function() {
|
||||
wpnavRedirect.processExistingLinks();
|
||||
}, 1000);
|
||||
});
|
||||
}
|
||||
|
||||
})(jQuery);
|
||||
Loading…
Add table
Add a link
Reference in a new issue
