facompool/phantomid-the-ghostly-credentials
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>PhantomID - Your Ghostly Credentials</title>7 <script src="https://cdn.tailwindcss.com"></script>8 <script src="https://unpkg.com/feather-icons"></script>9 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>10 <script>11 tailwind.config = {12 theme: {13 extend: {14 colors: {15 undefined: {16 100: '#f0f0f0',17 200: '#e0e0e0',18 300: '#d1d1d1',19 400: '#c2c2c2',20 500: '#b3b3b3',21 600: '#a3a3a3',22 700: '#949494',23 800: '#858585',24 900: '#767676',25 }26 }27 }28 }29 }30 </script>31 <style>32 @import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap');33 body {34 font-family: 'Space Mono', monospace;35 background-color: #f5f5f5;36 }37 .id-card {38 box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.2);39 border-radius: 12px;40 overflow: hidden;41 position: relative;42 }43 .holographic {44 position: absolute;45 top: 0;46 left: 0;47 width: 100%;48 height: 100%;49 background: linear-gradient(45deg, 50 rgba(255,255,255,0.1) 0%, 51 rgba(255,255,255,0.3) 50%, 52 rgba(255,255,255,0.1) 100%);53 opacity: 0.5;54 pointer-events: none;55 }56 .photo-placeholder {57 background: linear-gradient(135deg, #e0e0e0 0%, #b3b3b3 100%);58 display: flex;59 align-items: center;60 justify-content: center;61 }62 .security-strip {63 background: linear-gradient(90deg, 64 rgba(179,179,179,0.8) 0%, 65 rgba(255,255,255,0.9) 50%, 66 rgba(179,179,179,0.8) 100%);67 height: 20px;68 }69 .microprint {70 background-image: repeating-linear-gradient(71 0deg,72 #b3b3b3,73 #b3b3b3 1px,74 transparent 1px,75 transparent 3px76 );77 height: 10px;78 }79 </style>80</head>81<body class="min-h-screen flex items-center justify-center p-4">82 <div class="id-card w-full max-w-md bg-white">83 <div class="holographic"></div>84 85 <!-- Header -->86 <div class="bg-undefined-500 text-white p-4 flex justify-between items-center">87 <div>88 <h1 class="text-xl font-bold">PHANTOM ID</h1>89 <p class="text-undefined-200 text-xs">OFFICIAL IDENTIFICATION</p>90 </div>91 <div class="text-right">92 <p class="text-undefined-200 text-xs">ISSUED BY</p>93 <p class="font-bold">THE SHADOW REALM</p>94 </div>95 </div>96 97 <!-- Security Strip -->98 <div class="security-strip"></div>99 100 <!-- Content -->101 <div class="p-6 grid grid-cols-3 gap-4">102 <!-- Photo -->103 <div class="photo-placeholder rounded-lg col-span-1 aspect-square">104 <i data-feather="user" class="w-12 h-12 text-undefined-700"></i>105 </div>106 107 <!-- Details -->108 <div class="col-span-2 space-y-2">109 <div>110 <p class="text-undefined-500 text-xs">FULL NAME</p>111 <p class="font-bold text-lg">JOHN DOE</p>112 </div>113 114 <div>115 <p class="text-undefined-500 text-xs">DATE OF BIRTH</p>116 <p class="font-bold">01/01/1990</p>117 </div>118 119 <div>120 <p class="text-undefined-500 text-xs">ID NUMBER</p>121 <p class="font-mono font-bold">PHNTM-2023-4242</p>122 </div>123 124 <div>125 <p class="text-undefined-500 text-xs">ISSUE DATE</p>126 <p class="font-bold">10/31/2023</p>127 </div>128 129 <div>130 <p class="text-undefined-500 text-xs">EXPIRES</p>131 <p class="font-bold">10/31/2033</p>132 </div>133 </div>134 </div>135 136 <!-- Footer -->137 <div class="p-4 bg-undefined-100 flex justify-between items-center">138 <div class="text-undefined-700">139 <p class="text-xs">THIS CARD IS PROPERTY OF</p>140 <p class="font-bold">THE SHADOW REALM</p>141 </div>142 <div class="w-16 h-8 bg-undefined-300 rounded flex items-center justify-center">143 <i data-feather="eye-off" class="w-4 h-4 text-undefined-700"></i>144 </div>145 </div>146 147 <!-- Microprint -->148 <div class="microprint"></div>149 </div>150 151 <script>152 feather.replace();153 154 // Add subtle animation to holographic effect155 document.addEventListener('DOMContentLoaded', function() {156 const holographic = document.querySelector('.holographic');157 let angle = 0;158 159 function animateHolographic() {160 angle = (angle + 0.5) % 360;161 holographic.style.background = `linear-gradient(${angle}deg, 162 rgba(255,255,255,0.1) 0%, 163 rgba(255,255,255,0.3) 50%, 164 rgba(255,255,255,0.1) 100%)`;165 requestAnimationFrame(animateHolographic);166 }167 168 animateHolographic();169 });170 </script>171</body>172</html>173