API tools faq
paste
iStabOreos

Video Game Profile v2

iStabOreos
Apr 28th, 2025 (edited)
210
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.48 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700&display=swap" rel="stylesheet">
  7. <style>
  8. * { box-sizing: border-box; }
  9.  
  10. body {
  11. margin: 0;
  12. min-height: 100vh;
  13. background: linear-gradient(180deg, #0a0f1a, #101e33);
  14. font-family: 'Orbitron', sans-serif;
  15. display: flex;
  16. justify-content: center;
  17. align-items: center;
  18. overflow-x: hidden;
  19. perspective: 1500px;
  20. }
  21.  
  22. .system-container {
  23. width: 430px;
  24. background: radial-gradient(circle at top, #0f1a2e, #0b121e);
  25. border: 2px solid rgba(0, 255, 255, 0.3);
  26. border-radius: 15px;
  27. box-shadow: 0 0 30px rgba(0, 255, 255, 0.2), inset 0 0 15px rgba(0, 255, 255, 0.05);
  28. padding: 20px;
  29. padding-bottom: 20px;
  30. position: relative;
  31. text-align: center;
  32. overflow: hidden;
  33. transition: transform 0.4s ease, box-shadow 0.4s ease;
  34. transform-style: preserve-3d;
  35. }
  36.  
  37. .system-container:hover {
  38. transform: scale(0.985);
  39. box-shadow: 0 0 40px rgba(0, 255, 255, 0.35);
  40. }
  41.  
  42. .profile-img {
  43. width: 100%;
  44. max-width: 400px;
  45. border-radius: 10px;
  46. border: 2px solid rgba(0, 255, 255, 0.4);
  47. margin-bottom: 20px;
  48. box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
  49. }
  50.  
  51. .glow-title {
  52. font-size: 22px;
  53. color: #00ffff;
  54. text-transform: uppercase;
  55. letter-spacing: 2px;
  56. animation: glowCycle 4s infinite;
  57. text-shadow: 0 0 6px #00ffff;
  58. }
  59.  
  60. @keyframes glowCycle {
  61. 0%, 100% { text-shadow: 0 0 6px #00ffff, 0 0 10px #00ffff; }
  62. 50% { text-shadow: 0 0 14px #00ffff, 0 0 24px #00ffff; }
  63. }
  64.  
  65. .button-wrapper {
  66. height: 0;
  67. overflow: hidden;
  68. padding-top: 0;
  69. transition: height 0.3s ease, padding-top 0.3s ease;
  70. }
  71.  
  72. .system-container.show-button .button-wrapper {
  73. height: 50px;
  74. padding-top: 10px;
  75. }
  76.  
  77. .info-button {
  78. padding: 8px 18px;
  79. background: rgba(0, 255, 255, 0.15);
  80. border: 1px solid rgba(0, 255, 255, 0.4);
  81. color: #00ffff;
  82. border-radius: 6px;
  83. font-size: 12px;
  84. text-transform: uppercase;
  85. cursor: pointer;
  86. opacity: 0;
  87. transform: scale(0.95);
  88. transition: opacity 0.3s ease, transform 0.3s ease;
  89. }
  90.  
  91. .system-container.show-button .info-button:not(.hide) {
  92. opacity: 1;
  93. transform: scale(1.05);
  94. }
  95.  
  96. .info-panel {
  97. margin-top: 20px;
  98. max-height: 0;
  99. overflow: hidden;
  100. transition: max-height 0.5s ease, opacity 0.4s ease;
  101. opacity: 0;
  102. }
  103.  
  104. .info-panel.active {
  105. max-height: 800px;
  106. opacity: 1;
  107. }
  108.  
  109. .tab-buttons {
  110. display: flex;
  111. justify-content: center;
  112. margin-bottom: 15px;
  113. gap: 12px;
  114. }
  115.  
  116. .tab-button {
  117. padding: 6px 14px;
  118. font-size: 11px;
  119. text-transform: uppercase;
  120. background: rgba(0, 255, 255, 0.1);
  121. border: 1px solid rgba(0, 255, 255, 0.3);
  122. border-radius: 6px;
  123. color: #00ffff;
  124. cursor: pointer;
  125. transition: background 0.3s ease;
  126. }
  127.  
  128. .tab-button.active {
  129. background: rgba(0, 255, 255, 0.25);
  130. }
  131.  
  132. .tab-content {
  133. opacity: 0;
  134. visibility: hidden;
  135. transform: translateY(10px);
  136. transition: opacity 0.3s ease, transform 0.3s ease;
  137. max-height: 0;
  138. overflow: hidden;
  139. }
  140.  
  141. .tab-content.active {
  142. opacity: 1;
  143. visibility: visible;
  144. transform: translateY(0);
  145. max-height: 500px;
  146. }
  147.  
  148. .tab-content p {
  149. margin: 6px 0;
  150. color: #bdfcff;
  151. font-size: 13px;
  152. text-align: left;
  153. line-height: 1.4;
  154. }
  155.  
  156. .scroll-box {
  157. max-height: 180px;
  158. overflow-y: auto;
  159. padding-right: 6px;
  160. margin-top: 5px;
  161. }
  162.  
  163. .scroll-box::-webkit-scrollbar {
  164. width: 6px;
  165. }
  166.  
  167. .scroll-box::-webkit-scrollbar-thumb {
  168. background: rgba(0, 255, 255, 0.3);
  169. border-radius: 5px;
  170. }
  171.  
  172. .description-box {
  173. background: rgba(0, 255, 255, 0.05);
  174. border: 1px solid rgba(0, 255, 255, 0.2);
  175. border-radius: 8px;
  176. padding: 10px;
  177. margin-top: 10px;
  178. color: #e0ffff;
  179. font-size: 12px;
  180. text-align: left;
  181. max-height: 150px;
  182. overflow-y: auto;
  183. }
  184.  
  185. .description-box::-webkit-scrollbar {
  186. width: 6px;
  187. }
  188.  
  189. .description-box::-webkit-scrollbar-thumb {
  190. background: rgba(0, 255, 255, 0.3);
  191. border-radius: 5px;
  192. }
  193.  
  194. .feat-box, .relationship-box {
  195. background: rgba(0, 255, 255, 0.05);
  196. border: 1px solid rgba(0, 255, 255, 0.2);
  197. border-radius: 6px;
  198. padding: 10px;
  199. margin-bottom: 10px;
  200. text-align: left;
  201. color: #c7f9ff;
  202. font-size: 12px;
  203. box-shadow: 0 0 6px rgba(0, 255, 255, 0.1);
  204. }
  205.  
  206. .particles {
  207. position: fixed;
  208. width: 100%;
  209. height: 100%;
  210. top: 0;
  211. left: 0;
  212. overflow: hidden;
  213. z-index: 0;
  214. pointer-events: none;
  215. }
  216.  
  217. .particles span {
  218. position: absolute;
  219. bottom: -10px;
  220. width: 3px;
  221. height: 3px;
  222. background: rgba(0, 255, 255, 0.25);
  223. animation: floatUp 10s infinite linear;
  224. border-radius: 50%;
  225. }
  226.  
  227. @keyframes floatUp {
  228. 0% { transform: translateY(0) scale(0.5); opacity: 0; }
  229. 40% { opacity: 0.6; }
  230. 100% { transform: translateY(-120vh) scale(1.3); opacity: 0; }
  231. }
  232. </style>
  233. </head>
  234. <body>
  235. <div class="particles" id="particles"></div>
  236.  
  237. <div class="system-container" id="systemCard">
  238. <img src="Profile Link Here" class="profile-img"/>
  239. <div class="glow-title">Status Window</div>
  240.  
  241. <div class="button-wrapper">
  242. <button class="info-button" id="showPanel">Open Interface</button>
  243. </div>
  244.  
  245. <div class="info-panel" id="infoPanel">
  246. <div class="tab-buttons">
  247. <button class="tab-button" onclick="switchTab(0)">Info</button>
  248. <button class="tab-button" onclick="switchTab(1)">Feats</button>
  249. <button class="tab-button" onclick="switchTab(2)">Relationships</button>
  250. </div>
  251.  
  252. <div class="tab-content">
  253. <p><strong>Name:</strong> [NAME]</p>
  254. <p><strong>Class:</strong> [CLASS]</p>
  255. <p><strong>Level:</strong> [LEVEL]</p>
  256. <p><strong>Affiliation:</strong> [FACTION]</p>
  257. <div class="description-box">
  258. [Brief description here.]
  259. </div>
  260. </div>
  261.  
  262. <div class="tab-content">
  263. <div class="scroll-box">
  264. <div class="feat-box">[FEAT_1]</div>
  265. <div class="feat-box">[FEAT_2]</div>
  266. <div class="feat-box">[FEAT_3]</div>
  267. </div>
  268. </div>
  269.  
  270. <div class="tab-content">
  271. <div class="scroll-box">
  272. <div class="relationship-box"><strong>[Character Name]</strong>: [Relationship Description]</div>
  273. <div class="relationship-box"><strong>[Ally/Faction]</strong>: [Trust Status or History]</div>
  274. <div class="relationship-box"><strong>[Rival]</strong>: [Enemy / Rival Connection]</div>
  275. </div>
  276. </div>
  277. </div>
  278. </div>
  279.  
  280. <audio autoplay loop hidden>
  281. <source src="[AUDIO URL HERE]" type="audio/mpeg">
  282. </audio>
  283.  
  284. <script>
  285. const infoPanel = document.getElementById("infoPanel");
  286. const showBtn = document.getElementById("showPanel");
  287. const tabButtons = document.querySelectorAll(".tab-button");
  288. const tabContents = document.querySelectorAll(".tab-content");
  289. const card = document.getElementById("systemCard");
  290.  
  291. let activeTab = null;
  292. let infoOpen = false;
  293.  
  294. card.addEventListener("mouseenter", () => {
  295. if (!infoOpen) card.classList.add("show-button");
  296. });
  297.  
  298. card.addEventListener("mouseleave", () => {
  299. card.classList.remove("show-button");
  300. });
  301.  
  302. showBtn.addEventListener("click", () => {
  303. infoPanel.classList.add("active");
  304. showBtn.classList.add("hide");
  305. card.classList.remove("show-button");
  306. infoOpen = true;
  307. });
  308.  
  309. function switchTab(index) {
  310. if (infoOpen && activeTab === index) {
  311. infoPanel.classList.remove("active");
  312. showBtn.classList.remove("hide");
  313. infoOpen = false;
  314. activeTab = null;
  315. if (card.matches(':hover')) {
  316. card.classList.add("show-button");
  317. }
  318. tabButtons.forEach(btn => btn.classList.remove("active"));
  319. tabContents.forEach(content => content.classList.remove("active"));
  320. return;
  321. }
  322.  
  323. tabButtons.forEach((btn, i) => {
  324. btn.classList.toggle("active", i === index);
  325. tabContents[i].classList.toggle("active", i === index);
  326. });
  327.  
  328. if (!infoOpen) {
  329. infoPanel.classList.add("active");
  330. showBtn.classList.add("hide");
  331. card.classList.remove("show-button");
  332. infoOpen = true;
  333. }
  334.  
  335. activeTab = index;
  336. }
  337.  
  338. const particleContainer = document.getElementById("particles");
  339. for (let i = 0; i < 80; i++) {
  340. const dot = document.createElement("span");
  341. dot.style.left = Math.random() * 100 + "%";
  342. dot.style.animationDelay = Math.random() * 6 + "s";
  343. const size = Math.random() * 2 + 2;
  344. dot.style.width = dot.style.height = `${size}px`;
  345. dot.style.animationDuration = (8 + Math.random() * 4) + "s";
  346. particleContainer.appendChild(dot);
  347. }
  348. </script>
  349. </body>
  350. </html>
  351.  
Advertisement
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!