c
/
gunslinger
spiegel van https://github.com/MrFrenik/gunslinger.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723
							<!doctype html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="generator" content="Hugo 0.84.0">
    <title>Gunslinger</title>

    <link rel="icon" href="./assets/gs_logo.png">

    <!-- Scripts -->

    <!-- JQuery -->
    <!-- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> -->
    <script type="text/javascript" src="./external/fancybox/jquery-1.4.3.min.js"></script>

    <!-- Add jQuery easing plugin -->
    <script src="./external/fancybox/fancybox/jquery.easing-1.3.pack.js"></script>

    <!-- Bootstrap -->
    <script src="./assets/dist/js/bootstrap.bundle.min.js"></script>
    <link href="./assets/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- FancyBox -->
    <script type="text/javascript" src="./external/fancybox/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
    <link rel="stylesheet" href="./external/fancybox/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />

    <!-- Examples JS -->
    <!-- <script type="text/javascript" src=""></script> -->

    <!-- Examples css sheet -->
    <link rel="stylesheet" href="./examples/examples.css" type="text/css" media="screen" />

    <script type="text/javascript">
      $(document).ready(function() {

        $(".example").fancybox({
          'width'       : 900,
          'height'      : 650,
          'autoScale'     : 'false',
          'transitionIn'    : 'elastic',
          'transitionOut'   : 'none',
          'type'        : 'iframe',
          'overlayColor'    : '#000',
          'overlayOpacity'  : 0.9
        });
      });
    </script>

    <!-- Bootstrap core CSS -->
    <!-- <link href="./assets/dist/css/bootstrap.min.css" rel="stylesheet"> -->
    <!-- FancyBox CSS -->
    <!-- <link rel="stylesheet" href="./external/fancybox/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" /> -->

    <style>
      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }

      .card-outline {
        .background-color: rgb(45, 45, 45)
      }

      .card-desc-text {
        .color: white;
      }

      .card-body-bg {
        .background-color: black  
      }

      .card

    </style>
    
  </head>

<!-- Main Body -->
<body>
    
<!-- Header -->
<header>

<!--   <div class="collapse" style="background-color: rgb(16, 16, 16)" id="navbarHeader">
    <div class="container">
      <div class="row">
        <div class="col-sm-8 col-md-7 py-4">
          <h4 class="text-white">About</h4>
          <p class="text-muted">Gunslinger</p>
        </div>
        <div class="col-sm-4 offset-md-1 py-4">
          <h4 class="text-white">Links</h4>
          <ul class="list-unstyled">
            <li><a href="https://github.com/MrFrenik/gunslinger" class="text-white">Github</a></li>
            <li><a href="https://discord.gg/phggSpnxew" class="text-white">Discord</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
 -->
<!--   <div class="navbar navbar-dark shadow-sm" style="background-color: rgb(16, 16, 16)">
    <div class="container">
      <a href="#" class="navbar-brand d-flex align-items-center"><strong>Gunslinger</strong></a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
    </div>
  </div>
 -->
</header>

<main style="background-color:black">

  <!-- Main Banner -->
  <section class="py-5 text-center container" style="background-color: black">
    <div class="row py-lg-5">
      <div class="col-lg-6 col-md-8 mx-auto">
        <a href="https://github.com/MrFrenik/gunslinger"> 
          <img src="./assets/gs_logo2.png" width="100%" height="100" xmlns="http://www.w3.org/2000/svg" role="image" aria-label="Banner Logo" focusable="false"></img>
        </a>
        <p class="lead text-muted">C99, header-only framework for games and multimedia applications</p>
        <h2 class="section_title" style="padding-bottom: 5px">Samples</h2>
        <p>
          <a href="#example_list_graphics" class="btn btn-primary my-2">Graphics</a>
          <a href="#example_list_audio" class="btn btn-primary my-2">Audio</a>
          <a href="#example_list_physics" class="btn btn-primary my-2">Physics</a>
          <a href="#example_list_misc" class="btn btn-primary my-2">Misc</a>
          <a href="#example_list_user" class="btn btn-primary my-2">User Apps</a>

          <!-- Github link -->
          <a href="https://github.com/MrFrenik/gs_examples">
            <svg style="-webkit-filter: invert(100%)" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-4.466 19.59c-.405.078-.534-.171-.534-.384v-2.195c0-.747-.262-1.233-.55-1.481 1.782-.198 3.654-.875 3.654-3.947 0-.874-.312-1.588-.823-2.147.082-.202.356-1.016-.079-2.117 0 0-.671-.215-2.198.82-.64-.18-1.324-.267-2.004-.271-.68.003-1.364.091-2.003.269-1.528-1.035-2.2-.82-2.2-.82-.434 1.102-.16 1.915-.077 2.118-.512.56-.824 1.273-.824 2.147 0 3.064 1.867 3.751 3.645 3.954-.229.2-.436.552-.508 1.07-.457.204-1.614.557-2.328-.666 0 0-.423-.768-1.227-.825 0 0-.78-.01-.055.487 0 0 .525.246.889 1.17 0 0 .463 1.428 2.688.944v1.489c0 .211-.129.459-.528.385-3.18-1.057-5.472-4.056-5.472-7.59 0-4.419 3.582-8 8-8s8 3.581 8 8c0 3.533-2.289 6.531-5.466 7.59z"/></svg>
          </a>

        </p>
      </div>
    </div>
  </section>

<!-- Example List -->
  <div class="album py-5" style="background-color: rgb(16, 16, 16)">

    <!-- Graphics -->
    <h4 id="example_list_graphics" class="section_title">Graphics</h4>

    <div class="container">
      <div class="row row-cols-2 row-cols-sm-2 row-cols-md-5 g-3">

        <!-- Example 0: Hello World -->
        <div class="col">
          <div class="card shadow-sm" style="background-color: rgb(45, 45, 45)">
            <a class="example" href = "examples/00_hello_gs/bin/App.html">
                <img src="examples/00_hello_gs/screen_shot.png" class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="button" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false">
                <title>Hello GS</title>
                <rect width="100%" height="100%" fill="#55595c"/>
            </img>
            </a>
             <div class="card-body" style="background-color: rgb(20, 20, 20)">
              <p class="card-text" style="color: white">Hello, Gunslinger</p>
              <div class="d-flex justify-content-between align-items-center">
                <div class="btn-group">
                  <a href="https://github.com/MrFrenik/gs_examples/tree/main/ex_core_platform/window/basic_window"> 
                    <button type="button" class="btn btn-sm btn-outline-secondary">Github</button>
                  </a>
                </div>
                <!-- <small class="text-muted">9 mins</small> -->
              </div>
            </div>
          </div>
        </div>

        <!-- Simple Triangle -->
        <div class="col">
          <div class="card shadow-sm" style="background-color: rgb(45, 45, 45)">
            <a class="example" href = "examples/02_simple_triangle/bin/App.html">
                <img src="examples/02_simple_triangle/screen_shot.png" class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="button" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false">
                <title>Simple Triangle</title>
                <rect width="100%" height="100%" fill="#55595c"/>
            </img>
            </a>
             <div class="card-body" style="background-color: rgb(20, 20, 20)">
              <p class="card-text" style="color: white">Simple Triangle</p>
              <div class="d-flex justify-content-between align-items-center">
                <div class="btn-group">
                  <a href="https://github.com/MrFrenik/gs_examples/tree/main/ex_core_graphics/simple_triangle"> 
                    <button type="button" class="btn btn-sm btn-outline-secondary">Github</button>
                  </a>
                </div>
                <!-- <small class="text-muted">9 mins</small> -->
              </div>
            </div>
          </div>
        </div>

        <!-- Uniforms -->
        <div class="col">
          <div class="card shadow-sm" style="background-color: rgb(45, 45, 45)">
            <a class="example" href="examples/03_uniforms/bin/App.html">
                <img src="examples/03_uniforms/screen_shot.png" class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="button" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false">
                <title>Uniforms</title>
                <rect width="100%" height="100%" fill="#55595c"/>
            </img>
            </a>
             <div class="card-body" style="background-color: rgb(20, 20, 20)">
              <p class="card-text" style="color: white">Uniforms</p>
              <div class="d-flex justify-content-between align-items-center">
                <div class="btn-group">
                  <a href="https://github.com/MrFrenik/gs_examples/tree/main/ex_core_graphics/uniforms"> 
                    <button type="button" class="btn btn-sm btn-outline-secondary">Github</button>
                  </a>
                </div>
                <!-- <small class="text-muted">9 mins</small> -->
              </div>
            </div>
          </div>
        </div>

        <!-- Simple Texture -->
        <div class="col">
          <div class="card shadow-sm" style="background-color: rgb(45, 45, 45)">
            <a class="example" href="examples/04_simple_texture/bin/App.html">
                <img src="examples/04_simple_texture/screen_shot.png" class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="button" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false">
                <title>Simple Texture</title>
                <rect width="100%" height="100%" fill="#55595c"/>
            </img>
            </a>
             <div class="card-body" style="background-color: rgb(20, 20, 20)">
              <p class="card-text" style="color: white">Simple Texture</p>
              <div class="d-flex justify-content-between align-items-center">
                <div class="btn-group">
                  <a href="https://github.com/MrFrenik/gs_examples/tree/main/ex_core_graphics/simple_texture"> 
                    <button type="button" class="btn btn-sm btn-outline-secondary">Github</button>
                  </a>
                </div>
                <!-- <small class="text-muted">9 mins</small> -->
              </div>
            </div>
          </div>
        </div>

        <!-- Non-Interleaved Data -->
        <div class="col">
          <div class="card shadow-sm" style="background-color: rgb(45, 45, 45)">
            <a class="example" href = "examples/06_non_interleaved_data/bin/App.html">
                <img src="examples/06_non_interleaved_data/screen_shot.png" class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="button" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false">
                <title>Non-Interleaved Data</title>
                <rect width="100%" height="100%" fill="#55595c"/>
            </img>
            </a>
             <div class="card-body" style="background-color: rgb(20, 20, 20)">
              <p class="card-text" style="color: white">Non-Interleaved Vertex Data</p>
              <div class="d-flex justify-content-between align-items-center">
                <div class="btn-group">
                  <a href="https://github.com/MrFrenik/gs_examples/tree/main/ex_core_graphics/non_interleaved_data"> 
                    <button type="button" class="btn btn-sm btn-outline-secondary">Github</button>
                  </a>
                </div>
                <!-- <small class="text-muted">9 mins</small> -->
              </div>
            </div>
          </div>
        </div>

        <!-- Instancing -->
        <div class="col">
          <div class="card shadow-sm" style="background-color: rgb(45, 45, 45)">
            <a class="example" href="examples/07_instancing/bin/App.html">
                <img src="examples/07_instancing/screen_shot.png" class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="button" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false">
                <title>Instancing</title>
                <rect width="100%" height="100%" fill="#55595c"/>
            </img>
            </a>
             <div class="card-body" style="background-color: rgb(20, 20, 20)">
              <p class="card-text" style="color: white">Instancing</p>
              <div class="d-flex justify-content-between align-items-center">
                <div class="btn-group">
                  <a href="https://github.com/MrFrenik/gs_examples/tree/main/ex_core_graphics/instancing"> 
                    <button type="button" class="btn btn-sm btn-outline-secondary">Github</button>
                  </a>
                </div>
                <!-- <small class="text-muted">9 mins</small> -->
              </div>
            </div>
          </div>
        </div>

        <!-- Frame Buffer -->
        <div class="col">
          <div class="card shadow-sm" style="background-color: rgb(45, 45, 45)">
            <a class="example" href="examples/09_frame_buffer/bin/App.html">
                <img src="examples/09_frame_buffer/screen_shot.png" class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="button" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false">
                <title>Frame Buffer</title>
                <rect width="100%" height="100%" fill="#55595c"/>
            </img>
            </a>
             <div class="card-body" style="background-color: rgb(20, 20, 20)">
              <p class="card-text" style="color: white">FrameBuffer</p>
              <div class="d-flex justify-content-between align-items-center">
                <div class="btn-group">
                  <a href="https://github.com/MrFrenik/gs_examples/tree/main/ex_core_graphics/frame_buffer"> 
                    <button type="button" class="btn btn-sm btn-outline-secondary">Github</button>
                  </a>
                </div>
                <!-- <small class="text-muted">9 mins</small> -->
              </div>
            </div>
          </div>
        </div>

        <!-- Non-Interleave Instancing -->
        <div class="col">
          <div class="card shadow-sm" style="background-color: rgb(45, 45, 45)">
            <a class="example" href="examples/10_non_interleave_instancing/bin/App.html">
                <img src="examples/10_non_interleave_instancing/screen_shot.png" class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="button" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false">
                <title>Non-Interleave Instancing</title>
                <rect width="100%" height="100%" fill="#55595c"/>
            </img>
            </a>
             <div class="card-body" style="background-color: rgb(20, 20, 20)">
              <p class="card-text" style="color: white">Non-Interleaved Instancing</p>
              <div class="d-flex justify-content-between align-items-center">
                <div class="btn-group">
                  <a href="https://github.com/MrFrenik/gs_examples/tree/main/ex_core_graphics/non_interleave_instancing"> 
                    <button type="button" class="btn btn-sm btn-outline-secondary">Github</button>
                  </a>
                </div>
                <!-- <small class="text-muted">9 mins</small> -->
              </div>
            </div>
          </div>
        </div>

        <!-- Uniform Buffers -->
        <div class="col">
          <div class"=card shadow-sm" style="background-color: rgb(45, 45, 45)">
            <a class="example" href="examples/19_uniform_buffers/bin/App.html">
                <img src="examples/19_uniform_buffers/screen_shot.png" class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="button" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false">
                <title>Uniform Buffers</title>
                <rect width="100%" height="100%" fill="#55595c"/>
            </img>
            </a>
             <div class="card-body" style="background-color: rgb(20, 20, 20)">
              <p class="card-text" style="color: white">Uniform Buffers</p>
              <div class="d-flex justify-content-between align-items-center">
                <div class="btn-group">
                  <a href="https://github.com/MrFrenik/gs_examples/tree/main/ex_core_graphics/uniform_buffers"> 
                    <button type="button" class="btn btn-sm btn-outline-secondary">Github</button>
                  </a>
                </div>
                <!-- <small class="text-muted">9 mins</small> -->
              </div>
            </div>
          </div>
        </div>

        <!-- Uniforms Advanced -->
        <div class="col">
          <div class="card shadow-sm" style="background-color: rgb(45, 45, 45)">
            <a class="example" href="examples/20_uniforms_advanced/bin/App.html">
                <img src="examples/20_uniforms_advanced/screen_shot.png" class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="button" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false">
                <title>Uniforms Advanced</title>
                <rect width="100%" height="100%" fill="#55595c"/>
            </img>
            </a>
             <div class="card-body" style="background-color: rgb(20, 20, 20)">
              <p class="card-text" style="color: white">Uniforms Advanced</p>
              <div class="d-flex justify-content-between align-items-center">
                <div class="btn-group">
                  <a href="https://github.com/MrFrenik/gs_examples/tree/main/ex_core_graphics/uniforms_advanced"> 
                    <button type="button" class="btn btn-sm btn-outline-secondary">Github</button>
                  </a>
                </div>
                <!-- <small class="text-muted">9 mins</small> -->
              </div>
            </div>
          </div>
        </div>

        <!-- Stencil Test -->
        <div class="col">
          <div class="card shadow-sm" style="background-color: rgb(45, 45, 45)">
            <a class="example" href="examples/21_stencil_test/bin/App.html">
                <img src="examples/21_stencil_test/screen_shot.png" class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="button" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false">
                <title>Stencil Test</title>
                <rect width="100%" height="100%" fill="#55595c"/>
            </img>
            </a>
             <div class="card-body" style="background-color: rgb(20, 20, 20)">
              <p class="card-text" style="color: white">Stencil Test</p>
              <div class="d-flex justify-content-between align-items-center">
                <div class="btn-group">
                  <a href="https://github.com/MrFrenik/gs_examples/tree/main/ex_core_graphics/stencil_test"> 
                    <button type="button" class="btn btn-sm btn-outline-secondary">Github</button>
                  </a>
                </div>
                <!-- <small class="text-muted">9 mins</small> -->
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>

    <!-- Audio -->
    <h4 id="example_list_audio" class="section_title">Audio</h4>

    <div class="container">
      <div class="row row-cols-2 row-cols-sm-2 row-cols-md-5 g-3">

        <!-- Audio -->
        <div class="col">
          <div class="card shadow-sm" style="background-color: rgb(45, 45, 45)">
            <a class="example" href="examples/08_audio/bin/App.html">
                <img src="examples/08_audio/screen_shot.png" class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="button" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false">
                <title>Audio</title>
                <rect width="100%" height="100%" fill="#55595c"/>
            </img>
            </a>
             <div class="card-body" style="background-color: rgb(20, 20, 20)">
              <p class="card-text" style="color: white">Audio</p>
              <div class="d-flex justify-content-between align-items-center">
                <div class="btn-group">
                  <a href="https://github.com/MrFrenik/gs_examples/tree/main/ex_core_audio/audio"> 
                    <button type="button" class="btn btn-sm btn-outline-secondary">Github</button>
                  </a>
                </div>
                <!-- <small class="text-muted">9 mins</small> -->
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>

    <!-- Physics -->
    <h4 id="example_list_physics" class="section_title">Physics</h4>

    <div class="container">
      <div class="row row-cols-2 row-cols-sm-2 row-cols-md-5 g-3">

        <!-- Collision Detection -->
        <div class="col">
          <div class="card shadow-sm" style="background-color: rgb(45, 45, 45)">
            <a class="example" href="examples/23_collision_detection/bin/App.html">
                <img src="examples/23_collision_detection/screen_shot.png" class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="button" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false">
                <title>Collision Detection</title>
                <rect width="100%" height="100%" fill="#55595c"/>
            </img>
            </a>
             <div class="card-body" style="background-color: rgb(20, 20, 20)">
              <p class="card-text" style="color: white">Collision Detection</p>
              <div class="d-flex justify-content-between align-items-center">
                <div class="btn-group">
                  <a href="https://github.com/MrFrenik/gs_examples/tree/main/ex_util_physics/collision_detection"> 
                    <button type="button" class="btn btn-sm btn-outline-secondary">Github</button>
                  </a>
                </div>
                <!-- <small class="text-muted">9 mins</small> -->
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>

    <!-- Misc -->
    <h4 id="example_list_misc" class="section_title">Misc</h4>

    <div class="container">
      <div class="row row-cols-2 row-cols-sm-2 row-cols-md-5 g-3">

        <!-- Immediate Draw -->
        <div class="col">
          <div class="card shadow-sm" style="background-color: rgb(45, 45, 45)">
            <a class="example" href = "examples/14_immediate_draw/bin/App.html">
                <img src="examples/14_immediate_draw/screen_shot.png" class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="button" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false">
                <title>Immediate Draw</title>
                <rect width="100%" height="100%" fill="#55595c"/>
            </img>
            </a>
             <div class="card-body" style="background-color: rgb(20, 20, 20)">
              <p class="card-text" style="color: white">Immediate Draw Util</p>
              <div class="d-flex justify-content-between align-items-center">
                <div class="btn-group">
                  <a href="https://github.com/MrFrenik/gs_examples/tree/main/ex_util_immediate_draw/immediate_draw"> 
                    <button type="button" class="btn btn-sm btn-outline-secondary">Github</button>
                  </a>
                </div>
                <!-- <small class="text-muted">9 mins</small> -->
              </div>
            </div>
          </div>
        </div>

        <!-- Asset Manager -->
        <div class="col">
          <div class="card shadow-sm" style="background-color: rgb(45, 45, 45)">
            <a class="example" href="examples/12_asset_manager/bin/App.html">
                <img src="examples/12_asset_manager/screen_shot.png" class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="button" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false">
                <title>Asset Manager</title>
                <rect width="100%" height="100%" fill="#55595c"/>
            </img>
            </a>
             <div class="card-body" style="background-color: rgb(20, 20, 20)">
              <p class="card-text" style="color: white">Asset Manager</p>
              <div class="d-flex justify-content-between align-items-center">
                <div class="btn-group">
                  <a href="https://github.com/MrFrenik/gs_examples/tree/main/ex_util_assets/asset_manager"> 
                    <button type="button" class="btn btn-sm btn-outline-secondary">Github</button>
                  </a>
                </div>
                <!-- <small class="text-muted">9 mins</small> -->
              </div>
            </div>
          </div>
        </div>

        <!-- Nuklear Gui -->
        <div class="col">
          <div class="card shadow-sm" style="background-color: rgb(45, 45, 45)">
            <a class="example" href="examples/16_nuklear_gui/bin/App.html">
                <img src="examples/16_nuklear_gui/screen_shot.png" class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="button" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false">
                <title>Nuklear Gui</title>
                <rect width="100%" height="100%" fill="#55595c"/>
            </img>
            </a>
             <div class="card-body" style="background-color: rgb(20, 20, 20)">
              <p class="card-text" style="color: white">Nuklear Gui</p>
              <div class="d-flex justify-content-between align-items-center">
                <div class="btn-group">
                  <a href="https://github.com/MrFrenik/gs_examples/tree/main/ex_demos/nuklear_gui"> 
                    <button type="button" class="btn btn-sm btn-outline-secondary">Github</button>
                  </a>
                </div>
                <!-- <small class="text-muted">9 mins</small> -->
              </div>
            </div>
          </div>
        </div>

        <!-- MicroUI -->
        <div class="col">
          <div class="card shadow-sm" style="background-color: rgb(45, 45, 45)">
            <a class="example" href="examples/24_microui/bin/App.html">
                <img src="examples/24_microui/screen_shot.png" class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="button" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false">
                <title>Micro UI</title>
                <rect width="100%" height="100%" fill="#55595c"/>
            </img>
            </a>
             <div class="card-body" style="background-color: rgb(20, 20, 20)">
              <p class="card-text" style="color: white">Micro UI</p>
              <div class="d-flex justify-content-between align-items-center">
                <div class="btn-group">
                  <a href="https://github.com/MrFrenik/gs_examples/tree/main/ex_demos/microui"> 
                    <button type="button" class="btn btn-sm btn-outline-secondary">Github</button>
                  </a>
                </div>
                <!-- <small class="text-muted">9 mins</small> -->
              </div>
            </div>
          </div>
        </div>

        <!-- Flecs -->
        <div class="col">
          <div class="card shadow-sm" style="background-color: rgb(45, 45, 45)">
            <a class="example" href="examples/18_flecs/bin/App.html">
                <img src="examples/18_flecs/screen_shot.png" class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="button" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false">
                <title>Flecs</title>
                <rect width="100%" height="100%" fill="#55595c"/>
            </img>
            </a>
             <div class="card-body" style="background-color: rgb(20, 20, 20)">
              <p class="card-text" style="color: white">Flecs</p>
              <div class="d-flex justify-content-between align-items-center">
                <div class="btn-group">
                  <a href="https://github.com/MrFrenik/gs_examples/tree/main/ex_demos/flecs"> 
                    <button type="button" class="btn btn-sm btn-outline-secondary">Github</button>
                  </a>
                </div>
                <!-- <small class="text-muted">9 mins</small> -->
              </div>
            </div>
          </div>
        </div>

        <!-- FPS Camera -->
        <div class="col">
          <div class="card shadow-sm" style="background-color: rgb(45, 45, 45)">
            <a class="example" href="examples/22_first_person_camera/bin/App.html">
                <img src="examples/22_first_person_camera/screen_shot.png" class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="button" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false">
                <title>FPS Camera</title>
                <rect width="100%" height="100%" fill="#55595c"/>
            </img>
            </a>
             <div class="card-body" style="background-color: rgb(20, 20, 20)">
              <p class="card-text" style="color: white">FPS Camera (Raylib Port)</p>
              <div class="d-flex justify-content-between align-items-center">
                <div class="btn-group">
                  <a href="https://github.com/MrFrenik/gs_examples/tree/main/ex_demos/first_person_camera"> 
                    <button type="button" class="btn btn-sm btn-outline-secondary">Github</button>
                  </a>
                </div>
                <!-- <small class="text-muted">9 mins</small> -->
              </div>
            </div>
          </div>
        </div>

        <!-- Pong -->
        <!-- NOTE (quou): I'm not sure where the pong example is located on the gs_examples repository, does it still exist? -->
    <!--    <div class="col">
          <div class="card shadow-sm" style="background-color: rgb(45, 45, 45)">
            <a class="example" href="examples/25_pong/bin/App.html">
                <img src="examples/25_pong/screen_shot.png" class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="button" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false">
                <title>FPS Camera</title>
                <rect width="100%" height="100%" fill="#55595c"/>
            </img>
            </a>
             <div class="card-body" style="background-color: rgb(20, 20, 20)">
              <p class="card-text" style="color: white">Pong</p>
              <div class="d-flex justify-content-between align-items-center">
                <div class="btn-group">
                  <a href="https://github.com/GameEngineering/EP03_GSPong"> 
                    <button type="button" class="btn btn-sm btn-outline-secondary">Github</button>
                  </a>
                </div>
                <!-- <small class="text-muted">9 mins</small> -->
             <!-- </div>
            </div>
          </div>
        </div> -->

      </div>
    </div>

    <!-- User Examples -->
    <h4 id="example_list_user" class="section_title">User Apps/Games</h4>

    <div class="container">
      <div class="row row-cols-2 row-cols-sm-2 row-cols-md-5 g-3">

        <!-- Snake -->
        <div class="col">
          <div class =card shadow-sm" style="background-color: rgb(45, 45, 45)">
            <a class="example" href = "examples/26_snake/bin/App.html">
                <img src="examples/26_snake/screen_shot.png" class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="button" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false">
                    <title>Snake</title>
                    <rect width="100%" height="100%" fill="#55595c"/>
                </img>
            </a>
             <div class="card-body" style="background-color: rgb(20, 20, 20)">
              <p class="card-text" style="color: white">Snake by Samdal</p>
                <div class="d-flex justify-content-between align-items-center">
                    <div class="btn-group">
                        <a href="https://github.com/Samdal/gs_snake"> 
                            <button type="button" class="btn btn-sm btn-outline-secondary">Github</button>
                        </a>
                    </div>
                    <!-- <small class="text-muted">9 mins</small> -->
                </div>
            </div>
          </div>
        </div>

        <!-- Endless Cave -->
        <div class="col">
          <div class =card shadow-sm" style="background-color: rgb(45, 45, 45)">
            <a class="example" href = "https://lukvargen.github.io/ever-changing-caves-game/">
                <img src="examples/27_ever_changing_cave/screenshot.png" class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="button" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false">
                    <title>Snake</title>
                    <rect width="100%" height="100%" fill="#55595c"/>
                </img>
            </a>
             <div class="card-body" style="background-color: rgb(20, 20, 20)">
              <p class="card-text" style="color: white">Ever-Changing Caves</p>
                <div class="d-flex justify-content-between align-items-center">
                    <div class="btn-group">
                        <a href="https://github.com/Lukvargen/ever-changing-caves-game"> 
                            <button type="button" class="btn btn-sm btn-outline-secondary">Github</button>
                        </a>
                    </div>
                    <!-- <small class="text-muted">9 mins</small> -->
                </div>
            </div>
          </div>
        </div>

      </div>
    </div>

  </div>

</main>

<footer class="text-muted py-5" style="background-color: rgb(10, 10, 10)">
  <div class="container">
    <p class="float-end mb-1">
      <a href="#" class="text-muted" style="color: white text">Back to top</a>
    </p>
    <!-- <p class="mb-1">Album example is &copy; Bootstrap, but please download and customize it for yourself!</p> -->
    <!-- <p class="mb-0">New to Bootstrap? <a href="/">Visit the homepage</a> or read our <a href="../getting-started/introduction/">getting started guide</a>.</p> -->
  </div>
</footer>

      
  </body>
</html>