|
|
@@ -1,115 +1,63 @@
|
|
|
-<!doctype html>
|
|
|
-<html>
|
|
|
-<head>
|
|
|
-<script language="javascript" type="text/javascript">
|
|
|
-document.onmousedown=disableclick;
|
|
|
-function disableclick(event)
|
|
|
-{
|
|
|
- if(event.button==2)
|
|
|
- {
|
|
|
- return false;
|
|
|
- }
|
|
|
-}
|
|
|
-</script>
|
|
|
-<style>
|
|
|
-.fade img:hover{filter: alpha(opacity=80);}
|
|
|
-h1{font-weight:lighter;padding-top:10px;}
|
|
|
-</style>
|
|
|
-<link rel="stylesheet" type="text/css" href="./Products/css/style.css">
|
|
|
-<script type="text/javascript">
|
|
|
-function quiz() {
|
|
|
-var answer = confirm ("Please save the file then run it.")
|
|
|
-if (answer)
|
|
|
-window.location="Products/quiz.ppsx";
|
|
|
-}
|
|
|
-</script>
|
|
|
-<script language="javascript" type="text/javascript">
|
|
|
-document.onmousedown=disableclick;
|
|
|
-function disableclick(event)
|
|
|
-{
|
|
|
- if(event.button==2)
|
|
|
- {
|
|
|
- return false;
|
|
|
- }
|
|
|
-}
|
|
|
-</script>
|
|
|
-<script>
|
|
|
-function MM_swapImgRestore() { //v3.0
|
|
|
- var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
|
|
|
-}
|
|
|
-function MM_preloadImages() { //v3.0
|
|
|
- var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
|
|
|
- var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
|
|
|
- if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
|
|
|
-}
|
|
|
-
|
|
|
-function MM_findObj(n, d) { //v4.01
|
|
|
- var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
|
|
|
- d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
|
|
|
- if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
|
|
|
- for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
|
|
|
- if(!x && d.getElementById) x=d.getElementById(n); return x;
|
|
|
-}
|
|
|
-
|
|
|
-function MM_swapImage() { //v3.0
|
|
|
- var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
|
|
|
- if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
|
|
|
-}
|
|
|
-</script>
|
|
|
-
|
|
|
-<meta charset="utf-8">
|
|
|
-<title>Spellbound| Eportfolio - Products</title>
|
|
|
-</head>
|
|
|
-<body onLoad="MM_preloadImages('img/products/ss2.png','img/products/ns2.png','img/products/cu2.png')">
|
|
|
-<div align="center">
|
|
|
-<table width="973" border="0">
|
|
|
- <tr>
|
|
|
- <td colspan="6"><img width="1010px" src="./img/eportheader.png"></td>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td width="154" rowspan="3" align="center" valign="top">
|
|
|
- <img src="Products/img/logots.png" style="width: 150px;">
|
|
|
- <a href="./index.html"><div class="btn-purple">Home</div></a>
|
|
|
- <a href="./evidence.html"><div class="btn-green">Evidence</div></a>
|
|
|
- <a href="./products.html"><div class="btn-blue">Products</div></a></td>
|
|
|
- <td style="display: inline-block;background-color: #B7FFFF; border: 3px solid #B7FFFF; font-size: 13px;" colspan="5">Candidate name: Owen Maple | Candidate number: 2077 | Center name: Testwood Sports College | Center number: 58837</td>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td height="51" colspan="5" align="center" valign="top"><h1 style="padding:6px;">Products</h1><hr style="width:80%;"></td>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td width="176" height="209" align="center" valign="top"> </td>
|
|
|
- <td width="165" align="center" valign="top">
|
|
|
- <p><a href="Products/navigation.html" target="_blank"><div class="btn-nav">Navigation Screen</div></a></p>
|
|
|
- <p>The navigation screen followed the simplistic themes found in css/js scripts such as bootstrap. The original plan was to have the spellbound logo in the center however the logo isn't amazing and it would ruin the simplistic design I was going for.</p></td>
|
|
|
- <td width="165" align="center" valign="top">
|
|
|
- <p><a href="Products/contact.html" target="_blank"><div class="btn-cu">Contact Us</div></a></p>
|
|
|
- <p>The contact screen was fairly simple to throw together as the splashscreen was already in a position to be adapated for this use. It worked out by simply adding some extra text in a contrasting colour to make the information stand out.</p></td>
|
|
|
- <td width="165" align="center" valign="top">
|
|
|
- <p><a href="Products/index.html" target="_blank"><div class="btn-ss">Splashscreen</div></a></p>
|
|
|
- <p>The splashscreen has be through 2 phases. The first had a bland background and text that could have easily been missed but now a gradient is used to allow text and images to stand out more.</p></td>
|
|
|
- <td width="165" align="center" valign="top"><p> </p>
|
|
|
- <p> </p>
|
|
|
- <p> </p>
|
|
|
- <p> </p>
|
|
|
- <p> </p></td>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td width="154"> </td>
|
|
|
- <td width="176" align="center" valign="top"> </td>
|
|
|
- <td width="165" align="center" valign="top">
|
|
|
- <p><a href="Products/meetthewizard.html" target="_blank"><div class="btn-mtw">Meet the Wizard</div></a></p>
|
|
|
- <p>The meet the wizard was targeted originally to demonstrate the quiz without the use of sound, once completed it did feel as if it was missing something and so a voice over was added to make the character come to life allowing for a more immersive experience for the user.</p></td>
|
|
|
- <td width="165" align="center" valign="top">
|
|
|
- <p><a href="javascript:quiz();"><div class="btn-qu">Quiz</div></a></p>
|
|
|
- <p>The quiz was where my functional side could really do its justice. I designed it to be easy to use for the younger children that the software is aimed at. I really enjoyed developing the quiz as it was simplistic yet methodical. The original idea for the quiz was to use a website instead of PowerPoint however due to the lack of software on the school machines I was unable to do it in this way.</p></td>
|
|
|
- <td width="165" align="center" valign="top">
|
|
|
- <p><a href="Products/trailer.html" target="_blank"><div class="btn-dv">Demo Video</div></a></p>
|
|
|
- <p>The demo video was an exciting project to work on. I know how to video edit so that watching a video is not a bore. I think that the video is informative and enjoyable to watch even if the quality has to be lesser than appropriate due to the file size limits. </p></td>
|
|
|
- <td width="165">
|
|
|
- <p></p>
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
-</table>
|
|
|
-</div>
|
|
|
-</body></html>
|
|
|
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
|
+<html xmlns="http://www.w3.org/1999/xhtml">
|
|
|
+<head>
|
|
|
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
|
+<title>Spellbound</title>
|
|
|
+<!-- Compiled and minified CSS -->
|
|
|
+ <link rel="stylesheet" href="./css/materialize.css">
|
|
|
+
|
|
|
+ <!-- Compiled and minified JavaScript -->
|
|
|
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
|
|
|
+
|
|
|
+<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
+
|
|
|
+<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
|
|
+
|
|
|
+
|
|
|
+</head>
|
|
|
+
|
|
|
+<body>
|
|
|
+<div class="container">
|
|
|
+ <div class="row">
|
|
|
+ <div class="col s12"><img width="100%" src="./img/eportheader.png"></div>
|
|
|
+ <div class="col s12 m4 l2">
|
|
|
+ <a class="waves-effect waves-light btn-large purple" href="./index.html">Home</a>
|
|
|
+ <a class="waves-effect waves-light btn-large green" href="./evidence.html">Evidence</a>
|
|
|
+ <a class="waves-effect waves-light btn-large blue active" href="./products.html">Products</a>
|
|
|
+ </div>
|
|
|
+ <div class="col s12 m8 l10">
|
|
|
+ <h1 class="center">Products</h1>
|
|
|
+ </div>
|
|
|
+ <div class="col s12 m8 l10">
|
|
|
+ <div class="row" style="text-align: center;padding: 9px 32px;">
|
|
|
+ <div class="col s12 m3 l3">
|
|
|
+ <div class="btn-mtw" onclick="window.open('./Products/meetthewizard.html','_blank')">Meet the Wizard</div>
|
|
|
+ The meet the wizard was targeted originally to demonstrate the quiz without the use of sound, once completed it did feel as if it was missing something and so a voice over was added to make the character come to life allowing for a more immersive experience for the user.
|
|
|
+ </div>
|
|
|
+ <div class="col s12 m3 l3">
|
|
|
+ <div class="btn-nav" onclick="window.open('./Products/navigation.html','_blank')">Navigation Screen</div>
|
|
|
+ The navigation screen followed the simplistic themes found in css/js scripts such as bootstrap. The original plan was to have the spellbound logo in the center however the logo isn't amazing and it would ruin the simplistic design I was going for.
|
|
|
+ </div>
|
|
|
+ <div class="col s12 m3 l3">
|
|
|
+ <div class="btn-cu" onclick="window.open('./Products/contact.html','_blank')">Contact Us</div>
|
|
|
+ The contact screen was fairly simple to throw together as the splashscreen was already in a position to be adapated for this use. It worked out by simply adding some extra text in a contrasting colour to make the information stand out.
|
|
|
+ </div>
|
|
|
+ <div class="col s12 m3 l3">
|
|
|
+ <div class="btn-ss" onclick="window.open('./Products/index.html','_blank')">Splashscreen</div>
|
|
|
+ The splashscreen has be through 2 phases. The first had a bland background and text that could have easily been missed but now a gradient is used to allow text and images to stand out more.
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="row" style="text-align: center;padding: 9px 32px;">
|
|
|
+ <div class="col s12 m3 l3 offset-m3 offset-l3">
|
|
|
+ <div class="btn-qu" onclick="window.open('./Products/quiz.html','_blank')">Quiz</div>
|
|
|
+ The quiz was where my functional side could really do its justice. I designed it to be easy to use for the younger children that the software is aimed at. I really enjoyed developing the quiz as it was simplistic yet methodical. The original idea for the quiz was to use a website instead of PowerPoint however due to the lack of software on the school machines I was unable to do it in this way.
|
|
|
+ </div>
|
|
|
+ <div class="col s12 m3 l3">
|
|
|
+ <div class="btn-dv" onclick="window.open('./Products/trailer.html','_blank')">Demo Video</div>
|
|
|
+ The demo video was an exciting project to work on. I know how to video edit so that watching a video is not a bore. I think that the video is informative and enjoyable to watch even if the quality has to be lesser than appropriate due to the file size limits.
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+</body>
|
|
|
+</html>
|
