-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
70 lines (69 loc) · 10.8 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
<html>
<head>
<link rel="stylesheet" href="./src/site/style.css">
<script src="./src/index.js"></script>
</head>
<body>
<div class="container">
<div class="containerleft" style="float:left;">
<h2 style="line-height: 1;">Discord Banner Generator</h2>
<br>
<h4 style="line-height: 0;">Username</h4>
<input type="text" placeholder="WillDev12" class="textbox" id="userName">
<h4 style="line-height: 0;">Tag</h4>
<input type="text" placeholder="#2141" class="textbox" id="tagId">
<h4 style="line-height: 0;">About me</h4>
<input type="text" placeholder="Description" class="textbox" id="aboutMe">
<h4 style="line-height: 0;">House</h4>
<div style="display: flex; margin: auto; border: 1px rgba(0,0,0,0); justify-content: center;text-align: center;">
<input type="radio" id="bravery">Bravery
<input type="radio" class="radio" id="brilliance">Brilliance
<input type="radio" class="radio" id="balance">Balance
</div>
<br>
<button class="submit" onclick="generatePreview()">Generate</button>
</div>
<div class="containerright" style="margin-left: 30px;">
<div class="container" id="previewBox" style="width:600px;height:270px;user-select: none;">
<svg width="442" height="267" viewbox="" id="svg">
<path d="M21,1 h400 a20,20 0 0 1 20,20 v225 a20,20 0 0 1 -20,20 h-400 a20,20 0 0 1 -20,-20 v-225 a20,20 0 0 1 20,-20 z" x="0" y="0" style="fill:#232428"/>
<path d="M-19,1 h440 a20,20 0 0 1 20,20 v60 h-440 v-60 a20,20 0 0 1 20,-20 z" x="0" y="0" style="fill:purple"/>
<defs>
<rect id="rect" x="25" y="37" width="70px" height="70px" rx="100"/>
<clipPath id="clip">
<use xlink:href="#rect"/>
</clipPath>
</defs>
<use xlink:href="#rect" stroke-width="10" stroke="#232428" fill="#232428"/>
<svg xmlns="http://www.w3.org/2000/svg" width="70px" height="70px" viewBox="0 0 512 512" version="1.1" x="24.5" y="37"><path d="M 197.500 142 C 180.746 145.836, 163.225 153.313, 147.731 163.240 C 140.964 167.575, 139.422 169.140, 135.784 175.359 C 130.557 184.294, 122.265 203.352, 117.154 218.177 C 107.424 246.396, 100.751 278.424, 97.510 312.466 L 95.989 328.431 101.745 334.337 C 112.888 345.770, 130.761 357.284, 146.018 362.857 C 159.427 367.755, 178.263 372, 186.587 372 C 190.843 372, 191.091 371.815, 196.476 364.661 C 199.514 360.625, 202 357.089, 202 356.803 C 202 356.518, 197.969 354.614, 193.042 352.572 C 176.865 345.867, 159.377 334.125, 147.500 321.996 L 141.500 315.869 150.500 321.524 C 174.119 336.364, 197.629 344.789, 225.801 348.508 C 239.002 350.251, 271.517 350.499, 284.026 348.953 C 313.272 345.337, 340.062 335.933, 361.737 321.673 C 371.777 315.068, 370.925 317.361, 359.737 327.055 C 346.273 338.722, 329.892 348.562, 312.216 355.600 C 309.975 356.493, 310.041 356.659, 315.716 364.365 L 321.500 372.219 329.630 371.613 C 346.079 370.386, 370.288 362.657, 385.500 353.775 C 394.266 348.657, 407.369 338.548, 412.271 333.121 C 416.601 328.330, 416.599 328.346, 414.538 308.923 C 409.353 260.073, 396.921 214.934, 379.219 180.688 C 373.296 169.228, 371.499 167.318, 360.500 160.783 C 344.685 151.388, 328.243 144.706, 313.100 141.521 C 301.757 139.135, 299.663 139.387, 297.766 143.365 L 296.161 146.730 304.285 148.957 C 322.208 153.869, 336.815 160.960, 351.068 171.667 C 364.039 181.413, 365.097 183.076, 355.138 178.069 C 325.055 162.944, 297.389 155.661, 265.110 154.371 C 228.232 152.896, 198.841 158.843, 164.252 174.777 C 155.866 178.641, 149.244 181.414, 149.537 180.939 C 150.906 178.726, 170.699 164.728, 178.153 160.703 C 187.052 155.898, 202.158 150.016, 210.693 148.034 L 215.886 146.828 214.258 143.414 C 212.838 140.438, 212.172 140.011, 209.065 140.084 C 207.104 140.131, 201.900 140.993, 197.500 142 M 202.821 242.410 C 190.237 245.758, 181.558 260.073, 183.453 274.357 C 187.102 301.864, 218.103 308.500, 230.830 284.500 C 233.131 280.161, 233.482 278.311, 233.484 270.500 C 233.485 262.993, 233.096 260.754, 231.135 257 C 224.828 244.927, 214.114 239.406, 202.821 242.410 M 299 241.939 C 293.627 243.019, 289.607 245.503, 285.283 250.416 C 275.433 261.606, 275.609 279.787, 285.675 290.983 C 297.861 304.538, 317.509 301.193, 325.632 284.182 C 327.868 279.500, 328.351 277.092, 328.380 270.500 C 328.409 263.775, 327.977 261.594, 325.667 256.818 C 320.343 245.810, 309.590 239.811, 299 241.939" stroke="none" fill="#fbfbfc" fill-rule="evenodd"/><path d="M 223.564 1.625 C 189.116 6.037, 148.947 20.301, 120.811 38.112 C 88.146 58.791, 58.791 88.146, 38.112 120.811 C 24.679 142.030, 11.372 174.858, 5.607 201 C -0.045 226.628, -1.671 260.991, 1.536 287.030 C 10.196 357.364, 47.940 421.458, 105.368 463.352 C 132.560 483.189, 167.874 499.081, 201.066 506.419 C 226.181 511.971, 259.987 513.582, 286.441 510.488 C 349.786 503.078, 410.477 470.394, 451.687 421.500 C 483.128 384.195, 505.455 333.267, 510.283 287.838 C 510.916 281.877, 511.787 277, 512.217 277 C 512.648 277, 512.964 266.988, 512.921 254.750 C 512.878 242.512, 512.566 233.175, 512.229 234 C 511.891 234.825, 511.041 230.441, 510.338 224.258 C 505.304 179.926, 485.352 132.642, 456.219 96 C 446.540 83.825, 428.152 65.440, 416 55.787 C 378.526 26.019, 334.104 7.332, 287.030 1.536 C 271.561 -0.369, 238.774 -0.323, 223.564 1.625 M 197.500 142 C 180.746 145.836, 163.225 153.313, 147.731 163.240 C 140.964 167.575, 139.422 169.140, 135.784 175.359 C 130.557 184.294, 122.265 203.352, 117.154 218.177 C 107.424 246.396, 100.751 278.424, 97.510 312.466 L 95.989 328.431 101.745 334.337 C 112.888 345.770, 130.761 357.284, 146.018 362.857 C 159.427 367.755, 178.263 372, 186.587 372 C 190.843 372, 191.091 371.815, 196.476 364.661 C 199.514 360.625, 202 357.089, 202 356.803 C 202 356.518, 197.969 354.614, 193.042 352.572 C 176.865 345.867, 159.377 334.125, 147.500 321.996 L 141.500 315.869 150.500 321.524 C 174.119 336.364, 197.629 344.789, 225.801 348.508 C 239.002 350.251, 271.517 350.499, 284.026 348.953 C 313.272 345.337, 340.062 335.933, 361.737 321.673 C 371.777 315.068, 370.925 317.361, 359.737 327.055 C 346.273 338.722, 329.892 348.562, 312.216 355.600 C 309.975 356.493, 310.041 356.659, 315.716 364.365 L 321.500 372.219 329.630 371.613 C 346.079 370.386, 370.288 362.657, 385.500 353.775 C 394.266 348.657, 407.369 338.548, 412.271 333.121 C 416.601 328.330, 416.599 328.346, 414.538 308.923 C 409.353 260.073, 396.921 214.934, 379.219 180.688 C 373.296 169.228, 371.499 167.318, 360.500 160.783 C 344.685 151.388, 328.243 144.706, 313.100 141.521 C 301.757 139.135, 299.663 139.387, 297.766 143.365 L 296.161 146.730 304.285 148.957 C 322.208 153.869, 336.815 160.960, 351.068 171.667 C 364.039 181.413, 365.097 183.076, 355.138 178.069 C 325.055 162.944, 297.389 155.661, 265.110 154.371 C 228.232 152.896, 198.841 158.843, 164.252 174.777 C 155.866 178.641, 149.244 181.414, 149.537 180.939 C 150.906 178.726, 170.699 164.728, 178.153 160.703 C 187.052 155.898, 202.158 150.016, 210.693 148.034 L 215.886 146.828 214.258 143.414 C 212.838 140.438, 212.172 140.011, 209.065 140.084 C 207.104 140.131, 201.900 140.993, 197.500 142 M 0.428 256 C 0.428 268.375, 0.571 273.438, 0.747 267.250 C 0.922 261.063, 0.922 250.938, 0.747 244.750 C 0.571 238.563, 0.428 243.625, 0.428 256 M 202.821 242.410 C 190.237 245.758, 181.558 260.073, 183.453 274.357 C 187.102 301.864, 218.103 308.500, 230.830 284.500 C 233.131 280.161, 233.482 278.311, 233.484 270.500 C 233.485 262.993, 233.096 260.754, 231.135 257 C 224.828 244.927, 214.114 239.406, 202.821 242.410 M 299 241.939 C 293.627 243.019, 289.607 245.503, 285.283 250.416 C 275.433 261.606, 275.609 279.787, 285.675 290.983 C 297.861 304.538, 317.509 301.193, 325.632 284.182 C 327.868 279.500, 328.351 277.092, 328.380 270.500 C 328.409 263.775, 327.977 261.594, 325.667 256.818 C 320.343 245.810, 309.590 239.811, 299 241.939" stroke="none" fill="#8c9cfc" fill-rule="evenodd"/></svg>
<path d="M35,118 h370 a15,15 0 0 1 15,15 v95 a15,15 0 0 1 -15,15 h-370 a15,15 0 0 1 -15,-15 v-95 a15,15 0 0 1 15,-15 z" style="fill:#111214"/>
<text fill="#F8FBFF" x="35" y="150" style="font-size:20px;font-family: sans-serif;font-weight:500;">WillDev12#2141</text>
<text fill="#F8FBFF" x="35" y="187" style="font-size:14px;font-family: sans-serif;font-weight:600;">ABOUT ME</text>
<text fill="#F8FBFF" x="35" y="206" style="font-size:14px;font-family: sans-serif;font-weight:500;">Description</text>
<path d="M390,85 h20 a5,5 0 0 1 5,5 v20 a5,5 0 0 1 -5,5 h-20 a5,5 0 0 1 -5,-5 v-20 a5,5 0 0 1 5,-5 z" style="fill:#111214"/>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" version="1.1" x="390" y="90"><path d="" stroke="none" fill="#9c84f4" fill-rule="evenodd"/><path d="M 0 6.807 L 0 13.615 4.529 16.807 L 9.058 20 10.027 20 L 10.995 20 15.998 16.406 L 21 12.812 21 6.406 L 21 0 10.500 0 L 0 0 0 6.807 M 5.301 8.892 L 5.631 11.053 7.816 12.583 L 10 14.113 12.184 12.583 L 14.369 11.053 14.699 8.892 L 15.028 6.732 13.264 8.116 L 11.500 9.500 10.750 10.500 L 10 11.500 9.250 10.500 L 8.500 9.500 6.736 8.116 L 4.972 6.732 5.301 8.892" stroke="none" fill="#9c84ec" fill-rule="evenodd"/></svg>
<path d="M35,163 h370 z" stroke="#2E2F34" stroke-width="0.2">
<style>
@keyframes onOpen {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
}
}
svg {
animation: 0.3s ease-out 0s 1 onOpen;
}
</style>
</svg>
</div>
<div class="codebox" style="position:relative;margin:auto;">
<button class="copybutton" onclick="copyResult()">download</button>
<textarea id="codebox" style="width:100%;height:200px;margin-top:0px;outline:none;resize:none;border:none;padding-left:16px!important;background-color: rgb(240, 240, 240);padding:10px;">Output...</textarea>
</div>
</div>
</div>
</body>
</html>