[% INCLUDE header.html
    title = 'FixMyStreet for iPhone screenshots'
%]

<h1>iPhone simulator simulator</h1>

[%
    SET screens = [
        [ "iphone-1start.png", 'Click the image to progress through the flow of using the iPhone FixMyStreet application.
            <br>When launched, the user&rsquo;s location automatically gets fetched&hellip;' ],
        [ "iphone-2locfound.png", 'They want to take a photo.' ],
        [ "iphone-pickpicture1.png", 'The simulator doesn&rsquo;t have a camera, so we&rsquo;re taken to the photo albums. Let&rsquo;s pick Hawaii.' ],
        [ "iphone-pickpicture2.png", 'That red clouds photo looks nice.' ],
        [ "iphone-pickpicture3.png", 'After any moving or scaling we want, we select the photo.' ],
        [ "iphone-3picture.png", 'Okay, now we need to edit the summary of the report.' ],
        [ "iphone-editsummary.png", 'Enter some text.' ],
        [ "iphone-editsummary2.png", 'And done.' ],
        [ "iphone-4subject.png", 'I haven&rsquo;t entered all my details yet, so that&rsquo;s next.' ],
        [ "iphone-5details.png", 'Your details are remembered so you only have to enter them once.' ],
        [ "iphone-6emailkeyboard.png", 'The iPhone has different keyboards, this is the email one.' ],
        [ "iphone-5details.png", 'Right, we need to enter a name.' ],
        [ "iphone-editname.png", 'Slightly different keyboard to the email one.' ],
        [ "iphone-detailsdone.png", 'Okay, details entered.' ],
        [ "iphone-allready.png", 'That&rsquo;s everything, hit Report!' ],
        [ "iphone-7uploading.png", 'Uploading&hellip;' ],
        [ "iphone-8response.png", 'The simulator always thinks it&rsquo;s in the US, which FixMyStreet won&rsquo;t like very much.' ],
        [ "iphone-allready.png", 'Ah well, let&rsquo;s read the About page instead' ],
        [ "iphone-9about.png", 'Donate? :)' ],
];
%]

<script type="text/javascript">
document.write('<style type="text/css">.vv { display: none; }</style>');
function show(a) {
    if (a==[% screens.size %]) b = 1;
    else b = a+1;
    document.getElementById('d' + a).style.display='none';
    document.getElementById('d' + b).style.display='block';
}
</script>

[% FOR screen IN screens %]

    <div id='d[% loop.count %]'[% " class='vv'" IF NOT loop.first %]>
        <p>[% screen.1 %]</p>
        <p align='center'><a onclick='show([% loop.count %]);return false' href='#d[% loop.count + 1 %]'><img src='[% screen.0 %]' width=414 border=0 height=770></a></p>
    </div>

[% END %]

[% INCLUDE footer.html %]