Subversion Repositories cheapmusic

Rev

Rev 116 | Show entire file | Ignore whitespace | Details | Blame | Last modification | View Log | RSS feed

Rev 116 Rev 124
Line 2... Line 2...
2 
    <p class="mt-3">In a nutshell, <b>Find Cheap Music</b> is for the serious collector or bargain hunter. It searches dozens of online stores for cheap Compact Discs, Vinyl Records, Digital Downloads, Music Sheets and Music related books without displaying any additional ads.</p>
 2 
    <p class="mt-3">In a nutshell, <b>Find Cheap Music</b> is for the serious collector or bargain hunter. It searches dozens of online stores for cheap Compact Discs, Vinyl Records, Digital Downloads, Music Sheets and Music related books without displaying any additional ads.</p>
3 
 
 3 
 
4 
    <div class="shadow p-4 mb-4 bg-light">
 4 
    <div class="shadow p-4 mb-4 bg-light">
5 
        <h2 id="contents" class="bg-primary px-2 py-2">Table of Contents</h2>
 5 
        <h2 id="contents" class="bg-primary px-2 py-2">Table of Contents</h2>
6 
        <ol>
 6 
        <ol>
7 
            <li><a href="#mainnav" class="btn bg-light align-baseline">Main Navigation Menu</a></li>
 7 
            <li><a href="#mainnav" class="btn btn-link align-baseline">Main Navigation Menu</a></li>
8 
            <li><a href="#homescreen" class="btn bg-light align-baseline">Main / Home Screen</a></li>
 8 
            <li><a href="#homescreen" class="btn btn-link align-baseline">Main / Home Screen</a></li>
9 
            <li><a href="#search" class="btn bg-light align-baseline">Search Results</a></li>
 9 
            <li><a href="#search" class="btn btn-link align-baseline">Search Results</a></li>
10 
            <li><a href="#random" class="btn bg-light align-baseline">Random Results</a></li>
 10 
            <li><a href="#random" class="btn btn-link align-baseline">Random Results</a></li>
11 
            <li><a href="#coupons" class="btn bg-light align-baseline">Coupons and Special Offers</a></li>
 11 
            <li><a href="#coupons" class="btn btn-link align-baseline">Coupons and Special Offers</a></li>
12 
            <li><a href="#wishlist" class="btn bg-light align-baseline">Wishlist</a></li>
 12 
            <li><a href="#wishlist" class="btn btn-link align-baseline">Wishlist</a></li>
13 
            <li><a href="#login" class="btn bg-light align-baseline">Login / Registration</a></li>
 13 
            <li><a href="#login" class="btn btn-link align-baseline">Login / Registration</a></li>
14 
        </ol>
 14 
        </ol>
15 
    </div>
 15 
    </div>
16 
 
 16 
 
17 
    <div class="shadow p-4 mb-4 bg-light">
 17 
    <div class="shadow p-4 mb-4 bg-light">
18 
        <h2 id="mainnav" class="bg-primary px-2 py-2">Main Navigation Menu</h2>
 18 
        <h2 id="mainnav" class="bg-info px-2 py-2">1. Main Navigation Menu</h2>
19 
        <div class="shadow p-4 mb-4 bg-light">
 19 
        <div class="shadow p-4 mb-4 bg-light">
20 
            <img class="img-fluid border lazyload" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="<?php echo timeStampUrl("images/help/main_menu.png"); ?>" alt="Main Menu" />
 20 
            <img class="img-fluid border lazyload" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="<?php echo timeStampUrl("images/help/main_menu.png"); ?>" alt="Main Menu" />
21 
            <p class="mt-3">The main menu contains the home button (<i class="material-icons material-text">home</i>), links to the terms of service, the privacy policy, our blog as well as a link to this help page (<i class="material-icons material-text">help_outline</i>). Located on the right-hand side is the login button. The main menu expands with links to the coupons / special offers and wishlist after logging in:</p>
 21 
            <p class="mt-3">The main menu contains the home button (<i class="material-icons material-text">home</i>), links to the terms of service, the privacy policy, our blog as well as a link to this help page (<i class="material-icons material-text">help_outline</i>). Located on the right-hand side is the login button. The main menu expands with links to the coupons / special offers and wishlist after logging in:</p>
22 
                <p>
 22 
                <p>
23 
                    <img class="img-fluid border lazyload" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="<?php echo timeStampUrl("images/help/main_menu_full.png"); ?>" alt="Main Menu after login" />
 23 
                    <img class="img-fluid border lazyload" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="<?php echo timeStampUrl("images/help/main_menu_full.png"); ?>" alt="Main Menu after login" />
Line 25... Line 25...
25 
        </div>
 25 
        </div>
26 
        <div class="pt-3"><a href="#contents" class="btn bg-white border" title="Back to Table of Contents" data-toggle2="tooltip" aria-label="Go to table of contents"><i class="material-icons">arrow_upward</i></a></div>
 26 
        <div class="pt-3"><a href="#contents" class="btn bg-white border" title="Back to Table of Contents" data-toggle2="tooltip" aria-label="Go to table of contents"><i class="material-icons">arrow_upward</i></a></div>
27 
    </div>
 27 
    </div>
28 
 
 28 
 
29 
    <div class="shadow p-4 mb-4 bg-light">
 29 
    <div class="shadow p-4 mb-4 bg-light">
30 
        <h2 id="homescreen" class="bg-primary px-2 py-2">Main / Home Screen</h2>
 30 
        <h2 id="homescreen" class="bg-info px-2 py-2">2. Main / Home Screen</h2>
31 
        <img class="img-fluid border lazyload" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="<?php echo timeStampUrl("images/help/search_bar.png"); ?>" alt="Search Bar" />
 31 
        <img class="img-fluid border lazyload" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="<?php echo timeStampUrl("images/help/search_bar.png"); ?>" alt="Search Bar" />
32 
        <p class="mt-3">The search bar consists of a popup button with search tips, a link to the barcoder checker and the search term input box.</p>
 32 
        <p class="mt-3">The search bar consists of a popup button with search tips, a link to the barcoder checker and the search term input box.</p>
33 
 
 33 
 
34 
        <div class="modal-body bg-light text-dark">
 34 
        <div class="modal-body bg-light text-dark">
35 
            <div class="shadow p-4 mb-4 bg-light">
 35 
            <div class="shadow p-4 mb-4 bg-light">
Line 61... Line 61...
61 
        </div>
 61 
        </div>
62 
        <div class="pt-3"><a href="#contents" class="btn bg-white border" title="Back to Table of Contents" data-toggle2="tooltip" aria-label="Go to table of contents"><i class="material-icons">arrow_upward</i></a></div>
 62 
        <div class="pt-3"><a href="#contents" class="btn bg-white border" title="Back to Table of Contents" data-toggle2="tooltip" aria-label="Go to table of contents"><i class="material-icons">arrow_upward</i></a></div>
63 
    </div>
 63 
    </div>
64 
 
 64 
 
65 
    <div class="shadow p-4 mb-4 bg-light">
 65 
    <div class="shadow p-4 mb-4 bg-light">
66 
        <h2 id="search" class="bg-primary px-2 py-2">Search Results</h2>
 66 
        <h2 id="search" class="bg-info px-2 py-2">3. Search Results</h2>
67 
        <p>The search delivers two different results. At the top is a card deck with up to 6 albums matching the search criteria. Below it is a table with online listings sorted by total price ascending.</p>
 67 
        <p>The search delivers two different results. At the top is a card deck with up to 6 albums matching the search criteria. Below it is a table with online listings sorted by total price ascending.</p>
68 
        <div class="shadow p-4 mb-4 bg-light">
 68 
        <div class="shadow p-4 mb-4 bg-light">
69 
            <h3>Matching Albums Card Deck (Results Part 1)</h3>
 69 
            <h3>Matching Albums Card Deck (Results Part 1)</h3>
70 
            <p>Each card shows the main information for the album. The buttons at the footer of the card allow drilling into the track (<i class="material-icons material-text">info_outline</i>) or video list (<i class="material-icons material-text">videocam</i>), add the album to the wish list (<i class="material-icons material-text">bookmark</i>) or search for cheap online store listings (<i class="material-icons material-text">search</i>).</p>
 70 
            <p>Each card shows the main information for the album. The buttons at the footer of the card allow drilling into the track (<i class="material-icons material-text">info_outline</i>) or video list (<i class="material-icons material-text">videocam</i>), add the album to the wish list (<i class="material-icons material-text">bookmark</i>) or search for cheap online store listings (<i class="material-icons material-text">search</i>).</p>
71 
            <img class="img-fluid border lazyload" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="<?php echo timeStampUrl("images/help/matching_albums.png"); ?>" alt="Matching Albums" />
 71 
            <img class="img-fluid border lazyload" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="<?php echo timeStampUrl("images/help/matching_albums.png"); ?>" alt="Matching Albums" />
Line 94... Line 94...
94 
        </div>
 94 
        </div>
95 
        <div class="pt-3"><a href="#contents" class="btn bg-white border" title="Back to Table of Contents" data-toggle2="tooltip" aria-label="Go to table of contents"><i class="material-icons">arrow_upward</i></a></div>
 95 
        <div class="pt-3"><a href="#contents" class="btn bg-white border" title="Back to Table of Contents" data-toggle2="tooltip" aria-label="Go to table of contents"><i class="material-icons">arrow_upward</i></a></div>
96 
    </div>
 96 
    </div>
97 
 
 97 
 
98 
    <div class="shadow p-4 mb-4 bg-light">
 98 
    <div class="shadow p-4 mb-4 bg-light">
99 
        <h2 id="random" class="bg-primary px-2 py-2">Random Results</h2>
 99 
        <h2 id="random" class="bg-info px-2 py-2">4. Random Results</h2>
100 
        <div class="shadow p-4 mb-4 bg-light">
 100 
        <div class="shadow p-4 mb-4 bg-light">
101 
            <p>The random album suggestion button is only shown on the front page when you visit the site for the first time (or haven't visited the site in a while). It gives new users a quick start into the website's features</p>
 101 
            <p>The random album suggestion button is only shown on the front page when you visit the site for the first time (or haven't visited the site in a while). It gives new users a quick start into the website's features</p>
102 
            <img class="img-fluid border lazyload" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="<?php echo timeStampUrl("images/help/random_album_button.png"); ?>" alt="Random Album Button" />
 102 
            <img class="img-fluid border lazyload" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="<?php echo timeStampUrl("images/help/random_album_button.png"); ?>" alt="Random Album Button" />
103 
        </div>
 103 
        </div>
104 
        <div class="shadow p-4 mb-4 bg-light">
 104 
        <div class="shadow p-4 mb-4 bg-light">
Line 107... Line 107...
107 
        </div>
 107 
        </div>
108 
        <div class="pt-3"><a href="#contents" class="btn bg-white border" title="Back to Table of Contents" data-toggle2="tooltip" aria-label="Go to table of contents"><i class="material-icons">arrow_upward</i></a></div>
 108 
        <div class="pt-3"><a href="#contents" class="btn bg-white border" title="Back to Table of Contents" data-toggle2="tooltip" aria-label="Go to table of contents"><i class="material-icons">arrow_upward</i></a></div>
109 
    </div>
 109 
    </div>
110 
 
 110 
 
111 
    <div class="shadow p-4 mb-4 bg-light">
 111 
    <div class="shadow p-4 mb-4 bg-light">
112 
        <h2 id="coupons" class="bg-primary px-2 py-2">Coupons and Special Offers</h2>
 112 
        <h2 id="coupons" class="bg-info px-2 py-2">5. Coupons and Special Offers</h2>
113 
        <div class="shadow p-4 mb-4 bg-light">
 113 
        <div class="shadow p-4 mb-4 bg-light">
114 
            <p class="mt-3">This page shows the currently active coupons and special offers. The entries are updated on a weekly basis.</p>
 114 
            <p class="mt-3">This page shows the currently active coupons and special offers. The entries are updated on a weekly basis.</p>
115 
            <img class="img-fluid border lazyload" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="<?php echo timeStampUrl("images/help/coupons.png"); ?>" alt="Coupons and Special Offers List" />
 115 
            <img class="img-fluid border lazyload" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="<?php echo timeStampUrl("images/help/coupons.png"); ?>" alt="Coupons and Special Offers List" />
116 
        </div>
 116 
        </div>
117 
        <div class="pt-3"><a href="#contents" class="btn bg-white border" title="Back to Table of Contents" data-toggle2="tooltip" aria-label="Go to table of contents"><i class="material-icons">arrow_upward</i></a></div>
 117 
        <div class="pt-3"><a href="#contents" class="btn bg-white border" title="Back to Table of Contents" data-toggle2="tooltip" aria-label="Go to table of contents"><i class="material-icons">arrow_upward</i></a></div>
118 
    </div>
 118 
    </div>
119 
 
 119 
 
120 
    <div class="shadow p-4 mb-4 bg-light">
 120 
    <div class="shadow p-4 mb-4 bg-light">
121 
        <h2 id="wishlist" class="bg-primary px-2 py-2">Wishlist</h2>
 121 
        <h2 id="wishlist" class="bg-info px-2 py-2">6. Wishlist</h2>
122 
        <div class="shadow p-4 mb-4 bg-light">
 122 
        <div class="shadow p-4 mb-4 bg-light">
123 
            <p>This page allows managing the wishlist. Clicking on the heading (<i class="material-icons material-text material-nrm">arrow_drop_up</i><i class="material-icons material-text material-nlm">arrow_drop_down</i></span>) for artist, title, barcode, format or ceiling price toggles the sort order between ascending and descending. The search filter (<i class="material-icons  material-text">search</i>) on top of the table hides all entries which do not contain the search phrase; it can be reset by hitting the <i class="material-icons material-text">cancel_presentation</i>.</p>
 123 
            <p>This page allows managing the wishlist. Clicking on the heading (<i class="material-icons material-text material-nrm">arrow_drop_up</i><i class="material-icons material-text material-nlm">arrow_drop_down</i></span>) for artist, title, barcode, format or ceiling price toggles the sort order between ascending and descending. The search filter (<i class="material-icons  material-text">search</i>) on top of the table hides all entries which do not contain the search phrase; it can be reset by hitting the <i class="material-icons material-text">cancel_presentation</i>.</p>
124 
            <p>The following buttons are available for each entry:</p>
 124 
            <p>The following buttons are available for each entry:</p>
125 
            <ul class="list-unstyled">
 125 
            <ul class="list-unstyled">
126 
                <li><i class="material-icons material-text">edit</i> - Edit artist, title, barcode, format and ceiling price</li>
 126 
                <li><i class="material-icons material-text">edit</i> - Edit artist, title, barcode, format and ceiling price</li>
Line 149... Line 149...
149 
        </div>
 149 
        </div>
150 
        <div class="pt-3"><a href="#contents" class="btn bg-white border" title="Back to Table of Contents" data-toggle2="tooltip" aria-label="Go to table of contents"><i class="material-icons">arrow_upward</i></a></div>
 150 
        <div class="pt-3"><a href="#contents" class="btn bg-white border" title="Back to Table of Contents" data-toggle2="tooltip" aria-label="Go to table of contents"><i class="material-icons">arrow_upward</i></a></div>
151 
    </div>
 151 
    </div>
152 
 
 152 
 
153 
    <div class="shadow p-4 mb-4 bg-light">
 153 
    <div class="shadow p-4 mb-4 bg-light">
154 
        <h2 id="login" class="bg-primary px-2 py-2">Login / Registration</h2>
 154 
        <h2 id="login" class="bg-info px-2 py-2">7. Login / Registration</h2>
155 
        <div class="shadow p-4 mb-4 bg-light">
 155 
        <div class="shadow p-4 mb-4 bg-light">
156 
            <p>You can log in with your social account (Google, Facebook or Twitter) or register to create a new login for this site. Either way, you have to agree to the <a href="terms.php" target="_blank">terms of service</a> and the <a href="privacy.php" target="_blank">privacy policy</a>. The webpage is fully functional without a login but the registration gives you access to the coupons / special offers, wishlist, price alerts, search preferences, and layout setup.</p>
 156 
            <p>You can log in with your social account (Google, Facebook or Twitter) or register to create a new login for this site. Either way, you have to agree to the <a href="terms.php" target="_blank">terms of service</a> and the <a href="privacy.php" target="_blank">privacy policy</a>. The webpage is fully functional without a login but the registration gives you access to the coupons / special offers, wishlist, price alerts, search preferences, and layout setup.</p>
157 
            <img class="img-fluid border lazyload" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="<?php echo timeStampUrl("images/help/login_screen.png"); ?>" alt="Login Screen" />
 157 
            <img class="img-fluid border lazyload" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="<?php echo timeStampUrl("images/help/login_screen.png"); ?>" alt="Login Screen" />
158 
        </div>
 158 
        </div>
159 
        <div class="shadow p-4 mb-4 bg-light">
 159 
        <div class="shadow p-4 mb-4 bg-light">