<!DOCTYPE html>
<html>
    <head>
        <title>Tour - One Main Thing</title>
        <link rel="stylesheet" href="css/style.css">
        <!-- intro.js -->
        <link rel="stylesheet" href="../bower_components/intro.js/minified/introjs.min.css">
    </head>
    <body>
        <div id="background-wrap">
            <img src="img/background1.jpg" id="background-image">
        </div>
        <form id="thing-wrap">
            <p id="prompt">My one main thing for today is...</p>
            <button id="done-button" type="button" title="Done">I did my one main thing</button>
            <input type="text" id="thing" autocomplete="off">
            <div id="edit-buttons-wrap">
                <button type="submit" class="edit-button"><img src="img/button/save.jpg" title="Save"></button>
                <button type="reset" class="edit-button"><img src="img/button/cancel.jpg" title="Clear"></button>
            </div>
        </form>
        <!-- intro.js -->
        <script src="../bower_components/intro.js/minified/intro.min.js"></script>

        <script src="js/script.js"></script>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <title>Tour - One Main Thing</title>
        <link rel="stylesheet" href="css/style.css">
        <!-- intro.js -->
        <link rel="stylesheet" href="../bower_components/intro.js/minified/introjs.min.css">
    </head>
    <body>
        <div id="background-wrap">
            <img src="img/background1.jpg" id="background-image">
        </div>
        <form id="thing-wrap" data-intro="This is a thing" data-step="1" data-highlightClass="thing-wrap-tooltip" data-position="top">
            <p id="prompt" data-intro="This is another thing" data-step="2" data-highlightClass="thing-tooltip">My one main thing for today is...</p>
            <button id="done-button" type="button" title="Done" data-intro="So many things!" data-step="3" data-highlightClass="done-tooltip">I did my one main thing</button>
            <input type="text" id="thing" autocomplete="off">
            <div id="edit-buttons-wrap" data-intro="This is yet another thing" data-step="4" data-highlightClass="edit-buttons-wrap-tooltip">
                <button type="submit" class="edit-button"><img src="img/button/save.jpg" title="Save"></button>
                <button type="reset" class="edit-button"><img src="img/button/cancel.jpg" title="Clear"></button>
            </div>
        </form>
        <!-- intro.js -->
        <script src="../bower_components/intro.js/minified/intro.min.js"></script>

        <script src="js/script.js"></script>
    </body>
</html>

Add data attributes for introjs to html
Add data attributes for introjs to html
