index.html 3.96 KB
Newer Older
1
<!DOCTYPE HTML>
2
<html>
3 4 5 6
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>HTML to Print Boilerplate</title>

svilayphiou's avatar
svilayphiou committed
7
    <link rel="stylesheet" type="text/css" href="lib/reset.css" />
8
    <link rel="stylesheet" href="print.less" type="text/less" media="all" charset="utf-8">
svilayphiou's avatar
svilayphiou committed
9
    <link rel="stylesheet" href="lib/jquery-ui-1.10.3/css/smoothness/jquery-ui-1.10.3.custom.min.css" type="text/css" media="all" charset="utf-8">
10 11 12 13 14
</head>
<body>
    <!-- PRINT MARKS -->
    <div id="print-marks">
        <div id="master-page" class="preview-page">
svilayphiou's avatar
svilayphiou committed
15
            <!--<img src="page-height.png" />-->
16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
            <div class="crop-top-left">
                <div class="crop-right" style="top: 0; right: 0;"></div>
                <div class="crop-bottom" style="bottom: 0cm; left: 0;"></div>
            </div>
            <div class="crop-top-right">
                <div class="crop-left" style="top: 0; left: 0;"></div>
                <div class="crop-bottom" style="bottom: 0; right: 0;"></div>
            </div>
            <div class="crop-bottom-right">
                <div class="crop-left" style="left: 0; bottom: 0;"></div>
                <div class="crop-top" style="right: 0cm; top: 0;"></div>
            </div>
            <div class="crop-bottom-left">
                <div class="crop-right" style="bottom: 0cm; right: 0;"></div>
                <div class="crop-top" style="left: 0cm; top: 0"></div>
            </div>
32 33 34 35

            <section id="master-region" class="page">
            </section>

36 37 38 39
            <div class="folio">
            </div>
        </div>
    </div>
40

41 42 43 44
    <div id="interface">
        <a id="debug" class="button" href="#">Debug</a>
        <a id="preview" class="button" href="#">Preview</a>
    </div>
45

46 47 48
    <section id="container">
        <!-- Content will be loaded here with Jquery. -->
    </section>
49
    
50 51
    
    <!-- MOVEABLE ELEMENTS -->
52
    <div class="moveable"  style="top: 7186.65625px; left: 98.9375px; width: 300px; height: 80px; font-size: 2em; font-family: sans-serif;">
53 54 55
        I'm a moveable element.
    </div>

56
    <div class="moveable"  style="top: 7309.47314453125px; left: 103.95795440673828px; width: 488px; height: 386px; font-size: 2em; font-family: sans-serif;">
57 58 59 60
        <p style="position: absolute;">I'm a moveable image with no scaling. I behave like this by default. Use negative margins on my &lt;img&gt; tag to see another part of my body.</p>
        <img class="" style="margin-top: -150px; margin-left: -100px;" src="collaborative-plotting.png" />
    </div>

61
    <div class="moveable"  style="top: 8036.11865234375px; left: 85.98197937011719px; width: 492px; height: 126px; font-size: 2em; font-family: sans-serif;">
62 63 64 65
        <p style="position: absolute;">I'm a moveable image fitting my height. Give me the class "fit-height".</p>
        <img class="fit-height" src="collaborative-plotting.png" />
    </div>
    
66
    <div class="moveable"  style="top: 8187.71875px; left: 87.9375px; width: 204px; height: 582px; font-size: 2em; font-family: sans-serif;">
67 68 69 70
        <p style="position: absolute;">I'm a moveable image fitting my width. Give me the class "fit-width".</p>
        <img class="fit-width" src="collaborative-plotting.png" />
    </div>

71
    <div class="moveable"  style="top: 8189.92724609375px; left: 312.8723449707031px; width: 270px; height: 578px; font-size: 2em; font-family: sans-serif;">
72 73 74
        <p style="position: absolute;">I'm a moveable image fitting in my frame. Give me the classes "fit-wdith fit-height".</p>
        <img class="fit-width fit-height" src="collaborative-plotting.png" />
    </div>
svilayphiou's avatar
svilayphiou committed
75

76
    <!-- JAVASCRIPT -->
svilayphiou's avatar
svilayphiou committed
77 78 79 80
    <script type="text/javascript" src="lib/jquery.min.js"></script>
    <script type="text/javascript" src="lib/jquery-ui-1.10.3/js/jquery-ui-1.10.3.custom.min.js"></script>
    <script type="text/javascript" src="lib/popelt-v1.0.min.js"></script>
    <script type="text/javascript" src="lib/less-1.3.0.min.js"></script>
81 82 83
    <script type="text/javascript" src="print.js"></script>
</body>
</html>