-
Notifications
You must be signed in to change notification settings - Fork 0
/
CoffeeDetails.html
150 lines (133 loc) · 9.06 KB
/
CoffeeDetails.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to Joe's Coffee Store!</title>
<link rel="stylesheet" href="Styles/Layout.css" type="text/css" />
<script src="scripts/videoplayer.js"></script>
<script src="scripts/canvasChart.js"></script>
</head>
<body>
<header>
<div>
<a class="headerlogo" href="index.html">
<img src="images/logo.png" />
</a>
<span id="headername">Joe's Coffee Store</span>
<input type="search" class="searchbox" placeholder="Search our store" />
</div>
</header>
<nav class="backgroundgradient">
<ul>
<li><a class="navlink" href="index.html">Home</a></li>
<li><a class="navlink" href="blog.html">Blog</a></li>
<li><a class="navlink" href="allcoffees.html">Our coffees</a></li>
<li><a class="navlink" href="accessories.html">Accessories</a></li>
<li><a class="navlink" href="Gifts.html">Gifts</a></li>
<li><a class="navlink" href="findus.html">Find us</a></li>
<li><a class="navlink" href="checkout.html">Checkout</a></li>
</ul>
</nav>
<div id="welcomeimage">
<img src="images/coffeeheader.jpg" />
</div>
<div id="coffeeofthemonth">
<img src="images/cotm.jpg" />
</div>
<section class="coffeedetails">
<header class="blockheader">
<span>Coffee 1</span>
</header>
<figure class="productarticlelargefigure">
<img id="coffee1" class="productarticlelargeimage" src="images/coffee/coffee1-large.jpg" />
<figcaption>Coffee 1</figcaption>
</figure>
<div class="productarticlecontent">
<p class="productarticledescription">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut tortor non ante vehicula vehicula sed at enim. Suspendisse a odio odio. Vestibulum ac lorem nec ligula semper fermentum eu semper massa. Quisque convallis id sapien at varius. Praesent sed rhoncus ex, eget fringilla enim. Maecenas varius quam vitae ipsum sagittis sagittis. Mauris purus nunc, finibus sit amet finibus quis, posuere ut velit. Mauris consectetur nunc nec ornare scelerisque. Praesent et maximus nunc. Suspendisse nec placerat ex. Sed ut metus bibendum, pretium quam id, viverra ex. Ut rutrum lacus urna, vitae suscipit lorem eleifend ut. Nunc a risus tincidunt, blandit odio sed, ullamcorper nisi. Mauris ultrices id orci sed rhoncus. Vivamus ut velit urna. Vestibulum faucibus ultricies risus, ut rhoncus odio mollis non. <br />Suspendisse varius bibendum suscipit. Sed metus tellus, accumsan vitae sollicitudin suscipit, vestibulum eget eros. Ut lacinia eleifend nisi, ultrices consectetur nulla facilisis vitae. Curabitur accumsan non ante accumsan gravida. Maecenas ornare magna non lacinia sollicitudin. Phasellus tincidunt dolor at imperdiet blandit. In hac habitasse platea dictumst. Duis nec magna facilisis, mattis enim posuere, pretium ligula. Aliquam eu accumsan ante, et porta erat. Suspendisse potenti. Donec lobortis risus quis ligula bibendum cursus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla efficitur volutpat tempus. Suspendisse faucibus nec ex at maximus. Cras non libero ut ipsum interdum porta. Vivamus condimentum, nibh at porttitor placerat, metus nisl cursus orci, tempor maximus est dui bibendum ex. </p>
<p class="productarticleprice">€10</p>
</div>
<div>
<video width="320" height="240" class="coffeevideoplayer" id="videoplayer" poster="images/logo.png" autoplay="autoplay">
<source src="video/movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="video/movie.ogg" type='video/ogg; codecs="theora, vorbis"' />
Sadly your browser has no support for video…
</video>
<div id="controls">
<div id="errorDiv" style="color:Red;"></div>
<button id="slowerButton">Slower</button>
<button id="backButton">Rewind</button>
<button id="playButton">Play</button>
<button id="forwardButton">Forward</button>
<button id="fasterButton">Faster</button>
<button id="muteButton">Mute</button>
<br /><br /><br />
</div>
</div>
</section>
<div id="salesCanvasGraph">
<canvas id="barChart" height="800" width="750">
Sorry, your browser doesn't support canvas, therefore you can't see this chart! Upgrade to a new and better browser!
</canvas>
</div>
<div id="salesgraph">
<svg width="3000" height="3000">
<!--transform="matrix(0 0 0 -1 -1 -1)"-->
<defs>
<linearGradient id="gradient1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<line x1="40" y1="800" x2="1200" y2="800" stroke="black" stroke-width="2"></line>
<line x1="40" y1="0" x2="40" y2="800" stroke="black" stroke-width="2"></line>
<line x1="40" y1="200" x2="1200" y2="200" stroke="black" stroke-width="0.5" stroke-dasharray="10,5"></line>
<line x1="40" y1="400" x2="1200" y2="400" stroke="black" stroke-width="0.5" stroke-dasharray="10,5"></line>
<line x1="40" y1="600" x2="1200" y2="600" stroke="black" stroke-width="0.5" stroke-dasharray="10,5"></line>
<line x1="40" y1="800" x2="1200" y2="800" stroke="black" stroke-width="0.5" stroke-dasharray="10,5"></line>
<!--<rect class="bar" x="-90" y="0" height="170" width="20" fill="red" transform="translate(0, 800), rotate(180)"></rect>-->
<rect class="bar" x="70" y="-800" height="170" width="20" fill="blue" transform="scale(1,-1)"></rect>
<rect class="bar" x="120" y="-800" height="320" width="20" fill="blue" transform="scale(1,-1)"></rect>
<rect class="bar" x="170" y="-800" height="432" width="20" fill="blue" transform="scale(1,-1)"></rect>
<rect class="bar" x="220" y="-800" height="548" width="20" fill="blue" transform="scale(1,-1)"></rect>
<rect class="bar" x="270" y="-800" height="342" width="20" fill="blue" transform="scale(1,-1)"></rect>
<rect class="bar" x="320" y="-800" height="0" width="20" fill="url(#gradient1)" transform="scale(1,-1)">
<animate attributeName="height" to="689" fill="freeze"
dur="5" />
</rect>
<rect class="bar" x="370" y="-800" height="344" width="20" fill="blue" transform="scale(1,-1)"></rect>
<rect class="bar" x="420" y="-800" height="109" width="20" fill="blue" transform="scale(1,-1)"></rect>
<rect class="bar" x="470" y="-800" height="655" width="20" fill="blue" transform="scale(1,-1)"></rect>
<rect class="bar" x="520" y="-800" height="327" width="20" fill="blue" transform="scale(1,-1)"></rect>
<rect class="bar" x="570" y="-800" height="109" width="20" fill="blue" transform="scale(1,-1)"></rect>
<rect class="bar" x="620" y="-800" height="235" width="20" fill="blue" transform="scale(1,-1)"></rect>
<text x="73" y="850" fill="black">Jan</text>
<text x="123" y="850" fill="black">Feb</text>
<text x="173" y="850" fill="black">Mar</text>
<text x="223" y="850" fill="black">Apr</text>
<text x="273" y="850" fill="black">May</text>
<text x="323" y="850" fill="black">Jun</text>
<text x="373" y="850" fill="black">Jul</text>
<text x="423" y="850" fill="black">Aug</text>
<text x="473" y="850" fill="black">Sep</text>
<text x="523" y="850" fill="black">Oct</text>
<text x="573" y="850" fill="black">Nov</text>
<text x="623" y="850" fill="black">Dec</text>
<text x="70" y="625" fill="#888888">170</text>
<text x="120" y="475" fill="#888888">320</text>
<text x="170" y="363" fill="#888888">432</text>
<text x="220" y="247" fill="#888888">548</text>
<text x="270" y="453" fill="#888888">342</text>
<text x="320" y="107" fill="#888888">689</text>
<text x="370" y="451" fill="#888888">344</text>
<text x="420" y="686" fill="#888888">109</text>
<text x="470" y="140" fill="#888888">655</text>
<text x="520" y="468" fill="#888888">327</text>
<text x="570" y="686" fill="#888888">109</text>
<text x="620" y="560" fill="#888888">235</text>
</svg>
</div>
<script>
document.addEventListener("DOMContentLoaded", initializeVideoPlayerControls, false);
document.addEventListener("DOMContentLoaded", drawChart, false);
</script>
</body>
</html>