Phone CR Chart! (Trails of Cold Steel Inspired)

[randomtology]

Howdy all! I'm in an RP that uses phones as their network device, so I decided to make some CR charts that fit the theme! Not only that, but the blue one is in the flavor of The Legend of Heroes: Trails of Cold Steel's menu, for any fans of the series!

CONTACTS NAME USERNAME MESSAGE SHORT BLURB. RANK STATUS	CONTACTS USERNAME MESSAGE NAME MCNAME SHORT BLURB GOES HERE. Rank Lv 4 STATUS ♫
Live Preview	Live Preview
YELLOW CODE: <raw-code> <div style="display: block; background: url(http://i.imgur.com/COMtHew.png); height: 652px; width: 350px; margin: auto;"> <!--START PHONE SCREEN--> <div style="display: inline-block; height: 493px; width: 286px; background: url(); margin-top: 85px; margin-left: 29px; overflow: hidden;"> <!--START INDEX--> <a name="HOME"></a> <div style="display: inline-block; height: 493px; width: 286px;"><div style="display: block; width: 266px; text-align: center; padding: 10px 0px 5px 0px; margin: 0px 10px 0px; 10px; border-bottom: 1px solid #0099ff;"><span style="font-size: 25px; font-family:helvetica; color:#0055ee; line-height:35px; letter-spacing:1px; text-transform: uppercase; text-shadow: #47738E 0px 1px 1px;">CONTACTS<br/></span></div> <div style="display: block; padding: 20px; width: 246px; height: 398px; overflow: auto;"> <center> <div style="margin-left: 2px;"> <!--START IMAGE LINK--> <a href="#CR-LINK"><img src="IMG-URL" style="height: 55px; width: 55px; border-radius: 10px; border: 1px solid #0055ee" alt="NAME"></a> <!--END IMAGE LINK--> </div></center></div></div> <!--END INDEX--> <!--START ENTRY--> <a name="CR-LINK"></a> <div style="display: inline-block; height: 493px; width: 286px; overflow: auto;"><div style="width: 286px; margin-top: 20px;"> <img src="IMG-URL" style="border-radius: 50px; border: 2px solid #0055ee; margin-left: 91px;" alt="NAME"></div> <div style="width: 276px; border-bottom: 1px solid #0099ff; margin: 5px; height: 40px; text-align: center;"><span style="font-size: 25px; font-family:helvetica; color:#0055ee; line-height:35px; letter-spacing:1px; text-transform: uppercase; text-shadow: #47738E 0px 1px 1px;">NAME<br/></span></div> <div style="width: 286px; height: 20px;"><div style="display: inline-block; margin-left: 10px;"> <span style="font-family: helvetica, arial, sans-serif; font-size:10px; color:#888; letter-spacing:1px; text-align:justify; line-height: 10px; text-transform: uppercase;"> <a href="http://USERNAME.dreamwidth.org/" style="text-decoration: none; color: #888;">USERNAME</a></span></div> <div style="display: inline-block; float: right; margin-right: 10px;"><span style="font-family: helvetica, arial, sans-serif; font-size:10px; color:#888; letter-spacing:1px; text-align:justify; line-height: 10px; text-transform: uppercase;"> <a href="INBOX-LINK" style="text-decoration: none; color: #888;">MESSAGE</a></span></div></div> <div style="width: 266px; height: 175px; margin: 10px; background: rgba(245, 245, 255, 0.6)"> <div style="text-align: left; padding: 5px; font-family: helvetica, arial, sans-serif; color:#888; font-size: 10px; letter-spacing: 0.5px;"> SHORT BLURB. </div></div> <div style="width: 266px; margin: 0px 10px 0px 10px; height: 90px; background: rgba(245, 245, 255, 0.6);"> <div style="text-align: center;"><span style="font-size: 20px; font-family:helvetica; color:#0055ee; line-height:35px; letter-spacing:1px; text-transform: uppercase; text-shadow: #47738E 0px 1px 1px;">RANK</span></div> <!--BARS START--> <div style="display: inline-block; height: 20px; width: 130px; border: 2px solid #47738E; margin-bottom: 3px; margin-top: 8px; background: #FFF;"><div style="height: 100%; width: PERCENT%; background: #HEX-COLOR;"></div></div> <div style="display: inline-block; float: right; width: 125px; height: 40px; text-align: center;"> <span style="font-size: 20px; font-family:helvetica; color: #HEX-COLOR; line-height:35px; letter-spacing:1px; text-transform: uppercase; text-shadow: #HEX-COLOR 0px 1px 1px; "> STATUS </span></div> <!--BARS END--> </div></div> <!--END ENTRY--> </div> <!--END PHONE SCREEN--> <!--START NAVIGATION--> <div style="height: 50px; width: 250px; margin-left: 50px; margin-top: 5px;"> <div id="MENU-BUTTON" style="display: inline-block;"> <a href="#HOME"><img src="http://i.imgur.com/HoFM2eL.png" alt="Menu Button"></a></div> <div id="HOME-BUTTON" style="display: inline-block; margin-left: 42px"> <a href="#HOME"><img src="http://i.imgur.com/AnouINm.png" alt="Home Button"></a></div> <div id="BACK-BUTTON" style="display: inline-block; float: right;"> <a href="#HOME"><img src="http://i.imgur.com/rHw5yxu.png" alt="Back Button"></a></div></div> <!--END NAVIGATION--> </div> <div style="display: block; clear: both; height: 10px; text-align: center; font-variant: small-caps; padding: 5px;">Code by <a href="http://yuff.dreamwidth.org">Yuff</a></div></raw-code>	BLUE CODE: <raw-code> <div style="display: block; background: url(https://i.imgur.com/CMAduDY.png); height: 652px; width: 350px; margin: auto;"> <!--START PHONE SCREEN--> <div style="display: inline-block; height: 493px; width: 286px; background: url(https://i.imgur.com/wWiismG.png); margin-top: 85px; margin-left: 29px; overflow: hidden;"> <!--START INDEX--> <a name="HOME"></a> <div style="display: inline-block; height: 493px; width: 286px;"> <div style="display: block; width: 266px; text-align: center; padding: 10px 0px 5px 0px; margin: 0px 10px 0px; 10px; border-bottom: 1px solid #6793f4;"><span style="font-size: 25px; font-family: Palatino, helvetica; color:#f4f9fc; line-height:35px; letter-spacing:1px; text-transform: uppercase; text-shadow: #00040e 0px 1px 1px;">CONTACTS<br/></span></div> <div style="display: block; padding: 20px; width: 246px; height: 398px; overflow: auto;"> <center> <div style="margin-left: 2px;"> <!--START IMAGE LINK--> <a href="#CR-LINK"><img src="IMG-URL" style="height: 55px; width: 55px; border-radius: 10px; border: 1px solid #6793f4" alt="NAME"></a> <!--END IMAGE LINK--> </div></center></div></div> <!--END INDEX--> <!--START ENTRY--> <a name="CR-LINK"></a> <div style="display: inline-block; height: 493px; width: 286px; overflow: auto;"> <div style="display: inline-block; margin-left: 10px;"> <span style="font-family: Palatino, helvetica, arial, sans-serif; font-size:10px; color:#f4f9fc; letter-spacing:1px; text-align:justify; line-height: 10px; text-transform: uppercase;"> <a href="http://USERNAME.dreamwidth.org/" style="text-decoration: none; color: #f4f9fc;">USERNAME</a></span></div> <div style="display: inline-block; float: right; margin-right: 10px;"><span style="font-family: Palatino, helvetica, arial, sans-serif; font-size:10px; color:#f4f9fc; letter-spacing:1px; text-align:justify; line-height: 10px; text-transform: uppercase;"><a href="INBOX-URL" style="text-decoration: none; color: #f4f9fc;">MESSAGE</a></span></div> <div style="width: 286px; margin-top: 10px;"> <img src="ICON-URL" style="border-radius: 50px; border: 2px solid #6793f4; margin-left: 91px;" alt="NAME"></div> <div style="width: 276px; border-bottom: 1px solid #6793f4; margin: 5px; height: 40px; text-align: center;"><span style="font-size: 22px; font-family: Palatino, helvetica; color:#f4f9fc; line-height:35px; letter-spacing:1px; text-transform: uppercase; text-shadow: #00040e 0px 1px 1px;"> NAME MCNAME<br/></span></div> <div style="width: 266px; height: 133px; margin: 10px;"> <div style="text-align: left; padding: 5px; font-family: Palatino, helvetica, arial, sans-serif; color:#f4f9fc; font-size: 10px; letter-spacing: 0.5px;"> SHORT BLURB GOES HERE. </div></div> <div style="width: 266px; margin: 0px 10px 0px 10px; height: 90px;"><div style="text-align: center;"> <span style="font-size: 20px; font-family: Palatino, helvetica; color:#eff0eb; line-height:35px; letter-spacing:1px; font-variant: small-caps; text-shadow: #393d3c 0px 1px 1px;"> Rank Lv # </span></div> <!--BARS START--> <div style="display: block; margin: auto; height: 20px; width: 200px; border: 2px solid #1c484b; margin-bottom: 3px; background: #1e3c3a; border-radius: 12px;"> <div style="height: 100%; width: PERCENT%; background: #92f6ea; border-radius: 10px 0px 0px 10px;"></div></div> <div style="display: block; margin: auto; margin-top: 8px; width: 125px; height: 40px; text-align: center;"> <span style="font-size: 14px; font-family: Palatino, helvetica; color: #eff0eb; line-height:35px; letter-spacing:1px; text-transform: uppercase; text-shadow: #393d3c 0px 1px 1px;"> STATUS </span></div> <!--BARS END--> </div> <div style="display: block; margin: auto; margin-top: 25px; height: 40px; text-align: center;"> <span style="font-size: 24px; font-family: Palatino, helvetica; color: #A6A6A6; line-height:35px; letter-spacing:1px; text-transform: uppercase; text-shadow: #747474 0px 1px 1px;"> <a href="SONG-URL" style="color: #92f6ea; text-decoration: none;" target="_blank">♫</a></span></div></div> <!--END ENTRY--> </div> <!--END PHONE SCREEN--> <!--START NAVIGATION--> <div style="height: 50px; width: 250px; margin-left: 50px; margin-top: 5px;"> <div id="MENU-BUTTON" style="display: inline-block;"><a href="#HOME"><img src="http://i.imgur.com/HoFM2eL.png" alt="Menu Button"></a></div> <div id="HOME-BUTTON" style="display: inline-block; margin-left: 42px"><a href="#HOME"><img src="http://i.imgur.com/AnouINm.png" alt="Home Button"></a></div> <div id="BACK-BUTTON" style="display: inline-block; float: right;"><a href="#HOME"><img src="http://i.imgur.com/rHw5yxu.png" alt="Back Button"></a></div></div> <!--END NAVIGATION--> </div> <div style="display: block; clear: both; height: 10px; text-align: center; font-variant: small-caps; padding: 5px;">Code by <a href="http://yuff.dreamwidth.org">Yuff</a></div></raw-code>
HTML-Editor Friendly Version	HTML-Editor Friendly Version

NOTES:

The bottom buttons are fully functional! They are how you return to the navigation screen.

The blue one is heavily inspired by the Legend of Heroes: Trails of Cold Steel video game series and its social link system. The yellow one has no real fandom association.

On the yellow one, you'll have to enter in color codes for the text/bar color in the ranking area. For my own, I used the colors to rate their overall opinion (Green = Like/ Yellow = Neutral/ Red = Dislike / Gray = Unsure). If no color is added, it'll default to black.

On the blue one's bars, If the value is above 98, replace border-radius: 10px 0px 0px 10px; with just border-radius: 10px;

A phone background image can be changed/added to the phone. For best result, it should be a height of 493px and width of 286px. It will automatically resize any images to fit.

Extra screens can be added! Here's a good example. You just have to reassign one of the bottom buttoms to go to a new screen, though this is pretty advanced coding to pull off.

Modifications are totally fine. I'd love to see what you do with it though!

Comments are nice but not necessary. However, please leave the credit line on!

If you like what you see, I am currently taking commissions! Take a look!

Comments

[taegeukgi]

Absolutely love this! I haven't taken her to a game (yet!) but I plan to so I went ahead and got it all set up. Might do some sort of edit similar to the one you link (with the main page being outgoing IC links) but for now it's mostly the same. (Nothing fancy but you mentioned wanting to see what people did with it, so here you go! Least I can do aha.)

Thank you do much for the work you put into coding this, it fits this character so well-- I was thrilled to find something so cute to use for her! ❤

[randomtology]

Oh my gosh, thank you for showing me this! The edits you've done are absolutely adorable - I love it!! It just screams D.Va, it's perfect.

But thank you!! This comment made my day. I'm glad you like the code- have fun with it!