API tools faq
paste
junijwi

Dossier

junijwi
Jun 21st, 2024 (edited)
2,879
1
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 41.32 KB | None | 1 0
raw download clone embed print report
  1. <!--------------------------------
  2.    DOSSIER TEMPLATE
  3.        this template was made by Juni.
  4.  
  5.    PLEASE EDIT WITH WYSIWYG TURNED OFF!
  6.        i would highly recommend using circlejourney:
  7.        https://th.circlejourney.net/
  8.  
  9.    COLORS THAT YOU CAN CTRL+FIND REPLACE WITH A #000000 HEX:
  10.                  ACCENT COLOR: red
  11.        PHOTO BACKGROUND COLOR: grey
  12.        BACKGROUND PAPER COLOR: #f3f3f3
  13.                     INK COLOR: black
  14.                   PHOTO FRAME: #ffffff
  15.                TEXT BOX COLOR: white
  16.              FAINT TEXT COLOR: rgba(0,0,0,.5)
  17.    Note that your text box color and ink color should contrast,
  18.    as they also control the header and button colors.
  19.  
  20. --------------------------------->
  21. <div class="container mx-auto my-4 p-0" style="position: relative;
  22.            font-family: Courier New; color: black; max-width: 680px; height: 770px;">
  23.     <div style="background-color: #f3f3f3; box-shadow: 0px 0px 5px rgba(0,0,0,.1);
  24.            border: 1px solid rgba(0,0,0,.1); border-radius: 5px; position: absolute;
  25.            width: 100%; height: 100%; transform: rotate(-2deg);"></div>
  26. <!--------------------------------
  27.    DOCUMENT WATERMARK
  28.        you can add a watermark to the paper by adding a background url.
  29.        ideally, please use a transparent image of your watermark.
  30.        
  31.        alternately, you can add paper texture, just use a repeating
  32.        pattern and change...
  33.            background-repeat: repeat;
  34. --------------------------------->
  35.     <div style="background-image: url('');
  36.            background-size: 105%; background-repeat: no-repeat; background-position: center;
  37.            background-color: #f3f3f3; box-shadow: 0px 0px 5px rgba(0,0,0,.1);
  38.            border: 1px solid rgba(0,0,0,.1); border-radius: 5px; position: relative;
  39.            width: 100%; height: 100%;">
  40.         <!-- Header -->
  41.         <div style="position: absolute;">
  42.             <ul class="nav nav-tabs card-header-tabs mt-2 ml-2">
  43.                 <li><a class="btn btn-secondary m-1 p-1 text-center active"
  44.                       style="width: 2rem; border-radius: 100%; color: white; background-color: black;" data-toggle="tab" href="#tab-basics">
  45.                         <span class="tooltipster" title="Basics"><i class="fa-solid fa-user my-1"></i></span></a></li>
  46.                 <li><a class="btn btn-secondary m-1 p-1 text-center"
  47.                       style="width: 2rem; border-radius: 100%; color: white; background-color: black;" data-toggle="tab" href="#tab-personality">
  48.                         <span class="tooltipster" title="Personality"><i class="fa-solid fa-comment-dots my-1"></i></span></a></li>
  49.                 <li><a class="btn btn-secondary m-1 p-1 text-center"
  50.                       style="width: 2rem; border-radius: 100%; color: white; background-color: black;" data-toggle="tab" href="#tab-background">
  51.                         <span class="tooltipster" title="Background"><i class="fa-solid fa-book my-1"></i></span></a></li>
  52.             </ul>
  53.         </div>
  54.         <div class="mt-4 text-center">
  55.             <div class="mx-auto" style="max-width: 100px;">
  56. <!--------------------------------
  57.    COMPANY ICON
  58.        replace the icon with any fontawesome icon, optional.
  59.        you can also adjust the size by changing the 'fa-7x'
  60.        to be bigger or smaller with the number.
  61.        
  62.        you can replace this with an image instead too, such as:
  63.        <img src="IMAGE URL">
  64. --------------------------------->
  65.                 <i class="fa-light fa-globe fa-7x fa-width-auto py-2"></i>
  66.             </div>
  67.             <p class="text-uppercase font-weight-bold">Investigation Report</p>
  68.         </div>
  69.         <!-- office use section, hides on mobile -->
  70.         <div class="d-md-inline d-none" style="position: absolute; width: 190px; top: 0px; right: 0px; font-size: .6rem;">
  71.             <div class="mt-3 mr-3 p-1 text-center" style="border: 1px solid black;">
  72.                 <p>FOR OFFICE USE ONLY</p>
  73.                 <div class="row no-gutters mt-1">
  74.                     <div class="col-md-6 col-12 text-md-right">
  75.                         LAST UPDATED:
  76.                     </div>
  77.                     <div class="col-md-6 col-12" style="border-bottom: 1px solid black;">
  78. <!--------------------------------
  79.    DATE LAST UPDATED
  80.        when you last updated this app
  81. --------------------------------->
  82.                         03/26/2022
  83.                     </div>
  84.                 </div>
  85.                 <div class="row no-gutters mt-1">
  86.                     <div class="col-md-6 col-12 text-md-right">
  87.                         STATUS:
  88.                     </div>
  89.                     <div class="col-md-6 col-12" style="border-bottom: 1px solid black;">
  90. <!--------------------------------
  91.    STATUS
  92. --------------------------------->
  93.                         ALIVE / DEAD
  94.                     </div>
  95.                 </div>
  96.             </div>
  97.         </div>
  98.         <div class="tab-content px-md-4 px-3" style="height: 590px;">
  99.             <!-- Page - Basics -->
  100.             <div class="h-100 tab-pane fade active show overflow-auto" id="tab-basics">
  101.                 <div class="text-center" style="font-size: .8em;">
  102.                     <p style="color: rgba(0,0,0,.5);">FORM OC-105A: Basic observations recorded for individual.</p>
  103.                 </div>
  104.                 <div class="row no-gutters ">
  105.                     <div class="col-md-6 col-12 mt-3 pt-3 order-md-1 order-0 justify-content-center">
  106.                         <!-- image carousel -->
  107.                         <div class="d-flex flex-column h-100 w-100">
  108.                             <div class="ml-4 mt-4" style="background-color: #ffffff; box-shadow: 0px 0px 5px rgba(0,0,0,.4);
  109.                                        transform: rotate(4deg); height: 240px; width: 86%; position: absolute;"></div>
  110.                             <div class="carousel slide carousel-fade mx-auto p-1 w-100" style="flex: 1 1 auto;" data-ride="false" data-pause="true" id="photos">
  111.                                 <div class="carousel-inner h-100 w-100">
  112.                                     <div class="carousel-item active p-2">
  113.                                         <div class="mx-3 mt-2 mb-md-0 mb-2 p-md-3 p-2" style="background-color: #ffffff; box-shadow: 0px 0px 5px rgba(0,0,0,.4);
  114.                                                    transform: rotate(-2deg); height: 250px;">
  115. <!--------------------------------
  116.    IMAGE ONE
  117.        the photos can be cycled with the button. if you use a
  118.        transparent image, change the background-color as you like.
  119. --------------------------------->
  120.                                             <div style="background-image: url('http://via.placeholder.com/250x250');
  121.                                                        background-size: cover; background-repeat: no-repeat;
  122.                                                        background-position: center;
  123.                                                        background-color: grey; height: 100%;">
  124.                                             </div>
  125.                                         </div>
  126.                                     </div>
  127.                                     <div class="carousel-item p-2">
  128.                                         <div class="mx-3 mb-md-0 mb-2 p-md-3 p-2" style="background-color: #ffffff; box-shadow: 0px 0px 5px rgba(0,0,0,.4);
  129.                                                    transform: rotate(1deg); height: 250px;">
  130. <!--------------------------------
  131.    IMAGE TWO
  132.        the photos can be cycled with the button. if you use a
  133.        transparent image, change the background-color as you like.
  134. --------------------------------->
  135.                                             <div style="background-image: url('http://via.placeholder.com/250x250');
  136.                                                        background-size: cover; background-repeat: no-repeat;
  137.                                                        background-position: center;
  138.                                                        background-color: grey; height: 100%;">
  139.                                             </div>
  140.                                         </div>
  141.                                     </div>
  142.                                 </div>
  143.                             </div>
  144.                             <div class="text-center" style="position: absolute; top: 10px; left: 0; right: 0;">
  145.                                 <!-- tape image -->
  146.                                 <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/47243584_FgJoOXj4yf4r5hO.png">
  147.                             </div>
  148.                             <!-- carousel button -->
  149.                             <div class="justify-content-center">
  150.                                 <a class="btn btn-secondary mb-3 p-1 carousel-control text-center" style="width: 2rem; border-radius: 100%; color: white; background-color: black;" data-slide="next" aria-hidden="true" href="#photos">
  151.                                     <span class="tooltipster" title="Image"><i class="fa-solid fa-arrows-rotate my-1"></i></span>
  152.                                 </a>
  153.                             </div>
  154.                         </div>
  155.                     </div>
  156.                     <div class="col-md-6 col-12 order-md-0 order-1">
  157.                         <!-- identity rows -->
  158.                         <div class="my-2 px-2 py-1 text-uppercase" style="color: white; background-color: black; border-radius: 5px 5px 5px 5px; letter-spacing: 1px;">
  159.                             Identity
  160.                         </div>
  161.                         <div class="row no-gutters" style="font-size: .8em;">
  162. <!--------------------------------
  163.    NAME
  164. --------------------------------->
  165.                             <div class="col-3 mb-1 text-uppercase text-truncate">
  166.                                 Name
  167.                             </div>
  168.                             <div class="col-9 mb-1 text-center" style="color: red; background-color: white; border: 1px solid rgba(0,0,0,.2);">
  169.                                 First Middle Last
  170.                             </div>
  171. <!--------------------------------
  172.    ALIAS
  173. --------------------------------->
  174.                             <div class="col-3 mb-1 text-uppercase text-truncate">
  175.                                 Alias
  176.                             </div>
  177.                             <div class="col-9 mb-1 text-center" style="color: red; background-color: white; border: 1px solid rgba(0,0,0,.2);">
  178.                                 Nickname/Codename
  179.                             </div>
  180. <!--------------------------------
  181.    GENDER
  182. --------------------------------->
  183.                             <div class="col-3 mb-1 text-uppercase text-truncate">
  184.                                 Gender
  185.                             </div>
  186.                             <div class="col-9 mb-1 text-center" style="color: red; background-color: white; border: 1px solid rgba(0,0,0,.2);">
  187.                                 Gender & Pronouns
  188.                            </div>
  189. <!--------------------------------
  190.    SEXUALITY
  191. --------------------------------->
  192.                            <div class="col-3 mb-1 text-uppercase text-truncate">
  193.                                Sexuality
  194.                            </div>
  195.                            <div class="col-9 mb-1 text-center" style="color: red; background-color: white; border: 1px solid rgba(0,0,0,.2);">
  196.                                 Sexual Orientation
  197.                             </div>
  198.                         </div>
  199.                         <!-- characteristic rows -->
  200.                         <div class="my-2 px-2 py-1 text-uppercase" style="color: white; background-color: black; border-radius: 5px 5px 5px 5px; letter-spacing: 1px;">
  201.                             Characteristics
  202.                         </div>
  203.                         <div class="row no-gutters" style="font-size: .8em;">
  204. <!--------------------------------
  205.    AGE
  206. --------------------------------->
  207.                             <div class="col-3 mb-1 text-uppercase text-truncate">
  208.                                 Age
  209.                             </div>
  210.                             <div class="col-9 mb-1 text-center" style="color: red; background-color: white; border: 1px solid rgba(0,0,0,.2);">
  211.                                 00 yrs
  212.                             </div>
  213. <!--------------------------------
  214.    BIRTHDAY
  215. --------------------------------->
  216.                             <div class="col-3 mb-1 text-uppercase text-truncate">
  217.                                 D.o.B.
  218.                             </div>
  219.                             <div class="col-9 mb-1 text-center" style="color: red; background-color: white; border: 1px solid rgba(0,0,0,.2);">
  220.                                 Month 00, YYYY
  221.                             </div>
  222. <!--------------------------------
  223.    HEIGHT
  224. --------------------------------->
  225.                             <div class="col-3 mb-1 text-uppercase text-truncate">
  226.                                 Height
  227.                             </div>
  228.                             <div class="col-9 mb-1 text-center" style="color: red; background-color: white; border: 1px solid rgba(0,0,0,.2);">
  229.                                 0'0" / 00.00 cm
  230.                             </div>
  231. <!--------------------------------
  232.    SPECIES/ETHNICITY/RACE
  233. --------------------------------->
  234.                             <div class="col-3 mb-1 text-uppercase text-truncate">
  235.                                 Race
  236.                             </div>
  237.                             <div class="col-9 mb-1 text-center" style="color: red; background-color: white; border: 1px solid rgba(0,0,0,.2);">
  238.                                 or Ethnicity, or Species
  239.                             </div>
  240.                         </div>
  241.                         <!-- affiliation rows -->
  242.                         <div class="my-2 px-2 py-1 text-uppercase" style="color: white; background-color: black; border-radius: 5px 5px 5px 5px; letter-spacing: 1px;">
  243.                             Affiliation
  244.                         </div>
  245.                         <div class="row no-gutters" style="font-size: .8em;">
  246. <!--------------------------------
  247.    ORGANIZATION
  248. --------------------------------->
  249.                             <div class="col-3 mb-1 text-uppercase text-truncate">
  250.                                 ORG
  251.                             </div>
  252.                             <div class="col-9 mb-1 text-center" style="color: red; background-color: white; border: 1px solid rgba(0,0,0,.2);">
  253.                                 Affiliation
  254.                             </div>
  255. <!--------------------------------
  256.    ROLE
  257. --------------------------------->
  258.                             <div class="col-3 mb-1 text-uppercase text-truncate">
  259.                                 Role
  260.                             </div>
  261.                             <div class="col-9 mb-1 text-center" style="color: red; background-color: white; border: 1px solid rgba(0,0,0,.2);">
  262.                                 Job Title
  263.                                 <span class="tooltipster"
  264.                                title="Job description can be added here.">
  265.                                 <i class="fa-duotone fa-circle-info"></i></span>
  266.                             </div>
  267.                         </div>
  268.                     </div>
  269.                 </div>
  270.                 <!-- threat analysis -->
  271.                 <div class="my-2 px-2 py-1 text-uppercase d-flex justify-content-end" style="color: white; background-color: black; border-radius: 5px 5px 5px 5px; letter-spacing: 1px;">
  272.                     <div class="mr-auto">Threat Analysis</div>
  273.                     <div>Lvl:</div>
  274.                     <div class="align-items-center" style="color: red;">
  275. <!--------------------------------
  276.    THREAT LVL
  277.        replace "fa-regular" with "fa-solid" to fill in the diamond.
  278.        You can also remove "Lvl:" and the diamonds.
  279.        For each threat level, give yourself 100% of stat points to spend.
  280.        Ex: Threat level 3 totals to 300% of stat points.
  281. --------------------------------->
  282.                         <i class="fa-solid fa-diamond px-1"></i>
  283.                         <i class="fa-regular fa-diamond px-1"></i>
  284.                         <i class="fa-regular fa-diamond px-1"></i>
  285.                         <i class="fa-regular fa-diamond px-1"></i>
  286.                         <i class="fa-regular fa-diamond px-1"></i>
  287.                     </div>
  288.                 </div>
  289.                 <div class="row no-gutters ">
  290.                     <div class="col-md-7 col-12">
  291.                         <!-- stat bars -->
  292.                         <div class="row no-gutters mb-1" style="font-size: .8em;">
  293.                             <div class="col-3 mb-1 text-uppercase d-flex align-items-center">
  294.                                 <p class="text-truncate">Strength</p>
  295.                                 <span class="tooltipster ml-auto" data-placement="right"
  296.                                      title="Physical ability. Lifting, pushing, striking things with force, and enduring physical stress.">
  297.                                 <i class="fa-duotone fa-circle-info pr-1"></i></span>
  298.                             </div>
  299.                             <div class="col-9">
  300.                                 <div class="progress mb-1 p-1" style="background-color: white; border: 1px solid rgba(0,0,0,.2); border-radius: 0;">
  301. <!--------------------------------
  302.    STRENGTH
  303.        change BOTH the width and the text numbers
  304. --------------------------------->
  305.                                     <div class="progress-bar" role="progressbar" style="color: white; background-color: black;
  306.                                 width: 25%">
  307.                                         25%
  308.                                     </div>
  309.                                 </div>
  310.                             </div>
  311.                             <div class="col-3 mb-1 text-uppercase d-flex align-items-center">
  312.                                 <p class="text-truncate">Speed</p>
  313.                                 <span class="tooltipster ml-auto" data-placement="right"
  314.                                      title="Reaction under pressure, dexterity, and reflexes.">
  315.                                 <i class="fa-duotone fa-circle-info pr-1"></i></span>
  316.                             </div>
  317.                             <div class="col-9">
  318.                                 <div class="progress mb-1 p-1 " style="background-color: white; border: 1px solid rgba(0,0,0,.2); border-radius: 0;">
  319. <!--------------------------------
  320.    SPEED
  321.        change BOTH the width and the text numbers
  322. --------------------------------->
  323.                                     <div class="progress-bar" role="progressbar" style="color: white; background-color: black;
  324.                                 width: 25%">
  325.                                         25%
  326.                                     </div>
  327.                                 </div>
  328.                             </div>
  329.                             <div class="col-3 mb-1 text-uppercase d-flex align-items-center">
  330.                                 <p class="text-truncate">Intellect</p>
  331.                                 <span class="tooltipster ml-auto" data-placement="right"
  332.                                      title="Knowledge and experience. Can be interpreted either as booksmarts or as wisdom.">
  333.                                 <i class="fa-duotone fa-circle-info pr-1"></i></span>
  334.                             </div>
  335.                             <div class="col-9">
  336.                                 <div class="progress mb-1 p-1 " style="background-color: white; border: 1px solid rgba(0,0,0,.2); border-radius: 0;">
  337. <!--------------------------------
  338.    Intellect
  339.        change BOTH the width and the text numbers
  340. --------------------------------->
  341.                                     <div class="progress-bar" role="progressbar" style="color: white; background-color: black;
  342.                                 width: 25%">
  343.                                         25%
  344.                                     </div>
  345.                                 </div>
  346.                             </div>
  347.                             <div class="col-3 mb-1 text-uppercase d-flex align-items-center">
  348.                                 <p class="text-truncate">Combat</p>
  349.                                 <span class="tooltipster ml-auto" data-placement="right"
  350.                                      title="Pure fighting ability. Experience, strategy, and application of speed, strength, and intellect in a conflict.">
  351.                                 <i class="fa-duotone fa-circle-info pr-1"></i></span>
  352.                             </div>
  353.                             <div class="col-9">
  354.                                 <div class="progress mb-1 p-1 " style="background-color: white; border: 1px solid rgba(0,0,0,.2); border-radius: 0;">
  355. <!--------------------------------
  356.    Combat
  357.        change BOTH the width and the text numbers
  358. --------------------------------->
  359.                                     <div class="progress-bar" role="progressbar" style="color: white; background-color: black;
  360.                                 width: 25%">
  361.                                         25%
  362.                                     </div>
  363.                                 </div>
  364.                             </div>
  365.                             <div class="col-3 mb-1 text-uppercase d-flex align-items-center">
  366.                                 <p class="text-truncate">Charisma</p>
  367.                                 <span class="tooltipster ml-auto" data-placement="right"
  368.                                      title="Social skill. Acting, persuasion, communication, comprehension, and perception.">
  369.                                 <i class="fa-duotone fa-circle-info pr-1"></i></span>
  370.                             </div>
  371.                             <div class="col-9">
  372.                                 <div class="progress mb-1 p-1 " style="background-color: white; border: 1px solid rgba(0,0,0,.2); border-radius: 0;">
  373. <!--------------------------------
  374.    Charisma
  375.        change BOTH the width and the text numbers
  376. --------------------------------->
  377.                                     <div class="progress-bar" role="progressbar" style="color: white; background-color: black;
  378.                                 width: 25%">
  379.                                         25%
  380.                                     </div>
  381.                                 </div>
  382.                             </div>
  383.                         </div>
  384.                     </div>
  385.                     <!-- fake signature -->
  386.                     <div class="col-md-5 col-12 mt-auto pl-md-3 d-md-flex d-none align-items-center">
  387.                         <div class="text-center" style="font-size: .8em; color: rgba(0,0,0,.5);">
  388.                             <p>
  389.                                 I certify that, to the best of my knowledge, the provided information is true and correct.
  390.                             </p>
  391.                             <div class="my-2 p-2" style="background-color: white; font-family: Calibri; font-size: .9rem; border: 1px solid rgba(0,0,0,.2);">
  392.                                 <p style="border-bottom: 1px solid black;">
  393. <!--------------------------------
  394.    PI SIGNATURE
  395.        you can type a name instead but it's not as
  396.        cool or fun :( also there's no guarantee
  397.        whatever font you'd like to use will work
  398.        on all devices. I recommend a transp image!
  399.        you are also free to just use the one I put
  400.        in as generic filler.
  401. --------------------------------->
  402.                                     <img style="max-height: 30px;"
  403.                                    src="https://f2.toyhou.se/file/f2-toyhou-se/images/65983635_WPscRV9DYUVim3M.png?1686112262">
  404.                                 </p>
  405.                                 <span style="font-size: .8em;">Private Investigator Signature</span>
  406.                             </div>
  407.                         </div>
  408.                     </div>
  409.                 </div>
  410.             </div>
  411.  
  412.             <!-- Page - Personality -->
  413.             <div class="h-100 tab-pane fade" id="tab-personality">
  414.                 <div class="h-100 d-flex flex-column">
  415.                     <div class="text-center" style="font-size: .8em;">
  416.                         <p style="color: rgba(0,0,0,.5);">FORM OC-105B: Behavioral information of individual.</p>
  417.                     </div>
  418.                     <!-- mbti attributes -->
  419.                     <div class="my-2 px-2 py-1 text-uppercase" style="color: white; background-color: black; border-radius: 5px 5px 5px 5px; letter-spacing: 1px;">
  420.                         Attributes
  421.                     </div>
  422.                     <div class="row no-gutters ">
  423.                         <div class="col-12">
  424.                             <!-- stat line -->
  425.                             <div class="row no-gutters mb-1 align-items-center" style="font-size: .8em;">
  426.                                 <div class="col-md-2 col-4 order-0 text-uppercase d-flex align-items-center">
  427.                                     <span class="tooltipster mr-auto" data-placement="right"
  428.                                          title="Energized by interacting with others. Participates in events and are known to act quickly.">
  429.                                     <i class="fa-duotone fa-circle-info pr-1"></i></span>
  430.                                     <p class="text-truncate">Extrovert</p>
  431.                                 </div>
  432.                                 <div class="col-md-2 col-4 order-2 text-uppercase d-flex align-items-center">
  433.                                     <p class="text-truncate">Introvert</p>
  434.                                     <span class="tooltipster ml-auto" data-placement="left"
  435.                                          title="Energized by reflection and working alone. Analyze and reflect before taking action.">
  436.                                     <i class="fa-duotone fa-circle-info pr-1"></i></span>
  437.                                 </div>
  438.                                 <div class="col order=1">
  439.                                     <div class="progress card flex-row rounded-0 border-0 mx-2" style="background-color: rgba(0,0,0,.5); height: 1px; overflow: visible;">
  440. <!--------------------------------
  441.    EXTROVERT / INTROVERT
  442.        change the width number
  443. --------------------------------->
  444.                                         <div class="progress-bar" style="height: 0; background-color: transparent;
  445.                                 width: 25%;">
  446.                                         </div><i class="fa-solid fa-xmark" style="color: red; margin-top:-8px;font-size:16px;"></i>
  447.                                     </div>
  448.                                 </div>
  449.                             </div>
  450.                             <!-- stat line -->
  451.                             <div class="row no-gutters mb-1 align-items-center" style="font-size: .8em;">
  452.                                 <div class="col-md-2 col-4 order-0 text-uppercase d-flex align-items-center">
  453.                                     <span class="tooltipster mr-auto" data-placement="right"
  454.                                          title="Pragmatic, realistic, focused on facts and real world experiences.">
  455.                                         <i class="fa-duotone fa-circle-info pr-1"></i></span>
  456.                                     <p class="text-truncate">Sensing</p>
  457.                                 </div>
  458.                                 <div class="col-md-2 col-4 order-2 text-uppercase d-flex align-items-center">
  459.                                     <p class="text-truncate">Intuition</p>
  460.                                     <span class="tooltipster ml-auto" data-placement="left"
  461.                                          title="Abstract, forward thinking, focused on patterns and possibilities.">
  462.                                         <i class="fa-duotone fa-circle-info pr-1"></i></span>
  463.                                 </div>
  464.                                 <div class="col order=1">
  465.                                     <div class="progress card flex-row rounded-0 border-0 mx-2" style="background-color: rgba(0,0,0,.5); height: 1px; overflow: visible;">
  466. <!--------------------------------
  467.    SENSING / INTUITION
  468.        change the width number
  469. --------------------------------->
  470.                                         <div class="progress-bar" style="height: 0; background-color: transparent;
  471.                                 width: 85%;">
  472.                                         </div><i class="fa-solid fa-xmark" style="color: red; margin-top:-8px;font-size:16px;"></i>
  473.                                     </div>
  474.                                 </div>
  475.                             </div>
  476.                             <!-- stat line -->
  477.                             <div class="row no-gutters mb-1 align-items-center" style="font-size: .8em;">
  478.                                 <div class="col-md-2 col-4 order-0 text-uppercase d-flex align-items-center">
  479.                                     <span class="tooltipster mr-auto" data-placement="right"
  480.                                          title="Logical decision makers, analytical, evaluate the facts.">
  481.                                         <i class="fa-duotone fa-circle-info pr-1"></i></span>
  482.                                     <p class="text-truncate">Thinking</p>
  483.                                 </div>
  484.                                 <div class="col-md-2 col-4 order-2 text-uppercase d-flex align-items-center">
  485.                                     <p class="text-truncate">Feeling</p>
  486.                                     <span class="tooltipster ml-auto" data-placement="left"
  487.                                          title="Empathetic decision makers, careful to consider different points of view.">
  488.                                         <i class="fa-duotone fa-circle-info pr-1"></i></span>
  489.                                 </div>
  490.                                 <div class="col order=1">
  491.                                     <div class="progress card flex-row rounded-0 border-0 mx-2" style="background-color: rgba(0,0,0,.5); height: 1px; overflow: visible;">
  492. <!--------------------------------
  493.    THINKING / FEELING
  494.        change the width number
  495. --------------------------------->
  496.                                         <div class="progress-bar" style="height: 0; background-color: transparent;
  497.                                 width: 55%;">
  498.                                         </div><i class="fa-solid fa-xmark" style="color: red; margin-top:-8px;font-size:16px;"></i>
  499.                                     </div>
  500.                                 </div>
  501.                             </div>
  502.                             <!-- stat line -->
  503.                             <div class="row no-gutters mb-1 align-items-center" style="font-size: .8em;">
  504.                                 <div class="col-md-2 col-4 order-0 text-uppercase d-flex align-items-center">
  505.                                     <span class="tooltipster mr-auto" data-placement="right"
  506.                                          title="Makes plans and lists, follows schedules, highly organized.">
  507.                                         <i class="fa-duotone fa-circle-info pr-1"></i></span>
  508.                                     <p class="text-truncate">Judging</p>
  509.                                 </div>
  510.                                 <div class="col-md-2 col-4 order-2 text-uppercase d-flex align-items-center">
  511.                                     <p class="text-truncate">Perceiving</p>
  512.                                     <span class="tooltipster ml-auto" data-placement="left"
  513.                                          title="Spontaneous and flexible, highly adaptable to change.">
  514.                                         <i class="fa-duotone fa-circle-info pr-1"></i></span>
  515.                                 </div>
  516.                                 <div class="col order=1">
  517.                                     <div class="progress card flex-row rounded-0 border-0 mx-2" style="background-color: rgba(0,0,0,.5); height: 1px; overflow: visible;">
  518. <!--------------------------------
  519.    JUDGING / PERCEIVING
  520.        change the width number
  521. --------------------------------->
  522.                                         <div class="progress-bar" style="height: 0; background-color: transparent;
  523.                                 width: 15%;">
  524.                                         </div><i class="fa-solid fa-xmark" style="color: red; margin-top:-8px;font-size:16px;"></i>
  525.                                     </div>
  526.                                 </div>
  527.                             </div>
  528.                         </div>
  529.                     </div>
  530.                     <!-- Personality -->
  531.                     <div class="my-2 px-2 py-1 text-uppercase" style="color: white; background-color: black; border-radius: 5px 5px 5px 5px; letter-spacing: 1px;">
  532.                         Personality
  533.                     </div>
  534.                     <div class="mb-2 p-3 text-justify overflow-auto" style="background-color: white; font-family: Calibri; font-size: .9rem; border: 1px solid rgba(0,0,0,.2); flex: 1 1 auto;">
  535.                         <div class="row mb-2">
  536.                             <div class="col-md col-12 pr-md-0">
  537.                                 <hr class="my-2" style="background-color: rgba(0,0,0,.1);">
  538.                             </div>
  539.                             <div class="col-md-auto col-12 px-2 text-uppercase text-center" style="color: red;">
  540. <!--------------------------------
  541.    CHARACTER TRAITS
  542. --------------------------------->
  543.                                 <p>TRAIT - TRAIT- TRAIT - TRAIT</p>
  544.                             </div>
  545.                             <div class="col-md col-12 pl-md-0">
  546.                                 <hr class="my-2" style="background-color: rgba(0,0,0,.1);">
  547.                             </div>
  548.                         </div>
  549. <!--------------------------------
  550.    PERSONALITY
  551. --------------------------------->
  552.                         <p>
  553.                             Some things you can write about in this section include: their intelligence, strengths, weaknesses, adaptability, habits, temperament, morality, attitude, opinions, optimism, work ethic, values and beliefs, desires, coping mechanisms, or fears.
  554.                         </p>
  555.                         <p>
  556.                             You can also address how they treat strangers vs friends vs family, or what they prioritize in life, as well as their alignments (lawful / neutral / chaotic and good / neutral / evil).
  557.                         </p>
  558.                         <p>
  559.                             Are they patient or impulsive? Agreeable or contrary? Idealistic or pragmatic? Collected or expressive? Sincere or deceptive? Timid or brave? How happy are they? How anxious are they? What are their priorities (family, friends, love, home, health, praise, justice, truth, power, fame, wealth)?
  560.                         </p>
  561.                         <p class="text-muted">
  562.                             (This whole text box scrolls by the way.)
  563.                         </p>
  564.                         <!-- header section -->
  565.                         <div class="row mb-2">
  566.                             <div class="col-md col-12 pr-md-0">
  567.                                 <hr class="my-2" style="background-color: rgba(0,0,0,.1);">
  568.                             </div>
  569.                             <div class="col-md-auto col-12 px-2 text-uppercase text-center" style="color: red;">
  570.                                 <p>Mannerisms</p>
  571.                             </div>
  572.                             <div class="col-md col-12 pl-md-0">
  573.                                 <hr class="my-2" style="background-color: rgba(0,0,0,.1);">
  574.                             </div>
  575.                         </div>
  576. <!--------------------------------
  577.    MANNERISMS
  578. --------------------------------->
  579.                         <p>
  580.                             Patterns in behavior, such as ticks, habits, addictions, or quirks.
  581.                         </p>
  582.                         <!-- header section -->
  583.                         <div class="row mb-2">
  584.                             <div class="col-md col-12 pr-md-0">
  585.                                 <hr class="my-2" style="background-color: rgba(0,0,0,.1);">
  586.                             </div>
  587.                             <div class="col-md-auto col-12 px-2 text-uppercase text-center" style="color: red;">
  588.                                 <p>Speech</p>
  589.                             </div>
  590.                             <div class="col-md col-12 pl-md-0">
  591.                                 <hr class="my-2" style="background-color: rgba(0,0,0,.1);">
  592.                             </div>
  593.                         </div>
  594. <!--------------------------------
  595.    SPEECH
  596. --------------------------------->
  597.                         <p>
  598.                             Recorded patterns in communication.
  599.                         </p>
  600.                     </div>
  601.                 </div>
  602.             </div>
  603.  
  604.             <!-- Page - Background -->
  605.             <div class="h-100 tab-pane fade overflow-auto" id="tab-background">
  606.                 <div class="h-100 d-flex flex-column">
  607.                     <div class="text-center" style="font-size: .8em;">
  608.                         <p style="color: rgba(0,0,0,.5);">FORM OC-105C: History known of individual.</p>
  609.                     </div>
  610.                     <div class="my-2 px-2 py-1 text-uppercase" style="color: white; background-color: black; border-radius: 5px 5px 5px 5px; letter-spacing: 1px;">
  611.                         Background
  612.                     </div>
  613.                     <div class="mb-2 p-3 text-justify overflow-auto" style="background-color: white; font-family: Calibri; font-size: .9rem; border: 1px solid rgba(0,0,0,.2); flex: 1 1 auto;">
  614.                         <!-- header section -->
  615.                         <div class="row mb-2">
  616.                             <div class="col-md col-12 pr-md-0">
  617.                                 <hr class="my-2" style="background-color: rgba(0,0,0,.1);">
  618.                             </div>
  619.                             <div class="col-md-auto col-12 px-2 text-uppercase text-center" style="color: red;">
  620.                                 <p>Origin</p>
  621.                             </div>
  622.                             <div class="col-md col-12 pl-md-0">
  623.                                 <hr class="my-2" style="background-color: rgba(0,0,0,.1);">
  624.                             </div>
  625.                         </div>
  626. <!--------------------------------
  627.    ORIGIN
  628. --------------------------------->
  629.                         <p>
  630.                             What circumstances were they born in? Where did they come from? Was their life comfortable or a struggle? Childhood circumstances, education, training, and other information can be written here.
  631.                         </p>
  632.                         <!-- header section -->
  633.                         <div class="row mb-2">
  634.                             <div class="col-md col-12 pr-md-0">
  635.                                 <hr class="my-2" style="background-color: rgba(0,0,0,.1);">
  636.                             </div>
  637.                             <div class="col-md-auto col-12 px-2 text-uppercase text-center" style="color: red;">
  638.                                 <p>Turning Point</p>
  639.                             </div>
  640.                             <div class="col-md col-12 pl-md-0">
  641.                                 <hr class="my-2" style="background-color: rgba(0,0,0,.1);">
  642.                             </div>
  643.                         </div>
  644. <!--------------------------------
  645.    TURNING POINT
  646. --------------------------------->
  647.                         <p>
  648.                             At what moment did your character enter the story and find their agency? What formed their initial motivations?
  649.                         </p>
  650.                         <!-- header section -->
  651.                         <div class="row mb-2">
  652.                             <div class="col-md col-12 pr-md-0">
  653.                                 <hr class="my-2" style="background-color: rgba(0,0,0,.1);">
  654.                             </div>
  655.                             <div class="col-md-auto col-12 px-2 text-uppercase text-center" style="color: red;">
  656.                                 <p>Presently</p>
  657.                             </div>
  658.                             <div class="col-md col-12 pl-md-0">
  659.                                 <hr class="my-2" style="background-color: rgba(0,0,0,.1);">
  660.                             </div>
  661.                         </div>
  662. <!--------------------------------
  663.    PRESENTLY
  664. --------------------------------->
  665.                         <p>
  666.                             What is your character's current job? What are their goals? What sort of places do they roam?
  667.                         </p>
  668.                         <p class="text-muted">
  669.                             (This whole text box scrolls by the way.)
  670.                         </p>
  671.                     </div>
  672.                 </div>
  673.             </div>
  674.             <!-- End Pages -->
  675.         </div>
  676.     </div>
  677.     <!-- code credit // you may reposition or relocate this, but do NOT remove it -->
  678.     <div style="position: absolute; right: 0;">
  679.         <a class="ml-auto text-muted" href="https://toyhou.se/15365618.pwyw-dossier"><i class="fa-light fa-code"></i></a>
  680.     </div>
  681. </div>
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!