File size: 6,433 Bytes
ad87e2b |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Share Tracking | FedEx Tracker</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
</head>
<body class="bg-gray-100">
<custom-navbar></custom-navbar>
<main class="container mx-auto px-4 py-12">
<div class="max-w-4xl mx-auto bg-white rounded-lg shadow-lg overflow-hidden">
<div class="bg-purple-600 text-white p-6">
<h1 class="text-3xl font-bold">Share Tracking</h1>
</div>
<div class="p-8 space-y-6">
<div class="flex flex-col md:flex-row gap-6">
<div class="md:w-1/2">
<h2 class="text-xl font-bold mb-4">Share Tracking Link</h2>
<div class="space-y-4">
<div>
<label class="block text-gray-700 mb-2">Tracking Number</label>
<input type="text" placeholder="Enter tracking number"
class="w-full px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500"
id="trackingNumber"
>
</div>
<div>
<label class="block text-gray-700 mb-2">Recipient Email (optional)</label>
<input type="email" placeholder="Enter email"
class="w-full px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500"
id="recipientEmail"
>
</div>
</div>
</div>
<div class="md:w-1/2">
<h2 class="text-xl font-bold mb-4">Share Options</h2>
<div class="space-y-4">
<div class="p-4 border rounded-lg">
<h3 class="font-bold mb-2">Direct Link</h3>
<div class="flex gap-2">
<input type="text" readonly
class="flex-grow px-4 py-2 border rounded-lg bg-gray-50"
id="shareableLink"
>
<button onclick="copyToClipboard()" class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg">
<i data-feather="copy"></i>
</button>
</div>
</div>
<div class="p-4 border rounded-lg">
<h3 class="font-bold mb-2">Share Via</h3>
<div class="flex gap-4">
<button class="bg-blue-500 hover:bg-blue-600 text-white p-3 rounded-full">
<i data-feather="facebook"></i>
</button>
<button class="bg-blue-400 hover:bg-blue-500 text-white p-3 rounded-full">
<i data-feather="twitter"></i>
</button>
<button class="bg-red-500 hover:bg-red-600 text-white p-3 rounded-full">
<i data-feather="mail"></i>
</button>
<button class="bg-green-500 hover:bg-green-600 text-white p-3 rounded-full">
<i data-feather="message-square"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="pt-6 border-t">
<h2 class="text-xl font-bold mb-4">Recent Shares</h2>
<div class="space-y-3">
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
<div>
<p class="font-medium">#1234567890</p>
<p class="text-sm text-gray-500">Shared with jane@example.com</p>
</div>
<p class="text-sm text-gray-500">Oct 15, 2023</p>
</div>
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
<div>
<p class="font-medium">#9876543210</p>
<p class="text-sm text-gray-500">Shared via link</p>
</div>
<p class="text-sm text-gray-500">Oct 10, 2023</p>
</div>
</div>
</div>
</div>
</div>
</main>
<custom-footer></custom-footer>
<script src="components/navbar.js"></script>
<script src="components/footer.js"></script>
<script src="script.js"></script>
<script>
feather.replace();
document.getElementById('trackingNumber').addEventListener('input', function() {
const trackingNum = this.value.trim();
const shareLink = document.getElementById('shareableLink');
if (trackingNum) {
shareLink.value = `${window.location.origin}/?track=${trackingNum}`;
} else {
shareLink.value = '';
}
});
function copyToClipboard() {
const shareLink = document.getElementById('shareableLink');
if (shareLink.value) {
shareLink.select();
document.execCommand('copy');
alert('Link copied to clipboard!');
}
}
</script>
</body>
</html> |