Alchemy Flask Cost Calculator [html]

**topalsinek** · 06-22-2011

actullay i dont trust any desktop applications so here is my little calculator about Alchemy Mats.if there is a miss calculation you can report or change it easly on html file.Can implement ah price for profit calculation.All javascript and font files uses google apis.

PHP Code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Topal Sinek - crippled fly</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
        <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Ubuntu:regular,bold&subset=Latin">
        <style>
            html, body, div, span, applet, object, iframe,
            h1, h2, h3, h4, h5, h6, p, blockquote, pre,
            a, abbr, acronym, address, big, cite, code,
            del, dfn, em, font, img, ins, kbd, q, s, samp,
            small, strike, strong, sub, sup, tt, var,
            b, u, i, center,
            dl, dt, dd, ol, ul, li,
            fieldset, form, label, legend,
            table, caption, tbody, tfoot, thead, tr, th, td {
                background: transparent;
                border: 0;
                margin: 0;
                padding: 0;
                vertical-align: baseline;
            }
            body {
                line-height: 1;
            }
            h1, h2, h3, h4, h5, h6 {
                clear: both;
                font-weight: normal;
            }
            ol, ul {
                list-style: none;
            }
            blockquote {
                quotes: none;
            }
            blockquote:before, blockquote:after {
                content: '';
                content: none;
            }
            del {
                text-decoration: line-through;
            }
            /* tables still need 'cellspacing="0"' in the markup */
            table {
                border-collapse: collapse;
                border-spacing: 0;
            }
            a img {
                border: none;
            }
            body {
                font-family: Ubuntu, sans-serif;
                font-size:12px;
            }
            .tasiyici {
                width:400px;
                margin:0 auto;
            }
            label {
                display:inline-block;
                width:200px;
            }
            input[type=text]{
                width:30px;
                text-align:center;
            }
            span{
                display:inline-block;
                position:absolute;
                right:20px;
                top:0;
            }
            p {
                margin-top:10px;
                width:250px;
                position:relative;
            }
            .mats {
                background:#f3f3f3;
                border-radius:5px;
                padding:10px;
                width:250px;
                margin-top:20px;
            }
            
        </style>
        <script>
            $(function(){
                function hesapla(){
                    $vlife=Number($('#vlife').val());
                    $aveil=Number($('#azveil').val());
                    $Whiptail=Number($('#Whiptail').val());
                    $jasmine=Number($('#jasmine').val());
                    $cinder=Number($('#cinder').val());
                    $storm=Number($('#storm').val());
                    $blos=Number($('#blos').val());
                    $vial="0.009";
                    $('#mind').html((($vlife*8)+($aveil*8)+($jasmine*8)+Number($vial)).toFixed(3));
                    $('#wind').html((($vlife*8)+($aveil*8)+($Whiptail*8)+Number($vial)).toFixed(3));
                    $('#str').html((($vlife*8)+($cinder*8)+($Whiptail*8)+Number($vial)).toFixed(3));
                    $('#steel').html((($vlife*8)+($storm*8)+($jasmine*8)+Number($vial)).toFixed(3));
                    $('#water').html((($vlife*8)+($storm*8)+($blos*8)+Number($vial)).toFixed(3));
                }
                hesapla();
                $('input').change(function(){
                    hesapla();
                });
                $('input').click(function(){
                    $(this).val(' ');
                });
                    
                
            
                
            });
        </script>
    </head>
    <body>
        <div class="tasiyici">
        <p>Just Write Gold price per item.</p>
            <div class="mats">
                <p><label for="vlife">Volatile Life</label><input type="text" name="vlife" id="vlife" class="hesap"  value="1"></p>
                <p><label for="azveil">Azshara's Veil</label><input type="text" name="azveil" id="azveil" class="hesap"  value="1"></p>
                <p><label for="Whiptail">Whiptail</label><input type="text" name="Whiptail" id="Whiptail" class="hesap"  value="1"></p>
                <p><label for="jasmine">Twilight Jasmine</label><input type="text" name="jasmine" id="jasmine" class="hesap"  value="1"></p>
                <p><label for="cinder">Cinderbloom</label><input type="text" name="cinder" id="cinder" class="hesap"  value="1"></p>
                <p><label for="storm">Stormvine</label><input type="text" name="storm" id="storm" class="hesap"  value="1"></p>
                <p><label for="blos">Heartblossom</label><input type="text" name="blos" id="blos" class="hesap"  value="1"></p>
                <p><label for="vial">Vial</label><input type="text" name="vial" id="vial"  value="0.009" disabled="disabled"></p>
            </div>
            <div class="mats">
                <p>Flask of the Draconic Mind<span id="mind"></span></p>
                <p>Flask of the Winds<span id="wind"></span></p>
                <p>Flask of Titanic Strength<span id="str"></span></p>
                <p>Flask of Steelskin<span id="steel"></span></p>
                <p>Flask of Flowing Water<span id="water"></span></p>
            </div>
        </div>
    </body>
</html>