Church Admin Plugin

Organise your church through your website!

App Markup

For those wanting to add their own CSS to the app, here’s the markup.

Once logged into a church – app content is delivered in #rendered

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
		<meta http-equiv="Content-Security-Policy" content="default-src * gap: file:; style-src 'self' 'unsafe-inline'; img-src * 'unsafe-inline' data:; script-src * 'unsafe-inline' 'unsafe-eval'">
        <meta name="viewport" content="user-scalable=yes, initial-scale=1, width=device-width height=device-height" />
        <title>Our Church</title>
        <link rel="stylesheet" href="css/style.css">
        <script type="text/javascript" src="cordova.js"></script>
        <script src="js/jQuery.js"></script>

    </head>
    <body data-spy="scroll" >
        <style id="dynamicStyles"></style>
    	<div data-role="page" id="firstRun" class="ui-content hidden"  style="display:none;">
           
            <div id="rendered" >
               		<img src="img/logo-small.png" class="logo-small" style="margin:0 auto;"/>
               		<p><strong>Choose Language</strong></p>
               		<p>
               			<select class="tab-button" data-tab="#language" id="languageSelect">
        					<option value="en">English</option>';
        				</select>
        			</p>
               		<p><strong>Choose Church</strong></p>
               		<p><input type="text" name="church" id="church" placeholder="Church name"/></p>
               		<div id="church_url"></div>

			
            </div>
    	</div>




 <div data-role="page" id="page" class="ui-content hidden" style="display:none;">

    <div data-role="header" id="header">
          <h2 ><span id="menu" class="svg-icon" ><img src="img/menu.svg" /><span id="church" class="tab-button" data-tab="#home">Home</span></span> </h2>
          <ul data-role="listview" class="menu ui-listview">
          	<li id="home-tab-button" class="tab-button" data-tab="#home"> <span class="languagespecificHTML" data-text="home">Home</span></li>
          	<li id="account-tab-button" class="tab-button" data-tab="#account"  data-tap-toggle="false"> <span class="languagespecificHTML" data-text="account">Account</span></li>
          	<li id="address-tab-button" class="tab-button" data-tab="#address" data-tap-toggle="false"> <span class="languagespecificHTML" data-text="address">Address</span></li>
          	<li id="bible-tab-button" class="tab-button" data-tab="#bible"  data-tap-toggle="false"> <span class="languagespecificHTML" data-text="bible">Bible</span><span id="bible-badge"></span></li>
          	<li id="calendar-tab-button" class="tab-button" data-tab="#calendar"  data-tap-toggle="false"><span class="languagespecificHTML" data-text="calendar">Calendar</span></li>
          		<li id="classes-tab-button" class="tab-button" data-tab="#classes"  data-tap-toggle="false"> <span class="languagespecificHTML" data-text="classes">Classes</span></li>
          	<li id="giving-tab-button" class="tab-button" data-tab="#giving" data-tap-toggle="false"><span class="languagespecificHTML" data-text="giving">Giving</span></li>
          	<li id="group-tab-button" class="tab-button" data-tab="#smallgroup" data-tap-toggle="false"> <span class="languagespecificHTML" data-text="groups">Groups</span></li>
          	          	<li id="media-tab-button" class="tab-button" data-tab="#media" data-tap-toggle="false"><span class="languagespecificHTML" data-text="media">Media</span></li>
            <li id="news-tab-button" class="tab-button" data-tab="#news"  data-tap-toggle="false"><span class="languagespecificHTML" data-text="news">News</span> <span id="news-badge"></span></li>

            <li id="prayer-tab-button" class="tab-button" data-tab="#prayer"  data-tap-toggle="false"> <span class="languagespecificHTML" data-text="prayer">Prayer</span> <span id="prayer-badge"></span></li>
            <li id="rota-tab-button" class="tab-button" data-tab="#rota" data-tap-toggle="false"> <span class="languagespecificHTML" data-text="rotas">Rotas</span></li>
            <li id="settings-tab-button" class="tab-button" data-tab="#settings" data-tap-toggle="false"> <span class="languagespecificHTML" data-text="settings">Settings</span></li>
            <li id="logout-tab-button" class="tab-button" data-tab="#logout"  data-tap-toggle="false"><span class="languagespecificHTML" data-text="logout">Logout</span></li>
        </ul>

    </div>
            <div data-role="main" id="main" ><div class="pullable" data-id="#">
            <div id="rendered" >
            <img class="waiting" src="./img/spinner.gif"/>
                </div></div>

    </div>

</div>

    </body>
    	
        <script type="text/javascript" src="js/pullToRefresh.js"></script>
        <script src="js/fastclick.js"></script>

        <script src="js/jQueryMD5.js"></script>
     <script src="js/controller.js"></script>
        <script src="js/index.js"></script>

</html>