Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <div class="text-center p-2">
- <a href="#collapse" data-toggle="collapse"><i class="fas fa-power-off fa-3x" title="Power Off"></i></a>
- <div id="collapse" class="collapse show">
- <div class="row no-gutters">
- <div class="col-lg-7 mx-auto p-2">
- <div class="card rounded-0 border-0 bg-faded p-2" style="min-height:360px;">
- <!---- TAB STUFF ---->
- <div class="tab-content">
- <div class="tab-pane fade active show" id="entry">
- <!---- LANDING PAGE ---->
- <div class="card p-3 rounded-0 text-center" style="background:#7623A0;height:438px;">
- <div class="p-5">
- <!---- LANDING TITLE ---->
- <h1 class="display-4 mt-3 text-white" style="letter-spacing:3px;">Welcome, User</h1>
- <!---- ASTRONAUT // to change the shadow change 138,116,167 using rgba colour hex ---->
- <div class="card rounded-circle mx-auto my-4" style="width:115px;height:115px;background:#fff;box-shadow: 4px 4px 0px 4px rgba(138,116,167,0.50);">
- <i class="fal fa-atom m-auto fa-4x" style="color:#7623A0"></i></div>
- <!--- ENTRY BUTTON --->
- <div class="nav nav-tabs card-header-tabs row mb-1">
- <a class="btn bg-faded btn-block btn-outline-secondary rounded-0 w-50 mx-auto text-uppercase mt-2" style="letter-spacing:2px;color:#999;" data-toggle="tab" href="#access">Access</a>
- </div>
- </div></div>
- </div>
- <div class="tab-pane fade" id="access">
- <!--- start of public access -->
- <!-- CHARACTER DATA -->
- <div class="card-block" style="background-color: transparent; padding: 0px; border: 30px solid transparent; border-image: url(https://i.imgur.com/RhTmgvk.png) 30 round;">
- <div class="row" style="background-color: #f1e8db;">
- <div style="position: relative; left: 0px; top: -40px;">
- <i class="far fa-paperclip fa-rotate-270" style="font-size: 2.5em; color: rgba(0,0,0, 0.5); position: absolute; left: -1px; top: 1px; z-index: 20; filter: blur(1px);"></i>
- <i class="far fa-paperclip fa-rotate-270" style="font-size: 2.5em; color: #aaa; z-index: 30; position: absolute;"></i>
- <i class="fal fa-paperclip fa-rotate-270" style="font-size: 2.4em; color: rgba(255,255,255, 0.3); position: absolute; left: 1px; top: 0px; z-index: 40; filter: blur(0.2px);"></i>
- </div>
- <div class="col-md-4" style="background-color: transparent; padding: 0px; border: 30px solid transparent; border-image: url(https://i.imgur.com/RhTmgvk.png) 30 round; position: relative; left: -0px; top: -35px; transform: rotate(1deg);">
- <!-- CHARACTER IMAGE GOES HERE -->
- <img src="https://f2.toyhou.se/file/f2-toyhou-se/users/admin?6?0" style="width: 100%; text-align: center; border: 1px #000 solid; border-radius: 5px; filter: grayscale(100%) sepia(30%);">
- <!-- note: the character image will be black and white; to remove this, remove the "filter" style -->
- </div>
- <!-- CHARACTER INFO GOES HERE -->
- <div class="col-md-8" style="padding: 30px; ">
- <h1 class="text-danger" style="text-align: right;">character name</h1>
- <div class="d-flex justify-content-between">
- <span class="text-dark">Species</span>
- <span class="text-dark">#</span>
- </div>
- <div class="d-flex justify-content-between">
- <span class="text-dark">ID Number</span>
- <span class="text-dark">#</span>
- </div>
- <div class="d-flex justify-content-between">
- <span class="text-dark">Threat Level</span>
- <span class="text-dark">#</span>
- </div>
- <div class="d-flex justify-content-between">
- <span class="text-dark">Status</span>
- <span class="text-dark">██████</span>
- </div>
- <hr class="bg-dark" style="display: block;">
- </div>
- <div style="width: 100%;">
- <div class="pull-right text-danger" style="transform: rotate(-5deg); font-family: cursive; margin-top: -25px; margin-right: 10px;">
- <a class="text-danger" href="https://toyhou.se/Architeuthid" data-toggle="tooltip" title="coded by architeuthid"><i class="far fa-code"></i></a>
- </div>
- <div class="nav nav-tabs card-header-tabs row mb-1">
- <a class="btn bg-faded btn-block btn-outline-secondary rounded-0 w-50 mx-auto text-uppercase mt-2" style="letter-spacing:2px;color:#999;" data-toggle="tab" href="#entry">Log Off</a>
- </div>
- </div>
- </div>
- </div>
- <!--- end of public access -->
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <br>
- <div class="text-center p-2">
- <!-- END CHARACTER DATA -->
- <a href="#topcollapse" data-toggle="collapse"><i class="fas fa-fingerprint fa-2x text-danger" title="Scan"></i></a>
- </div>
- <div id="topcollapse" class="collapse">
- <!--- start keypad -->
- <div class="tab-content">
- <div class="tab-pane show active" id="tab" style="text-align: center;">
- <p style="text-align: center;">Enter ID number:</p>
- <br><a class="btn btn-primary" data-toggle="tab" href="#wrong">1</a> <a class="btn btn-primary" data-toggle="tab" href="#correct">2</a> <a class="btn btn-primary" data-toggle="tab" href="#wrong">3</a>
- <br><br><a class="btn btn-primary" data-toggle="tab" href="#wrong">4</a> <a class="btn btn-primary" data-toggle="tab" href="#wrong">5</a> <a class="btn btn-primary" data-toggle="tab" href="#wrong">6</a>
- <br><br><a class="btn btn-primary" data-toggle="tab" href="#wrong">7</a> <a class="btn btn-primary" data-toggle="tab" href="#wrong">8</a> <a class="btn btn-primary" data-toggle="tab" href="#wrong">9</a>
- <br><br><a class="btn btn-primary" data-toggle="tab" href="#wrong">*</a> <a class="btn btn-primary" data-toggle="tab" href="#wrong">0</a> <a class="btn btn-primary" data-toggle="tab" href="#wrong">#</a></div>
- <div class="tab-pane show" id="correct" style="text-align: center;">
- <p style="text-align: center;">Enter ID number:</p>
- <br><a class="btn btn-primary" data-toggle="tab" href="#right">1</a> <a class="btn btn-primary" data-toggle="tab" href="#wrong">2</a> <a class="btn btn-primary" data-toggle="tab" href="#wrong">3</a>
- <br><br><a class="btn btn-primary" data-toggle="tab" href="#wrong">4</a> <a class="btn btn-primary" data-toggle="tab" href="#wrong">5</a> <a class="btn btn-primary" data-toggle="tab" href="#wrong">6</a>
- <br><br><a class="btn btn-primary" data-toggle="tab" href="#wrong">7</a> <a class="btn btn-primary" data-toggle="tab" href="#wrong">8</a> <a class="btn btn-primary" data-toggle="tab" href="#wrong">9</a>
- <br><br><a class="btn btn-primary" data-toggle="tab" href="#wrong">*</a> <a class="btn btn-primary" data-toggle="tab" href="#wrong">0</a> <a class="btn btn-primary" data-toggle="tab" href="#wrong">#</a></div>
- <div class="tab-pane show" id="right" style="text-align: center;">
- <p style="text-align: center;">Enter ID number:</p>
- <br><a class="btn btn-primary" data-toggle="tab" href="#wrong">1</a> <a class="btn btn-primary" data-toggle="tab" href="#wrong">2</a> <a class="btn btn-primary" data-toggle="tab" href="#wrong">3</a>
- <br><br><a class="btn btn-primary" data-toggle="tab" href="#wrong">4</a> <a class="btn btn-primary" data-toggle="tab" href="#wrong">5</a> <a class="btn btn-primary" data-toggle="tab" href="#wrong">6</a>
- <br><br><a class="btn btn-primary" data-toggle="tab" href="#wrong">7</a> <a class="btn btn-primary" data-toggle="tab" href="#Success">8</a> <a class="btn btn-primary" data-toggle="tab" href="#wrong">9</a>
- <br><br><a class="btn btn-primary" data-toggle="tab" href="#wrong">*</a> <a class="btn btn-primary" data-toggle="tab" href="#wrong">0</a> <a class="btn btn-primary" data-toggle="tab" href="#wrong">#</a></div>
- <!--- wrong password -->
- <div class="tab-pane show" id="wrong">
- <div class="row no-gutters">
- <div class="col-lg-7 mx-auto p-2">
- <div class="card bg-info p-3">
- <div class="text-center p-2">Password Incorrect. Please refresh and try again.</div>
- </div>
- </div>
- </div>
- </div>
- <!--- wrong password end -->
- <div class="tab-pane show" id="Success">
- <!--- start hidden area -->
- <div class="container-fluid " style="height: 100%;">
- <div class="justify-content-center">
- <div class="col-md-7 card card-block" style="border: 20px ridge #2E2E2E; background-color: #0c0d0a; color: #BD6DE7; font-family: monospace; background-image: url(https://i.imgur.com/dwQm7Jw.gif);text-shadow: 0px 0px 2px #000; box-shadow: 0px 5px 1px 0px rgba(0,0,0,0.5);">
- <div class="row">
- <!-- HUB text - remove or alter if your character is not from the Scatterstar Isles setting. idk what would actually be here so I'm just guessing -->
- <div class="col-12" style="margin-top: -5px; margin-bottom: 15px;">
- <div style="font-size: 0.7em; ">
- <p>
- hnpa:xgs:data:mfiles:charactername
- <span class="pull-right" style="font-weight: bold;">HUB version 1.8.12</span>
- </p>
- </div>
- </div>
- <div class="col-md-6" style="margin-bottom: 10px;">
- <div class="tab-content" style="height: 450px; overflow: auto;">
- <!-- ABOUT -->
- <div id="about" class="tab-pane show active" >
- <h1 style="text-shadow: 0px 0px 1px #BD6DE7;">About</h1>
- <div class="tab-content">
- <!-- PAGE ONE -->
- <div id="about-page-1" class="tab-pane show active">
- <p>
- Put a block of text here talking about your character. Describe their personality, occupation, whatever seems relevant. You can keep going and this box will scroll, but because I can't customize the scrollbar, it clashes with the rest of the theme, so I'd avoid it.
- </p>
- <p>
- Instead, I've set up a method of allowing you to add pages within pages and click between them like one does normally. You can test it out below.
- </p>
- </div>
- <!-- PAGE TWO -->
- <div id="about-page-2" class="tab-pane show">
- <p>
- All four sections have infrastructure allowing you to add pages, but this is the only one that has two pages to start with since I'm using it as an example. Note that a box that won't scroll on desktop may likely scroll on mobile - I couldn't figure out how to dictate the height of an element on desktop but not mobile. This is fine, though - the scrollbar on mobile devices tends to look perfectly acceptable, although I can't test every one.
- </p>
- <p>
- Feel free to ramble as long as you like, but be sure to add paragraph breaks! They're vital for readability.
- </p>
- </div>
- </div>
- <!-- NAVIGATION -->
- <div class="col-12 justify-content-center" style="padding: 10px; text-align: center;">
- <ul class="nav" >
- <li class="nav-item">
- <a data-toggle="tab" href="#about-page-1" style="color: #BD6DE7;">
- 1
- </a>
- <a data-toggle="tab" href="#about-page-2" style="color: #BD6DE7;">
- 2
- </a>
- </li>
- </ul>
- </div>
- </div>
- <!-- HISTORY -->
- <div id="history" class="tab-pane show">
- <h1 style="text-shadow: 0px 0px 1px #BD6DE7;">History</h1>
- <div class="tab-content">
- <!-- PAGE ONE -->
- <div id="history-page-1" class="tab-pane show active">
- <p>
- Write about your character's backstory here. Add as many pages as you like for a nice long backstory, or keep it short and to the point - both will work just fine.
- </p>
- <p>
- I do my best not to use lorem ipsum but mannn sometimes a person just runs out of things to say, yannow? That's why I create character profile codes that look fine without a ton of text in them.
- </p>
- </div>
- </div>
- <!-- NAVIGATION -->
- <div class="col-12 justify-content-center" style="padding: 10px; text-align: center;">
- <ul class="nav" >
- <li class="nav-item">
- <a data-toggle="tab" href="#history-page-1" style="color: #BD6DE7;">
- 1
- </a>
- </li>
- </ul>
- </div>
- </div>
- <div id="design" class="tab-pane show">
- <h1 style="text-shadow: 0px 0px 1px #BD6DE7;">Design</h1>
- <div class="tab-content">
- <!-- PAGE ONE -->
- <div id="design-page-1" class="tab-pane show active">
- <p>
- Go ahead and describe your character's appearance! This section features a section for recording species-specific traits, but you can do whatever you want with it.
- </p>
- <p>
- <b>HEIGHT</b><span class="pull-right">#</span><br>
- <b>WEIGHT</b><span class="pull-right">Type</span><br>
- <b>TEETH</b><span class="pull-right">#</span><br>
- <b>EYES</b><span class="pull-right">#</span><br>
- <b>FUR</b><span class="pull-right">#</span><br>
- <b>HAIR</b><span class="pull-right">#</span><br>
- </p>
- </div>
- </div>
- <!-- NAVIGATION -->
- <div class="col-12 justify-content-center" style="padding: 10px; text-align: center;">
- <ul class="nav" >
- <li class="nav-item">
- <a data-toggle="tab" href="#design-page-1" style="color: #BD6DE7;">
- 1
- </a>
- </li>
- </ul>
- </div>
- </div>
- <div id="relations" class="tab-pane show">
- <h1 style="text-shadow: 0px 0px 1px #BD6DE7;">Relations</h1>
- <div class="tab-content">
- <!-- PAGE ONE -->
- <div id="relations-page-1" class="tab-pane show active">
- <p>
- <b>NAME</b><span class="pull-right">relationship</span><br>
- "I enjoy having characters describe the nature of their relationships with other characters."
- </p>
- <p>
- <b>NAME</b><span class="pull-right">relationship</span><br>
- But you could also just describe them in a third person omniscient sort of sense.
- </p>
- <p>
- <b>NAME</b><span class="pull-right">relationship</span><br>
- Again, you can use the page system to fit more relationship cards without worrying about space. Please use the pages. I've seen people misuse aspects of my previous codes that I thought were obvious which is why I keep talking about this.
- </p>
- <p>
- <b>NAME</b><span class="pull-right">relationship</span><br>
- Again, you can use the page system to fit more relationship cards without worrying about space. Please use the pages. I've seen people misuse aspects of my previous codes that I thought were obvious which is why I keep talking about this.
- </p>
- <p>
- <b>NAME</b><span class="pull-right">relationship</span><br>
- Again, you can use the page system to fit more relationship cards without worrying about space. Please use the pages. I've seen people misuse aspects of my previous codes that I thought were obvious which is why I keep talking about this.
- </p>
- </div>
- </div>
- <!-- NAVIGATION -->
- <div class="col-12 justify-content-center" style="padding: 10px; text-align: center;">
- <ul class="nav" >
- <li class="nav-item">
- <a data-toggle="tab" href="#relations-page-1" style="color: #BD6DE7;">
- 1
- </a>
- </li>
- </ul>
- </div>
- </div> <!--- copy here -->
- <div id="interview" class="tab-pane show">
- <h1 style="text-shadow: 0px 0px 1px #BD6DE7;">Interview</h1>
- <div class="tab-content">
- <!-- PAGE ONE -->
- <div id="interview-page-1" class="tab-pane show active">
- <p><b>Date</b>: DD/MM/YYYY</p>
- <p><b>Interviewer</b>: </p>
- <p><b>Interviewee</b>: SCP-#</p>
- <hr style="border-color:#BD6DE;border-width:2px">
- <p>[BEGIN LOG]</p>
- <p><b>Interviewer</b>: This is something I say. (<i>This is something I do</i>)</p>
- <p><b>SCP-#</b>: (<i>Dabs</i>) Radical<sup><a href="#footnote3b" id="footnote3a" style="font-size:0.7rem;color:#970517">3</a></sup></p>
- <p>[END LOG]</p>
- <p><i>Interviewer's Note: any thoughts or notes made outside the interview</i></p>
- <!----------------
- FOOTNOTES
- ---------------->
- <div class="p-md-3 py-3 px-1 px-md-4">
- <div class="p-3">
- <p style="font-size:1.3rem"><b>Footnotes</b></p>
- <p id="footnote1b"><a href="#footnote1a" style="color:#970517">1</a>. Footnote #1</p>
- <p id="footnote2b"><a href="#footnote2a" style="color:#970517">2</a>. Footnote #2</p>
- <p id="footnote3b"><a href="#footnote3a" style="color:#970517">3</a>. Footnote #3</p>
- </div>
- </div>
- </div>
- </div>
- <!-- NAVIGATION -->
- <div class="col-12 justify-content-center" style="padding: 10px; text-align: center;">
- <ul class="nav" >
- <li class="nav-item">
- <a data-toggle="tab" href="#interview-page-1" style="color: #BD6DE7;">
- 1
- </a>
- </li>
- </ul>
- </div>
- </div>
- </div>
- </div> <!--- ABOVE THIS YOU IDIOT -->
- <div class="col-md-6">
- <!-- BASIC INFO -->
- <p>
- <b>NAME</b><span class="pull-right">character name</span><br>
- <b>TITLE</b><span class="pull-right">Title</span><br>
- <b>ID</b><span class="pull-right">000</span><br>
- <b>ABILITY</b><span class="pull-right">entry</span><br>
- <b>AGE</b><span class="pull-right">00</span><br>
- <b>DATE OF CAPTURE</b><span class="pull-right">00/00</span><br>
- </p>
- <!-- WIGGLY BIT -->
- <div class="" style="background-image: url(https://i.imgur.com/VbzvNMT.gif); height: 40px; margin-top: 15px; margin-bottom: 15px; padding-top: 5px; border-left: 1px solid #BD6DE7; border-right: 1px solid #BD6DE7;"><hr style="height: 0px; background-color: #360D3B;"></div>
- <!-- NAVIGATION -->
- <ul class="nav row">
- <li class="nav-item col-xl-6">
- <i class="fa fa-folder fa-fw" style="font-size: 1.3em;"></i>
- <a class="active" data-toggle="tab" href="#about" style="text-decoration: underline; color: #BD6DE7; text-shadow: 0px 0px 1px #BD6DE7; font-size: 1.3em; margin: 5px;">about</a>
- </li>
- <li class="nav-item col-xl-6">
- <i class="fa fa-folder fa-fw" style="font-size: 1.3em;"></i>
- <a class="" data-toggle="tab" href="#history" style="text-decoration: underline; color: #BD6DE7; text-shadow: 0px 0px 1px #BD6DE7; font-size: 1.3em; margin: 5px;">history</a>
- </li>
- <li class="nav-item col-xl-6">
- <i class="fa fa-folder fa-fw" style="font-size: 1.3em;"></i>
- <a class="" data-toggle="tab" href="#design" style="text-decoration: underline; color: #BD6DE7; text-shadow: 0px 0px 1px #BD6DE7; font-size: 1.3em; margin: 5px;">design</a>
- </li>
- <li class="nav-item col-xl-6">
- <i class="fa fa-folder fa-fw" style="font-size: 1.3em;"></i>
- <a class="" data-toggle="tab" href="#relations" style="text-decoration: underline; color: #BD6DE7; text-shadow: 0px 0px 1px #BD6DE7; font-size: 1.3em; margin: 5px;">relations</a>
- </li>
- <li class="nav-item col-xl-12">
- <i class="fa fa-folder fa-fw" style="font-size: 1.3em;"></i>
- <a class="" data-toggle="tab" href="#interview" style="text-decoration: underline; color: #BD6DE7; text-shadow: 0px 0px 1px #BD6DE7; font-size: 1.3em; margin: 5px;">Interview</a>
- </li>
- </ul>
- <hr style="height: 0px; background-color: #BD6DE7; text-shadow: 0px 0px 1px #BD6DE7; display: block;">
- </div>
- <!-- CODE LINK - do NOT remove this -->
- <div class="col-12" style=" text-align: right;">
- <a href="https://toyhou.se/Architeuthid" data-toggle="tooltip" title="" data-original-title="coded by architeuthid" style="color: #BD6DE7;"><i class="far fa-code"></i></a>
- </div>
- </div>
- </div>
- </div>
- </div>
- <!--- end hidden area -->
- </div>
- </div>
- <!--- end keypad -->
- </div>
Add Comment
Please, Sign In to add comment