<!DOCTYPE html>
<html>

<head>
    <title>{{ title }}</title>
    <link rel="icon" type="image/x-icon" href="favicon.png">
    <link rel="stylesheet" type="text/css" href="styles.css">
    <script src="script.js"></script>
    <!-- <style>html { scroll-behavior: smooth; }</style> -->
</head>
<!-- <body class="horizontal-mode"> -->

<!-- <body style="margin:0;"> -->
<body>
  <div style="
    position:fixed; inset:0;
    background:
        linear-gradient(#171717e2, #171717e2),  /* dark overlay */
        url('{{ random_img|safe }}') center top repeat-y;
    background-size: 100% auto;
    filter:grayscale(50%) opacity(1);
    z-index:-1;
  "></div>
</body>
    <h1>{{ title }}</h1>
    {{ back_button|safe }}

    <div>
        <label for="columnCountInput">Column Count: </label>
        <input type="number" id="columnCountInput" min="1" max="10" value="{{ col_count }}">
    </div>
    <div style="text-align:center; margin-bottom: 1em;">
        <button id="toggleLayout" style="padding: 6px 12px;">Switch to Masonry</button>
    </div>
    <p align="center"> Images on this page - {{ no_of_imgs }}, on this board - {{ no_of_imgs_board }}</p>
    <p align="right"> Created on - {{ timestamp }}</p>
    <p align="right"> Created with pixBoards version: {{ version }}</p>

    <hr>

    <div id="gallery" class="justified-container">
        {{ media_content }}
    </div>

    {{ pagination }}
    
    {{ back_button|safe }}
</body>

</html>



<!-- 
<body style="margin:0;">
  <div style="
    position:fixed; inset:0;
    background:url('{{ random_img|safe }}') center/cover no-repeat;
    filter:grayscale(50%) opacity(0.3);
    z-index:-1;
  "></div>


<body style="margin:0;">
  <div style="
    position:fixed; inset:0;
    background:url('file:///D:/root/gallery-dl/pinterest/coerciasink/outfits/pinterest_969610994782220216.jpg') center/cover no-repeat;
    filter:grayscale(100%) opacity(0.3);
    z-index:-1;
  "></div> -->