API tools faq
paste
Advertisement
CanineKing

[F2U] Classic RPG

CanineKing
Mar 15th, 2020
530
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 26.19 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2. F2U Code Classic RPG
  3.  
  4. Free to use & free to edit
  5. Ripping and "Frankenstein-ing" code is allowed
  6. Credit not necessary but appreciated
  7. Feel free to message me for any help/ questions
  8.  
  9. Made by @CanineKing
  10. -->
  11. <div class="container-fluid">
  12. <div class="row justify-content-center">
  13. <!-- LEFT COL, NAVIGATION -->
  14. <div class="col-lg-2 m-1 h-100">
  15. <div class="card bg-faded">
  16. <div class="nav flex-column nav-pills p-3">
  17. <!-- nav buttons -->
  18. <a class="nav-link active text-uppercase font-weight-bold" data-toggle="pill" href="#party"><i class="fas fa-angle-right mr-2"></i>Party</a>
  19. <a class="nav-link text-uppercase font-weight-bold" data-toggle="pill" href="#journal"><i class="fas fa-angle-right mr-2"></i>Journal</a>
  20. <a class="nav-link text-uppercase font-weight-bold" data-toggle="pill" href="#system"><i class="fas fa-angle-right mr-2"></i>System</a>
  21. <!--gold-->
  22. <h1 class="text-warning text-center text-uppercase mt-3"><i class="fas fa-coins mr-2"></i>000 gold</h1>
  23. </div>
  24. </div>
  25. </div>
  26. <!-- LEFT COL END -->
  27. <!-- RIGHT COL, INFORMATION-->
  28. <!-- Note: everything within this box WILL SCROLL -->
  29. <div class="col-lg-8 m-1">
  30. <div class="card p-1 bg-faded" style="height:508px; overflow:auto;">
  31. <div class="tab-content">
  32. <!-- PARTY START -->
  33. <div class="tab-pane fade show active" id="party">
  34. <!-- charaA start -->
  35. <div class="card d-block my-1 p-1">
  36. <!-- image-->
  37. <a data-toggle="collapse" href="#charaA"><img class="d-inline-block float-left mr-2" src="IMG URL" style="max-height:155px;"></a>
  38. <!-- HP, MP, EXP info start -->
  39. <div class="card border-0" style="height:150px;">
  40. <h3 class="font-weight-bold">Character Name <span class="ml-2 text-muted text-uppercase">lvl 0</span> <span class="float-right font-weight-light" style="letter-spacing:1;">Class Name</span></h3>
  41. <p class="m-0 font-weight-bold">HP <span class="ml-1 text-muted small">25/100</span></p>
  42. <div class="progress">
  43. <div class="progress-bar bg-success" role="progressbar" style="width:25%;"></div>
  44. </div>
  45. <p class="m-0 font-weight-bold">MP <span class="ml-1 text-muted small">50/100</span></p>
  46. <div class="progress">
  47. <div class="progress-bar bg-primary" role="progressbar" style="width:50%;"></div>
  48. </div>
  49. <p class="mt-3 text-center font-weight-bold">EXP <span class="ml-1 text-muted small">75/100</span></p>
  50. <div class="progress">
  51. <div class="progress-bar bg-primary" role="progressbar" style="width:75%; height:6px;"></div>
  52. </div>
  53. </div>
  54. <!-- HP, MP, EXP info end -->
  55. <!-- extra info start -->
  56. <div class="collapse w-100" id="charaA">
  57. <div class="card border-0 pt-2 w-100">
  58. <div class="container-fluid">
  59. <div class="row">
  60. <div class="col-lg-12">
  61. <h3 class="text-center text-muted">"Character Title"</h3>
  62. </div>
  63. <div class="col-lg-6">
  64. <!-- left col, stats -->
  65. <h3 class="text-center"><i class="fas fa-chart-bar mr-3"></i>Stats</h3>
  66. <ul class="list-unstyled">
  67. <li class="font-weight-bold">Attack <span class="font-weight-light float-right">00</span></li>
  68. <li class="font-weight-bold">Defense <span class="font-weight-light float-right">00</span></li>
  69. <li class="font-weight-bold">M. Attack <span class="font-weight-light float-right">00</span></li>
  70. <li class="font-weight-bold">M. Defense <span class="font-weight-light float-right">00</span></li>
  71. <li class="font-weight-bold">Agility <span class="font-weight-light float-right">00</span></li>
  72. <li class="font-weight-bold">Luck <span class="font-weight-light float-right">00</span></li>
  73. <!-- add the collowing code ABOVE this line to add another stat
  74.  
  75. <li class="font-weight-bold">STAT <span class="font-weight-light float-right">00</span></li>
  76.  
  77. -->
  78. </ul>
  79. </div>
  80. <!-- right col, equipment -->
  81. <div class="col-lg-6">
  82. <h3 class="text-center"><i class="fas fa-suitcase mr-3"></i>Equipment</h3>
  83. <ul class="list-unstyled">
  84. <li class="font-weight-bold">Weapon <span class="font-weight-light float-right">Wooden Stick</span></li>
  85. <li class="font-weight-bold">Armor <span class="font-weight-light float-right">Leather Armor</span></li>
  86. <li class="font-weight-bold">Accessory 1 <span class="font-weight-light float-right">Blue Ring</span></li>
  87. <li class="font-weight-bold">Accessory 2 <span class="font-weight-light float-right">Gold Necklace</span></li>
  88. <!-- add the following code ABOVE this line to add another equipment
  89.  
  90. <li class="font-weight-bold">CLOTHING <span class="font-weight-light float-right">NULL</span></li>
  91.  
  92. -->
  93. </ul>
  94. </div>
  95. </div>
  96. </div>
  97. </div>
  98. </div>
  99. <!-- extra info end -->
  100. </div>
  101. <!-- charaA end -->
  102. <!-- charaB start -->
  103. <div class="card d-block my-1 p-1">
  104. <!-- image-->
  105. <a data-toggle="collapse" href="#charaB"><img class="d-inline-block float-left mr-2" src="IMG URL" style="max-height:155px;"></a>
  106. <!-- HP, MP, EXP info start -->
  107. <div class="card border-0" style="height:150px;">
  108. <h3 class="font-weight-bold">Character Name <span class="ml-2 text-muted text-uppercase">lvl 0</span> <span class="float-right font-weight-light" style="letter-spacing:1;">Class Name</span></h3>
  109. <p class="m-0 font-weight-bold">HP <span class="ml-1 text-muted small">25/100</span></p>
  110. <div class="progress">
  111. <div class="progress-bar bg-success" role="progressbar" style="width:25%;"></div>
  112. </div>
  113. <p class="m-0 font-weight-bold">MP <span class="ml-1 text-muted small">50/100</span></p>
  114. <div class="progress">
  115. <div class="progress-bar bg-primary" role="progressbar" style="width:50%;"></div>
  116. </div>
  117. <p class="mt-3 text-center font-weight-bold">EXP <span class="ml-1 text-muted small">75/100</span></p>
  118. <div class="progress">
  119. <div class="progress-bar bg-primary" role="progressbar" style="width:75%; height:6px;"></div>
  120. </div>
  121. </div>
  122. <!-- HP, MP, EXP info end -->
  123. <!-- extra info start -->
  124. <div class="collapse w-100" id="charaB">
  125. <div class="card border-0 pt-2 w-100">
  126. <div class="container-fluid">
  127. <div class="row">
  128. <div class="col-lg-12">
  129. <h3 class="text-center text-muted">"Character Title"</h3>
  130. </div>
  131. <div class="col-lg-6">
  132. <!-- left col, stats -->
  133. <h3 class="text-center"><i class="fas fa-chart-bar mr-3"></i>Stats</h3>
  134. <ul class="list-unstyled">
  135. <li class="font-weight-bold">Attack <span class="font-weight-light float-right">00</span></li>
  136. <li class="font-weight-bold">Defense <span class="font-weight-light float-right">00</span></li>
  137. <li class="font-weight-bold">M. Attack <span class="font-weight-light float-right">00</span></li>
  138. <li class="font-weight-bold">M. Defense <span class="font-weight-light float-right">00</span></li>
  139. <li class="font-weight-bold">Agility <span class="font-weight-light float-right">00</span></li>
  140. <li class="font-weight-bold">Luck <span class="font-weight-light float-right">00</span></li>
  141. <!-- add the collowing code ABOVE this line to add another stat
  142.  
  143. <li class="font-weight-bold">STAT <span class="font-weight-light float-right">00</span></li>
  144.  
  145. -->
  146. </ul>
  147. </div>
  148. <!-- right col, equipment -->
  149. <div class="col-lg-6">
  150. <h3 class="text-center"><i class="fas fa-suitcase mr-3"></i>Equipment</h3>
  151. <ul class="list-unstyled">
  152. <li class="font-weight-bold">Weapon <span class="font-weight-light float-right">Wooden Stick</span></li>
  153. <li class="font-weight-bold">Armor <span class="font-weight-light float-right">Leather Armor</span></li>
  154. <li class="font-weight-bold">Accessory 1 <span class="font-weight-light float-right">Blue Ring</span></li>
  155. <li class="font-weight-bold">Accessory 2 <span class="font-weight-light float-right">Gold Necklace</span></li>
  156. <!-- add the following code ABOVE this line to add another equipment
  157.  
  158. <li class="font-weight-bold">CLOTHING <span class="font-weight-light float-right">NULL</span></li>
  159.  
  160. -->
  161. </ul>
  162. </div>
  163. </div>
  164. </div>
  165. </div>
  166. </div>
  167. <!-- extra info end -->
  168. </div>
  169. <!--charaB end -->
  170. <!-- charaC start -->
  171. <div class="card d-block my-1 p-1">
  172. <!-- image-->
  173. <a data-toggle="collapse" href="#charaC"><img class="d-inline-block float-left mr-2" src="IMG URL" style="max-height:155px;"></a>
  174. <!-- HP, MP, EXP info start -->
  175. <div class="card border-0" style="height:150px;">
  176. <h3 class="font-weight-bold">Character Name <span class="ml-2 text-muted text-uppercase">lvl 0</span> <span class="float-right font-weight-light" style="letter-spacing:1;">Class Name</span></h3>
  177. <p class="m-0 font-weight-bold">HP <span class="ml-1 text-muted small">25/100</span></p>
  178. <div class="progress">
  179. <div class="progress-bar bg-success" role="progressbar" style="width:25%;"></div>
  180. </div>
  181. <p class="m-0 font-weight-bold">MP <span class="ml-1 text-muted small">50/100</span></p>
  182. <div class="progress">
  183. <div class="progress-bar bg-primary" role="progressbar" style="width:50%;"></div>
  184. </div>
  185. <p class="mt-3 text-center font-weight-bold">EXP <span class="ml-1 text-muted small">75/100</span></p>
  186. <div class="progress">
  187. <div class="progress-bar bg-primary" role="progressbar" style="width:75%; height:6px;"></div>
  188. </div>
  189. </div>
  190. <!-- HP, MP, EXP info end -->
  191. <!-- extra info start -->
  192. <div class="collapse w-100" id="charaC">
  193. <div class="card border-0 pt-2 w-100">
  194. <div class="container-fluid">
  195. <div class="row">
  196. <div class="col-lg-12">
  197. <h3 class="text-center text-muted">"Character Title"</h3>
  198. </div>
  199. <div class="col-lg-6">
  200. <!-- left col, stats -->
  201. <h3 class="text-center"><i class="fas fa-chart-bar mr-3"></i>Stats</h3>
  202. <ul class="list-unstyled">
  203. <li class="font-weight-bold">Attack <span class="font-weight-light float-right">00</span></li>
  204. <li class="font-weight-bold">Defense <span class="font-weight-light float-right">00</span></li>
  205. <li class="font-weight-bold">M. Attack <span class="font-weight-light float-right">00</span></li>
  206. <li class="font-weight-bold">M. Defense <span class="font-weight-light float-right">00</span></li>
  207. <li class="font-weight-bold">Agility <span class="font-weight-light float-right">00</span></li>
  208. <li class="font-weight-bold">Luck <span class="font-weight-light float-right">00</span></li>
  209. <!-- add the collowing code ABOVE this line to add another stat
  210.  
  211. <li class="font-weight-bold">STAT <span class="font-weight-light float-right">00</span></li>
  212.  
  213. -->
  214. </ul>
  215. </div>
  216. <!-- right col, equipment -->
  217. <div class="col-lg-6">
  218. <h3 class="text-center"><i class="fas fa-suitcase mr-3"></i>Equipment</h3>
  219. <ul class="list-unstyled">
  220. <li class="font-weight-bold">Weapon <span class="font-weight-light float-right">Wooden Stick</span></li>
  221. <li class="font-weight-bold">Armor <span class="font-weight-light float-right">Leather Armor</span></li>
  222. <li class="font-weight-bold">Accessory 1 <span class="font-weight-light float-right">Blue Ring</span></li>
  223. <li class="font-weight-bold">Accessory 2 <span class="font-weight-light float-right">Gold Necklace</span></li>
  224. <!-- add the following code ABOVE this line to add another equipment
  225.  
  226. <li class="font-weight-bold">CLOTHING <span class="font-weight-light float-right">NULL</span></li>
  227.  
  228. -->
  229. </ul>
  230. </div>
  231. </div>
  232. </div>
  233. </div>
  234. </div>
  235. <!-- extra info end -->
  236. </div>
  237. <!-- charaC end-->
  238. <!-- add the following code ABOVE this line to add another character
  239. NOTE: be sure to fix the '#' with the proper character ID (ex. charaD, charaE, etc.) and to add '>' to close each comment
  240.  
  241. <div class="card d-block my-1 p-1">
  242. <!-- image--
  243. <a data-toggle="collapse" href="#"><img class="d-inline-block float-left mr-2" src="IMG URL" style="max-height:155px;"></a>
  244. <!-- HP, MP, EXP info start --
  245. <div class="card border-0" style="height:150px;">
  246. <h3 class="font-weight-bold">Character Name <span class="ml-2 text-muted text-uppercase">lvl 0</span> <span class="float-right font-weight-light" style="letter-spacing:1;">Class Name</span></h3>
  247. <p class="m-0 font-weight-bold">HP <span class="ml-1 text-muted small">25/100</span></p>
  248. <div class="progress">
  249. <div class="progress-bar bg-success" role="progressbar" style="width:25%;"></div>
  250. </div>
  251. <p class="m-0 font-weight-bold">MP <span class="ml-1 text-muted small">50/100</span></p>
  252. <div class="progress">
  253. <div class="progress-bar bg-primary" role="progressbar" style="width:50%;"></div>
  254. </div>
  255. <p class="mt-3 text-center font-weight-bold">EXP <span class="ml-1 text-muted small">75/100</span></p>
  256. <div class="progress">
  257. <div class="progress-bar bg-primary" role="progressbar" style="width:75%; height:6px;"></div>
  258. </div>
  259. </div>
  260. <!-- HP, MP, EXP info end --
  261. <!-- extra info start --
  262. <div class="collapse w-100" id="#">
  263. <div class="card border-0 pt-2 w-100">
  264. <div class="container-fluid">
  265. <div class="row">
  266. <div class="col-lg-12">
  267. <h3 class="text-center text-muted">"Character Title"</h3>
  268. </div>
  269. <div class="col-lg-6">
  270. <!-- left col, stats --
  271. <h3 class="text-center"><i class="fas fa-chart-bar mr-3"></i>Stats</h3>
  272. <ul class="list-unstyled">
  273. <li class="font-weight-bold">Attack <span class="font-weight-light float-right">00</span></li>
  274. <li class="font-weight-bold">Defense <span class="font-weight-light float-right">00</span></li>
  275. <li class="font-weight-bold">M. Attack <span class="font-weight-light float-right">00</span></li>
  276. <li class="font-weight-bold">M. Defense <span class="font-weight-light float-right">00</span></li>
  277. <li class="font-weight-bold">Agility <span class="font-weight-light float-right">00</span></li>
  278. <li class="font-weight-bold">Luck <span class="font-weight-light float-right">00</span></li>
  279. <!-- add the collowing code to add another stat
  280.  
  281. <li class="font-weight-bold">STAT <span class="font-weight-light float-right">00</span></li>
  282.  
  283. --
  284. </ul>
  285. </div>
  286. <!-- right col, equipment --
  287. <div class="col-lg-6">
  288. <h3 class="text-center"><i class="fas fa-suitcase mr-3"></i>Equipment</h3>
  289. <ul class="list-unstyled">
  290. <li class="font-weight-bold">Weapon <span class="font-weight-light float-right">Wooden Stick</span></li>
  291. <li class="font-weight-bold">Armor <span class="font-weight-light float-right">Leather Armor</span></li>
  292. <li class="font-weight-bold">Accessory 1 <span class="font-weight-light float-right">Blue Ring</span></li>
  293. <li class="font-weight-bold">Accessory 2 <span class="font-weight-light float-right">Gold Necklace</span></li>
  294. <!-- add the following code ABOVE this line to add another equipment
  295.  
  296. <li class="font-weight-bold">CLOTHING <span class="font-weight-light float-right">NULL</span></li>
  297.  
  298. --
  299. </ul>
  300. </div>
  301. </div>
  302. </div>
  303. </div>
  304. </div>
  305. <!-- extra info end --
  306. </div>
  307.  
  308. -->
  309. </div>
  310. <!-- PARTY END -->
  311. <!-- JOURNAL START -->
  312. <div class="tab-pane fade p-3" id="journal">
  313. <h3 class="text-primary text-uppercase"><i class="fas fa-book-open mr-2"></i>The story so far...</h3>
  314. <div class="card">
  315. <p class="p-3">Write a summary of your party's story so far here... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac sapien sem. Pellentesque turpis eros, scelerisque eget imperdiet ac, pharetra non sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla facilisi. Quisque a fringilla nulla. Aenean sed ex tempor, porta ex ut, ultricies eros. Pellentesque nec urna quis turpis blandit porttitor. Maecenas diam orci, suscipit eu augue et, bibendum venenatis lacus. Quisque ultricies mi vel neque feugiat iaculis. Curabitur eget sem aliquet, molestie justo ac, viverra orci. Sed non vehicula magna. Donec luctus augue gravida purus vulputate mattis. </p>
  316. </div>
  317. <h3 class="text-primary text-uppercase mt-3"><i class="fas fa-bookmark mr-2"></i>Current Quest</h3>
  318. <div class="card">
  319. <h3 class="text-muted mx-3 mt-3">"Quest Title"</h3>
  320. <p class="px-3 pb-3">Write a summary of your current quest here... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac sapien sem. Pellentesque turpis eros, scelerisque eget imperdiet ac, pharetra non sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla facilisi. Quisque a fringilla nulla. Aenean sed ex tempor, porta ex ut, ultricies eros. Pellentesque nec urna quis turpis blandit porttitor.</p>
  321. </div>
  322. <h3 class="text-muted text-uppercase mt-3"><i class="fas fa-bookmark mr-2"></i>Finished Quests</h3>
  323. <div class="card mt-1">
  324. <h3 class="text-muted mx-3 mt-3">"Quest Title"</h3>
  325. <p class="px-3 text-muted pb-3">Write a summary of how your quest finished here... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac sapien sem. Pellentesque turpis eros, scelerisque eget imperdiet ac, pharetra non sapien.</p>
  326. </div>
  327. <div class="card mt-1">
  328. <h3 class="text-muted mx-3 mt-3">"Quest Title"</h3>
  329. <p class="px-3 text-muted pb-3">Write a summary of how your quest finished here... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac sapien sem. Pellentesque turpis eros, scelerisque eget imperdiet ac, pharetra non sapien.</p>
  330. </div>
  331. <div class="card mt-1">
  332. <h3 class="text-muted mx-3 mt-3">"Quest Title"</h3>
  333. <p class="px-3 text-muted pb-3">Write a summary of how your quest finished here... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac sapien sem. Pellentesque turpis eros, scelerisque eget imperdiet ac, pharetra non sapien.</p>
  334. </div>
  335. <!--add the following code to add another finished quest item
  336.  
  337. <div class="card mt-1">
  338. <h3 class="text-muted mx-3 mt-3">"Quest Title"</h3>
  339. <p class="px-3 text-muted pb-3">Write a summary of how your quest finished here... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac sapien sem. Pellentesque turpis eros, scelerisque eget imperdiet ac, pharetra non sapien.</p>
  340. </div>
  341.  
  342. -->
  343. </div>
  344. <!-- JOURNAL END -->
  345. <!-- SYSTEM START -->
  346. <div class="tab-pane fade" id="system">
  347. <div class="container-fluid">
  348. <div class="row">
  349. <div class="col-lg-6">
  350. <!-- left col, stats -->
  351. <ul class="list-unstyled mt-3">
  352. <li class="font-weight-bold">Monsters Slain <span class="font-weight-light float-right">00</span></li>
  353. <li class="font-weight-bold">Wipeouts <span class="font-weight-light float-right">00</span></li>
  354. <li class="font-weight-bold">Most amount of gold <span class="font-weight-light float-right">00</span></li>
  355. <!-- add the following code ABOVE this line to add another random stat
  356.  
  357. <li class="font-weight-bold">STAT <span class="font-weight-light float-right">00</span></li>
  358.  
  359. -->
  360. </ul>
  361. </div>
  362. <!-- right col, equipment -->
  363. <div class="col-lg-6">
  364. <ul class="list-unstyled mt-3">
  365. <li class="font-weight-bold">Total Playtime <span class="font-weight-light float-right">00:00</span></li>
  366. <li class="font-weight-bold">Current Playtime <span class="font-weight-light float-right">00:00</span></li>
  367. <li class="font-weight-bold text-primary"><i class="fas fa-angle-right mr-2"></i>Save</li>
  368. <li class="font-weight-bold text-primary"><i class="fas fa-angle-right mr-2"></i>Load</li>
  369. </ul>
  370. </div>
  371. </div>
  372. <div class="row">
  373. <div class="col-lg-12">
  374. <div class="card bg-primary rounded-0 w-100 my-2"></div>
  375. <h1 class="text-uppercase text-primary text-center font-weight-bold" stlye="letter-spacing:1;">"Universe Title Here"</h1>
  376. <p class="text-muted small">Creator(s): @/--</p>
  377. <div class="card mt-2 p-3">
  378. <p>Write a summary about your overall story here... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac sapien sem. Pellentesque turpis eros, scelerisque eget imperdiet ac, pharetra non sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla facilisi. Quisque a fringilla nulla. Aenean sed ex tempor, porta ex ut, ultricies eros. Pellentesque nec urna quis turpis blandit porttitor. Maecenas diam orci, suscipit eu augue et, bibendum venenatis lacus. Quisque ultricies mi vel neque feugiat iaculis. Curabitur eget sem aliquet, molestie justo ac, viverra orci. Sed non vehicula magna. Donec luctus augue gravida purus vulputate mattis. </p>
  379. </div>
  380. </div>
  381. </div>
  382. </div>
  383. </div>
  384. <!-- SYSTEM END -->
  385. </div>
  386. </div>
  387. </div>
  388. <!-- RIGHT COL END -->
  389. </div>
  390. <!-- credit -->
  391. <p class="small text-right"><a href="https://toyhou.se/6304605.-f2u-code-classic-rpg" target="_BLANK" class="text-muted"><i class="fa fa-paw mr-1"></i><i class="fas fa-crown mr-1"></i></a></p>
  392. </div>
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!