Subversion Repositories cheapmusic

<div class="container bg-3">

    <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>

    <div class="shadow p-4 mb-4 bg-light">

        <h2 id="contents" class="bg-primary px-2 py-2">Table of Contents</h2>

        <ol>

            <li><a href="#mainnav" class="btn bg-light align-baseline">Main Navigation Menu</a></li>

            <li><a href="#homescreen" class="btn bg-light align-baseline">Main / Home Screen</a></li>

            <li><a href="#search" class="btn bg-light align-baseline">Search Results</a></li>

            <li><a href="#random" class="btn bg-light align-baseline">Random Results</a></li>

            <li><a href="#coupons" class="btn bg-light align-baseline">Coupons and Special Offers</a></li>

            <li><a href="#wishlist" class="btn bg-light align-baseline">Wishlist</a></li>

            <li><a href="#login" class="btn bg-light align-baseline">Login / Registration</a></li>

        </ol>

    </div>

    <div class="shadow p-4 mb-4 bg-light">

        <h2 id="mainnav" class="bg-primary px-2 py-2">Main Navigation Menu</h2>

        <div class="shadow p-4 mb-4 bg-light">

            <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" />

            <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>

                <p>

                    <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" />

                    <p>After registration or a quick social login - using your Google, Facebook or Twitter account - you get access to a list of store coupons and special offers, are able to maintain an album wishlist, receive price alert emails, set your search preferences or change the color theme.</p>

        </div>

        <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>

    </div>

    <div class="shadow p-4 mb-4 bg-light">

        <h2 id="homescreen" class="bg-primary px-2 py-2">Main / Home Screen</h2>

        <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" />

        <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>

        <div class="modal-body bg-light text-dark">

            <div class="shadow p-4 mb-4 bg-light">

                <h3><i class="material-icons material-text">search</i> Search Terms</h3>

                <img class="img-fluid border lazyload" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="<?php echo timeStampUrl("images/help/search_term.png"); ?>" alt="Search Term" />

                <p><span class="font-weight-bold">Barcode:</span>

                    <br>The 12- or 13-digit barcode, normally located on the back, offers the best chance to find a specific album.</p>

                <p><span class="font-weight-bold">Artist and Title:</span>

                    <br>The full name of the album, including artist and title, will usually lead to a specific album.</p>

                <p><span class="font-weight-bold">Just Artist or Title:</span>

                    <br>Searches for artist or title alone will bring up multiple albums. You can later narrow your search further down, if necessary.</p>

                <p><span class="font-italic">The search algorithm prefers the barcode number whenever available. Since some albums have been released under various barcodes, try searching again for author and title should the barcode search come up empty.</span></p>

            </div>

            <div class="shadow p-4 mb-4 bg-light">

                <p>During the search, a popup with a percentage bar shows the progress. The percentage bar does not always move equally since some online stores provide the search results faster than others.</p>

                <img class="img-fluid border lazyload" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="<?php echo timeStampUrl("images/help/progress_bar.png"); ?>" alt="Progress Bar" />

            </div>

            <div class="shadow p-4 mb-4 bg-light">

                <p>The last 30 search terms are saved for convenience. The list is filtered as soon as you start typing; to see the full list, empty the search field by hitting the <i class="material-icons material-text">cancel_presentation</i> at the end. The search results are cached for about 1 hour to accelerate switching back and forth between your searches.</p>

                <img class="img-fluid border lazyload" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="<?php echo timeStampUrl("images/help/search_history.png"); ?>" alt="Search History List" />

            </div>

            <div class="shadow p-4 mb-4 bg-light">

                <p>The barcode checker verifies Music CD barcodes or calculates a missing check digit. Online stores will not be able to find any results for invalid barcodes. The verified barcode can then be used for an online store search right away.<br>See our <a href="https://blog.findcheapmusic.com/2020/03/music-cd-barcodes-and-identifiers.html" target="_blank" rel="noopener noreferrer">blog post</a> for more information about music barcodes.</p>

                <p>Verifying a barcode:</p>

                <img class="img-fluid border mb-3 lazyload" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="<?php echo timeStampUrl("images/help/barcode_verify.png"); ?>" alt="Search History List" />

                <p class="mt-3">Calculating the check digit for a  barcode:</p>

                <img class="img-fluid border lazyload" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="<?php echo timeStampUrl("images/help/barcode_calc.png"); ?>" alt="Search History List" />

            </div>

        </div>

        <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>

    </div>

    <div class="shadow p-4 mb-4 bg-light">

        <h2 id="search" class="bg-primary px-2 py-2">Search Results</h2>

        <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>

        <div class="shadow p-4 mb-4 bg-light">

            <h3>Matching Albums Card Deck (Results Part 1)</h3>

            <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>

            <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" />

        </div>

        <div class="shadow p-4 mb-4 bg-light">

            <h3>Detailed Album Information</h3>

            <p>This pop up shows the detailed album information including the track listing.</p>

            <img class="img-fluid border lazyload" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="<?php echo timeStampUrl("images/help/album_info.png"); ?>" alt="Album Info" />

        </div>

        <div class="shadow p-4 mb-4 bg-light">

            <h3>Album Videos</h3>

            <p>This pop up shows the available videos.</p>

            <img class="img-fluid border lazyload" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="<?php echo timeStampUrl("images/help/album_videos.png"); ?>" alt="Album Video Info" />

        </div>

        <div class="shadow p-4 mb-4 bg-light">

            <h3>Matching Listings (Results Part 2)</h3>

            <p>This section displays the cheapest available listings from dozens of online stores. The results list can be toggled between a table view (<i class="material-icons material-text">view_list</i>) or a card view (<i class="material-icons material-text">view_module</i>).</p>

            <p><strong>Table View:</strong></p><img class="img-fluid border lazyload" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="<?php echo timeStampUrl("images/help/search_results_table.png"); ?>" alt="Search Results Table View" />

            <p class="mt-3"><strong>Card View:</strong></p><img class="img-fluid border lazyload" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="<?php echo timeStampUrl("images/help/search_results_cards.png"); ?>" alt="Search Results Card View" />

            <p class="pt-3"><span class="font-italic"><b>Note:</b> Every online merchant uses a slightly different search algorithm. Most return only results which contain all search words while a few check for any search word and thereby deliver unrelated results.</span></p>

        </div>

        <div class="shadow p-4 mb-4 bg-light">

            <h3>Result Filtering</h3>

            <p>The detailed filter allows selection by any combination of Condition, Media Type, Merchant or Shipping Origination. The number next to the individual criteria indicates the number of matching results in the list. After the filter is applied, the number of selected listings are show in the title line.</p>

            <img class="img-fluid border lazyload" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="<?php echo timeStampUrl("images/help/detailed_filter.png"); ?>" alt="Detailed Filter Options" />

        </div>

        <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>

    </div>

    <div class="shadow p-4 mb-4 bg-light">

        <h2 id="random" class="bg-primary px-2 py-2">Random Results</h2>

        <div class="shadow p-4 mb-4 bg-light">

            <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>

            <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" />

        </div>

        <div class="shadow p-4 mb-4 bg-light">

            <p>The random album list looks exactly like the matching album list.</p>

            <img class="img-fluid border lazyload" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="<?php echo timeStampUrl("images/help/random_albums.png"); ?>" alt="Random Album result cards" />

        </div>

        <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>

    </div>

    <div class="shadow p-4 mb-4 bg-light">

        <h2 id="coupons" class="bg-primary px-2 py-2">Coupons and Special Offers</h2>

        <div class="shadow p-4 mb-4 bg-light">

            <p class="mt-3">This page shows the currently active coupons and special offers. The entries are updated on a weekly basis.</p>

            <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" />

        </div>

        <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>

    </div>

    <div class="shadow p-4 mb-4 bg-light">

        <h2 id="wishlist" class="bg-primary px-2 py-2">Wishlist</h2>

        <div class="shadow p-4 mb-4 bg-light">

            <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>

            <p>The following buttons are available for each entry:</p>

            <ul class="list-unstyled">

                <li><i class="material-icons material-text">edit</i> - Edit artist, title, barcode, format and ceiling price</li>

                <li><i class="material-icons material-text">cancel_presentation</i> - Delete wishlist entry (after confirmation)</li>

                <li><i class="material-icons material-text">info_outline</i> - Get detailed album information</li>

                <li><i class="material-icons material-text">search</i> - Search for cheap online store listings</li>

            </ul>

            <img class="img-fluid border lazyload" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="<?php echo timeStampUrl("images/help/wishlist.png"); ?>" alt="Wishlist" />

        </div>

        <div class="shadow p-4 mb-4 bg-light">

            <p>Here you can maintain the wishlist entry details. The barcode entry is optional but will override the Artist and Title settings for any store offer searches.</p>

            <p>Any wishlist entry with a non-zero ceiling price is picked up by our nightly price monitor search. This search checks for new cheap listings below your maximum price and emails a notification. To cut down on unnecessary emails, we only send emails with actual results. The standard search frequency is initially set to weekly but can be changed at the user account to daily, weekly, bi-weekly or monthly.</p>

            <img class="img-fluid border lazyload" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="<?php echo timeStampUrl("images/help/wishlist_edit.png"); ?>" alt="Edit wishlist entry" />

        </div>

        <div class="shadow p-4 mb-4 bg-light">

            <p>New price monitor results are indicated at the wishlist menu entry at top</p>

                <img class="img-fluid border lazyload" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="<?php echo timeStampUrl("images/help/wishlist_menu_flag.png"); ?>" alt="Menu new price monitor flag" />

            <p class="mt-2">and the header at the wishlist page.</p>

                <img class="img-fluid border lazyload" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="<?php echo timeStampUrl("images/help/wishlist_flag.png"); ?>" alt="Wishlist new price monitor flag" />

            <p class="mt-2">Once you checked your price monitor list, the new flag will disappear.</p>

        </div>

        <div class="shadow p-4 mb-4 bg-light">

            <p>The price monitor results page is static. The system regenerates it at the interval set at your account if the account setting "Email Price Checks" is set to Yes.</p>

            <p>The table of contents shows the albums from your wishlist, where the system found music listings below your ceiling price. The number of cheap offers is next to each entry. You can jump back and forth between the table of contents and the result list via the links.</p>

            <img class="img-fluid border lazyload" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="<?php echo timeStampUrl("images/help/pricemonitor.png"); ?>" alt="Price monitor result list" />

        </div>

        <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>

    </div>

    <div class="shadow p-4 mb-4 bg-light">

        <h2 id="login" class="bg-primary px-2 py-2">Login / Registration</h2>

        <div class="shadow p-4 mb-4 bg-light">

            <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>

            <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" />

        </div>

        <div class="shadow p-4 mb-4 bg-light">

            <p>Once you are logged in, the site preferences can be changed. The user image is optional and shows up in the top navigation bar. First name and email address are the only mandatory fields. It is recommended though to enter the zip code to get the accurate shipping cost for items listed using a shipping rate table.</p>

            <p>The Layout section allows changing the color theme for the website and the initial result layout (table or card).</p>

            <p>The Search Filter Preferences section allows limiting the search results by condition or media type. The default behavior is to search for all conditions and media types. Every time you log back into the website, these settings will overwrite the default search filters.</p>

            <p>The Wishlist section governs the periodic price monitor emails for all items on your wishlist with a non-zero price cap. By default, weekly emails are turned on. The frequency can be set to daily, weekly, bi-weekly and monthly.</p>

            <img class="img-fluid border lazyload" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="<?php echo timeStampUrl("images/help/account_info.png"); ?>" alt="Account information screen" />

        </div>

        <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>

    </div>

</div>