API tools faq
paste
Advertisement
inklimg

/shellfie bundlrs code

inklimg
Feb 20th, 2024 (edited)
1,171
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.37 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <html lang="en">
  4. <head>
  5. <meta charset="UTF-8" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <!-- fontawesome -->
  8. <script
  9. src="https://kit.fontawesome.com/83935518ee.js"
  10. crossorigin="anonymous"
  11. ></script>
  12.  
  13. <!-- opengraph (optional) -->
  14. <meta content="https://bundlrs.cc/shellfie" property="og:url" />
  15. <meta content="discord themed template" property="og:title" />
  16. <meta content="by @shellfie on disc" property="og:description" />
  17. <meta content="#ffdbfb" name="theme-color" />
  18. <!-- end opengraph -->
  19.  
  20. <title>Discord theme</title>
  21. <style>
  22. /* fonts */
  23.  
  24. /* yes this is the discord font */
  25. @font-face {
  26. font-family: "gg sans medium";
  27. font-weight: 500;
  28. src: url("https://file.garden/ZRgh3nzfnhFDJvPp/gg-sans-Medium.woff")
  29. format("woff");
  30. }
  31.  
  32. @font-face {
  33. font-family: "gg sans semibold";
  34. font-weight: 600;
  35. src: url("https://file.garden/ZRgh3nzfnhFDJvPp/gg-sans-Semibold.woff")
  36. format("woff");
  37. }
  38.  
  39. @font-face {
  40. font-family: "gg sans bold";
  41. font-weight: 700;
  42. src: url("https://file.garden/ZRgh3nzfnhFDJvPp/gg-sans-Bold.woff")
  43. format("woff");
  44. }
  45.  
  46. /* variables */
  47.  
  48. :root {
  49. --main-color: #ffdbfb; /* background color of the profile */
  50. --accent: #ffb3f6; /* background color of boxes */
  51. --accent2: #d557ff; /* border color of boxes */
  52. --accent3: #a72edc; /* color of buttons & spotify progress bar */
  53.  
  54. --text1: #000000; /* main text color */
  55. --text2: #c44acf; /* muted text color */
  56. --text3: #ffffff; /* edit buttons text color */
  57.  
  58. --spacing: 3%; /* main number for margin, padding, etc */
  59. --border-radius: 8px; /* border radius for basically everything */
  60.  
  61. font-size: 14px; /* 1rem */
  62. }
  63.  
  64. /* box sizing */
  65.  
  66. * {
  67. box-sizing: border-box;
  68. padding: 0;
  69. margin: 0;
  70. line-height: 1em;
  71. }
  72.  
  73. /* global styles */
  74.  
  75. body {
  76. font-family: "gg sans medium";
  77. color: var(--text1);
  78. height: 100dvh;
  79. width: 100vw;
  80. padding-top: 1rem;
  81. }
  82.  
  83. /* utilities / misc text styling */
  84.  
  85. .muted {
  86. color: var(--text2);
  87. }
  88.  
  89. .bold {
  90. font-family: "gg sans bold";
  91. }
  92.  
  93. .sub-header {
  94. font-size: 0.8rem;
  95. }
  96.  
  97. [role="underline"] {
  98. text-decoration: underline;
  99. }
  100.  
  101. a {
  102. color: var(--text1);
  103. }
  104.  
  105. .flex {
  106. display: flex;
  107. }
  108.  
  109. /* main container */
  110.  
  111. .container-wrap {
  112. height: max-content;
  113. width: max-content;
  114. background: var(--main-color);
  115. border-radius: var(--border-radius);
  116. overflow: hidden;
  117. margin: 0 auto; /* center container */
  118. }
  119.  
  120. .container {
  121. flex-direction: column;
  122. width: 330px; /* width of container */
  123. height: auto;
  124. }
  125.  
  126. .container > * {
  127. width: 100%; /* make everything that is directly inside the container full width */
  128. }
  129.  
  130. /* top area (banner and avatar) */
  131.  
  132. .banner {
  133. height: 110px;
  134. background-image: url("https://file.garden/ZRgh3nzfnhFDJvPp/IMG_8556.png"); /* this is where you can change the banner image */
  135. background-size: cover;
  136. background-position: center;
  137. }
  138.  
  139. /* paintbrush icon */
  140. .icon {
  141. background: hsla(0, 0%, 20%, 0.6);
  142. border-radius: 100%;
  143. width: 1.6em;
  144. height: 1.6em;
  145. display: flex;
  146. justify-content: center;
  147. align-items: center;
  148. position: relative;
  149. margin-left: auto;
  150. top: calc(var(--spacing) * 2);
  151. right: var(--spacing);
  152. }
  153.  
  154. .icon i {
  155. color: white;
  156. font-size: 0.8em;
  157. }
  158.  
  159. .icon:hover i {
  160. opacity: 0.5;
  161. }
  162.  
  163. .avatar {
  164. margin: -15% auto 0 var(--spacing);
  165. border-radius: 100%;
  166. overflow: hidden;
  167. height: 100px;
  168. width: 100px;
  169. border: 7px solid var(--main-color);
  170. }
  171.  
  172. .avatar img {
  173. object-fit: cover; /* make sure image covers entire container */
  174. height: 100%;
  175. width: auto;
  176. }
  177.  
  178. /* boxes area + boxes */
  179.  
  180. .box-area {
  181. padding: var(--spacing);
  182. }
  183.  
  184. .box-area > :is(div, main) {
  185. min-height: 50px;
  186. width: 100%;
  187. border: 2.5px solid var(--accent2);
  188. border-radius: var(--border-radius);
  189. background: var(--accent);
  190. padding: calc(var(--spacing) + 1%);
  191. }
  192.  
  193. .summary {
  194. padding: 0 !important;
  195. }
  196.  
  197. .spotify,
  198. .main {
  199. margin-top: var(--spacing);
  200. }
  201.  
  202. /* first box */
  203.  
  204. /* line separating status / buttons */
  205. hr {
  206. width: 100%;
  207. border-style: solid hidden hidden hidden;
  208. border-top: 1px solid var(--accent2);
  209. }
  210.  
  211. /* text styling */
  212.  
  213. .summary h1 {
  214. font-size: 1.6em; /* name text */
  215. }
  216.  
  217. .summary .status {
  218. display: block;
  219. margin-top: 2%;
  220. }
  221.  
  222. .summary .inner {
  223. padding: var(--spacing);
  224. }
  225.  
  226. .summary .inner:last-child {
  227. gap: var(--spacing);
  228. }
  229.  
  230. /* edit buttons */
  231. .summary button {
  232. width: 50%; /* make both half width of container */
  233. border-radius: calc(var(--border-radius) / 2);
  234. height: 30px;
  235. font-family: "gg sans semibold";
  236. font-size: 0.9rem;
  237. background: var(--accent3);
  238. color: var(--text3);
  239. border: none;
  240. transition: opacity 0.2s ease;
  241. }
  242.  
  243. .summary button:hover {
  244. opacity: 0.75; /* make buttons slightly transparent on hover */
  245. }
  246.  
  247. /* spotify status */
  248.  
  249. .spotify {
  250. flex-direction: column;
  251. gap: 5px;
  252. }
  253.  
  254. /* add space between "listening to spotify" and spotify icon */
  255. .spotify-header {
  256. justify-content: space-between;
  257. }
  258.  
  259. /* spotify icon, you can change the color if you want */
  260. .spotify-header i {
  261. font-size: inherit;
  262. color: #3ba55c;
  263. }
  264.  
  265. .spotify-body {
  266. gap: var(--spacing);
  267. align-items: center; /* make sure content is aligned vertically */
  268. height: 60px;
  269. position: relative;
  270. }
  271.  
  272. .spotify-img {
  273. height: 100%;
  274. width: auto;
  275. border-radius: calc(var(--border-radius) / 2);
  276. }
  277.  
  278. /* pause/play icons container */
  279. .pause-play {
  280. position: absolute;
  281. bottom: 0;
  282. right: 0;
  283. }
  284.  
  285. /* pause/play icons */
  286. .pause-play span {
  287. color: var(--accent3);
  288. font-size: 1.5rem;
  289. }
  290.  
  291. /* progress bar */
  292.  
  293. .spotify-bottom progress {
  294. -webkit-appearance: none;
  295. -moz-appearance: none;
  296. appearance: none;
  297. width: 100%;
  298. height: 2px;
  299. border: none;
  300. margin-bottom: 8px;
  301. }
  302.  
  303. /* good lord. all CSS for progress bar since you have to style individually for different browsers */
  304. .spotify-bottom progress::-webkit-progress-bar {
  305. background-color: white;
  306. border-radius: 100px;
  307. }
  308.  
  309. .spotify-bottom progress::-webkit-progress-value {
  310. background: var(--accent3);
  311. border-radius: 100px;
  312. }
  313.  
  314. /* same as ::-webkit-progress-bar */
  315. .spotify-bottom progress::-moz-progress-bar {
  316. background: white;
  317. border-radius: 100px;
  318. }
  319.  
  320. /* same as ::-webkit-progress-value */
  321. .spotify-bottom progress::-moz-progress-value {
  322. background: var(--accent3);
  323. border-radius: 100px;
  324. }
  325.  
  326. /* start/end times */
  327. .spotify-bottom p {
  328. justify-content: space-between;
  329. font-size: 0.8rem;
  330. }
  331.  
  332. /* final box */
  333.  
  334. .main {
  335. flex-direction: column;
  336. gap: 7px;
  337. }
  338.  
  339. .main .sub-header {
  340. display: block;
  341. margin-bottom: 0.25rem;
  342. }
  343.  
  344. /* mute button */
  345. .main button {
  346. width: 100%;
  347. border-radius: var(--border-radius);
  348. height: 35px;
  349. font-size: 1rem;
  350. text-align: left;
  351. padding: 0.5rem 1rem;
  352. word-spacing: 10px;
  353. color: var(--text1);
  354. background: var(--accent);
  355. border: 2px solid var(--accent3);
  356. transition: background 0.2s ease;
  357. }
  358.  
  359. .main button:hover {
  360. background: color-mix(in srgb, transparent 70%, var(--accent3));
  361. }
  362. </style>
  363. </head>
  364.  
  365. <body>
  366. <div class="container-wrap">
  367. <!-- start main container -->
  368. <div class="container flex">
  369. <!-- start top area -->
  370. <div class="top-area">
  371. <!-- banner container; image can be changed in CSS -->
  372. <div class="banner">
  373. <span class="icon">
  374. <i class="fa-solid fa-paintbrush" title="Paintbrush"></i>
  375. </span>
  376. </div>
  377. <!-- end banner container -->
  378.  
  379. <!-- start icon image -->
  380. <figure class="avatar">
  381. <!-- icon image (preferrably a square) -->
  382. <img
  383. src="https://file.garden/ZRgh3nzfnhFDJvPp/harmoney.jpeg"
  384. alt="Harmony/Paruko from Splatoon sitting on the floor"
  385. />
  386. </figure>
  387. <!-- end icon image -->
  388. </div>
  389. <!-- end top area -->
  390.  
  391. <!-- start boxes area -->
  392. <div class="box-area">
  393. <!-- first box -->
  394. <div class="summary">
  395. <div class="inner">
  396. <!-- start text -->
  397. <h1 class="bold">name here</h1>
  398. <span>username</span>
  399. <br />
  400. <span class="pronouns muted">prn prn prn</span>
  401. <br />
  402. <span class="status">my status</span>
  403. <!-- end text -->
  404. </div>
  405. <hr />
  406. <div class="inner flex">
  407. <button>Edit user profile</button>
  408. <button>Edit server profile</button>
  409. </div>
  410. </div>
  411. <!-- end first box -->
  412.  
  413. <!-- second box -->
  414. <div class="spotify flex">
  415. <!-- start spotify header -->
  416. <section class="spotify-header flex">
  417. <span class="bold sub-header">LISTENING TO SPOTIFY</span>
  418. <i class="fa-brands fa-spotify"></i>
  419. </section>
  420. <!-- end spotify header -->
  421.  
  422. <!-- start spotify body -->
  423. <section class="spotify-body flex">
  424. <!-- album image (preferrably a square) -->
  425. <img
  426. class="spotify-img"
  427. alt="alt text goes here"
  428. src="https://file.garden/ZRgh3nzfnhFDJvPp/IMG_8562.jpeg"
  429. />
  430. <section>
  431. <header class="bold">Song Name</header>
  432. <span class="muted">by</span> Song Artist
  433. <br />
  434. <span class="muted">on</span> Song Album
  435. <div class="pause-play" onclick="toggleAudio()">
  436. <span id="audio-play"><i class="fa-solid fa-circle-play"></i></span>
  437. <span id="audio-pause" style="display: none;"><i class="fa-solid fa-circle-pause"></i></span>
  438. </div>
  439. </section>
  440. </section>
  441. <!-- end spotify body -->
  442.  
  443. <!-- start spotify progress bar -->
  444. <section class="spotify-bottom">
  445. <progress min="1" max="100" value="0" class="progress" onchange="seekTo()"></progress>
  446. <p class="flex">
  447. <!-- start times -->
  448. <span class="current-time">0:00</span>
  449. <span class="total-time">0:00</span>
  450. <!-- end times -->
  451. </p>
  452. </section>
  453. <!-- end spotify progress bar -->
  454. </div>
  455. <!-- end second box -->
  456.  
  457. <!-- third box -->
  458. <main class="main flex">
  459. <span class="sub-header bold">VOICE SETTINGS</span>
  460. <button><i class="fa-solid fa-microphone"></i> Mute</button>
  461. <div class="inner">
  462. <!-- start about section-->
  463. <span class="sub-header bold">ABOUT</span>
  464. <p>
  465. <a href="https://pastebin.com/fYvG06Yt">pastebin with code</a> ,, discord themed
  466. atomic bundlrs by @shellfie on disc, idc about credit just dont
  467. gatekeep the code! all colors are changeable through variables
  468. </p>
  469. <!-- end about section -->
  470.  
  471. <br />
  472.  
  473. <!-- start note section -->
  474. <span class="sub-header bold">NOTE</span>
  475. <p>
  476. <span role="underline">dni</span> info info info info info info
  477. info info info info info info info info info info
  478. <br />
  479. <br />
  480. <span role="underline">byf</span> info info info info info info
  481. info info info info info info info info info info
  482. </p>
  483. <!-- end note section -->
  484.  
  485. <br />
  486.  
  487. <!-- start interests section -->
  488. <span class="sub-header bold">ROLES</span>
  489. <p>
  490. <span role="underline">interests</span> info info info info info
  491. info info info info info info info info info info info
  492. </p>
  493. <!-- end interests section -->
  494. </div>
  495. </main>
  496. <!-- end third box -->
  497. </div>
  498. <!-- end boxes area -->
  499. </div>
  500. <!-- end main container -->
  501. </div>
  502. <script>
  503. // audio player
  504.  
  505. // replace with your own url
  506. const audio = new Audio("https://file.garden/ZRgh3nzfnhFDJvPp/blitzit.mp3");
  507.  
  508. // playing state
  509. let playing = false;
  510.  
  511. // icons
  512. const play = document.getElementById("audio-play");
  513. const pause = document.getElementById("audio-pause");
  514.  
  515. // time things
  516. let progress = document.querySelector(".progress");
  517. let update_time = setInterval(seekUpdate, 1000);
  518. let curr_time = document.querySelector(".current-time");
  519. let total_time = document.querySelector(".total-time");
  520.  
  521. function toggleAudio() {
  522. // toggle playing state
  523. playing = !playing;
  524.  
  525. // make icons show/hide
  526. if (playing) {
  527. play.style.display = "none";
  528. pause.style.display = "block";
  529. } else {
  530. play.style.display = "block";
  531. pause.style.display = "none";
  532. }
  533.  
  534. // play/pause audio
  535. if (playing) audio.play();
  536. else audio.pause();
  537. }
  538.  
  539. function seekTo() {
  540. seekto = audio.duration * (progress.value / 100);
  541. audio.currentTime = seekto;
  542. }
  543.  
  544. function seekUpdate() {
  545. let seekPosition = 0;
  546.  
  547. // check if the current track duration is a legible number
  548. if (!isNaN(audio.duration)) {
  549. seekPosition = audio.currentTime * (100 / audio.duration);
  550. progress.value = seekPosition;
  551.  
  552. // calculate the time left and the total duration
  553. let currentMinutes = Math.floor(audio.currentTime / 60);
  554. let currentSeconds = Math.floor(audio.currentTime - currentMinutes * 60);
  555. let durationMinutes = Math.floor(audio.duration / 60);
  556. let durationSeconds = Math.floor(audio.duration - durationMinutes * 60);
  557.  
  558. // adding a zero to the single digit time values
  559. if (currentSeconds < 10) { currentSeconds = "0" + currentSeconds; }
  560. if (durationSeconds < 10) { durationSeconds = "0" + durationSeconds; }
  561. if (currentMinutes < 10) { currentMinutes = currentMinutes; }
  562. if (durationMinutes < 10) { durationMinutes = durationMinutes; }
  563.  
  564. curr_time.textContent = currentMinutes + ":" + currentSeconds;
  565. total_time.textContent = durationMinutes + ":" + durationSeconds;
  566. }
  567. }
  568. </script>
  569. </body>
  570. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!