Resource CREW TERMINAL // WORKSHOP 01

[Oceanic Mind]

Hey there. I'm not a particularly good coder, but I am a determined one. I've started teaching myself BBCode by trying to mimic the UI designs from the game In Other Waters (which I highly recommend) since I'm very interested in it at the moment. So far, they've been turning out kind of cool, so I thought I might share in case other people want to use them :>

Note: none of them are mobile-friendly, so far as I can tell. If you want to make one of the codes mobile-friendly, that's fine. I would appreciate seeing it so that I could add it to the thread all proper-like and credit you, though :>

You can Frankenstein, reverse-engineer, use them as a base for something entirely different, whatever, I don't mind. If it's neat, I would love to see it, though.

I'll threadmark each code, and when I'm done with the project I'll make a master post for them, and maybe start working on other things. Hope you enjoy!

 

[Oceanic Mind]

This is just a list of color-palettes from the game-- mostly for my own use/reference, but I think they're very nice (if a little eye-searing at times) and thought to share.

I haven't gotten the off-white quite right, so I may make some edits to that in the future as I go along.

FIRST WAYSTATION
∎-#1F9C8C
∎-#43B6AC
∎-#F4ED05
∎-#F1EBE7
∎-#175B64

UNDER THE REEF
∎-#017260
∎-#158C76
∎-#D2B809
∎-#F4EDEB
∎-#084645

BAIKAL OS
∎-#003539
∎-#002524
∎-#F3E327
∎-#E6EFEF
∎-#016265

DROPOFF
∎-#000D10
∎-#03364B
∎-#DFA401
∎-#F4EDEB
∎-#018382

BRINE POOLS
∎-#081606
∎-#2F4341
∎-#F4B601
∎-#F4EDEB
∎-#628C68

THE ARCOLOGY
∎-#000604
∎-#283941
∎-#F9561E
∎-#F4EDEB
∎-#7B856D

LOCATING SAFE-ZONE
∎-#246E5D
∎-#0C534F
∎-#FF3505
∎-#F4EDEB
∎-#001C2C

THE BLOOM
∎-#069052
∎-#00A360
∎-#E79D01
∎-#F4EDEB
∎-#003D38

ATMOSPHERIC TAMPERING
∎-#1B7626
∎-#0A601F
∎-#F34B0C
∎-#F4EDEB
∎-#002C1F

 

[Oceanic Mind]

This isn't functional as... anything, really. It was the first I made though, and deserves an honorary place for that.

SAFE MODE

+ - - - - - - - - - - - - - - - - - - - - RESTARTING - - - - - - - - - - - - - - - - - - - - +
-
- RESYNCING WITH BAIKAL OS
-
- DOWNTIME 5.1 HOURS
-
-
-
- REBOOTING

Spoiler: code

[border=0; margin:auto; width:99%; height:600px; background:#003539; display:flex; flex-flow:row nowrap; align-content:center; align-items:center;][border=0; color:#F3E327; margin:auto; width:45%; height:300px; letter-spacing:4px;]SAFE MODE[border=2px solid #F3E327; height:150px; margin-top:10px; padding-left:55px; letter-spacing:0px; line-height:110%;]+ - - - - - - - - - - - - - - - - - - - - RESTARTING - - - - - - - - - - - - - - - - - - - - +
-
- RESYNCING WITH BAIKAL OS
-
- DOWNTIME 5.1 HOURS
-
-
-
- REBOOTING[/border]
[border=2px solid #F3E327; height:40px; padding:5px 5px 5px 5px;][border=0; height:20px; width:70%; background:#F3E327;][/border]
[/border]
[/border][/border]

 

[Oceanic Mind]

This is almost an ooc posting template, so long as you're a lot like me and don't have a lot to say. The box stretches the more you write, but with the little thing there at the side it doesn't look great. If I added a hidden scroll, or perhaps worked on that bit to the right a little more, it would work better for longer posts, but to be honest I'm content with it as-is. Also! Almost forgot to mention that I got some help with this one in this thread, thank you again to Uxie and Weldherwings! (I'm too nervous to tag them, eheh)

These twisted strands are like webs between the pillars. Let's start logging them.

•••

COM.

Spoiler: code

[comment][font=Ubuntu Mono][/font][/comment][border=0; margin:auto; width:99%; height:300px; display:flex; flex-flow:row nowrap; align-content:center; align-items:center;][border=0; margin:auto; width:50%;]

[border=0; min-height:60px; height:auto; background:#175B64; overflow:hidden; font-size:16px; color:#F4ED05;][border=0; float:left; padding:0;width:92%; font-weight:300px; font-size:15px; letter-spacing:1px; line-height:110%;font-family: 'Ubuntu Mono', monospace;



]TEXT[/border][comment]



[/comment][border=0; padding:0 0 0 5px; border-left:3.5px solid #43B6AC; height:60px; width:6%; display:flex; flex-flow:column nowrap;][border=5px solid #43B6AC; margin:auto; border-radius:50%; height:18px; width:18px; padding:0;][/border][border=0; margin:auto; height:22px; width:25px; background:#F4ED05; color:#175B64; padding:0; text-align:center; font-weight:bold; font-size:15px; letter-spacing:1px;]•••[/border][/border][/border]

[comment]



[/comment][border=0; height:5px; width:40%; padding:0; display:flex; flex-flow:row nowrap; margin-top:-15px; float:right;]

[border=0; height:0; border-top:45px solid #175B64; border-left:50px solid transparent; flex:0; padding:0;][/border][comment]



[/comment]

[border=0; height:45px; flex:1; padding:0 0 0 10px; background:#175B64; display:flex; flex-flow:row nowrap; justify-content:flex-start; align-items:center; color:#F4ED05; font-size:11px; letter-spacing:2px; font-family: 'Ubuntu Mono', monospace;]

[border=0;height:25px; width:25%; background:#43B6AC; display:flex; content-align:center; padding:0;][border=4px solid #175B64; margin:auto; border-radius:50%; height:10px; width:10px; padding:0;][/border][/border][border=0; margin-left:20px;height:25px; width:0; border-right:3.5px solid #43B6AC; padding:0;][/border]

[border=0; height:25px; margin-left:20px; margin-right:20px; width:25%; background:#43B6AC; display:flex; content-align:center; padding:0;]

[border=4px solid #175B64; margin:auto; border-radius:50%; height:10px; width:10px; padding:0; display:flex; align-content:center; align-items:center;]

[border=0; margin:auto; border-bottom:4px solid #175B64; padding:0; height:0; width:100%; transform:rotate(40deg);][/border][/border][/border]

COM.[/border]

[/border]

[/border][/border]

 

[Oceanic Mind]

A crew terminal, exactly as it says on the tin. I want to explore custom tabs with this one at some point, but as-is it still works pretty well for posting-- in character or out, I'd think. The textbox scrolls pretty nicely if I do say so myself.

CREW TERMINAL // BERTH 02

USER:
ELLERY VAS

01

02

03

04

05

06

07

08

recent files

oversight // all privacy protocols active

PERSONAL LOG / / 06
/ / 2216 / / DR. ELLERY VAS

I know you have been reading these.

the access logs show someone has been in the file system of my terminal, and well, by process of elimination... it has to be you.

I don't mind. In fact, I suppose I have been writing these entries for an imagined audience anyway. Confessions, or maybe just a need to talk.

we make a strange trio now, me, a depressed xenobiologist who can't keep their mouth shut, you, an AI built from the remains of a sentient species, and your... sister(?) Minae, who is now more plant than human.

but as far as I can tell, we are the only ones on this planet who have any chance of finding out what happened here.

I think I am starting to understand why Minae called me here. It was because she trusted me not to give up, not to let this go.

Let's not disappoint her.

[EV]

Spoiler: code

[border=0; margin:auto; width:99%; height:auto; display:flex; flex-flow:row nowrap; align-content:center; align-items:center;][border=0; color:#F3E327; margin:auto; width:32%; height:auto; letter-spacing:4px;]CREW TERMINAL // BERTH 02[border=2px solid #F3E327; height:450px; padding:20px; margin-top:2px; letter-spacing:0px; line-height:110%; background:#00252480;][border=0; margin:auto; height:100%;

width:100%;

padding:0;][border=0; height:120px; display:flex; flex-flow:row wrap; justify-content:space-between; color:#016265; text-transform:uppercase; text-align:left; line-height:140%;

padding:0;][border=2px solid #016265; height:35px; width:105px; padding:5px;]USER:

ELLERY VAS[/border][comment]

[/comment][border=2px solid #016265; height:22px; width:45px; padding:20px 5px 3px 5px; font-size:20px;]01[/border][comment]

[/comment][border=2px solid #016265; height:22px; width:45px; padding:20px 5px 3px 5px; font-size:20px;]02[/border][comment]

[/comment][border=2px solid #016265; height:22px; width:45px; padding:20px 5px 3px 5px; font-size:20px;]03[/border][comment]

[/comment][border=2px solid #016265; height:22px; width:45px; padding:20px 5px 3px 5px; font-size:20px;]04[/border][comment]

[/comment][border=2px solid #016265; height:22px; width:45px; padding:20px 5px 3px 5px; font-size:20px;]05[/border][comment]

[/comment][border=2px solid #016265; height:22px; width:45px; padding:20px 5px 3px 5px; font-size:20px;]06[/border][comment]

[/comment][border=2px solid #016265; height:22px; width:45px; padding:20px 5px 3px 5px; font-size:20px;]07[/border][comment]

[/comment][border=2px solid #016265; height:22px; width:45px; padding:20px 5px 3px 5px; font-size:20px;]08[/border][comment]

[/comment][border=2px solid #016265; height:22px; width:105px; padding:20px 5px 3px 5px;]recent files[/border][/border][border=0;

padding:0; width:100%; height:20px; font-size:11px; text-transform:uppercase; letter-spacing:2px; margin-bottom:0;]oversight // all privacy protocols active[/border][border=2px solid #016265; width:94%; margin:auto; padding:10px; height:285px; overflow:hidden;][border=0; height:100%; width:200%; padding:0; overflow-y:scroll;][border=0;height:auto; width:50%; padding: 0 10px; color:#E6EFEFe9; line-height:120%; letter-spacing:2px; font-size:11.5px;

font-weight:100;] TEXT
[/border][/border][/border][/border][/border][/border][/border]

 

[Mandalor]

Interesting!

 

[Novelight]

Very interesting codes. I see that you're putting width: 99% to prevent the border from going outside its parent? You can combat that with box-sizing: border-box, which will make sure the inside border behaves accordingly to its container.

Unless what you did was intentional. Keep up the good work.