templates/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="${description}">
    <meta name="author" content="${author}">
    <meta name="google-site-verification" content="${googlesiteverification}">
    <link rel="shortcut icon" href="${favicon}">

    <title>${title}</title>

    <link href="../static/bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="../static/themes/${theme}/css/site.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="../static/jquery.uls/css/jquery.uls.css">
    <link rel="stylesheet" type="text/css" href="../static/jquery.uls/css/jquery.uls.grid.css">
    <link rel="stylesheet" type="text/css" href="../static/jquery.uls/css/jquery.uls.lcd.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.0/css/all.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,700">  
    
    <script>
        var SEP = '${SEP}';
        var all_ids = ${all_ids_as_json};
        var question_tree = ${tree_as_json};
    </script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->

    <!--loading jQuery -->
    <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script>  

    <!--loading Bootstrap, CSS only -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>   
      
  </head>

  <body>

    <div class="site-wrapper">

      <div class="site-wrapper-inner">

        <div class="masthead clearfix">
          <div class="inner">
            <h3 class="masthead-brand">${title}</h3>
            <nav>
              <ul class="nav masthead-nav">
                % for info in navlinks:
                <li
                % if info['link'] == 'javascript:reloadHome();':
                class="active"
                % endif
                ><a href="${info['link']}" target="_blank">${info['name']}</a></li>
                % endfor
              </ul>
            </nav>
          </div>
        </div>

        <div class="cover-container">

          <div id='js-warning'>
            <div class=" panel panel-warning">
              <div class="panel-heading clearfix">
                <span class="pull-left">This page requires JavaScript</span>
              </div>
              <div class="panel-body">
                <p class="lead">This page only works with JavaScript enabled.</p>
                <p>If you have JavaScript disabled with a plugin like NoScript, please
                disable that plugin and reload the page.  If you trust us, you
                might find it convenient to enable JavaScript just
                for this domain.</p>
                <p>If you are opposed to JavaScript in principle, you're not left out!
                You can read the page source to get at all the data.</p>
              </div>
            </div>
          </div>

<%def name="card(node, next, segue1=None, segue2=None, toplevel=False)">
          <div id="${node['id']}" class="cover hidden">

            % if segue1:
            <p class="segue1">${segue1}</p>
            % endif

            % if segue2:
            <p class="segue2">${segue2}</p>
            % endif

            <div class="bandana">
              <span class="main-text">
                % if 'title' in node:
                <h1 class="title">${node['title']}</h1>
                % endif

                % if 'subtitle' in node:
                <p class="subtitle"><span>${node['subtitle']}</span></p>
                % endif
              </span>
              % if 'image' in node:
              <div class="img"><img src="${node['image']}"></div>
              % endif
            </div>
              % if 'children' in node:
              <p style="display:inline-block;" class="lead">
                <a data-next="${node['children'][0]['id']}" target="_blank" class="yes btn btn-lg btn-success"><span class="fas fa-check-circle"></span> ${node['affirmative']}</a>
              </p>
              % else:
              <p style="display:inline-block;" class="lead">
                <a href="${node['link']}" target="_blank" class="btn btn-lg btn-success"><span class="fas fa-check-circle"></span> ${node['affirmative']}</a>
              </p>
              % endif:

              % if next != node['id']:
              <p style="display:inline-block;" class="lead">
                <a data-next="${next}" class="nope btn btn-lg btn-danger"><span class="fas fa-times-circle"></span> ${node['negative']}</a>
              </p>
              % endif
              % if not toplevel:
              <p class="lead">
                <a class="back btn btn-lg btn-warning"><span class="fas fa-arrow-alt-circle-left"></span> ${node['backlink']}</a>
              </p>
              % endif
            </div>

          % if 'children' in node:
            % for i, child in enumerate(node['children']):
${card(child, node['children'][(i + 1) % len(node['children'])]['id'], segue1=node.get('segue1'), segue2=node.get('segue2'))}
            % endfor
          % endif
</%def>

          % for i, child in enumerate(tree['children']):
${card(child, tree['children'][(i + 1) % len(tree['children'])]['id'], segue1=tree.get('segue1'), segue2=tree.get('segue2'), toplevel=True)}
          % endfor

        </div>

      </div>

      <div class="mastfoot">
        <p>Generated by <a href="https://github.com/fedora-infra/asknot-ng">asknot-ng</a>,
        written by <a href="http://threebean.org">Ralph Bean</a> and <a
          href="https://github.com/fedora-infra/asknot-ng/graphs/contributors">others</a>.
        Inspired by <a href="http://whatcanidoformozilla.org">the
        original</a>.
        <span class="active uls-trigger lang-dropdown">Change Language</span></p>
      </div>

    </div>

    <!-- <script src="../static/jquery/js/jquery-2.1.3.min.js"></script> -->
    <!-- <script src="../static/bootstrap/js/bootstrap.js"></script> -->
    <!-- This is where the magic happens -->
    <script src="../static/site.js"></script>
    <!-- language selector -->

    <script type="text/javascript" src="../static/jquery.uls/js/jquery.uls.data.js"></script>
    <script type="text/javascript" src="../static/jquery.uls/js/jquery.uls.data.utils.js"></script>
    <script type="text/javascript" src="../static/jquery.uls/js/jquery.uls.lcd.js"></script>
    <script type="text/javascript" src="../static/jquery.uls/js/jquery.uls.languagefilter.js"></script>
    <script type="text/javascript" src="../static/jquery.uls/js/jquery.uls.regionfilter.js"></script>
    <script type="text/javascript" src="../static/jquery.uls/js/jquery.uls.core.js"></script>
    <script type="text/javascript">
        /* This list is generated, don't edit here */
        $(function() {
            $('#selectedLang').val('${lang}')
            $( '.uls-trigger' ).uls( {
                onSelect : function( language ) {
                    var languageName = $.uls.data.getAutonym( language );
                    $( '.uls-trigger' ).text( languageName );
                    $('#selectedLang').val(language);
                    window.location = "/"+language;
                },
                languages: { 'en': 'English',
                % for l in languages:
                    % if l != "en":
                             '${l}': 'Language',
                    % endif
                % endfor
                }
            } );
            // Language list is a placeholder
        } );
    </script>
  </body>
</html>