60 lines
2.8 KiB
HTML
60 lines
2.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Order Tracker</title>
|
|
<!-- Tailwind CSS CDN link -->
|
|
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
|
|
</head>
|
|
<body class="bg-gray-100">
|
|
<div class="container mx-auto p-6">
|
|
<h1 class="text-2xl font-bold mb-4">Order Tracker</h1>
|
|
|
|
<!-- Form for entering the order number -->
|
|
<div class="mb-6">
|
|
<label for="order-number" class="block text-sm font-medium text-gray-700">Enter Order Number:</label>
|
|
<input type="text" id="order-number" class="mt-1 block w-full p-2 border-gray-300 rounded-md">
|
|
<button id="fetch-order" class="mt-2 p-2 bg-blue-500 text-white rounded">Fetch Order</button>
|
|
</div>
|
|
|
|
<!-- Section to display order details -->
|
|
<div id="order-details" class="hidden bg-white p-4 rounded shadow-md">
|
|
<h2 class="text-xl font-semibold mb-2">Order Details</h2>
|
|
<p id="customer-name"></p>
|
|
<p id="address"></p>
|
|
<p id="email"></p>
|
|
<p id="phone"></p>
|
|
</div>
|
|
|
|
<!-- Section to display tracking information -->
|
|
<div id="tracking-details" class="hidden bg-white p-4 mt-4 rounded shadow-md">
|
|
<h2 class="text-xl font-semibold mb-2">Tracking Information</h2>
|
|
<ul id="tracking-list"></ul>
|
|
</div>
|
|
|
|
<!-- Section for crafting the email -->
|
|
<div id="email-section" class="hidden bg-white p-4 mt-4 rounded shadow-md">
|
|
<h2 class="text-xl font-semibold mb-2">Email Information</h2>
|
|
|
|
<!-- Email subject line -->
|
|
<label for="email-subject" class="block text-sm font-medium text-gray-700">Subject Line:</label>
|
|
<input type="text" id="email-subject" class="mt-1 block w-full p-2 border-gray-300 rounded-md">
|
|
<button id="copy-subject" class="mt-2 p-2 bg-green-500 text-white rounded">Copy Subject</button>
|
|
|
|
<!-- Customer email -->
|
|
<label for="customer-email" class="block text-sm font-medium text-gray-700 mt-4">Customer Email:</label>
|
|
<input type="text" id="customer-email" class="mt-1 block w-full p-2 border-gray-300 rounded-md">
|
|
<button id="copy-email-address" class="mt-2 p-2 bg-green-500 text-white rounded">Copy Email Address</button>
|
|
|
|
<h2 class="text-xl font-semibold mt-6">Email Preview</h2>
|
|
<textarea id="email-content" class="w-full p-2 border-gray-300 rounded-md" rows="6"></textarea>
|
|
<button id="copy-email-content" class="mt-2 p-2 bg-green-500 text-white rounded">Copy Email</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="js/main.js"></script>
|
|
</body>
|
|
</html>
|
|
|