Tessisamess

CODING BASED ON THIS

Information

Hey guys! We have something a little different today. Someone emailed me for help with an old tentacool code, and since (as far as I can tell) that user is no longer on the site to help with their coding, I decided to make my own take on a Facetime code, since it broke sometime down the line. (This is not their coding, as I do not repost other users' coding without explicit permission.)

You can move the inset screen anywhere on the main screen you want by changing the flex positioning of it, and the battery life is actually a div with a gradient, so you can customize that too! Enjoy! 💖

The Coding

<lj-raw><div style="background:#ddd url(MAIN_SCREEN)center;background-size:cover;width:350px;height:575px;margin:0 auto;padding:0 0 35px 0;box-sizing:border-box;text-align:center;font-family:calibri,sans-serif;font-size:15px;color:#fff;"> <!--PHONE INFO--> <div style="background:linear-gradient(to bottom,rgba(0,0,0,1),rgba(0,0,0,0.8),rgba(0,0,0,0.5),rgba(0,0,0,0.2),transparent);width:100%;height:33px;display:flex;padding:5px 10px 10px 10px;box-sizing:border-box;"> <!--CARRIER--> <div style="width:100%;text-align:left;"> <img src="https://i.imgur.com/FDPg5pN.png"> T-Mobile <img src="https://i.imgur.com/4X2jvta.png"> </div> <!--CALL DURATION--> <div style="width:100%;"> 00:00 </div> <!--BATTERY LIFE--> <div style="width:100%;text-align:right;display:flex;align-items:center;justify-content:flex-end;"> 40% <!--BATTERY ICON--> <div style="height:12px;width:23px;border:2px solid #ddd;box-sizing:border-box;margin:0 0 0 5px;padding:2px;"> <!--BATTERY FILL--> <div style="background:linear-gradient(to right,#00F000 40%,transparent 40%);height:100%;"></div> </div> <div style="height:4px;width:2px;background:#ddd;"></div> </div> </div> <!--INSET VIDEO--> <div style="width:100%;height:calc(100% - 33px - 80px);display:flex;align-items:flex-end;justify-content:flex-end;padding:10px;box-sizing:border-box;"> <div style="background:#eee url(INSET_SCREEN)center;background-size:cover;width:100px;height:160px;"> </div> </div> <!--APP BUTTONS--> <div style="margin:height:80px;"> <img src="https://i.imgur.com/wD5nDbf.png" style="margin:0 20px 0 0;"> <img src="https://i.imgur.com/JAsqOiw.png" style="margin:0 20px 0 0;"> <img src="https://i.imgur.com/Mu0vHxe.png" style="margin:0;"> </div> </div><center style="font-family:calibri;font-size:10px;letter-spacing:2px;color:#999;text-align:center;"><a href="http://tessisamess.insanejournal.com/131495.html" style="text-decoration:none;color:#bbb;">CODING</a> BASED ON <a href="https://codesharing.neocities.org/socialmedia/facetime.html" style="text-decoration:none;color:#bbb;">THIS</a></center></lj-raw>

Installation Guide

Paste into an entry and fill in the following!

MAIN_SCREEN - Background screen
INSET_SCREEN - Inset screen
T-Mobile - Cell carrier
00:00 - Call duration
40% - Battery life (appears in the gradient as well, run replace all)

Editing Guide

Paste the coding into Notepad or similar and bring up Replace All (usually Ctrl+H) to replace values quickly and easily!

FONTS

calibri,sans-serif - Phone info text

IMAGES

https://i.imgur.com/FDPg5pN.png - Cell reception
https://i.imgur.com/4X2jvta.png - Wifi signal
https://i.imgur.com/wD5nDbf.png - Flip screen icon
https://i.imgur.com/JAsqOiw.png - End call icon
https://i.imgur.com/Mu0vHxe.png - Mute icon

MOVING INSET SCREEN

align-items:flex-end;justify-content:flex-end; - bottom right (default)
align-items:flex-end;justify-content:center; - bottom middle
align-items:flex-end;justify-content:flex-start; - bottom left

align-items:center;justify-content:flex-end; - middle right
align-items:center;justify-content:center; - middle middle
align-items:center;justify-content:flex-start; - middle left

align-items:flex-start;justify-content:flex-end; - top right
align-items:flex-start;justify-content:center; - top middle
align-items:flex-start;justify-content:flex-start; - top left

COLORS

#00F000

Battery fill

#F00000

Dying battery fill (replace above value if wanting to use this)

Terms of Use

♡ Do not remove credit.
♡ Do not redistribute my codes in part or in whole (posting a copy for players to use in your game is fine with a link to original post.)
♡ If you break something during editing, please feel free to drop me a comment and I'll help as best I can!
♡ I love seeing edits! This isn't a rule, but if you have a cool edit of one of my codes I'd love to see it!