-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
85 lines (73 loc) · 8.63 KB
/
index.html
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
<!-- const TOKEN = 1240373246812394 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Super Hero API</title>
<script src="./script.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="main flex flex-col hidden items-center min-h-screen justify-center">
<!-- 1 card -->
<div class="gradient-border border-2 border-black relative bg-white py-6 px-6 rounded-3xl w-1/2 my-4 shadow-xl">
<div
class=" text-white flex items-center absolute rounded-full shadow-xl bg-pink-500 right-8 -top-10">
<!-- svg -->
<img id="img" class="object-fill rounded-full h-20 w-20 sm:h-28 sm:w-28 lg:h-40 lg:w-40 border-2 border-black " src="" alt="">
</div>
<div class="mt-8">
<p id="name" class="text-xl font-semibold my-2">... </p>
<div class="flex space-x-2 text-gray-400 text-sm">
<!-- svg -->
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
<p id="placeOfBirth">...</p>
</div>
<div class="flex space-x-2 text-gray-400 text-sm my-3">
<!-- svg -->
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
</svg>
<p id="firstAppearance">...</p>
</div>
<div class="flex space-x-2 text-gray-400 text-sm my-3">
<!-- svg -->
<svg fill="#000000" class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-43.39 -43.39 520.66 520.66" xml:space="preserve" stroke="#000000" stroke-width="2" transform="rotate(0)"><g ></g><g id="SVGRepo_iconCarrier"> <path d="M432.117,37.667c-1.602-1.604-3.973-2.165-6.121-1.456l-69.984,23.095c-1.978,0.653-3.477,2.285-3.959,4.312 c-0.48,2.026,0.123,4.157,1.596,5.63l7.961,7.959l-18.615,18.616c-20.723-13.904-45.643-20.57-70.75-18.805 c-27.115,1.896-52.646,13.539-71.891,32.782c-4.059,4.058-7.793,8.438-11.178,13.038c-36.334-7.933-75.85,2.172-104.043,30.366 c-19.244,19.243-30.887,44.773-32.785,71.889c-1.757,25.107,4.903,50.028,18.806,70.752l-18.614,18.614l-7.963-7.961 c-1.125-1.126-2.65-1.758-4.242-1.758s-3.117,0.632-4.242,1.758L13.61,328.982c-2.344,2.343-2.344,6.142,0,8.484l7.961,7.962 L1.758,365.239c-2.344,2.344-2.344,6.143-0.002,8.485l22.484,22.484c1.125,1.126,2.65,1.758,4.242,1.758s3.117-0.632,4.242-1.757 l19.815-19.814l7.961,7.959c2.34,2.343,6.141,2.344,8.484,0.001l22.482-22.482c1.127-1.126,1.758-2.651,1.758-4.243 s-0.631-3.117-1.758-4.243l-7.961-7.96l18.621-18.62c18.545,12.439,40.441,19.086,62.832,19.086c2.631,0,5.273-0.092,7.912-0.276 c27.115-1.897,52.646-13.54,71.889-32.784c4.034-4.033,7.751-8.385,11.119-12.953c7.891,1.722,16.021,2.61,24.291,2.61 c30.148-0.001,58.494-11.741,79.813-33.061c19.244-19.243,30.887-44.774,32.785-71.89c1.757-25.105-4.902-50.024-18.805-70.749 l18.615-18.617l7.961,7.961c1.473,1.474,3.609,2.073,5.629,1.596c2.027-0.482,3.658-1.979,4.313-3.958l23.094-69.983 C434.283,41.638,433.721,39.269,432.117,37.667z M236.276,304.349c-35.055,35.053-91.482,39.283-131.258,9.832l-0.006,0.01 c-2.35-1.741-5.67-1.567-7.799,0.561L70.78,341.185c-1.127,1.126-1.758,2.652-1.758,4.243c0,1.592,0.631,3.117,1.758,4.243 l7.961,7.96l-13.998,13.997l-7.961-7.959c-2.34-2.344-6.141-2.343-8.484-0.001l-19.814,19.813l-13.998-13.999l19.813-19.811 c2.344-2.344,2.344-6.143,0.002-8.485l-7.961-7.962l13.996-13.998l7.963,7.961c2.342,2.344,6.143,2.344,8.484,0l26.433-26.435 c2.129-2.128,2.303-5.445,0.565-7.793l0.005-0.011c-29.451-39.774-25.225-96.203,9.832-131.26c39.332-39.33,103.326-39.33,142.658,0 c24.652,24.653,34.725,60.21,26.975,93.973c-6.766-1.722-13.314-4.497-19.389-8.315c4.729-25.958-3.405-52.246-22.201-71.042 c-15.15-15.149-35.291-23.493-56.715-23.493s-41.564,8.343-56.715,23.493c-15.146,15.148-23.49,35.289-23.49,56.713 s8.344,41.564,23.492,56.713c15.15,15.149,35.291,23.493,56.715,23.493c0.002,0,0,0,0.002,0c21.422,0,41.564-8.343,56.711-23.491 c0.736-0.735,1.447-1.502,2.156-2.27c6.239,3.607,12.798,6.594,19.598,8.928C241.174,299.156,238.798,301.825,236.276,304.349z M244.76,153.204c-4.185-4.184-8.62-7.97-13.257-11.358c0.148-0.15,0.288-0.311,0.437-0.46 c12.883-12.882,30.01-19.976,48.229-19.976c18.219,0,35.346,7.095,48.228,19.977c12.883,12.884,19.979,30.012,19.979,48.229 c0,18.219-7.094,35.346-19.977,48.228c-14.58,14.579-34.169,21.147-53.275,19.741C283.469,220.038,272.159,180.603,244.76,153.204z M232.918,238.788c-0.327-0.313-0.656-0.623-0.979-0.944c-14.43-14.429-21.465-34.054-19.737-53.98 c0.323,0.311,0.655,0.608,0.972,0.926C227.609,199.225,234.649,218.857,232.918,238.788z M200.356,269.429 c4.16,4.161,8.592,7.952,13.25,11.367c-0.146,0.148-0.283,0.306-0.43,0.452c-12.883,12.882-30.01,19.976-48.229,19.976 c-18.219,0-35.346-7.095-48.229-19.979c-12.883-12.882-19.979-30.01-19.979-48.227s7.094-35.346,19.977-48.229 c12.883-12.883,30.01-19.978,48.229-19.978c1.7,0,3.39,0.065,5.068,0.188C161.644,202.561,172.944,242.018,200.356,269.429z M402.137,100.762l-5.314-5.315c-1.127-1.126-2.652-1.758-4.244-1.758c-1.59,0-3.117,0.632-4.242,1.758l-26.436,26.437 c-2.13,2.129-2.303,5.447-0.563,7.797l-0.008,0.006c29.451,39.775,25.225,96.204-9.832,131.259 c-19.053,19.053-44.385,29.545-71.328,29.546c-26.945,0-52.277-10.493-71.33-29.547c-24.662-24.662-34.729-60.236-26.959-94.013 c6.857,1.751,13.382,4.56,19.376,8.346c-4.734,25.963,3.399,52.257,22.198,71.053c3.141,3.14,6.485,5.949,9.98,8.459 c0.223,0.177,0.455,0.344,0.703,0.489c13.762,9.656,29.891,14.506,46.031,14.506c20.539,0,41.078-7.817,56.713-23.454 c15.15-15.148,23.492-35.289,23.492-56.713c0-21.424-8.344-41.564-23.492-56.714c-15.15-15.15-35.291-23.492-56.715-23.492 c-21.422,0-41.564,8.343-56.713,23.491c-0.743,0.743-1.463,1.521-2.181,2.298c-6.296-3.624-12.874-6.57-19.625-8.881 c2.255-2.793,4.645-5.488,7.189-8.033c35.059-35.054,91.486-39.28,131.26-9.831c0,0,4.455,2.612,7.807-0.571l26.434-26.436 c1.125-1.125,1.756-2.651,1.756-4.242c0-1.592-0.633-3.118-1.758-4.243l-5.314-5.313l49.424-16.31L402.137,100.762z"></path> </g></svg>
<p id="gender">...</p>
</div>
<div class="border-t-2"></div>
<div class="flex justify-between">
<div class="my-2">
<p class="font-semibold text-base mb-2">Powerstats</p>
<div id="powerstats" class="flex flex-col space-y-2">
</div>
</div>
<div class="my-2">
<p class="font-semibold text-base mb-2">Progress</p>
<div id="powerstats-values" class="flex flex-col space-y-2">
</div>
</div>
</div>
</div>
</div>
<div id="get-new" class="px-5 py-2.5 relative rounded group font-medium text-white font-medium inline-block cursor-pointer">
<span class="absolute top-0 left-0 w-full h-full rounded opacity-50 filter blur-sm bg-gradient-to-br from-purple-600 to-blue-500"></span>
<span class="h-full w-full inset-0 absolute mt-0.5 ml-0.5 bg-gradient-to-br filter group-active:opacity-0 rounded opacity-50 from-purple-600 to-blue-500"></span>
<span class="absolute inset-0 w-full h-full transition-all duration-200 ease-out rounded shadow-xl bg-gradient-to-br filter group-active:opacity-0 group-hover:blur-sm from-purple-600 to-blue-500"></span>
<span class="absolute inset-0 w-full h-full transition duration-200 ease-out rounded bg-gradient-to-br to-purple-600 from-blue-500"></span>
<span class="relative">Get New Hero</span>
</div>
</div>
</body>
</html>