diff --git a/FOOS_ALT_WEBSITE/games.html b/FOOS_ALT_WEBSITE/games.html index 54a7e96..cf39984 100644 --- a/FOOS_ALT_WEBSITE/games.html +++ b/FOOS_ALT_WEBSITE/games.html @@ -28,19 +28,19 @@ FPS
  • - General + General
  • - Platformer + Platformer
  • - Sandbox + Sandbox
  • - Strategy + Strategy
  • - Vehicle + Vehicle
    • diff --git a/FOOS_ALT_WEBSITE/games/fps.html b/FOOS_ALT_WEBSITE/games/fps.html index 37f21a1..21beb65 100644 --- a/FOOS_ALT_WEBSITE/games/fps.html +++ b/FOOS_ALT_WEBSITE/games/fps.html @@ -7,20 +7,42 @@ -

    Game List

    -

    Fully Free

    - - -

    Non-Free Assets

    - +
    +
    +
    FOSS alternative
    + + +
    +
    +
    +

    Game List

    +

    Fully Free

    + + +

    Non-Free Assets

    + +
    + diff --git a/FOOS_ALT_WEBSITE/games/general b/FOOS_ALT_WEBSITE/games/general deleted file mode 100644 index 5c65886..0000000 --- a/FOOS_ALT_WEBSITE/games/general +++ /dev/null @@ -1,11 +0,0 @@ -fully free - -KDE Games -GNOME Games -Friday Night Funkin' - -non-free assets - -osu! -OpenMW -Daggerfall Unity diff --git a/FOOS_ALT_WEBSITE/games/general.html b/FOOS_ALT_WEBSITE/games/general.html new file mode 100644 index 0000000..e4c3c31 --- /dev/null +++ b/FOOS_ALT_WEBSITE/games/general.html @@ -0,0 +1,47 @@ + + + + + + Game List + + + +
    +
    +
    FOSS alternative
    + + +
    +
    +
    +

    Game List

    +

    Fully Free

    + + +

    Non-Free Assets

    + +
    + + + diff --git a/FOOS_ALT_WEBSITE/games/platformer b/FOOS_ALT_WEBSITE/games/platformer deleted file mode 100644 index 4402d77..0000000 --- a/FOOS_ALT_WEBSITE/games/platformer +++ /dev/null @@ -1,5 +0,0 @@ -fully free - -SuperTux - -non-free assets diff --git a/FOOS_ALT_WEBSITE/games/platformer.html b/FOOS_ALT_WEBSITE/games/platformer.html new file mode 100644 index 0000000..b74b9d9 --- /dev/null +++ b/FOOS_ALT_WEBSITE/games/platformer.html @@ -0,0 +1,45 @@ + + + + + + Game List + + + +
    +
    +
    FOSS alternative
    + + +
    +
    +
    +

    Game List

    +

    Fully Free

    + + +

    Non-Free Assets

    + +
    + + + diff --git a/FOOS_ALT_WEBSITE/games/sandbox b/FOOS_ALT_WEBSITE/games/sandbox deleted file mode 100644 index d3fc32b..0000000 --- a/FOOS_ALT_WEBSITE/games/sandbox +++ /dev/null @@ -1,6 +0,0 @@ -fully free - -Minetest -The Powder Toy - -non-free assets diff --git a/FOOS_ALT_WEBSITE/games/sandbox.html b/FOOS_ALT_WEBSITE/games/sandbox.html new file mode 100644 index 0000000..96d400c --- /dev/null +++ b/FOOS_ALT_WEBSITE/games/sandbox.html @@ -0,0 +1,46 @@ + + + + + + Game List + + + +
    +
    +
    FOSS alternative
    + + +
    +
    +
    +

    Game List

    +

    Fully Free

    + + +

    Non-Free Assets

    + +
    + + + diff --git a/FOOS_ALT_WEBSITE/games/strategy b/FOOS_ALT_WEBSITE/games/strategy deleted file mode 100644 index 5fe4358..0000000 --- a/FOOS_ALT_WEBSITE/games/strategy +++ /dev/null @@ -1,11 +0,0 @@ -fully free - -0 A.D. -Freeciv -OpenCity -OpenTTD - -non-free assets - -OpenAge -OpenRA diff --git a/FOOS_ALT_WEBSITE/games/strategy.html b/FOOS_ALT_WEBSITE/games/strategy.html new file mode 100644 index 0000000..a3e11a2 --- /dev/null +++ b/FOOS_ALT_WEBSITE/games/strategy.html @@ -0,0 +1,47 @@ + + + + + + Game List + + + +
    +
    +
    FOSS alternative
    + + +
    +
    +
    +

    Game List

    +

    Fully Free

    + + +

    Non-Free Assets

    + +
    + + + diff --git a/FOOS_ALT_WEBSITE/games/vehicle b/FOOS_ALT_WEBSITE/games/vehicle deleted file mode 100644 index 1844a7f..0000000 --- a/FOOS_ALT_WEBSITE/games/vehicle +++ /dev/null @@ -1,6 +0,0 @@ -fully free - -Rigs of Rods -FlightGear - -non-free assets diff --git a/FOOS_ALT_WEBSITE/games/vehicle.html b/FOOS_ALT_WEBSITE/games/vehicle.html new file mode 100644 index 0000000..bb3e574 --- /dev/null +++ b/FOOS_ALT_WEBSITE/games/vehicle.html @@ -0,0 +1,43 @@ + + + + + + Game List + + + +
    +
    +
    FOSS alternative
    + + +
    +
    +
    +

    Game List

    +

    Fully Free

    + + +

    Non-Free Assets

    + +
    + + + diff --git a/FOOS_ALT_WEBSITE/list.css b/FOOS_ALT_WEBSITE/list.css index 806ac30..ead1fa3 100644 --- a/FOOS_ALT_WEBSITE/list.css +++ b/FOOS_ALT_WEBSITE/list.css @@ -1,56 +1,256 @@ -body { - font-family: Arial, sans-serif; - margin: 0; - padding: 0; - background-color: #f9f9f9; +/* Reset and global styles */ +* { + box-sizing: border-box; + margin: 0; + padding: 0; + font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; + transition: 1s; } -h1, h2 { - text-align: center; - color: #333; +/* Body styles */ +body { + background-color: #f5f5f5; + background-image: url("assets/"); + background-repeat: no-repeat; + background-size: cover; + background-position: center; + background-attachment: fixed; + display: flex; + flex-direction: column; + align-items: center; + min-height: 100vh; +} + +/* Header styles */ +header { + background-color: rgba(0, 0, 0, 0.7); + padding: 10px; + width: 100%; + position: fixed; + top: 0; + left: 0; + z-index: 1000; +} + +.header-content { + display: flex; + justify-content: space-between; + align-items: center; + max-width: 1200px; + margin: 0 auto; +} + +.project-name { + color: white; + font-size: 1.5em; +} + +.burger-menu { + background: none; + border: none; + color: white; + font-size: 1.5em; + cursor: pointer; + display: none; +} + +.menu { + list-style: none; + display: flex; + justify-content: space-around; + flex-grow: 1; +} + +header li { + margin: 0 10px; +} + +header a { + color: white; + text-decoration: none; + padding: 10px; + border-radius: 5px; + transition: background-color 0.3s ease; +} + +header a:hover { + background-color: rgba(255, 255, 255, 0.2); +} + +/* Article styles */ +article { + margin-top: 100px; + padding: 20px; + width: 90%; + max-width: 800px; + background: rgba(255, 255, 255, 0.9); + border-radius: 10px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + text-align: center; } h1 { + color: #333; + margin-bottom: 20px; + font-size: 2em; +} + +p.text { + color: #666; + line-height: 1.2; + margin-bottom: 20px; + font-size: 1em; +} + +img { + max-width: 100%; + height: auto; + margin-bottom: 20px; +} + +button { + padding: 10px 20px; + margin: 2em; + border: none; + background-color: #333; + color: white; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s ease; +} + +button:hover { + background-color: #555; +} + +.flex { + display: flex; + align-items: center; +} + +nav { margin-top: 20px; } -h2 { - margin-top: 40px; -} - -ul { +.folder-list { list-style-type: none; padding: 0; - width: 50%; - margin: 0 auto; - background-color: #fff; - border-radius: 8px; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); - overflow: hidden; +} + +.folder-list-item { + margin-bottom: 10px; +} + +.folder-link { + text-decoration: none; + color: #eee8e8; + font-weight: bold; + display: block; + padding: 10px; + border-radius: 5px; + background: linear-gradient(to right, #000000, #707070); /* Gradient background */ +} + +.folder-link:hover { + background: linear-gradient(to right, #707070, #000000); /* Gradient change on hover */ +} + +.folder-link:active { + transform: scale(0.98); /* Slight scale down on click */ +} + +/* Styles for the game lists */ +h2 { + margin-top: 40px; + color: #333; +} + +article ul { + list-style-type: none; + padding: 0; + width: 50%; + margin: 0 auto; + background-color: #fff; + border-radius: 8px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + overflow: hidden; } ul.fully-free { - border: 2px solid #4CAF50; + border: 2px solid #4CAF50; } ul.non-free-assets { - border: 2px solid #FF5722; + border: 2px solid #FF5722; } ul li { - padding: 12px; - border-bottom: 1px solid #ddd; - text-align: center; + padding: 12px; + border-bottom: 1px solid #ddd; + text-align: center; } ul li:last-child { - border-bottom: none; + border-bottom: none; } ul.fully-free li { - background-color: #e8f5e9; + background-color: #e8f5e9; } ul.non-free-assets li { - background-color: #ffebee; + background-color: #ffebee; +} + +/* Mobile Styles */ +@media (max-width: 1000px) { + .burger-menu { + display: block; + } + + .menu { + display: none; + flex-direction: column; + background-color: rgba(0, 0, 0, 0.7); + position: absolute; + top: 100%; /* Adjusted position */ + left: 0; + width: 100%; + z-index: 999; + } + + .menu.active { + display: flex; + } + + header { + padding: 5px; + height: auto; + } + + .header-content { + flex-direction: row; + justify-content: space-between; + align-items: center; + } + + .project-name { + font-size: 1.2em; + } + + header li { + margin: 0; + width: 100%; + } + + header a { + padding: 10px; + width: 100%; + display: block; + } + + article { + margin-top: 190px; + padding-top: 20px; + } }