Actually Complete Solar System (ACSS) Release Thread

UPDATE: I’ve added to the code base so I can translate the ACSS database and save it as JSON (which is the format used in the PlanetData files).

Gee Laika, what does that even mean?

Good Question, that just means that I can develop ACSS at a quicker pace by using a central database and “exporting” that data into files that can be used by SFS

Great Laika, so what’s next in store for ACSS?

I’ll be focusing on adding in those textures that I so eagerly removed during the conversion to SFS v1.5, so stay tuned!
 
UPDATE: I’ve added to the code base so I can translate the ACSS database and save it as JSON (which is the format used in the PlanetData files).

Gee Laika, what does that even mean?

Good Question, that just means that I can develop ACSS at a quicker pace by using a central database and “exporting” that data into files that can be used by SFS

Great Laika, so what’s next in store for ACSS?

I’ll be focusing on adding in those textures that I so eagerly removed during the conversion to SFS v1.5, so stay tuned!
This is great to hear!
 
UPDATE: I’ve added to the code base so I can translate the ACSS database and save it as JSON (which is the format used in the PlanetData files).

Gee Laika, what does that even mean?

Good Question, that just means that I can develop ACSS at a quicker pace by using a central database and “exporting” that data into files that can be used by SFS

Great Laika, so what’s next in store for ACSS?

I’ll be focusing on adding in those textures that I so eagerly removed during the conversion to SFS v1.5, so stay tuned!
So if I correctly understand, you are making a script to generate the pack according to the checked elements my the user?
 
So if I correctly understand, you are making a script to generate the pack according to the checked elements my the user?
Yes, that's the end goal, though I'll probably have it available as a website to support multiple platforms. It would be too difficult to develop and support a script that would run on each platform (iOS, Android, Windows, etc.). Plus many devices nowadays have disabled running scripts like that as it's a security concern. I don't want users having to circumvent that feature, so they can just download from a website as a "package".
 
Yes, that's the end goal, though I'll probably have it available as a website to support multiple platforms. It would be too difficult to develop and support a script that would run on each platform (iOS, Android, Windows, etc.). Plus many devices nowadays have disabled running scripts like that as it's a security concern. I don't want users having to circumvent that feature, so they can just download from a website as a "package".
Also will you add the ability to enable/disable day/night cycle?
 
UPDATE: I've enhanced the exporting into SFS format (some of the data was missing and/or in the wrong order) and added importing from SFS format.

Hey Laika, I've noticed you keep posting new updates on Sundays and Wednesdays, is that on purpose?

Well no actually, it just happens to be a happy coincidence but I think I might stick with that and continue to post updates on those days. So you can expect to see updates twice a week an Sundays & Wednesdays.

But Hey, I thought you said you were going to focus on getting that terrain data back in there?

Yep, you got me. I did say that, though in order to work on that I first needed to make a way to get the existing planet data into the database in order to effectively develop those features. I have added the terrain data back for Mercury, Venus, & Earth (as you can see in the GitHub repo under the "Import Files" folder). Thought I have yet to test those in SFS, so stay tuned on that, I'm also looking at fixing the launch site as well.

See you Wednesday!
 
haha no problem! Just glad to help lol

I was reading through this thread and the dev thread a bit last night. Seems you were also having trouble converting the Planet Data to the new 1.5 format. I created a program to convert them, it works quite well, though I did make it remove all the terrainFormulas (that's the only thing that I couldn't figure out how to convert, must be something in the game they are calculating differently or something of the sort, it just doesn't seem to like many of the formulas in ACSS and I couldn't track down what in particular).

With that said, I ran those files from that last post through the converter, so here they are in 1.5 format...

ACSS 1.2.2.zip

And here's the source code for the converter...

ACSS 1.2 to SFS 1.5 Planet Converter.zip
Currently using this version of the pack. I'm trying land on Europa, but the height at which timewarp above 3* becomes unavailable is 500km. Is this intentional or an error? It's taking quite the time for my lander to descend...
 
Yes, that's quite a good idea and I imagine it can be added easily. Thanks for the suggestion!
Thanks for the great work!

I see something like this:
https://ibb.co/XVtJ8jP
https://ibb.co/yPxf1NB
https://ibb.co/nrKL4DD

"Enhanced Textures" is to let the choice to the user if he want to install the new "planetTexture" files or keep the vanilla textures for the default planets.

I like this very simple and dark design which is matching with the SFS global design.

I imagined the tree to be able to accommodate others objects like stars and galaxies. (We never know how the both pack and game will evolve in the future.)

Get the HTML file below to try the tree box menu. I wrote this example in HTML for illustration purposes, but may be this language is not adapted to make functional trees.

ACSS-features-selection-demo.html
HTML:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
:root {
  --padding-value: 19.85px;
}

body {
  background-color: black;
  color: white;
  font-family: "Arial";
}

ul, #list {
  list-style-type: none;
}

#list {
  margin: 0;
  padding: 0;
}

.caret::before {
  content: "\25B6";
  color: white;
  display: inline-block;
  margin-right: 4px;
}

.caret-down::before {
  transform: rotate(90deg); 
}

.box {
  cursor: pointer;
  user-select: none;
}

.box::before {
  content: "\2610";
  color: white;
  display: inline-block;
  margin-right: 6px;
}

.check-box::before {
  content: "\2611";
  color: white;
}

.grey-box::before {
  content: "\2611";
  color: grey;
  display: inline-block;
  margin-right: 6px;
}

.nested {
  display: none;
  padding-left: 20px;
}

.active {
  display: block;
}
</style>
</head>
<body>
<h1><center>ACSS</center></h1>
<h2><center>SFS Planet Pack</center></h2>
<h3><center>Version 1.2.3 (SFS 1.5.6+)</center></h3>
<p>Features selection:</p>

<ul id="list">
  <li><span class="caret"></span><span class="box">Objects</span>
    <ul class="nested">
      <li><span class="caret"></span><span class="box">Milky Way (Sagittarius A)</span>
        <ul class="nested">
          <li><span class="caret"></span><span class="grey-box">Solar System (Sun)</span>
            <ul class="nested">
              <li><span class="caret"></span><span class="box">Planets</span>
                <ul class="nested">
                  <li><span class="box" style="padding-left: var(--padding-value)">Mercury</span><li>
                  <li><span class="box" style="padding-left: var(--padding-value)">Venus</span><li>
                  <li><span class="caret"></span><span class="grey-box">Earth</span>
                    <ul class="nested">
                      <li><span class="box" style="padding-left: var(--padding-value)">Moon</span><li>
                    </ul>
                  </li>
                  <li><span class="caret"></span><span class="box">Mars</span>
                    <ul class="nested">
                      <li><span class="box" style="padding-left: var(--padding-value)">Phobos</span><li>
                      <li><span class="box" style="padding-left: var(--padding-value)">Deimos</span><li>
                    </ul>
                  </li>
                  <li><span class="caret"></span><span class="box">Jupiter</span>
                    <ul class="nested">
                      <li><span class="box" style="padding-left: var(--padding-value)">Io</span><li>
                      <li><span class="box" style="padding-left: var(--padding-value)">Europa</span><li>
                      <li><span class="box" style="padding-left: var(--padding-value)">Ganymede</span><li>
                      <li><span class="box" style="padding-left: var(--padding-value)">Callisto</span><li>
                      <li><span class="box" style="padding-left: var(--padding-value)">etc...</span><li>
                    </ul>
                  </li>
                  <li><span class="box" style="padding-left: var(--padding-value)">etc...</span><li>
                </ul>
              </li>
              <li><span class="caret"></span><span class="box">Dwarf Planets</span>
                <ul class="nested">
                  <li><span class="caret"></span><span class="box">Pluton</span>
                    <ul class="nested">
                      <li><span class="box" style="padding-left: var(--padding-value)">Charon</span><li>
                      <li><span class="box" style="padding-left: var(--padding-value)">Nix</span><li>
                      <li><span class="box" style="padding-left: var(--padding-value)">Hydra</span><li>
                    </ul>
                  </li>
                  <li><span class="box" style="padding-left: var(--padding-value)">Ceres</span><li>
                  <li><span class="box" style="padding-left: var(--padding-value)">Eris</span><li>
                  <li><span class="box" style="padding-left: var(--padding-value)">Haumea</span><li>
                  <li><span class="box" style="padding-left: var(--padding-value)">etc...</span><li>
                </ul>
              </li>
              <li><span class="caret"></span><span class="box">Asteroids</span>
                <ul class="nested">
                  <li><span class="box" style="padding-left: var(--padding-value)">10 Hygiea</span><li>
                  <li><span class="box" style="padding-left: var(--padding-value)">101955 Bennu</span><li>
                  <li><span class="box" style="padding-left: var(--padding-value)">107 Camilla</span><li>
                  <li><span class="box" style="padding-left: var(--padding-value)">etc...</span><li>
                </ul>
              </li>
              <li><span class="caret"></span><span class="box">Comets</span>
                <ul class="nested">
                  <li><span class="box" style="padding-left: var(--padding-value)">C/1995 O1 (Hale&#x2013;Bopp)</span><li>
                  <li><span class="box" style="padding-left: var(--padding-value)">19P/Borrelly</span><li>
                  <li><span class="box" style="padding-left: var(--padding-value)">1P/Halley</span><li>
                  <li><span class="box" style="padding-left: var(--padding-value)">etc...</span><li>
                </ul>
              </li>
              <li><span class="box" style="padding-left: var(--padding-value)">etc...</span><li>
            </ul>
          </li>
          <li><span class="caret"></span><span class="box">Alpha Centauri (A)</span>
            <ul class="nested">
              <li><span class="box" style="padding-left: var(--padding-value)">Alpha Centauri B</span><li>
              <li><span class="caret"></span><span class="box">Proxima Centauri</span>
                <ul class="nested">
                  <li><span class="box" style="padding-left: var(--padding-value)">Proxima b</span><li>
                  <li><span class="box" style="padding-left: var(--padding-value)">Proxima c</span><li>
                </ul>
              </li>
            </ul>
          </li>
          <li><span class="caret"></span><span class="box">1SWASP J1407</span>
            <ul class="nested">
              <li><span class="box" style="padding-left: var(--padding-value)">1SWASP J1407 b</span><li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li><span class="box" style="padding-left: var(--padding-value)">Day/Night Cycle</span><li>
  <li><span class="box" style="padding-left: var(--padding-value)">Enhanced Textures</span><li>
</ul>

<!--
<li><span class="caret"></span><span class="box">Object</span>
  <ul class="nested">
    <li>Subobject<li>
  </ul>
</li>

<li><span class="box" style="padding-left: var(--padding-value)">Object</span><li>
-->

<script>
var carets = document.getElementsByClassName("caret");
var boxes = document.getElementsByClassName("box");
var i;

for (i = 0; i < carets.length; i++) {
 
  carets[i].addEventListener("click", function() {
  this.classList.toggle("caret-down");
  this.parentElement.querySelector(".nested").classList.toggle("active");
  });
}

for (i = 0; i < boxes.length; i++) {
 
  boxes[i].addEventListener("click", function() {
  this.classList.toggle("check-box");
  });
}
</script>
</body>
</html>
Also, I suggest to rename the comets by their real names, e.g. "1P/Halley" instead of "Halley's comet", "C/1995 O1 (Hale-Bopp)" instead of "Comet Hale-Bopp", etc...

Thanks for paying attention. :)
 
Currently using this version of the pack. I'm trying land on Europa, but the height at which timewarp above 3* becomes unavailable is 500km. Is this intentional or an error? It's taking quite the time for my lander to descend...
Sorry Kormak I didn’t have time to take a look at that Timewarp Hight Issue for Europa, I’ll try to dig into it tomorrow.

Thanks for the great work!

I see something like this:
https://ibb.co/XVtJ8jP
https://ibb.co/yPxf1NB
https://ibb.co/nrKL4DD

"Enhanced Textures" is to let the choice to the user if he want to install the new "planetTexture" files or keep the vanilla textures for the default planets.

I like this very simple and dark design which is matching with the SFS global design.

I imagined the tree to be able to accommodate others objects like stars and galaxies. (We never know how the both pack and game will evolve in the future.)

Get the HTML file below to try the tree box menu. I wrote this example in HTML for illustration purposes, but may be this language is not adapted to make functional trees.

ACSS-features-selection-demo.html
HTML:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
:root {
  --padding-value: 19.85px;
}

body {
  background-color: black;
  color: white;
  font-family: "Arial";
}

ul, #list {
  list-style-type: none;
}

#list {
  margin: 0;
  padding: 0;
}

.caret::before {
  content: "\25B6";
  color: white;
  display: inline-block;
  margin-right: 4px;
}

.caret-down::before {
  transform: rotate(90deg);
}

.box {
  cursor: pointer;
  user-select: none;
}

.box::before {
  content: "\2610";
  color: white;
  display: inline-block;
  margin-right: 6px;
}

.check-box::before {
  content: "\2611";
  color: white;
}

.grey-box::before {
  content: "\2611";
  color: grey;
  display: inline-block;
  margin-right: 6px;
}

.nested {
  display: none;
  padding-left: 20px;
}

.active {
  display: block;
}
</style>
</head>
<body>
<h1><center>ACSS</center></h1>
<h2><center>SFS Planet Pack</center></h2>
<h3><center>Version 1.2.3 (SFS 1.5.6+)</center></h3>
<p>Features selection:</p>

<ul id="list">
  <li><span class="caret"></span><span class="box">Objects</span>
    <ul class="nested">
      <li><span class="caret"></span><span class="box">Milky Way (Sagittarius A)</span>
        <ul class="nested">
          <li><span class="caret"></span><span class="grey-box">Solar System (Sun)</span>
            <ul class="nested">
              <li><span class="caret"></span><span class="box">Planets</span>
                <ul class="nested">
                  <li><span class="box" style="padding-left: var(--padding-value)">Mercury</span><li>
                  <li><span class="box" style="padding-left: var(--padding-value)">Venus</span><li>
                  <li><span class="caret"></span><span class="grey-box">Earth</span>
                    <ul class="nested">
                      <li><span class="box" style="padding-left: var(--padding-value)">Moon</span><li>
                    </ul>
                  </li>
                  <li><span class="caret"></span><span class="box">Mars</span>
                    <ul class="nested">
                      <li><span class="box" style="padding-left: var(--padding-value)">Phobos</span><li>
                      <li><span class="box" style="padding-left: var(--padding-value)">Deimos</span><li>
                    </ul>
                  </li>
                  <li><span class="caret"></span><span class="box">Jupiter</span>
                    <ul class="nested">
                      <li><span class="box" style="padding-left: var(--padding-value)">Io</span><li>
                      <li><span class="box" style="padding-left: var(--padding-value)">Europa</span><li>
                      <li><span class="box" style="padding-left: var(--padding-value)">Ganymede</span><li>
                      <li><span class="box" style="padding-left: var(--padding-value)">Callisto</span><li>
                      <li><span class="box" style="padding-left: var(--padding-value)">etc...</span><li>
                    </ul>
                  </li>
                  <li><span class="box" style="padding-left: var(--padding-value)">etc...</span><li>
                </ul>
              </li>
              <li><span class="caret"></span><span class="box">Dwarf Planets</span>
                <ul class="nested">
                  <li><span class="caret"></span><span class="box">Pluton</span>
                    <ul class="nested">
                      <li><span class="box" style="padding-left: var(--padding-value)">Charon</span><li>
                      <li><span class="box" style="padding-left: var(--padding-value)">Nix</span><li>
                      <li><span class="box" style="padding-left: var(--padding-value)">Hydra</span><li>
                    </ul>
                  </li>
                  <li><span class="box" style="padding-left: var(--padding-value)">Ceres</span><li>
                  <li><span class="box" style="padding-left: var(--padding-value)">Eris</span><li>
                  <li><span class="box" style="padding-left: var(--padding-value)">Haumea</span><li>
                  <li><span class="box" style="padding-left: var(--padding-value)">etc...</span><li>
                </ul>
              </li>
              <li><span class="caret"></span><span class="box">Asteroids</span>
                <ul class="nested">
                  <li><span class="box" style="padding-left: var(--padding-value)">10 Hygiea</span><li>
                  <li><span class="box" style="padding-left: var(--padding-value)">101955 Bennu</span><li>
                  <li><span class="box" style="padding-left: var(--padding-value)">107 Camilla</span><li>
                  <li><span class="box" style="padding-left: var(--padding-value)">etc...</span><li>
                </ul>
              </li>
              <li><span class="caret"></span><span class="box">Comets</span>
                <ul class="nested">
                  <li><span class="box" style="padding-left: var(--padding-value)">C/1995 O1 (Hale&#x2013;Bopp)</span><li>
                  <li><span class="box" style="padding-left: var(--padding-value)">19P/Borrelly</span><li>
                  <li><span class="box" style="padding-left: var(--padding-value)">1P/Halley</span><li>
                  <li><span class="box" style="padding-left: var(--padding-value)">etc...</span><li>
                </ul>
              </li>
              <li><span class="box" style="padding-left: var(--padding-value)">etc...</span><li>
            </ul>
          </li>
          <li><span class="caret"></span><span class="box">Alpha Centauri (A)</span>
            <ul class="nested">
              <li><span class="box" style="padding-left: var(--padding-value)">Alpha Centauri B</span><li>
              <li><span class="caret"></span><span class="box">Proxima Centauri</span>
                <ul class="nested">
                  <li><span class="box" style="padding-left: var(--padding-value)">Proxima b</span><li>
                  <li><span class="box" style="padding-left: var(--padding-value)">Proxima c</span><li>
                </ul>
              </li>
            </ul>
          </li>
          <li><span class="caret"></span><span class="box">1SWASP J1407</span>
            <ul class="nested">
              <li><span class="box" style="padding-left: var(--padding-value)">1SWASP J1407 b</span><li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li><span class="box" style="padding-left: var(--padding-value)">Day/Night Cycle</span><li>
  <li><span class="box" style="padding-left: var(--padding-value)">Enhanced Textures</span><li>
</ul>

<!--
<li><span class="caret"></span><span class="box">Object</span>
  <ul class="nested">
    <li>Subobject<li>
  </ul>
</li>

<li><span class="box" style="padding-left: var(--padding-value)">Object</span><li>
-->

<script>
var carets = document.getElementsByClassName("caret");
var boxes = document.getElementsByClassName("box");
var i;

for (i = 0; i < carets.length; i++) {

  carets[i].addEventListener("click", function() {
  this.classList.toggle("caret-down");
  this.parentElement.querySelector(".nested").classList.toggle("active");
  });
}

for (i = 0; i < boxes.length; i++) {

  boxes[i].addEventListener("click", function() {
  this.classList.toggle("check-box");
  });
}
</script>
</body>
</html>
Also, I suggest to rename the comets by their real names, e.g. "1P/Halley" instead of "Halley's comet", "C/1995 O1 (Hale-Bopp)" instead of "Comet Hale-Bopp", etc...

Thanks for paying attention. :)
Wow NeilaSchweitz thanks for that! I’ll use that as a template, very helpful!
 
Sorry Kormak I didn’t have time to take a look at that Timewarp Hight Issue for Europa, I’ll try to dig into it tomorrow.


Wow NeilaSchweitz thanks for that! I’ll use that as a template, very helpful!
No worries, take your time! I found a work around for the time being, switching to another spacecraft and timewarping for the desired duration.
 

Altaïr

Space Stig, Master of gravity
Staff member
Head Moderator
Team Kolibri
Modder
TEAM HAWK
Atlas
Deja Vu
Under Pressure
Forum Legend
No worries, take your time! I found a work around for the time being, switching to another spacecraft and timewarping for the desired duration.
If needed you can fix the Europa file yourself, it's not very complicated.

This is what the atmosphere data looks like for Earth:
Screenshot_20220720-083421_QuickEdit+.jpg
And for Europa:
Screenshot_20220720-083453_QuickEdit+.jpg

In your file you probably have an unique ATMOSPHERE_DATA section as it's how it was defined in 1.4. You can either set the atmosphere height to 0.0, or update the atmosphere data to the new format.

That's really some great work Laika , what you're putting in place is awesome :)
 
If needed you can fix the Europa file yourself, it's not very complicated.

This is what the atmosphere data looks like for Earth:
View attachment 86995
And for Europa:
View attachment 86996

In your file you probably have an unique ATMOSPHERE_DATA section as it's how it was defined in 1.4. You can either set the atmosphere height to 0.0, or update the atmosphere data to the new format.

That's really some great work Laika , what you're putting in place is awesome :)
Altaïr thanks for that! You're certainly spot on with your insight there, I simply removed the ATMOSPHERE_PHYSICS_DATA section completely. Europa only has a tenuous atmosphere so it's barely even there. Also looking at the Example solar system they too do not have any atmosphere physics defined for Europa.

Also thanks for the support!

No worries, take your time! I found a work around for the time being, switching to another spacecraft and timewarping for the desired duration.
Kormak I believe this should fix your issue, I've updated the file on GitHub and you can view the changes here: Commit Details and you can download the new version here: GitHub ACSS Repository. I'll keep the issue on GitHub open for some time in case this doesn't fix it for you, so please let me know hoe it goes.

May be there is a way to generate the boxes dynamicaly, it would be better and painless for you to add objects in the list.
NeilaSchweitz that's a great idea, should help to bring down development time too! I took a look at your HTML and ran it in my browser, that is AWESOME! Thank you so much!
 
Altaïr thanks for that! You're certainly spot on with your insight there, I simply removed the ATMOSPHERE_PHYSICS_DATA section completely. Europa only has a tenuous atmosphere so it's barely even there. Also looking at the Example solar system they too do not have any atmosphere physics defined for Europa.

Also thanks for the support!



Kormak I believe this should fix your issue, I've updated the file on GitHub and you can view the changes here: Commit Details and you can download the new version here: GitHub ACSS Repository. I'll keep the issue on GitHub open for some time in case this doesn't fix it for you, so please let me know hoe it goes.



NeilaSchweitz that's a great idea, should help to bring down development time too! I took a look at your HTML and ran it in my browser, that is AWESOME! Thank you so much!
I'll take a look at it soon, thanks! Your hard work is appreciated.
 

Gurren Lagann

«★» Officer «» //PT
Professor
ET phone home
Man on the Moon
Registered
Lurking at this thread makes me in awe by how much inovation ACSS has undergone through... Amazing work Laika!
I might do a little help with one last major... and elliptical contribution...
 

EmberSkyMedia

PicoSpace Industries
Modder
TEAM HAWK
Swingin' on a Star
Atlas
Fly me to the Moon
Copycat
Registered
So on GitHub, is there an actual “release” or is it just what’s in “The Solar system” gets updated every few days?

wondering if I can start to use ACSS from GitHub or if we are waiting for it to be completely transferred over?

(Kind of want to do a Pluto Mission)
 
NeilaSchweitz thanks so much for that HTML template, I've finally got the website up now!...

Laika SFS - ACSS Planet Pack

It's not "functional" in any sense of the word, the menu is not interactable yet. I've only just got the resources provisioned BUT I do have it dynamically creating those list items as you suggested.

Gurren Lagann thank you for the support! It's been quite a journey and I'm just happy to take what you've worked so hard to build and take it to the stars! And OMG elliptical orbits would be amazing!

EmberSkyMedia there's no "versions" for release or otherwise. What you see on GitHub is the most recent and current version. Eventually you'll be able to simply download a "package" from the link in this post, but we're not quite there yet, soon though!
 
NeilaSchweitz thanks so much for that HTML template, I've finally got the website up now!...

Laika SFS - ACSS Planet Pack

It's not "functional" in any sense of the word, the menu is not interactable yet. I've only just got the resources provisioned BUT I do have it dynamically creating those list items as you suggested.
Very nice!

I have updated the script. :)

Use this new template: (see the next posts).

We are now be able to add objects very easily (even from a database with a simple interface).

I also added error handling/printing in order to deal easily with data entry errors.

I will add half-checked boxes and download button in the next update.

Have a nice day/night! :)
 
Here is the sources files split in two posts:

index.html
HTML:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>ACSS Download</title>
    <link href=main.css rel="stylesheet">
  </head>
  <body>
    <center>
      <h1>ACSS</h1>
      <h2>SFS Planet Pack</h2>
      <h3>Version 1.2.3 (SFS 1.5.6+)</h3>
    </center>
    <div id="div">
      <p>Features selection:</p>
      <ul id="list"></ul> <!-- root of tree structure -->
    </div>
    <script src="main.js"></script>
  </body>
</html>
Version: 0.1

main.css
CSS:
body {
  background-color: black;
  color: white;
  font-family: "Arial";
}

/*adjusts the position of the box tree*/
div, #div {
  margin-top: 15%;
  margin-left: 10%;
}

ul, #list {
  list-style-type: none;
  white-space: nowrap;
  padding: 0;
}

.caret::before {
  content: "\25B6";
  color: white;
  display: inline-block;
  margin-right: 4px;
}

.caret-down::before {
  transform: rotate(90deg);
}

.unchecked-box::before {
  content: "\2610";
  color: white;
  display: inline-block;
  margin-right: 6px;
}

.checked-box::before {
  content: "\2611";
  color: white;
  display: inline-block;
  margin-right: 6px;
}

.greyed-out-box::before {
  content: "\2611";
  color: grey;
  display: inline-block;
  margin-right: 6px;
}

.padded {
  padding-left: 19.85px; /*vertical alignment for non-expandable boxes*/
}

.nested {
  display: none;
  padding-left: 20px;
}

.active {
  display: block;
}
Version: 0.1