{% extends "base.html" %} {% load static %} {% block content %}
<!-- Homepage Hero Section -->
<main>
  {% comment %}<div class="mx-10 text-right">
	<button class="py-2 text-xs rounded-full cursor-pointer" @click="darkMode = !darkMode"><i class="inline-block mr-1 font-semibold text-white fas fa-sun"></i><i class="inline-block mr-1 font-semibold text-black fas fa-moon"></i></button>
  </div>{% endcomment %}

  {% comment %} Section 1 {% endcomment %}
  <div class="px-4 my-0 mx-auto md:my-4">

    <div
      class="grid grid-rows-1 auto-rows-fr md:grid-cols-2 md:gap-x-10 md:mb-10 page-container"
    >
      <div class="order-last h-full md:order-first">
        <h1 class="text-4xl font-extrabold md:text-6xl">Boost your C++</h1>
        <p
          class="mx-auto mt-3 max-w-md text-base md:mt-5 md:max-w-3xl md:text-lg md:text-xl"
        >
          Home to 165+ free, peer-reviewed, portable libraries to increase your
          productivity across all industry domains.
        </p>

		<select id="version" name="version" class="block py-1 pr-8 pl-5 mb-3 w-48 text-sm text-black bg-white rounded-md border border-gray-300 cursor-pointer sm:inline-block md:mb-0 md:w-auto dark:text-white dark:bg-black dark:border-slate">
			<option>Boost 1.82.0 - Apr/23</option>
			{% for v in versions %}
			<option value="{{ v.pk }}" {% if version == v %}selected="selected"{% endif %}>{{ v.display_name }}</option>
			{% endfor %}
		</select>

		<div class="justify-center mt-5 space-y-3 max-w-md lg:flex lg:justify-between lg:mt-8 lg:space-y-0">
			<a href="{% url 'releases' %}" class="flex justify-center items-center py-3 px-8 text-sm font-medium text-white rounded-md border md:py-4 md:px-4 md:text-base lg:text-lg border-orange bg-orange dark:bg-charcoal dark:text-orange">
			  <i class="pr-2 text-white fas fa-arrow-circle-down dark:text-orange"></i> Download Latest
			</a>
			<a href="{% url 'releases' %}" class="flex justify-center items-center py-3 px-8 text-sm font-medium bg-gray-300 rounded-md border md:py-4 md:px-10 md:text-base lg:text-lg border-steel text-slate dark:bg-charcoal dark:text-orange">
			  Version Details <i class="pl-2 fas fa-chevron-right text-slate dark:text-orange"></i>
			</a>

		</div>

      </div>

      <div class="order-first h-full md:order-last">
        <div id="scene03"></div>
      </div>
    </div>
  </div>

  {% comment %} Section 2 {% endcomment %}
  <div class="px-4 my-0 mx-auto md:my-4">

    <div
      class="grid grid-cols-1 grid-rows-2 gap-y-10 lg:grid-cols-5 lg:grid-rows-1 lg:gap-y-0 lg:gap-x-10 lg:mb-10 page-container bg-gray-400 dark:bg-gray-900  bg-opacity-10 rounded-md drop-shadow-md hover:drop-shadow-[0_15px_15px_rgba(0,100,100,0.05)]"
    >
      <div class="flex flex-col col-span-1 p-5 h-full lg:col-span-2">

		<h3 class="pb-2 mb-2 text-2xl capitalize border-b border-gray-300 text-orange dark:border-slate">
			Libraries
		</h3>

		<div>
			<select onchange="this.form.submit()"
					name="library"
					class="block pr-11 pl-5 w-full text-sm bg-white rounded-md border border-gray-300 cursor-pointer sm:inline-block md:mb-0 md:w-auto dark:bg-black text-sky-600 dark:border-slate"
					id="id_library"
			>
			  <option value="">Accumulators</option>

			</select>
			<select onchange="this.form.submit()"
					name="category"
					class="block pr-11 pl-5 w-full text-sm bg-white rounded-md border border-gray-300 cursor-pointer sm:inline-block md:mb-0 md:w-auto dark:bg-black text-sky-600 dark:border-slate"
					id="id_category"
			>
			  <option value="">Filter by category</option>
			  {% for c in categories %}
				<option value="{{ c.slug }}" {% if category == c %}selected="selected"{% endif %}>{{ c.name }}</option>
			  {% endfor %}
			</select>
		</div>

		<p
          class="mx-auto w-full text-sm align-left"
        >
		Framework for incremental calculation, and collection of statistical accumulators.
        </p>

		<div class="px-2 pt-2 space-y-2 w-full bg-white rounded-lg dark:bg-charcoal">
			<a class="block items-center py-1 px-2 rounded cursor-pointer hover:bg-gray-100 keychainify-checked" href="https://boost.org/libs/accumulators">
			  <i class="float-right mt-3 fas fa-folder"></i>
			  Documentation
			  <span class="block text-xs text-sky-600">boost.org/libs/accumulators</span>
			</a>
			<a class="block items-center py-1 px-2 rounded cursor-pointer hover:bg-gray-100 keychainify-checked" href="https://github.com/boostorg/accumulators/issues">
			  <i class="float-right mt-3 fas fa-bug"></i>
			  GitHub Issues
			  <span class="block text-xs text-sky-600">github.com/boostorg/accumulators/issues</span>
			</a>
			<a class="block items-center py-1 px-2 rounded cursor-pointer hover:bg-gray-100 keychainify-checked" href="https://github.com/boostorg/accumulators">
			  <i class="float-right mt-3 fab fa-github"></i>
			  Source Code
			  <span class="block text-xs text-sky-600">github.com/boostorg/accumulators</span>
			</a>

			<div class="inline-block py-1 px-2 w-full rounded cursor-pointer hover:bg-gray-100">
			  <a class="inline-block py-1 px-2 rounded cursor-pointer hover:bg-gray-100">Since 2008</a>
			  <span class="float-right"><a class="inline-block float-right py-1 px-2 rounded cursor-pointer hover:bg-gray-100">C++03</a></span>
			</div>

			<span class="block py-1 px-2 rounded cursor-pointer hover:bg-gray-100">Categories:

				<a class="inline text-sky-600 keychainify-checked" href="/libraries/?category=math">Math</a>

			</span>

		</div>

      </div>

	  <div class="flex flex-col col-span-1 p-5 h-full md:mb-10 lg:col-span-3">

		<h3 class="pb-2 mb-4 text-2xl capitalize border-b border-gray-300 text-orange dark:border-slate">
			Compiler Explorer
		</h3>

		<iframe width="100%" height="100%" src="https://godbolt.org/e#g:!((g:!((g:!((h:codeEditor,i:(filename:'1',fontScale:14,fontUsePx:'0',j:1,lang:c%2B%2B,selection:(endColumn:1,endLineNumber:26,positionColumn:1,positionLineNumber:26,selectionStartColumn:1,selectionStartLineNumber:26,startColumn:1,startLineNumber:26),source:'//+Compile+with+-O3+-march%3Dnative+to+see+autovectorization%0A//+assumes+input+is+aligned+on+64-byte+boundary+and+that%0A//+length+is+a+multiple+of+64.%0Aint+testFunction(int*+input,+int+length)+%7B%0A++//+Alignment+hints+supported+on+GCC+4.7%2B+and+any+compiler%0A++//+supporting+the+appropriate+builtin+(clang+3.6%2B).%0A%23ifndef+__has_builtin%0A%23define+__has_builtin(x)+0%0A%23endif%0A%23if+__GNUC__+%3E+4+%5C%0A++++%7C%7C+(__GNUC__+%3D%3D+4+%26%26+__GNUC_MINOR__+%3E%3D+7)+%5C%0A++++%7C%7C+__has_builtin(__builtin_assume_aligned)%0A++input+%3D+static_cast%3Cint*%3E(__builtin_assume_aligned(input,+64))%3B%0A%23endif%0A%23if+_MSC_VER%0A++__assume((length+%26+63)+%3D%3D+0)%3B%0A%23else%0A++if+(length+%26+63)+__builtin_unreachable()%3B%0A%23endif%0A++int+sum+%3D+0%3B%0A++for+(int+i+%3D+0%3B+i+%3C+length%3B+%2B%2Bi)+%7B%0A++++sum+%2B%3D+input%5Bi%5D%3B%0A++%7D%0A++return+sum%3B%0A%7D%0A'),l:'5',n:'0',o:'C%2B%2B+source+%231',t:'0')),k:50,l:'4',n:'0',o:'',s:0,t:'0'),(g:!((h:compiler,i:(compiler:arm1020,deviceViewOpen:'1',filters:(b:'0',binary:'1',binaryObject:'1',commentOnly:'0',debugCalls:'1',demangle:'0',directives:'0',execute:'1',intel:'0',libraryCode:'0',trim:'1'),flagsViewOpen:'1',fontScale:14,fontUsePx:'0',j:1,lang:c%2B%2B,libs:!(),options:'',overrides:!(),selection:(endColumn:1,endLineNumber:1,positionColumn:1,positionLineNumber:1,selectionStartColumn:1,selectionStartLineNumber:1,startColumn:1,startLineNumber:1),source:1),l:'5',n:'0',o:'+ARM+gcc+10.2+(linux)+(Editor+%231)',t:'0')),k:50,l:'4',n:'0',o:'',s:0,t:'0')),l:'2',n:'0',o:'',t:'0')),version:4"></iframe>

      </div>

    </div>

  </div>


  {% comment %} Section 3 - News {% endcomment %}
  <div class="px-4 my-0 mx-auto md:my-4">

    <div
      class="grid grid-cols-1 grid-rows-2 gap-y-10 md:grid-cols-2 md:grid-rows-3 lg:gap-y-0 md:gap-x-10 md:mb-10 page-container bg-gray-400 dark:bg-gray-900 bg-opacity-10 rounded-md drop-shadow-md hover:drop-shadow-[0_15px_15px_rgba(0,100,100,0.05)]"
    >

		<div class="flex flex-col col-span-1 p-5 h-full md:col-span-2 md:mb-10">
			<h3 class="pb-2 mb-2 text-2xl capitalize border-b border-gray-300 text-orange dark:border-slate">
				News from Boost and C++
			</h3>
		</div>

      <div class="flex flex-col col-span-1 p-5 h-full md:mb-10">

		<div class="pt-6">
            <h3 class="mb-2 text-xl">Name of Article</h3>
            <p class="mb-3">Category | 4/5/22</p>
            <p class="mb-3">Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum... <a href="" class="text-orange">Read&nbsp;More</a></p>
          </div>






      </div>

	  <div class="flex flex-col col-span-1 p-5 h-full md:mb-10">

		<div class="pt-6">
            <h3 class="mb-2 text-xl">Name of Article</h3>
            <p class="mb-3">Category | 4/5/22</p>
            <p class="mb-3">Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum... <a href="" class="text-orange">Read&nbsp;More</a></p>
          </div>

      </div>

    </div>

  </div>


	<div class="flex justify-center">
		<div class="py-3 px-3 mx-auto mt-6 mb-4 text-xl text-center rounded-lg border border-black transition duration-200 ease-in transform cursor-pointer hover:text-white hover:bg-opacity-60 hover:border-transparent hover:-translate-y-1 active:translate-y-0 bg-orange dark:border-orange dark:bg-charcoal dark:text-orange hover:bg-orange hover:dark:bg-purple hover:dark:text-white">
			Test Button
		</div>
	</div>


  <!---------- SECTION - 04 ------------>

  <hr class="line-breaker" />
  <h2 style="margin: 20px 0px">News from Boost and C++</h2>
  <div class="section-04">
    <div class="news-container">
      <p class="news-text">
        Boost.MySQL is an Asio-based network client which lets you access MySQL
        and MariaDB databases using your own data types New in Boost 1.82.0,
        check it out here https://https://boost.org/libs/mysql Get Boost:
        https://boost.org/users/history/version_1_82_0.html #boost #cpp
        #cplusplus #mysql #mariadb #database
      </p>
      <img src="{% static 'img/fpo/news-1.png' %}" class="news-image" />
    </div>
    <div class="news-container">
      <p class="news-text">
        Boost 1.82.0 is released for the Spring season! Release Notes:
        https://boost.org/users/history/version_1_82_0.html Downloads:
        http://boost.org/users/news/version_1.82.0 Direct Download:
        https://boostorg.jfrog.io/artifactory/main/release/1.82.0 #boost #cpp
        #cplusplus
      </p>
      <img src="{% static 'img/fpo/news-2.png' %}" class="news-image" />
    </div>
  </div>

  <!---------- SECTION - 05 ------------>

  <hr class="line-breaker" />
  <h2 style="margin: 20px 0px">Activity Apr21,2023 - May20,2023</h2>
  <div class="section-05">
    <div class="activity-containers">
      <fieldset style="margin: 0px 3px">
        <legend>Code</legend>
        <select class="activity-select">
          <option value="option1">Option 1</option>
          <option value="option2">Option 2</option>
          <option value="option3">Option 3</option>
        </select>
      </fieldset>
    </div>
    <div class="activity-containers">
      <fieldset style="margin: 0px 3px"><legend>Downloads</legend></fieldset>
    </div>
    <div class="activity-containers">
      <fieldset style="margin: 0px 3px"><legend>Community</legend></fieldset>
    </div>
  </div>
</main>

<!--  <main class="px-4 my-16 mx-auto sm:mt-24">
  <div class="grid gap-6 mt-12 sm:grid-cols-1 md:grid-cols-1 md:mt-16 lg:grid-cols-0">
  <div class="border_red">
  <div class="md:flex md:h-full">
    <div class="order-1 mt-6 w-full text-center md:order-2 md:mt-3 md:w-1/2 md:h-full">
      &lt;!&ndash;<div id="scene03"></div>&ndash;&gt;
    </div>
    <div class="text-left md:w-1/2 md:h-full">
      <div class="h-full md:flex md:flex-col md:justify-between">
        <div>
          <h1 class="text-4xl font-extrabold md:text-6xl">
            <span class="block xl:inline">Boost your C++ </span>
          </h1>
          <p class="mx-auto mt-3 max-w-md text-base text-lg md:mt-5 md:mb-11 md:max-w-3xl md:text-xl">Home to 165+ free, peer-reviewed, portable libraries to increase your productivity across all industry domains.</p>
          <div class="mt-5">
            <select onchange="this.form.submit()"
                    name="version"
                    class="block py-1 pr-8 pl-5 mb-3 w-full text-sm bg-white rounded-md border border-gray-300 cursor-pointer sm:inline-block md:mb-0 md:w-auto dark:bg-black text-sky-600 dark:text-orange dark:border-slate"
                    id="id_version"
            >
              {% for v in versions %}
                <option value="{{ v.slug }}" {% if version == v %}selected="selected"{% endif %}>Boost {{ v.display_name }}</option>
              {% endfor %}
            </select>
          </div>
        </div>
        <div class="md:mb-8">
          <div class="justify-center space-y-3 md:flex md:justify-between md:space-y-0">
            <a href="{% url 'releases' %}" class="flex justify-center items-center py-3 px-8 text-base font-medium text-white rounded-md border md:py-4 md:px-4 md:text-lg border-orange bg-orange dark:bg-charcoal dark:text-orange">
              <i class="pr-2 text-white fas fa-arrow-circle-down dark:text-orange"></i> Download
            </a>
            <a href="{% url 'releases' %}" class="flex justify-center items-center">Release notes</a>
          </div>
          <div class="justify-center mt-5 space-y-3 md:flex md:justify-between md:space-y-0">
            <a href="{% url 'releases' %}" class="flex justify-center items-center py-3 px-8 text-base font-medium text-white rounded-md border md:py-4 md:px-4 md:text-lg border-orange bg-orange dark:bg-charcoal dark:text-orange">
              BSL Logo
            </a>
            <a href="{% url 'releases' %}" class="flex justify-center items-center">License</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


    &lt;!&ndash; Select a library &ndash;&gt;
  <div class="portion">
    <div class="rounded-md md:flex">
      <div class="text-left md:w-1/2">
        <form action="/homepage-beta/" method="get">
          <div>
            <label for="id_library" hidden="true">Libraries</label>
            <select onchange="this.form.submit()"
                    name="library"
                    class="block py-2 pr-11 pl-5 mb-2 w-full text-sm bg-white rounded-md border border-gray-300 cursor-pointer sm:inline-block md:mb-0 md:w-auto dark:bg-black text-sky-600 dark:text-orange dark:border-slate"
                    id="id_library"
            >
              <option value="" {% if library is None %}selected="selected"{% endif %}>Select a library</option>
              {% for l in libraries %}
                <option value="{{ l.slug }}" {% if library == l %}selected="selected"{% endif %}>{{ l.name }}</option>
              {% endfor %}
            </select>
            <label for="id_category" hidden="true">Categories:</label>
            <select onchange="this.form.submit()"
                    name="category"
                    class="block py-2 pr-11 pl-5 mb-3 w-full text-sm bg-white rounded-md border border-gray-300 cursor-pointer sm:inline-block md:mb-0 md:w-auto dark:bg-black text-sky-600 dark:text-orange dark:border-slate"
                    id="id_category"
            >
              <option value="">Filter by category</option>
              {% for c in categories %}
                <option value="{{ c.slug }}" {% if category == c %}selected="selected"{% endif %}>{{ c.name }}</option>
              {% endfor %}
            </select>
          </div>
        </form>
      </div>
    <div>
      <div class="rounded-md md:flex">
      <div class="text-left md:w-1/2">

        <form method="post" action="{% url 'home-beta' %}">
          {% csrf_token %}
          <label for="code">Code:</label>
          <textarea name="code" id="" rows="10" cols="50">{{ request.POST.code }}</textarea>
          <button type="submit">Run</button>
        </form>
      </div>
    </div>

    {% if output %}
      <div class="output">{{ output }}</div>
    {% endif %}
    {% if error %}
      <div class="error">{{ error }}</div>
    {% endif %}
    </div>
    </div>
  </div>

    &lt;!&ndash; Seven equal div portions &ndash;&gt;
{#    <div class="grid gap-6 mt-12 sm:grid-cols-1 md:grid-cols-1 md:mt-16 lg:grid-cols-0">#}
      &lt;!&ndash; Simple fixed-size portion &ndash;&gt;
      <div class="portion">
        <h2 class="text-xl font-semibold">Simple Fixed Size</h2>
        <p class="mt-4">This portion has a fixed size and can be used to display important information or a call-to-action.</p>
      </div>

      &lt;!&ndash; Description, Copy Commands, Code Explore &ndash;&gt;
      <div class="portion">
        <h2 class="text-xl font-semibold">Description, Copy Commands, Code Explore</h2>
        <p class="mt-4">Here, you can provide a brief description of a library, along with some copy commands for installation or usage. You can also embed an interactive code explorer to showcase the library's features and demonstrate how it can be used.</p>
        <div class="mt-6">
          &lt;!&ndash; Code explorer embed code here &ndash;&gt;
        </div>
      </div>

      &lt;!&ndash; One-row Calendar &ndash;&gt;
      <div class="portion">
        <h2 class="text-xl font-semibold">One-row Calendar</h2>
        <div class="mt-4">
          &lt;!&ndash; One-row calendar implementation here &ndash;&gt;
        </div>
      </div>

      &lt;!&ndash; Two News Portions &ndash;&gt;
      <div class="portion">
        <h2 class="text-xl font-semibold">News Portion 1</h2>
        <p class="mt-4">Stay updated with the latest news, updates, and announcements related to the Boost library.</p>
      </div>
      <div class="portion">
        <h2 class="text-xl font-semibold">News Portion 2</h2>
        <p class="mt-4">More news and updates to keep you informed about the Boost library community and its developments.</p>
      </div>

      &lt;!&ndash; Code, Download, Community &ndash;&gt;
      <div class="portion">
        <h2 class="text-xl font-semibold">Code</h2>
        <p class="mt-4">View the code repository of the Boost library on GitHub and explore the source code, contribute to its development, and download the latest versions.</p>
      </div>
      <div class="portion">
        <div class="py-3 px-6 dark:text-white text-slate">
          <h5
            class="text-xl font-bold leading-tight text-orange">
            New to Boost?
          </h5>
          <p class="py-1 text-white border-b border-gray-700">This is how you can help</p>
          <ul class="flex flex-wrap mt-2 text-sm">
            <li class="w-1/2"><a href="/doc/contributor-guide/intro.html">Becoming a Contributor</a></li>
            <li class="w-1/2"><a href="/doc/contributor-guide/license-requirements.html">License Requirements</a></li>
            <li class="w-1/2"><a href="/doc/contributor-guide/portability-requirements.html">Portability Requirements</a></li>
            <li class="w-1/2"><a href="/doc/contributor-guide/organization-requirements.html">Organization Requirements</a></li>
            <li class="w-1/2"><a href="/doc/contributor-guide/library-design-guidelines.html">Library Design Guidelines</a></li>
            <li class="w-1/2"><a href="/doc/contributor-guide/antora.html">Antora Guide</a></li>
          </ul>
        </div>
      </div>
      <div class="portion">
          <div class="py-3 px-6 dark:text-white text-slate">
          <h5
            class="text-xl font-bold leading-tight text-orange">
            Contributor Guide
          </h5>
          <p class="py-1 text-white border-b border-gray-700">This is how you can help</p>
          <ul class="flex flex-wrap mt-2 text-sm">
            <li class="w-1/2"><a href="/doc/contributor-guide/intro.html">Becoming a Contributor</a></li>
            <li class="w-1/2"><a href="/doc/contributor-guide/license-requirements.html">License Requirements</a></li>
            <li class="w-1/2"><a href="/doc/contributor-guide/portability-requirements.html">Portability Requirements</a></li>
            <li class="w-1/2"><a href="/doc/contributor-guide/organization-requirements.html">Organization Requirements</a></li>
            <li class="w-1/2"><a href="/doc/contributor-guide/library-design-guidelines.html">Library Design Guidelines</a></li>
            <li class="w-1/2"><a href="/doc/contributor-guide/antora.html">Antora Guide</a></li>
          </ul>
        </div>
      </div>
    </div>
    </div>
  </main>-->
<!-- End Homepage Hero Section -->

{% endblock %} {% block footer_js %} {% endblock %}
