<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <link rel="stylesheet" href="css/style.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Saira+Stencil+One&display=swap" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>

    
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-X660N8G4GR"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', 'G-X660N8G4GR');
    </script>

    <title>SIFTer</title>
</head>
    
<body>
   
    <!-- Information header -->
    <div id="bg">
    <div class = "container">
        <div class = "row" style = "margin-left: 50px; margin-right: 50px;">
            <div class = "col-sm"></div>
            <div class = "col-sm" style = "margin: auto; max-width: 75%">
                <div class = "py-5" id = "info-header" style="text-align: center;">
                    <h1>SIFTer</h1>
                    <h2>
                        Standardized Integration Functionality Tester
                    </h2>

                    <p class = "" style = "width:600px;">
                        A tool to allow only the finest of integration branches to pass through.
                    </p>         
                    
                    <!-- copieder -->
                    <div style = "border: 1px solid; border-color: #D5D9DC; margin-top: 45px; margin-bottom: 30px;"></div>
                </div>
            </div>
            <div class = "col-sm"></div>
        </div>
        </div>
        <div class = "col-md-2"></div>

        <!-- 3 sections below the main header -->
        <div class="row" style = "margin-left: 50px; margin-right: 50px;">
            <!-- TODO: add break point here for mobile to remove wonkness on tablet sizes -->
            
 
            <div class = "col-sm info-text">
                <img src = "images/horn.svg" class = "svg-icon">
                <p>Be sure to check out the <a href = "https://github.com/squareup/sifter/blob/main/README.md" target="blank">Read Me. </a> Make sure you are on the VPN. Tests will be run headless in the background.</p> 
            </div>
            <div class = "col-sm info-text">
                <img src = "images/horn.svg" class = "svg-icon">
                <p>Results will be updated as the tests run. Be aware environmental issues may cause false negatives. You can use the provided account info to verify any failures.</p> 
                
            </div>
            <div class = "col-sm info-text">
                <img src = "images/horn.svg" class = "svg-icon">
                <p>When tests are finished, expanded logs will be opened to provide a more complete view of what went on during testing. These logs exist only until you run the tool again.</p> 
            </div>
        </div>
    

    <!-- Form -->
  
    <div class = "row" style = "margin-top: 30px;">
        <div class = "col-md-4"></div>
        <div class = "col-md-4 order-md-2">
    <form  action = "/" class = "needs-validation" id = "userDetails" method = "POST">
            <!-- Username -->
            <div class = "mb-3">
                <label for = "branchname" class = "form-title">
                    Branch
                </label>
                
                
                <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text">
                            https://
                        </span>
                    </div>
                <input type = "text" class = "form-control" id = "branchname" 
                    placeholder = "Branch name" name = "branchname" 
                    pattern = "[a-zA-Z0-9-_.]{3,75}" required
                    title = "Field should contain only letters, numbers, dashes, dots or underscores."
                >
                <div class = "invalid-feedback" style = "width: 100%;">
                    Your branch name is required.
                </div>
                <div class="input-group-append">
                    <span class="input-group-text">
                        .weebly.net
                    </span>
                </div>
                </div>
                
            </div>
            
        <!-- Account Type -->     
            <div class="custom-control custom-checkbox">
                <input id="agreed" name="accountType" type="checkbox" class="custom-control-input" value="agreed" required>
                <label class="custom-control-label" for="agreed">I understand this tool is not a substitute for proper and extensive testing. </label>
            </div>
        </div> 

        </div> 
    <div class="clear"></div>
        <!-- Account Type End -->      

            <!-- Launch Tests Button --> 
            <div class = "d-block my-3" style = "text-align: center;">
                <button class = "btn btn-primary" target="_blank" action = "/results" type = "submit" id = "create" style = "margin-top: 25px;" >
                    Sift Branch
                </button>
            </div>
    </div>
    </form>


    </div>


</body>


  <footer class = "my-5 pt-1 text-muted text-center text-small">
      <p>Clicking above will redirect you to the <a href='/results'>results</a> page to view the logs. When finsihed with the tool, you may close out the opened terminal window.</p>
    <h3 class="footer-logo">SIFTer by ECOM QA Engineering</h3>
  </footer>
</div>
</html>