Done — I created a vertical-section mockup like your image and saved it for download.
b29867c
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>WellPath Visualizer Pro</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script> | |
| <style> | |
| .well-path { | |
| stroke-dasharray: 1000; | |
| stroke-dashoffset: 1000; | |
| animation: dash 5s linear forwards; | |
| } | |
| @keyframes dash { | |
| to { | |
| stroke-dashoffset: 0; | |
| } | |
| } | |
| .grid-line { | |
| stroke-opacity: 0.2; | |
| } | |
| .formation-layer { | |
| opacity: 0; | |
| animation: fadeIn 1s forwards; | |
| animation-delay: 1s; | |
| } | |
| @keyframes fadeIn { | |
| to { | |
| opacity: 0.7; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-white min-h-screen"> | |
| <div id="vanta-bg" class="fixed inset-0 z-0"></div> | |
| <div class="relative z-10 container mx-auto px-4 py-12"> | |
| <!-- Header --> | |
| <header class="mb-16 text-center"> | |
| <h1 class="text-5xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-teal-400"> | |
| WellPath Visualizer Pro | |
| </h1> | |
| <p class="text-xl text-gray-300 max-w-3xl mx-auto"> | |
| Advanced well trajectory visualization with custom styling, real data integration, and professional export options | |
| </p> | |
| </header> | |
| <!-- Main Content --> | |
| <div class="grid md:grid-cols-2 gap-12 items-center"> | |
| <!-- Visualization Panel --> | |
| <div class="bg-gray-800/80 backdrop-blur-md rounded-xl p-6 shadow-2xl border border-gray-700"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-semibold">Well Trajectory Mockup</h2> | |
| <div class="flex space-x-2"> | |
| <button class="p-2 rounded-full bg-gray-700 hover:bg-gray-600 transition"> | |
| <i data-feather="download"></i> | |
| </button> | |
| <button class="p-2 rounded-full bg-gray-700 hover:bg-gray-600 transition"> | |
| <i data-feather="settings"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="relative h-96"> | |
| <svg viewBox="0 0 800 500" class="w-full h-full"> | |
| <!-- Grid --> | |
| <g class="grid-line"> | |
| <line x1="50" y1="50" x2="50" y2="450" stroke="white" stroke-width="1" /> | |
| <line x1="50" y1="450" x2="750" y2="450" stroke="white" stroke-width="1" /> | |
| <!-- Vertical ticks --> | |
| <line x1="45" y1="50" x2="50" y2="50" stroke="white" stroke-width="1" /> | |
| <line x1="45" y1="150" x2="50" y2="150" stroke="white" stroke-width="1" /> | |
| <line x1="45" y1="250" x2="50" y2="250" stroke="white" stroke-width="1" /> | |
| <line x1="45" y1="350" x2="50" y2="350" stroke="white" stroke-width="1" /> | |
| <!-- Horizontal ticks --> | |
| <line x1="150" y1="450" x2="150" y2="455" stroke="white" stroke-width="1" /> | |
| <line x1="250" y1="450" x2="250" y2="455" stroke="white" stroke-width="1" /> | |
| <line x1="350" y1="450" x2="350" y2="455" stroke="white" stroke-width="1" /> | |
| <line x1="450" y1="450" x2="450" y2="455" stroke="white" stroke-width="1" /> | |
| <line x1="550" y1="450" x2="550" y2="455" stroke="white" stroke-width="1" /> | |
| <line x1="650" y1="450" x2="650" y2="455" stroke="white" stroke-width="1" /> | |
| <line x1="750" y1="450" x2="750" y2="455" stroke="white" stroke-width="1" /> | |
| </g> | |
| <!-- Well Path --> | |
| <path class="well-path" d="M50,50 C150,50 250,150 350,250 L550,350 C650,350 750,400 750,450" | |
| stroke="url(#wellGradient)" stroke-width="4" fill="none" /> | |
| <!-- Casing Boxes --> | |
| <rect x="40" y="50" width="20" height="100" fill="none" stroke="#3b82f6" stroke-width="2" /> | |
| <rect x="35" y="150" width="30" height="150" fill="none" stroke="#3b82f6" stroke-width="2" /> | |
| <rect x="30" y="300" width="40" height="150" fill="none" stroke="#3b82f6" stroke-width="2" /> | |
| <!-- Formation Layers --> | |
| <rect class="formation-layer" x="50" y="200" width="700" height="50" fill="#10b981" /> | |
| <rect class="formation-layer" x="50" y="300" width="700" height="50" fill="#f59e0b" /> | |
| <rect class="formation-layer" x="50" y="400" width="700" height="50" fill="#ef4444" /> | |
| <!-- Perforation Markers --> | |
| <circle cx="350" cy="250" r="5" fill="#ec4899" /> | |
| <circle cx="450" cy="300" r="5" fill="#ec4899" /> | |
| <circle cx="550" cy="350" r="5" fill="#ec4899" /> | |
| <!-- Gradient for well path --> | |
| <defs> | |
| <linearGradient id="wellGradient" x1="0%" y1="0%" x2="100%" y2="0%"> | |
| <stop offset="0%" stop-color="#3b82f6" /> | |
| <stop offset="100%" stop-color="#8b5cf6" /> | |
| </linearGradient> | |
| </defs> | |
| </svg> | |
| </div> | |
| <div class="mt-6 flex justify-between text-sm text-gray-400"> | |
| <span>Surface</span> | |
| <span>Kickoff Point</span> | |
| <span>Build Section</span> | |
| <span>Lateral</span> | |
| </div> | |
| </div> | |
| <!-- Control Panel --> | |
| <div class="bg-gray-800/80 backdrop-blur-md rounded-xl p-6 shadow-2xl border border-gray-700"> | |
| <h2 class="text-2xl font-semibold mb-6">Customize Your Well Path</h2> | |
| <div class="space-y-6"> | |
| <!-- Data Upload --> | |
| <div> | |
| <h3 class="text-lg font-medium mb-3">Upload Your Data</h3> | |
| <div class="border-2 border-dashed border-gray-600 rounded-lg p-6 text-center hover:border-blue-500 transition cursor-pointer"> | |
| <i data-feather="upload" class="w-12 h-12 mx-auto text-gray-400 mb-3"></i> | |
| <p class="text-gray-300">Drag & drop your directional survey CSV</p> | |
| <p class="text-sm text-gray-500 mt-1">(MD, Inc, Azi columns required)</p> | |
| </div> | |
| </div> | |
| <!-- Styling Options --> | |
| <div> | |
| <h3 class="text-lg font-medium mb-3">Visual Styling</h3> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-300 mb-1">Primary Color</label> | |
| <select class="w-full bg-gray-700 border border-gray-600 rounded-md px-3 py-2 text-white"> | |
| <option>Blue</option> | |
| <option>Teal</option> | |
| <option>Indigo</option> | |
| <option>Purple</option> | |
| <option>Custom...</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-300 mb-1">Secondary Color</label> | |
| <select class="w-full bg-gray-700 border border-gray-600 rounded-md px-3 py-2 text-white"> | |
| <option>Purple</option> | |
| <option>Pink</option> | |
| <option>Red</option> | |
| <option>Orange</option> | |
| <option>Custom...</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Additional Features --> | |
| <div> | |
| <h3 class="text-lg font-medium mb-3">Additional Features</h3> | |
| <div class="space-y-3"> | |
| <label class="flex items-center space-x-3"> | |
| <input type="checkbox" class="form-checkbox h-5 w-5 text-blue-500 rounded"> | |
| <span class="text-gray-300">Show Formation Layers</span> | |
| </label> | |
| <label class="flex items-center space-x-3"> | |
| <input type="checkbox" class="form-checkbox h-5 w-5 text-blue-500 rounded" checked> | |
| <span class="text-gray-300">Show Casing Design</span> | |
| </label> | |
| <label class="flex items-center space-x-3"> | |
| <input type="checkbox" class="form-checkbox h-5 w-5 text-blue-500 rounded" checked> | |
| <span class="text-gray-300">Show Perforations</span> | |
| </label> | |
| </div> | |
| </div> | |
| <!-- Action Buttons --> | |
| <div class="pt-4"> | |
| <button class="w-full bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white font-medium py-3 px-4 rounded-lg transition shadow-lg"> | |
| Generate Visualization | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Export Options --> | |
| <div class="mt-16 bg-gray-800/80 backdrop-blur-md rounded-xl p-6 shadow-2xl border border-gray-700 max-w-4xl mx-auto"> | |
| <h2 class="text-2xl font-semibold mb-6 text-center">Export Options</h2> | |
| <div class="grid md:grid-cols-3 gap-6"> | |
| <div class="text-center p-4 rounded-lg bg-gray-700/50 hover:bg-gray-700 transition cursor-pointer"> | |
| <i data-feather="image" class="w-10 h-10 mx-auto text-blue-400 mb-3"></i> | |
| <h3 class="font-medium mb-1">High-Res PNG</h3> | |
| <p class="text-sm text-gray-400">300+ DPI for presentations</p> | |
| </div> | |
| <div class="text-center p-4 rounded-lg bg-gray-700/50 hover:bg-gray-700 transition cursor-pointer"> | |
| <i data-feather="file-text" class="w-10 h-10 mx-auto text-purple-400 mb-3"></i> | |
| <h3 class="font-medium mb-1">PDF Report</h3> | |
| <p class="text-sm text-gray-400">Vector format with metadata</p> | |
| </div> | |
| <div class="text-center p-4 rounded-lg bg-gray-700/50 hover:bg-gray-700 transition cursor-pointer"> | |
| <i data-feather="box" class="w-10 h-10 mx-auto text-teal-400 mb-3"></i> | |
| <h3 class="font-medium mb-1">DXF (CAD)</h3> | |
| <p class="text-sm text-gray-400">For engineering applications</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Initialize Vanta.js background | |
| VANTA.GLOBE({ | |
| el: "#vanta-bg", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| scale: 1.00, | |
| scaleMobile: 1.00, | |
| color: 0x3b82f6, | |
| backgroundColor: 0x111827, | |
| size: 0.7 | |
| }); | |
| // Initialize feather icons | |
| feather.replace(); | |
| // Simple animation for the well path | |
| document.addEventListener('DOMContentLoaded', () => { | |
| const path = document.querySelector('.well-path'); | |
| path.style.strokeDashoffset = "0"; | |
| }); | |
| </script> | |
| </body> | |
| </html> | |