├── assets ├── img │ ├── logo.png │ ├── banner.gif │ ├── logo_blue.png │ └── badges │ │ ├── boost.webp │ │ ├── nitro.webp │ │ └── bravery.webp ├── font │ ├── whitneybold.woff │ ├── whitneybook.woff │ ├── whitneylight.woff │ ├── whitneymedium.woff │ ├── whitneybookitalic.woff │ ├── whitneysemibold.woff │ ├── whitneylightitalic.woff │ ├── whitneymediumitalic.woff │ ├── WhitneySemiboldItalic.woff │ └── style.css ├── js │ └── demo.js └── css │ └── style.css ├── README.md ├── index.html └── DiscordUserCard.vue /assets/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sybrax/Discord-User-Card/HEAD/assets/img/logo.png -------------------------------------------------------------------------------- /assets/img/banner.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sybrax/Discord-User-Card/HEAD/assets/img/banner.gif -------------------------------------------------------------------------------- /assets/img/logo_blue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sybrax/Discord-User-Card/HEAD/assets/img/logo_blue.png -------------------------------------------------------------------------------- /assets/font/whitneybold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sybrax/Discord-User-Card/HEAD/assets/font/whitneybold.woff -------------------------------------------------------------------------------- /assets/font/whitneybook.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sybrax/Discord-User-Card/HEAD/assets/font/whitneybook.woff -------------------------------------------------------------------------------- /assets/font/whitneylight.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sybrax/Discord-User-Card/HEAD/assets/font/whitneylight.woff -------------------------------------------------------------------------------- /assets/img/badges/boost.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sybrax/Discord-User-Card/HEAD/assets/img/badges/boost.webp -------------------------------------------------------------------------------- /assets/img/badges/nitro.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sybrax/Discord-User-Card/HEAD/assets/img/badges/nitro.webp -------------------------------------------------------------------------------- /assets/font/whitneymedium.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sybrax/Discord-User-Card/HEAD/assets/font/whitneymedium.woff -------------------------------------------------------------------------------- /assets/img/badges/bravery.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sybrax/Discord-User-Card/HEAD/assets/img/badges/bravery.webp -------------------------------------------------------------------------------- /assets/font/whitneybookitalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sybrax/Discord-User-Card/HEAD/assets/font/whitneybookitalic.woff -------------------------------------------------------------------------------- /assets/font/whitneysemibold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sybrax/Discord-User-Card/HEAD/assets/font/whitneysemibold.woff -------------------------------------------------------------------------------- /assets/font/whitneylightitalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sybrax/Discord-User-Card/HEAD/assets/font/whitneylightitalic.woff -------------------------------------------------------------------------------- /assets/font/whitneymediumitalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sybrax/Discord-User-Card/HEAD/assets/font/whitneymediumitalic.woff -------------------------------------------------------------------------------- /assets/font/WhitneySemiboldItalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sybrax/Discord-User-Card/HEAD/assets/font/WhitneySemiboldItalic.woff -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 |

Discord User Card - New version

4 |

5 |    6 |

7 | 8 | 9 | ## NEW REALEASE : 10 | 11 | A version of this card with spotify live activity is available here : check it out ! ! 12 | 13 | ## Description : 14 | 15 | The card when you click on a user in a discord server. 16 | 17 | - Banner & Logo 18 | - Badges with tooltip 19 | - Buttons 20 | - Username 21 | - About Me 22 | - Member since 23 | - Roles 24 | - Note 25 | - Send message input 26 | - Basic JavaSript for the demo 27 | 28 | ## Preview : 29 | 30 | 31 | 32 | Demo : here 33 | 34 | Download : here 35 | 36 | ## Old version preview : 37 | 38 | 39 | 40 | Download : here ( Non-optimized code ) 41 | 42 | ## Community : 43 | 44 | Join creators-area to see more of the community: : here 45 | 46 | ## Author : 47 | 48 |

49 | Lohan 50 |

51 | 52 | 53 | -------------------------------------------------------------------------------- /assets/font/style.css: -------------------------------------------------------------------------------- 1 | /* #### Generated By: http://www.cufonfonts.com #### */ 2 | 3 | @font-face { 4 | font-family: "Whitney"; 5 | font-style: normal; 6 | font-weight: normal; 7 | src: local("Whitney"), url("whitneymedium.woff") format("woff"); 8 | } 9 | 10 | @font-face { 11 | font-family: "Whitney Medium Italic"; 12 | font-style: normal; 13 | font-weight: normal; 14 | src: local("Whitney Medium Italic"), 15 | url("whitneymediumitalic.woff") format("woff"); 16 | } 17 | 18 | @font-face { 19 | font-family: "Whitney Bold"; 20 | font-style: normal; 21 | font-weight: normal; 22 | src: local("Whitney Bold"), url("whitneybold.woff") format("woff"); 23 | } 24 | 25 | @font-face { 26 | font-family: "Whitney Semibold Regular"; 27 | font-style: normal; 28 | font-weight: normal; 29 | src: local("Whitney Semibold Regular"), 30 | url("whitneysemibold.woff") format("woff"); 31 | } 32 | 33 | @font-face { 34 | font-family: "Whitney Book Regular"; 35 | font-style: normal; 36 | font-weight: normal; 37 | src: local("Whitney Book Regular"), url("whitneybook.woff") format("woff"); 38 | } 39 | 40 | @font-face { 41 | font-family: "Whitney Light Regular"; 42 | font-style: normal; 43 | font-weight: normal; 44 | src: local("Whitney Light Regular"), url("whitneylight.woff") format("woff"); 45 | } 46 | 47 | @font-face { 48 | font-family: "Whitney Semibold Italic"; 49 | font-style: normal; 50 | font-weight: normal; 51 | src: local("Whitney Semibold Italic"), 52 | url("WhitneySemiboldItalic.woff") format("woff"); 53 | } 54 | 55 | @font-face { 56 | font-family: "Whitney Book Italic"; 57 | font-style: normal; 58 | font-weight: normal; 59 | src: local("Whitney Book Italic"), 60 | url("whitneybookitalic.woff") format("woff"); 61 | } 62 | 63 | @font-face { 64 | font-family: "Whitney Light Italic"; 65 | font-style: normal; 66 | font-weight: normal; 67 | src: local("Whitney Light Italic"), 68 | url("whitneylightitalic.woff") format("woff"); 69 | } 70 | -------------------------------------------------------------------------------- /assets/js/demo.js: -------------------------------------------------------------------------------- 1 | const profilLogo = document.querySelectorAll(".profil-logo"); 2 | const roleAdd = document.querySelectorAll(".role-add"); 3 | const input = document.querySelectorAll(".message input"); 4 | const modal = document.querySelector(".modal-container"); 5 | const helpBtn = document.querySelector(".help-btn"); 6 | const feedbackInput = document.querySelector("#feedback-input"); 7 | 8 | const randomHexColor = () => { 9 | return "#" + Math.floor(Math.random() * 16777215).toString(16); 10 | }; 11 | 12 | const ramdomWord = () => { 13 | const words = [ 14 | "Awesome", 15 | "Cool", 16 | "Great", 17 | "Nice", 18 | "Super", 19 | "Superb", 20 | "Superior", 21 | "Wonderful", 22 | "Amazing", 23 | "Fantastic", 24 | "Fabulous", 25 | "Incredible", 26 | "Marvelous", 27 | "Spectacular", 28 | "Stupendous", 29 | "Terrific", 30 | "Astounding", 31 | ]; 32 | return words[Math.floor(Math.random() * words.length)]; 33 | }; 34 | 35 | const addRole = (card) => { 36 | const role = document.createElement("div"); 37 | const roleColor = document.createElement("div"); 38 | const roleText = document.createElement("p"); 39 | role.classList.add("role"); 40 | roleColor.classList.add("role-color"); 41 | roleColor.style.backgroundColor = randomHexColor(); 42 | roleText.innerText = ramdomWord(); 43 | role.append(roleColor, roleText); 44 | card.parentElement.append(role, card); 45 | removeRole(); 46 | }; 47 | 48 | const removeRole = () => { 49 | const roles = document.querySelectorAll(".role-color"); 50 | roles.forEach((role) => { 51 | role.addEventListener("click", (e) => { 52 | e.target.parentElement.remove(); 53 | }); 54 | }); 55 | }; 56 | 57 | const toggleModal = () => { 58 | modal.classList.toggle("active"); 59 | }; 60 | 61 | profilLogo.forEach((logo) => { 62 | logo.addEventListener("click", toggleModal); 63 | }); 64 | 65 | roleAdd.forEach((add) => { 66 | add.addEventListener("click", () => { 67 | addRole(add); 68 | }); 69 | }); 70 | 71 | input.forEach((input) => { 72 | input.addEventListener("keyup", (e) => { 73 | if (e.key === "Enter") { 74 | input.value = ""; 75 | input.blur(); 76 | toggleModal(); 77 | } 78 | }); 79 | }); 80 | 81 | modal.addEventListener("click", (e) => { 82 | if (e.target === modal) { 83 | toggleModal(); 84 | } 85 | }); 86 | 87 | helpBtn.addEventListener("click", () => { 88 | toggleModal(); 89 | }); 90 | 91 | feedbackInput.addEventListener("keyup", (e) => { 92 | const feedbackState = document.querySelector(".feedback-state"); 93 | if (e.key === "Enter") { 94 | feedbackInput.blur(); 95 | // Api wiil be add soon for a complete feedback system for me ( more big project will be add soon on my github, that's why would be nice to have a feedback system ) :) 96 | feedbackState.classList.add("error"); 97 | feedbackState.innerText = "Api is not available for the moment, try later."; 98 | } 99 | }); 100 | 101 | removeRole(); 102 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Discord Profile Card - New 9 | 10 | 11 |
12 | 13 |
14 |
15 | 19 |
20 |
21 |
22 | 25 |
26 |
27 | 28 |
Tooltip
29 |
30 |
31 | 32 |
Tooltip
33 |
34 |
35 | 36 |
37 | A super badge since a long time ago. 38 |
39 |
40 |
41 |
42 |
43 |
44 | Sybrax#3098 45 |
Random guy
46 |
47 |
48 |
49 |
About Me
50 |

51 | Your about me description.
52 | → 53 | A link ! 54 |

55 |
56 |
57 |
Member Since
58 |

Jun 14, 2017

59 |
60 |
61 |
Roles
62 |
63 |
64 |
65 |

Role title

66 |
67 |
68 |
69 |

A long role title

70 |
71 |
72 |
73 |

A very very very very long role title

74 |
75 |
76 |
77 |

Role title

78 |
79 |
80 |
81 |

Role title

82 |
83 |
84 |
85 |

Role title

86 |
87 |
88 |
+
89 |
90 |
91 |
92 |
93 |
Note
94 | 95 |
96 |
97 | 98 |
99 |
100 |
101 |
102 | 103 |
104 |
105 | 106 |
107 |
108 |
109 | 112 |
113 |
114 | 115 |
Tooltip
116 |
117 |
118 | 119 |
Tooltip
120 |
121 |
122 | 123 |
124 | A super badge since a long time ago. 125 |
126 |
127 |
128 |
129 |
130 |
131 | Sybrax#3098 132 |
Bot
133 |
134 |
135 | A button ! 136 |
137 |
About Me
138 |

Your about me description.

139 |
140 |
141 |
Member Since
142 |

Jun 14, 2017

143 |
144 |
145 |
Roles
146 |
147 |
148 |
149 |

Role title

150 |
151 |
152 |
153 |

A long role title

154 |
155 |
156 |
157 |

A very very very very long role title

158 |
159 |
160 |
161 |

Role title

162 |
163 |
164 |
165 |

Role title

166 |
167 |
168 |
169 |

Role title

170 |
171 |
172 |
+
173 |
174 |
175 |
176 |
177 |
Note
178 | 179 |
180 |
181 | 182 |
183 |
184 |
185 |
186 | 187 |
188 |
189 | 190 |
191 |
192 |
193 | 196 |
197 |
198 | 199 |
Tooltip
200 |
201 |
202 | 203 |
Tooltip
204 |
205 |
206 | 207 |
208 | A super badge since a long time ago. 209 |
210 |
211 |
212 |
213 |
214 |
Sybrax#3098
215 |
216 |
217 |
About Me
218 |

Your about me description.

219 |
220 |
221 |
Member Since
222 |

Jun 14, 2017

223 |
224 |
225 |
Note
226 | 227 |
228 |
229 | 230 |
231 |
232 |
233 |
234 | 235 |
236 |
237 | 238 |
239 |
240 |
241 | 244 |
245 |
246 | 247 |
Tooltip
248 |
249 |
250 | 251 |
Tooltip
252 |
253 |
254 | 255 |
256 | A super badge since a long time ago. 257 |
258 |
259 |
260 |
261 |
262 |
Sybrax#3098
263 |
264 |
265 |
About Me
266 |

Your about me description.

267 |
268 |
269 |
Member Since
270 |

Jun 14, 2017

271 |
272 |
273 |
Note
274 | 275 |
276 |
277 |
278 |
279 |
280 | 281 |
282 |
283 |
284 | Modal open! Any question ? 285 | Join our Discord 288 | or visit our 289 | website :) 290 |
291 |
292 | 297 | 298 |
299 |
300 |
301 |
?
302 | 303 | 304 | 305 | -------------------------------------------------------------------------------- /assets/css/style.css: -------------------------------------------------------------------------------- 1 | /* Import */ 2 | @import url("../font/style.css"); 3 | 4 | /* General */ 5 | * { 6 | margin: 0; 7 | padding: 0; 8 | font-family: "Whitney", sans-serif; 9 | box-sizing: border-box; 10 | } 11 | 12 | body, 13 | html { 14 | height: 100%; 15 | display: flex; 16 | align-items: center; 17 | justify-content: center; 18 | background: #1e1e1e; 19 | } 20 | 21 | .tooltip { 22 | display: block; 23 | position: absolute; 24 | color: #b6b7b7; 25 | background: #18191c; 26 | padding: 0.4rem; 27 | border-radius: 3px; 28 | max-width: 150px; 29 | width: max-content; 30 | font-size: 0.9rem; 31 | transform: scale(0); 32 | transition: 0.055s ease-in-out transform; 33 | z-index: 10; 34 | box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.35); 35 | -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.35); 36 | } 37 | 38 | .tooltip-up { 39 | bottom: 42px; 40 | } 41 | 42 | .tooltip-up::before { 43 | content: ""; 44 | position: absolute; 45 | bottom: -5px; 46 | left: 50%; 47 | transform: translateX(-50%); 48 | width: 0; 49 | height: 0; 50 | border-left: 6px solid transparent; 51 | border-right: 6px solid transparent; 52 | border-top: 6px solid #18191c; 53 | } 54 | 55 | .btn { 56 | display: flex; 57 | align-items: center; 58 | justify-content: center; 59 | text-decoration: none; 60 | background-color: #6d5cff; 61 | padding: 10px; 62 | border-radius: 3px; 63 | color: #fff; 64 | font-size: 0.85rem; 65 | transition: 0.2s ease-in-out; 66 | margin-top: 12px; 67 | } 68 | 69 | .btn:hover { 70 | background-color: #4752c4; 71 | } 72 | 73 | /* Card */ 74 | .card-container { 75 | display: flex; 76 | flex-direction: row; 77 | justify-content: space-between; 78 | width: 1450px; 79 | z-index: 0; 80 | } 81 | 82 | .card { 83 | background: #292b2f; 84 | width: 345px; 85 | max-height: 95%; 86 | height: max-content; 87 | border-radius: 9px; 88 | box-shadow: 0px 0px 16px 3px rgba(0, 0, 0, 0.2); 89 | -webkit-box-shadow: 0px 0px 16px 3px rgba(0, 0, 0, 0.2); 90 | scrollbar-width: none; 91 | } 92 | 93 | .card::-webkit-scrollbar { 94 | display: none; 95 | } 96 | 97 | .card-header .banner { 98 | width: 100%; 99 | height: 60px; 100 | background: #ff8527; 101 | border-radius: 6px 6px 0 0; 102 | overflow: hidden; 103 | } 104 | 105 | .card-header .banner-img { 106 | width: 100%; 107 | height: 120px; 108 | background-position: center !important; 109 | background-size: 100% auto !important; 110 | border-radius: 6px 6px 0 0; 111 | overflow: hidden; 112 | } 113 | 114 | .card-body { 115 | padding: 15px; 116 | position: relative; 117 | } 118 | 119 | .card-body .profile-header { 120 | position: absolute; 121 | display: flex; 122 | flex-direction: row; 123 | align-items: flex-end; 124 | justify-content: space-between; 125 | width: calc(100% - 30px); 126 | top: -50px; 127 | } 128 | 129 | .card-body .profile-header .profil-logo { 130 | position: relative; 131 | border: 6px solid #292b2f; 132 | border-radius: 50%; 133 | } 134 | 135 | .card-body .profile-header .profil-logo img { 136 | display: block; 137 | width: 80px; 138 | height: 80px; 139 | border-radius: 50%; 140 | } 141 | 142 | .card-body .profile-header .profil-logo::before { 143 | content: "See Profil"; 144 | position: absolute; 145 | right: 0; 146 | top: 0; 147 | cursor: pointer; 148 | opacity: 0; 149 | width: 100%; 150 | height: 100%; 151 | color: #eeeeee; 152 | background: #0000007e; 153 | display: flex; 154 | align-items: center; 155 | justify-content: center; 156 | border-radius: 50%; 157 | font-size: 0.7rem; 158 | font-weight: 600; 159 | text-transform: uppercase; 160 | transition-duration: 0.15s; 161 | } 162 | 163 | .card-body .profile-header .profil-logo:hover::before { 164 | opacity: 1; 165 | } 166 | 167 | .card-body .profile-header .badges-container { 168 | display: flex; 169 | flex-wrap: wrap; 170 | justify-content: flex-end; 171 | max-width: 150px; 172 | background: #18191c; 173 | border-radius: 7px; 174 | padding: 3px; 175 | } 176 | 177 | .card-body .profile-header .badges-container .badge-item { 178 | position: relative; 179 | margin: 5px; 180 | width: 15px; 181 | height: 15px; 182 | display: flex; 183 | justify-content: center; 184 | align-items: center; 185 | cursor: pointer; 186 | } 187 | 188 | .card-body .profile-header .badges-container .badge-item img { 189 | height: 100%; 190 | } 191 | 192 | .card-body .profile-header .badges-container .badge-item:hover > .tooltip { 193 | transform: scale(1); 194 | } 195 | 196 | .card-body .profile-body { 197 | background: #18191c; 198 | border-radius: 7px; 199 | padding: 13px; 200 | margin-top: 40px; 201 | } 202 | 203 | .card-body .profile-body .username { 204 | color: #eeeeee; 205 | margin-bottom: 13px; 206 | font-weight: 600; 207 | font-size: 1.3rem; 208 | display: flex; 209 | flex-direction: row; 210 | align-items: center; 211 | } 212 | 213 | .card-body .profile-body .username span { 214 | color: #b9bbbe; 215 | } 216 | 217 | .card-body .profile-body .username .badge { 218 | font-size: 0.65rem; 219 | background-color: #5865f2; 220 | text-transform: uppercase; 221 | font-weight: 300; 222 | width: max-content; 223 | padding: 2px 5px; 224 | margin-left: 5px; 225 | border-radius: 3px; 226 | } 227 | 228 | .card-body .profile-body hr { 229 | border: none; 230 | border-top: 0.5px solid #33353b; 231 | } 232 | 233 | .card-body .profile-body .category-title { 234 | color: white; 235 | font-weight: 700; 236 | text-transform: uppercase; 237 | font-size: 0.8rem; 238 | margin-bottom: 8px; 239 | } 240 | 241 | .card-body .profile-body .basic-infos { 242 | margin-bottom: 14px; 243 | margin-top: 12px; 244 | } 245 | 246 | .card-body .profile-body .basic-infos p { 247 | color: #bdbebf; 248 | font-size: 0.9rem; 249 | } 250 | 251 | .card-body .profile-body .basic-infos p a { 252 | color: #02a5e6; 253 | text-decoration: none; 254 | } 255 | 256 | .card-body .profile-body .basic-infos p a:hover { 257 | text-decoration: underline; 258 | } 259 | 260 | .card-body .profile-body .basic-infos p b { 261 | color: #ddd; 262 | } 263 | 264 | .card-body .profile-body .roles { 265 | margin-bottom: 14px; 266 | } 267 | 268 | .card-body .profile-body .roles .roles-list { 269 | display: flex; 270 | flex-wrap: wrap; 271 | } 272 | 273 | .card-body .profile-body .roles .roles-list .role { 274 | background: #292b2f; 275 | color: #f5f5f5; 276 | border-radius: 3px; 277 | font-size: 0.85rem; 278 | font-weight: 300; 279 | padding: 3px 6px; 280 | margin-right: 4px; 281 | margin-top: 4px; 282 | display: flex; 283 | align-items: center; 284 | flex-direction: row; 285 | } 286 | 287 | .card-body .profile-body .roles .roles-list .role .role-color { 288 | position: relative; 289 | width: 11px; 290 | height: 11px; 291 | border-radius: 50%; 292 | margin-right: 5px; 293 | } 294 | 295 | .card-body .profile-body .roles .roles-list .role .role-color:hover::before { 296 | content: "✖"; 297 | position: absolute; 298 | top: -2px; 299 | right: -2px; 300 | font-size: 0.65rem; 301 | color: #f5f5f5; 302 | background: #292b2f; 303 | border-radius: 50%; 304 | width: 15px; 305 | height: 15px; 306 | display: flex; 307 | align-items: center; 308 | justify-content: center; 309 | cursor: pointer; 310 | } 311 | 312 | .card-body .profile-body .roles .roles-list .role-add { 313 | cursor: pointer; 314 | } 315 | 316 | .card-body .profile-body .note textarea { 317 | border: none; 318 | outline: none; 319 | background: transparent; 320 | width: 100%; 321 | min-height: 30px; 322 | color: #e0e0e0; 323 | resize: none; 324 | font-size: 0.8rem; 325 | border-radius: 3px; 326 | padding: 5px; 327 | box-sizing: border-box; 328 | scrollbar-width: none; 329 | } 330 | 331 | .card-body .profile-body .note textarea::-webkit-scrollbar { 332 | display: none; 333 | } 334 | 335 | .card-body .profile-body .note textarea::placeholder { 336 | font-size: 0.8rem; 337 | } 338 | 339 | .card-body .profile-body .note textarea:focus::placeholder { 340 | opacity: 0; 341 | } 342 | 343 | .card-body .profile-body .message input { 344 | background: transparent; 345 | outline: none; 346 | border: 1.2px solid #4b4b4b; 347 | padding: 13px; 348 | width: 100%; 349 | border-radius: 4px; 350 | color: #eeeeee; 351 | margin-top: 14px; 352 | } 353 | 354 | .nitro-card { 355 | position: relative; 356 | background-image: linear-gradient(0, #05172e, #114aa7); 357 | background-blend-mode: multiply; 358 | background-color: #0000006c; 359 | } 360 | 361 | .nitro-card:before { 362 | content: ""; 363 | position: absolute; 364 | top: 0; 365 | right: 0; 366 | bottom: 0; 367 | left: 0; 368 | z-index: -1; 369 | margin: -5px; 370 | border-radius: 12px; 371 | background: linear-gradient(0, #05172e, #114aa7); 372 | } 373 | 374 | .nitro-card .card-body .profile-body { 375 | background: #18191c91; 376 | } 377 | 378 | .nitro-card .card-body .profile-header .profil-logo { 379 | position: relative; 380 | border-color: transparent; 381 | z-index: 0; 382 | } 383 | 384 | .nitro-card .card-body .profile-header .profil-logo:after { 385 | content: ""; 386 | position: absolute; 387 | top: 0; 388 | right: 0; 389 | bottom: 0; 390 | left: 0; 391 | z-index: -1; 392 | margin: -6px; 393 | border-radius: 50%; 394 | background-color: #082553; 395 | } 396 | 397 | .nitro-card .card-body .profile-header .badges-container { 398 | background: #18191c77; 399 | } 400 | 401 | .nitro-card .card-body .profile-body .roles .roles-list .role { 402 | background: #18191c4d; 403 | border: 1px solid #3f4149; 404 | } 405 | 406 | /* Media Queries */ 407 | @media screen and (max-width: 1470px) { 408 | .card-container { 409 | width: 1100px; 410 | } 411 | .card:last-child { 412 | display: none; 413 | } 414 | } 415 | 416 | @media screen and (max-width: 1150px) { 417 | .card-container { 418 | width: 720px; 419 | } 420 | .card:nth-child(3) { 421 | display: none; 422 | } 423 | } 424 | 425 | @media screen and (max-width: 770px) { 426 | .card-container { 427 | width: max-content; 428 | } 429 | .card:nth-child(2) { 430 | display: none; 431 | } 432 | } 433 | 434 | /* Elements below can be removed ( they are just for demo purposes ) */ 435 | 436 | .modal-container { 437 | position: absolute; 438 | width: 100%; 439 | height: 100%; 440 | display: flex; 441 | align-items: center; 442 | justify-content: center; 443 | z-index: 100; 444 | background: rgba(0, 0, 0, 0.5); 445 | backdrop-filter: blur(5px); 446 | visibility: hidden; 447 | } 448 | 449 | .modal { 450 | position: relative; 451 | background: #18191c; 452 | border-radius: 5px; 453 | transform: scale(0); 454 | transition: 0.1s ease-in-out all; 455 | border: 1px solid #2d2d2d; 456 | margin: 0 10px; 457 | display: flex; 458 | flex-direction: column; 459 | align-items: center; 460 | justify-content: center; 461 | } 462 | 463 | .modal .modal-header { 464 | color: #eee; 465 | padding: 15px; 466 | background: #1f2024; 467 | border-bottom: 1px solid #2d2d2d; 468 | } 469 | 470 | .modal .modal-header a { 471 | text-decoration: none; 472 | color: #d6d6d6; 473 | transition-duration: 0.2s; 474 | border-bottom: 1px dotted #d6d6d6; 475 | } 476 | 477 | .modal .modal-header a:hover { 478 | color: #fff; 479 | border-bottom: 1px solid #f87610; 480 | } 481 | 482 | .modal .modal-body { 483 | padding: 15px; 484 | width: 100%; 485 | } 486 | 487 | .modal .modal-body input { 488 | width: 100%; 489 | padding: 10px; 490 | border: 1px solid #2d2d2d; 491 | border-radius: 3px; 492 | background: #18191c; 493 | outline: none; 494 | color: #eee; 495 | transition: 0.2s all; 496 | } 497 | 498 | .modal .modal-body input::placeholder { 499 | color: #a1a1a1; 500 | } 501 | 502 | .modal .modal-body input:hover { 503 | background: #141414; 504 | } 505 | 506 | .modal .modal-body input:focus { 507 | background: #141414; 508 | } 509 | 510 | .modal .modal-body .feedback-state { 511 | display: none; 512 | color: #fff; 513 | font-size: 0.8rem; 514 | padding-top: 7px; 515 | z-index: 100; 516 | transition: 0.2s all; 517 | } 518 | 519 | .modal .modal-body .feedback-state.success { 520 | display: block; 521 | color: #50f750; 522 | } 523 | 524 | .modal .modal-body .feedback-state.error { 525 | display: block; 526 | color: #ee4c4c; 527 | } 528 | 529 | .active { 530 | visibility: visible; 531 | } 532 | 533 | .active .modal { 534 | transform: scale(1); 535 | } 536 | 537 | .help-btn { 538 | position: absolute; 539 | bottom: 10px; 540 | right: 10px; 541 | padding: 10px; 542 | color: #ffffff; 543 | font-size: 1.2rem; 544 | cursor: pointer; 545 | transition: 0.2s all; 546 | background: #4a4b4d; 547 | border-radius: 50%; 548 | width: 40px; 549 | height: 40px; 550 | display: flex; 551 | align-items: center; 552 | justify-content: center; 553 | } 554 | 555 | .help-btn:hover { 556 | background: #f87610; 557 | } 558 | -------------------------------------------------------------------------------- /DiscordUserCard.vue: -------------------------------------------------------------------------------- 1 | 62 | 63 | 153 | 154 | --------------------------------------------------------------------------------