API tools faq
paste
iStabOreos

New Profile - Stylish

iStabOreos
Jun 7th, 2026 (edited)
18
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 21.32 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta http-equiv="X-UA-Compatible" content="IE=11">
  5. <title>Click Image to Change Profile</title>
  6. <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap" rel="stylesheet">
  7. <style>
  8. body {
  9. margin: 0;
  10. font-family: 'Orbitron', sans-serif;
  11. color: #00ffff;
  12. background-image: url("Link Here") !important;
  13. text-align: center;
  14. transition: background 0.5s ease;
  15. background-size: cover;
  16. background-attachment: fixed;
  17. background-position: center;
  18. }
  19.  
  20. .hud-container {
  21. width: 400px;
  22. margin: 50px auto;
  23. padding: 20px;
  24. background: rgba(255,215,0,0.3);
  25. border: 2px solid rgba(220, 255, 255, 0.5);
  26. border-radius: 15px;
  27. }
  28.  
  29. .hud-header {
  30. padding: 10px;
  31. font-size: 1.5rem;
  32. text-transform: uppercase;
  33. color: gold;
  34. border: 2px solid rgba(0, 255, 255, 0.5);
  35. border-radius: 10px;
  36. background: black;
  37. }
  38.  
  39. .hud-image {
  40. width: 100%;
  41. height: 400px;
  42. background-size: contain;
  43. background-repeat: no-repeat;
  44. background-position: center top;
  45. border-radius: 10px;
  46. cursor: pointer;
  47. transition: background 0.5s ease;
  48. }
  49.  
  50. .audio-controls {
  51. display: flex;
  52. align-items: center;
  53. justify-content: center;
  54. gap: 10px;
  55. margin-top: 15px;
  56. }
  57.  
  58. .audio-controls input[type="range"] {
  59. width: 120px;
  60. }
  61.  
  62. .popup {
  63. position: fixed;
  64. top: 50%;
  65. left: 50%;
  66. transform: translate(-50%, -50%);
  67. width: 600px;
  68. padding: 25px;
  69. background: rgba(0,0,0,0.9);
  70. border: 2px solid silver;
  71. border-radius: 12px;
  72. text-align: center;
  73. color: gold;
  74. font-size: 0.9rem;
  75. box-shadow: 0 0 25px gold;
  76. display: none;
  77. }
  78.  
  79.  
  80. .popup-title {
  81. font-size: 1.5rem;
  82. margin-bottom: 10px;
  83. }
  84.  
  85. .popup-content {
  86. display: flex;
  87. gap: 15px;
  88. text-align: left;
  89. padding-top: 10px;
  90. }
  91.  
  92. .popup-menu {
  93. flex-shrink: 0;
  94. display: flex;
  95. flex-direction: column;
  96. gap: 10px;
  97. }
  98.  
  99. .popup-tab-button {
  100. background: transparent;
  101. border: 2px solid silver;
  102. border-radius: 5px;
  103. color: silver;
  104. padding: 6px 10px;
  105. font-family: 'Orbitron', sans-serif;
  106. font-size: 0.75rem;
  107. cursor: pointer;
  108. transition: background 0.3s ease;
  109. text-align: left;
  110. }
  111.  
  112. .popup-tab-button:hover {
  113. background: rgba(0, 255, 255, 0.2);
  114. }
  115.  
  116. .popup-tab-content {
  117. flex-grow: 1;
  118. font-size: 0.9rem;
  119. max-height: 350px;
  120. overflow-y: auto;
  121. padding-left: 15px;
  122. border-left: 2px solid rgba(255, 255, 255, 0.3);
  123. padding-top: 5px;
  124. }
  125.  
  126. .popup-tab-content::before {
  127. content: "";
  128. display: block;
  129. height: 2px;
  130. background: silver;
  131. margin-bottom: 10px;
  132. }
  133.  
  134. .altProfile-theme .popup-tab-button {
  135. border-color: #a020f0;
  136. color: #d4a5ff;
  137. }
  138.  
  139. .altProfile-theme .popup-tab-button:hover {
  140. background: rgba(0, 0, 0, 0.2);
  141. }
  142.  
  143. .altProfile-theme .popup-tab-content {
  144. border-left: 2px solid rgba(255, 215, 0, 0.3);
  145. }
  146.  
  147. .altProfile-theme .popup-tab-content::before {
  148. background: gold;
  149. }
  150.  
  151.  
  152. .popup-button {
  153. margin-top: 15px;
  154. padding: 8px 12px;
  155. background: black;
  156. border: 2px solid black;
  157. color: white;
  158. border-radius: 5px;
  159. cursor: pointer;
  160. text-transform: uppercase;
  161. transition: background 0.3s ease;
  162. }
  163.  
  164. .popup-button:hover {
  165. background: rgba(242, 255, 0, 0.5);
  166. }
  167.  
  168. .popup-content {
  169. display: flex;
  170. gap: 15px;
  171. text-align: left;
  172. padding-top: 10px;
  173. }
  174.  
  175. .popup-menu {
  176. flex-shrink: 0;
  177. display: flex;
  178. flex-direction: column;
  179. gap: 10px;
  180. }
  181.  
  182. .popup-tab-button {
  183. background: transparent;
  184. border: 2px solid silver;
  185. border-radius: 5px;
  186. color: gold;
  187. padding: 6px 10px;
  188. font-family: 'Orbitron', sans-serif;
  189. font-size: 0.75rem;
  190. cursor: pointer;
  191. transition: background 0.3s ease;
  192. text-align: left;
  193. }
  194.  
  195. .popup-tab-button:hover {
  196. background: rgba(0, 255, 255, 0.2);
  197. }
  198.  
  199. .popup-tab-content {
  200. flex-grow: 1;
  201. font-size: 0.85rem;
  202. max-height: 300px;
  203. overflow-y: auto;
  204. padding-right: 5px;
  205. }
  206.  
  207. .journal-log {
  208. display: flex;
  209. flex-direction: column;
  210. gap: 1rem;
  211. }
  212.  
  213. .journal-entry {
  214. background: rgba(0, 0, 0, 0.4);
  215. border: 1px solid;
  216. border-radius: 10px;
  217. padding: 0.75rem 1rem;
  218. cursor: pointer;
  219. transition: background 0.3s ease;
  220. position: relative;
  221. }
  222.  
  223. .journal-entry:hover {
  224. background: rgba(0, 55, 55, 0.1);
  225. }
  226.  
  227. .journal-title {
  228. font-family: 'Orbitron', sans-serif;
  229. font-size: 1rem;
  230. text-transform: uppercase;
  231. letter-spacing: 1px;
  232. color: silver;
  233. text-shadow: 0 0 5px gold;
  234. transition: all 0.3s ease;
  235. }
  236.  
  237. .journal-summary {
  238. max-height: 0;
  239. overflow: hidden;
  240. opacity: 0;
  241. margin-top: 0.5rem;
  242. font-size: 0.9rem;
  243. color: silver;
  244. line-height: 1.4;
  245. transition: max-height 0.5s ease, opacity 0.5s ease;
  246. }
  247.  
  248. .journal-entry.active .journal-summary {
  249. max-height: 200px;
  250. opacity: 1;
  251. }
  252.  
  253. /* Character-specific styles */
  254. .journal-log.mainProfile-style .journal-entry {
  255. border-color: silver;
  256. }
  257.  
  258. .journal-log.mainProfile-style .journal-title {
  259. color: silver;
  260. text-shadow: 0 0 8px silver;
  261. }
  262.  
  263. .journal-log.altProfile-style .journal-entry {
  264. border-color: #f0f;
  265. }
  266.  
  267. .journal-log.altProfile-style .journal-title {
  268. color: #f0f;
  269. text-shadow: 0 0 8px #f0f;
  270. }
  271.  
  272.  
  273.  
  274. .relationship-entry {
  275. margin-bottom: 20px;
  276. }
  277.  
  278. .relationship-name {
  279. font-weight: bold;
  280. margin-bottom: 5px;
  281. }
  282.  
  283.  
  284. .profile-readout {
  285. background: rgba(0, 0, 0, 0.4);
  286. border: 1px solid silver;
  287. border-radius: 8px;
  288. padding: 1.5rem;
  289. color: white;
  290. font-family: 'Orbitron', sans-serif;
  291. animation: dataDrop 0.8s ease-out;
  292. position: relative;
  293. overflow: hidden;
  294. }
  295.  
  296. .readout-header {
  297. font-size: 1.2rem;
  298. border-bottom: 2px solid silver;
  299. padding-bottom: 0.5rem;
  300. margin-bottom: 1rem;
  301. text-shadow: 0 0 8px silver;
  302. letter-spacing: 1px;
  303. }
  304.  
  305. .char-code {
  306. color: gold;
  307. animation: flicker 1.2s infinite;
  308. }
  309.  
  310. .profile-grid {
  311. display: grid;
  312. grid-template-columns: 1fr 1fr;
  313. gap: 1rem;
  314. }
  315.  
  316. .profile-item {
  317. display: flex;
  318. flex-direction: column;
  319. }
  320.  
  321. .profile-item.full {
  322. grid-column: span 2;
  323. }
  324.  
  325. .profile-label {
  326. font-size: 0.8rem;
  327. color: white;
  328. text-transform: uppercase;
  329. margin-bottom: 0.2rem;
  330. letter-spacing: 0.1rem;
  331. opacity: 0.8;
  332. }
  333.  
  334. .profile-value {
  335. font-size: 1rem;
  336. color: gold;
  337. text-shadow: 0 0 4px white;
  338. animation: pulseGlow 3s ease-in-out infinite;
  339. }
  340.  
  341. .glitch {
  342. animation: glitchText 1.5s infinite;
  343. }
  344.  
  345. /* ANIMATIONS */
  346. @keyframes dataDrop {
  347. 0% {
  348. opacity: 0;
  349. transform: translateY(-20px) scale(0.95);
  350. }
  351. 100% {
  352. opacity: 1;
  353. transform: translateY(0) scale(1);
  354. }
  355. }
  356.  
  357. @keyframes flicker {
  358. 0%, 18%, 22%, 25%, 53%, 57%, 100% {
  359. opacity: 1;
  360. }
  361. 20%, 24%, 55% {
  362. opacity: 0.3;
  363. }
  364. }
  365.  
  366. @keyframes pulseGlow {
  367. 0%, 100% {
  368. text-shadow: 0 0 5px black, 0 0 10px white;
  369. }
  370. 50% {
  371. text-shadow: 0 0 15px black, 0 0 30px white;
  372. }
  373. }
  374.  
  375. @keyframes glitchText {
  376. 0% {
  377. text-shadow: 2px 0 silver, -2px 0 gold;
  378. }
  379. 20% {
  380. text-shadow: -2px 0 silver, 2px 0 gold;
  381. }
  382. 40% {
  383. text-shadow: 2px 2px silver, -2px -2px gold;
  384. }
  385. 60% {
  386. text-shadow: -1px 1px silver, 1px -1px gold;
  387. }
  388. 80%, 100% {
  389. text-shadow: 0 0 silver, 0 0 gold;
  390. }
  391. }
  392.  
  393.  
  394.  
  395. .relationship-bar {
  396. height: 20px;
  397. width: 100%;
  398. background: rgba(0, 255, 255, 0.15);
  399. border: 1px solid rgba(0, 255, 255, 0.4);
  400. border-radius: 10px;
  401. overflow: hidden;
  402. position: relative;
  403. margin-top: 5px;
  404. transition: max-height 0.4s ease, opacity 0.4s ease;
  405. }
  406.  
  407. .lava-fill {
  408. height: 100%;
  409. background: linear-gradient(120deg, black, gold, black);
  410. background-size: 300% 300%;
  411. animation: lavaCrash 2.5s ease-in-out infinite;
  412. border-radius: 10px 0 0 10px;
  413. filter: brightness(1.2) saturate(1.5);
  414. }
  415.  
  416. @keyframes lavaFlow {
  417. 0% { background-position: 0% 50%; }
  418. 100% { background-position: 200% 50%; }
  419. }
  420.  
  421. @keyframes lavaCrash {
  422. 0% {
  423. background-position: 0% 50%;
  424. transform: skewX(0deg) scaleX(1);
  425. }
  426. 25% {
  427. background-position: 100% 50%;
  428. transform: skewX(-5deg) scaleX(1.03);
  429. }
  430. 50% {
  431. background-position: 50% 50%;
  432. transform: skewX(5deg) scaleX(0.97);
  433. }
  434. 75% {
  435. background-position: 0% 50%;
  436. transform: skewX(-3deg) scaleX(1.02);
  437. }
  438. 100% {
  439. background-position: 100% 50%;
  440. transform: skewX(2deg) scaleX(1);
  441. }
  442. }
  443.  
  444.  
  445. /* Initially hidden bar */
  446. .hidden-bar {
  447. max-height: 0;
  448. opacity: 0;
  449. pointer-events: none;
  450. }
  451.  
  452. /* Revealed bar */
  453. .show-bar {
  454. max-height: 30px;
  455. opacity: 1;
  456. pointer-events: all;
  457. }
  458.  
  459. .relationship-name {
  460. font-weight: bold;
  461. cursor: pointer;
  462. user-select: none;
  463. }
  464.  
  465.  
  466. .altProfile-theme .popup-tab-button {
  467. border-color: black;
  468. color: gold;
  469. background: rgba(0,0,0,0.3);
  470. }
  471.  
  472. .altProfile-theme .popup-tab-button:hover {
  473. background: rgba(0, 0, 0, 0.2);
  474. }
  475.  
  476.  
  477. .overlay {
  478. position: fixed;
  479. top: 0;
  480. left: 0;
  481. width: 100%;
  482. height: 100%;
  483. background: rgba(0, 0, 0, 0.7);
  484. display: none;
  485. }
  486.  
  487. .altProfile-theme {
  488. background-image: url("https://i.postimg.cc/SxH7P5z0/Skyscape.gif") !important;
  489. background-repeat: no-repeat;
  490. background-size: 100% 100%;
  491. background-position: center;
  492. background-attachment: fixed;
  493. }
  494.  
  495. .altProfile-theme .hud-container {
  496. border-color: silver;
  497. background: rgba(0,0,0, 0.3);
  498. }
  499.  
  500. .altProfile-theme .hud-header {
  501. color: Gold;
  502. border-color: silver;
  503. background: Black;
  504. }
  505.  
  506. .altProfile-theme .popup {
  507. background: rgba(192,192,192, 0.9);
  508. border-color: silver;
  509. color: gold;
  510. }
  511.  
  512. .altProfile-theme .popup-button {
  513. border-color: black;
  514. color: gold;
  515. }
  516.  
  517. .altProfile-theme .popup-content hr {
  518. background: gold;
  519. }
  520.  
  521. .altProfile-theme .relationship-bar {
  522. background: rgba(160, 32, 240, 0.1);
  523. border: 1px solid rgba(160, 32, 240, 0.5);
  524. }
  525.  
  526. .altProfile-theme .lava-fill {
  527. background: linear-gradient(120deg, silver, gold, silver);
  528. }
  529.  
  530.  
  531. .glitchName {
  532. animation: glitchName 0.8s infinite alternate;
  533. }
  534.  
  535.  
  536.  
  537.  
  538. @keyframes lavaFlow {
  539. 0% { background-position: 0% 50%; }
  540. 100% { background-position: 200% 50%; }
  541. }
  542.  
  543.  
  544. @keyframes glitchName {
  545. 0% { text-shadow: 2px 2px gold, -2px -2px #00ffff; }
  546. 25% { text-shadow: -2px 2px gold, 2px -2px #00ffff; }
  547. 50% { text-shadow: 2px -2px gold, -2px 2px #00ffff; }
  548. 75% { text-shadow: -1px 1px gold, 1px -1px #00ffff; }
  549. 100% { text-shadow: 0px 0px gold, 0px 0px #00ffff; }
  550. }
  551. </style>
  552. </head>
  553. <body onload="initializeHUD()">
  554.  
  555. <div class="hud-container" id="hud-container">
  556. <div class="hud-header glitchName" id="hud-title">Name Here</div>
  557. <div class="hud-image" id="hud-image" onclick="toggleCharacter()"></div>
  558.  
  559. <div class="audio-controls">
  560. <button onclick="togglePlay()">&#9654; <!-- This is â–¶ --></button>
  561. <input type="range" min="0" max="1" step="0.01" id="volumeControl" onchange="changeVolume(this.value)">
  562. </div>
  563.  
  564. <button class="popup-button glitchName" onclick="showPopup('info')">INFO</button>
  565. </div>
  566.  
  567. <div class="overlay" id="overlay" onclick="hidePopup()"></div>
  568.  
  569. <div class="popup" id="popup">
  570. <div class="popup-title" id="popup-title">INFO</div>
  571. <hr>
  572. <div class="popup-content">
  573. <div class="popup-menu" id="popup-menu">
  574. <!-- Tabs are rendered dynamically based on active profile -->
  575. </div>
  576. <div class="popup-tab-content" id="popup-tab-content">
  577. <!-- Dynamic content goes here -->
  578. </div>
  579. </div>
  580. <button class="popup-button" onclick="hidePopup()">CLOSE</button>
  581. </div>
  582.  
  583. <!-- DROPBOX MUSIC HERE. Upload an mp3 to dropbox. Backspace the url until the '&' symbol, and change 'www' to 'dl'-->
  584. <audio id="mainProfile-audio" loop>
  585. <source src="https://dl.dropbox.com/scl/fi/4hmwvb0ia8ef151q8m2ee/Puella-Magi-Madoka-Magica-Soundtrack-a-human-bullet.mp3?rlkey=9rqiqqs8pzfv6c45ot7d5mgid&st=ao6sjzli&dl=1" type="audio/mp3">
  586. </audio>
  587.  
  588. <audio id="altProfile-audio" loop>
  589. <source src="https://i.pinimg.com/1200x/ac/b9/ea/acb9ea498ac7549fca87efc81859c8bb.jpg=1" type="audio/mp3">
  590. </audio>
  591.  
  592. <script>
  593. document.addEventListener("DOMContentLoaded", function () {
  594. document.body.addEventListener("click", function (e) {
  595. if (e.target.closest(".journal-entry")) {
  596. const entry = e.target.closest(".journal-entry");
  597. entry.classList.toggle("active");
  598. }
  599. });
  600. });
  601.  
  602. var ismainProfile = true;
  603. var currentAudio = document.getElementById("mainProfile-audio");
  604.  
  605. const sharedRelationshipsHTML = `
  606. <div class="relationship-entry" onclick="toggleBar(this)">
  607. <div class="relationship-name">Tranquil Blades </div>
  608. <div class="relationship-bar hidden-bar">
  609. <div class="lava-fill" style="width: 90%;"></div>
  610. </div>
  611. </div>
  612. <div class="relationship-entry" onclick="toggleBar(this)">
  613. <div class="relationship-name">Entry - 1</div>
  614. <div class="relationship-bar hidden-bar">
  615. <div class="lava-fill" style="width: 100%;"></div>
  616. </div>
  617. </div>
  618. <div class="relationship-entry" onclick="toggleBar(this)">
  619. <div class="relationship-name">Entry - 2</div>
  620. <div class="relationship-bar hidden-bar">
  621. <div class="lava-fill" style="width: 75%;"></div>
  622. </div>
  623. </div>
  624. <div class="relationship-entry" onclick="toggleBar(this)">
  625. <div class="relationship-name">Entry - 3</div>
  626. <div class="relationship-bar hidden-bar">
  627. <div class="lava-fill" style="width: 40%;"></div>
  628. </div>
  629. </div>
  630. <div class="relationship-entry" onclick="toggleBar(this)">
  631. <div class="relationship-name">Entry - 4</div>
  632. <div class="relationship-bar hidden-bar">
  633. <div class="lava-fill" style="width: 05%;"></div>
  634. </div>
  635. </div>
  636. <div class="relationship-entry" onclick="toggleBar(this)">
  637. <div class="relationship-name">Entry - 5</div>
  638. <div class="relationship-bar hidden-bar">
  639. <div class="lava-fill" style="width: 50%;"></div>
  640. </div>
  641. </div>
  642. `;
  643.  
  644. const mainProfileGeneralInfoHTML = `<div class="profile-readout">
  645. <div class="readout-header">GENERAL INFO - <span class="char-code">Name Here</span></div>
  646. <div class="profile-grid">
  647. <div class="profile-item">
  648. <span class="profile-label">Name</span>
  649. <span class="profile-value">Roy Addams</span>
  650. </div>
  651. <div class="profile-item">
  652. <span class="profile-label">Factions</span>
  653. <span class="profile-value">Faction Here<br><br>Factor Here<br><br>Hinode?</span>
  654. </div>
  655. <div class="profile-item">
  656. <span class="profile-label">Job</span>
  657. <span class="profile-value">Job Here<br><br>Job Here</span>
  658. </div>
  659. <div class="profile-item">
  660. <span class="profile-label">Grade</span>
  661. <span class="profile-value glitch">Grade Here </span>
  662. </div>
  663. <div class="profile-item">
  664. <span class="profile-label">Height</span>
  665. <span class="profile-value">Height Here</span>
  666. </div>
  667. <div class="profile-item">
  668. <span class="profile-label">Weight</span>
  669. <span class="profile-value">Weight Here</span>
  670. </div>
  671. <div class="profile-item full">
  672. <span class="profile-label">Appeareance</span>
  673. <span class="profile-value">Basic info here </span>
  674. </div>
  675. </div>
  676. </div>`;
  677.  
  678. const altProfileGeneralInfoHTML = `<div class="profile-readout">
  679. <div class="readout-header">GENERAL INFO - <span class="char-code">Qingsiu</span></div>
  680. <div class="profile-grid">
  681. <div class="profile-item">
  682. <span class="profile-label">Name</span>
  683. <span class="profile-value">Qingsiu</span>
  684. </div>
  685. <div class="profile-item">
  686. <span class="profile-label">Also Known As</span>
  687. <span class="profile-value">Qin</span>
  688. </div>
  689. <div class="profile-item">
  690. <span class="profile-label">Species</span>
  691. <span class="profile-value">Shriekwinged Terrorhawk</span>
  692. </div>
  693. <div class="profile-item">
  694. <span class="profile-label">Grade</span>
  695. <span class="profile-value glitch">[Spirit]</span>
  696. </div>
  697. <div class="profile-item full">
  698. <span class="profile-label">Element</span>
  699. <span class="profile-value">[Wind]</span>
  700. </div>
  701. </div>
  702. </div>`;
  703.  
  704. const mainProfileFeatsHTML = `<div class="journal-log">
  705. <div class="journal-entry">
  706. <div class="journal-title"> Up and Comer</div>
  707. <div class="journal-summary"> WIP Description</div>
  708. </div>
  709.  
  710. <div class="journal-entry">
  711. <div class="journal-title"> A Blade, Made sharp</div>
  712. <div class="journal-summary"> WIP Description </div>
  713. </div>
  714.  
  715. <div class="journal-entry">
  716. <div class="journal-title"> Clothing made Manifest</div>
  717. <div class="journal-summary"> WIP Description </div>
  718. </div>
  719.  
  720. <div class="journal-entry">
  721. <div class="journal-title">Love and Loss</div>
  722. <div class="journal-summary"> WIP Description </div>
  723. </div>
  724. </div>`;
  725.  
  726. var characterData = {
  727. "mainProfile": {
  728. image: "Image Link Here",
  729. tabs: ["general", "feats", "relationships", "abilities"],
  730. tabLabels: {
  731. general: "General Info",
  732. feats: "Journal of Feats",
  733. relationships: "Relationships",
  734. abilities: "Ability Radar"
  735. },
  736. info: {
  737. general: mainProfileGeneralInfoHTML,
  738. feats: mainProfileFeatsHTML,
  739. relationships: sharedRelationshipsHTML,
  740. abilities: "[Heat, Marksmen, Animals.]"
  741. }
  742. },
  743. "altProfile": {
  744. image: "https://i.postimg.cc/Y9402BMV/ornate-hawk-eagle-by-me-v0-26o2e7lda82a1.webp",
  745. tabs: ["general", "abilities"],
  746. tabLabels: {
  747. general: "General Info",
  748. abilities: "Ability Radar"
  749. },
  750. info: {
  751. general: altProfileGeneralInfoHTML,
  752. abilities: "[Wings, Talons, Wind]"
  753. }
  754. }
  755. };
  756.  
  757. function initializeHUD() {
  758. document.getElementById('hud-image').style.backgroundImage = `url('${characterData["mainProfile"].image}')`;
  759. currentAudio.volume = 0.2;
  760. currentAudio.play();
  761. document.getElementById("volumeControl").value = 0.2;
  762. }
  763.  
  764. function toggleCharacter() {
  765. let body = document.body;
  766. let title = document.getElementById('hud-title');
  767. let image = document.getElementById('hud-image');
  768.  
  769. currentAudio.pause();
  770. currentAudio.currentTime = 0;
  771.  
  772. if (ismainProfile) {
  773. body.className = "altProfile-theme";
  774. title.innerText = "Qingsiu";
  775. image.style.backgroundImage = `url('${characterData["altProfile"].image}')`;
  776. currentAudio = document.getElementById("altProfile-audio");
  777. } else {
  778. body.className = "";
  779. title.innerText = "Name Here";
  780. image.style.backgroundImage = `url('${characterData["mainProfile"].image}')`;
  781. currentAudio = document.getElementById("mainProfile-audio");
  782. }
  783.  
  784. currentAudio.volume = document.getElementById("volumeControl").value;
  785. currentAudio.play();
  786. ismainProfile = !ismainProfile;
  787. }
  788.  
  789. function renderTabs(charKey) {
  790. const char = characterData[charKey];
  791. const menu = document.getElementById('popup-menu');
  792. menu.innerHTML = '';
  793. char.tabs.forEach(function(tab) {
  794. const btn = document.createElement('button');
  795. btn.className = 'popup-tab-button';
  796. btn.innerText = char.tabLabels[tab];
  797. btn.onclick = function() { setInfoTab(tab); };
  798. menu.appendChild(btn);
  799. });
  800. }
  801.  
  802. function showPopup(type) {
  803. let charKey = ismainProfile ? "mainProfile" : "altProfile";
  804.  
  805. if (type === "info") {
  806. document.getElementById('popup-title').innerText = "INFO";
  807. renderTabs(charKey);
  808. setInfoTab("general");
  809. } else {
  810. document.getElementById('popup-title').innerText = type.toUpperCase();
  811. document.getElementById('popup-tab-content').innerHTML = `<p>${characterData[charKey][type]}</p>`;
  812. }
  813.  
  814. document.getElementById('popup').style.display = 'block';
  815. document.getElementById('overlay').style.display = 'block';
  816. }
  817.  
  818. function setInfoTab(tabName) {
  819. let charKey = ismainProfile ? "mainProfile" : "altProfile";
  820. let content = characterData[charKey].info[tabName];
  821. document.getElementById('popup-tab-content').innerHTML = `<p>${content}</p>`;
  822. }
  823.  
  824. function hidePopup() {
  825. document.getElementById('popup').style.display = 'none';
  826. document.getElementById('overlay').style.display = 'none';
  827. }
  828.  
  829. function togglePlay() {
  830. if (currentAudio.paused) currentAudio.play();
  831. else currentAudio.pause();
  832. }
  833.  
  834. function changeVolume(val) {
  835. currentAudio.volume = val;
  836. }
  837.  
  838. function toggleBar(entry) {
  839. const bar = entry.querySelector('.relationship-bar');
  840. bar.classList.toggle('show-bar');
  841. bar.classList.toggle('hidden-bar');
  842. }
  843.  
  844. function renderJournal(entries, character) {
  845. const styleClass = character === "mainProfile" ? "mainProfile-style" : "altProfile-style";
  846.  
  847. infoContent.innerHTML = `
  848. <div class="journal-log ${styleClass}">
  849. ${entries.map(entry => `
  850. <div class="journal-entry">
  851. <div class="journal-title">${entry.title}</div>
  852. <div class="journal-summary">${entry.summary}</div>
  853. </div>
  854. `).join("")}
  855. </div>
  856. `;
  857. }
  858. </script>
  859.  
  860. </body>
  861. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
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!