<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>X-Smiles demos</title>
<link href="menu.css" type="text/css" rel="stylesheet"/>
<style type="text/css">
					body {padding-left:80px; font-family: arial,sans-serif; font-size: 12pt;}
					p.link {font-size: 10pt;margin-top: 3px; margin-bottom 0px; padding-left: 15px; padding-top: 0px; padding-bottom: 0px;; color:black;}
					p.link:hover {background-color:white;}
					div.section {background-color: #ddddee; border-width:2px; border-style:solid; margin-bottom: 10px; margin-right: 50px;}
					h1 {margin-top: 10px; margin-bottom: 5px;}
					h2 {margin-top: 0px;font-size: 14pt;align: center;background-color:blue; color:white; margin-bottom: 3px; padding-left: 5px;}
					a {text-decoration: none; }
                    p.mainimage {padding-left:00px;}
                    
                    /* these are just overrides to colors, the real logic is in menu.css */
                    div.menu * {font-size:9pt;font-family: arial,sans-serif;font-weight:bold;}
                    div.menu div.file  {position:absolute;top:50px;left:340px;}
                    div.menu label {position:relative;}

                    div.menu &gt; ul ,div.menu &gt; ul &gt; li ,div.menu div.file, div.menu label {width:120pt;}
        			div.menu li:hover, div.menu li:hover li:hover, div.menu label {background-color:blue;color:white}
        			div.menu div, div.menu li:hover li,div.menu ul {color:black;background-color:#aaaaff;}
                    div.menu label {padding:3px;border-width:2px;border-color:black;border-style:solid;}
                    div.menu li {padding:1px;}
                    /*div.menu &gt; div {border-style:solid;border-width:1px;border-color:black;}*/
                    div.menu &gt; div &gt; ul {border-width:2px;border-color:gray;border-style:solid;}
                    /*.animation * {display:none;}*/
                    div.animation {position:absolute;left:45px;top:50px;width:275px;height:50px;}
                    div.animation p{text-align:center;border-style:solid;background-color:#ddddff;color:#000077;;text-size:14px;font-style:italic;}
                    div.animation p.ad2 {background-color:#ffdddd;}
				</style>
<time:time xmlns:time="http://www.x-smiles.org/2004/timesheet">
<time:seq>
<time:item dur="6s" select=""/>
<time:seq repeat="indefinite">
<time:item dur="3s" select="#anim1"/>
<time:item dur="3s" select="#anim2"/>
<time:item dur="3s" select="#anim3"/>
<time:item dur="3s" select="#anim4"/>
<time:item dur="1200ms" select="#canim1"/>
<time:item dur="1200ms" select="#canim2"/>
<time:item dur="1200ms" select="#canim3"/>
<time:item dur="1200ms" select="#canim4"/>
<time:item dur="1200ms" select="#canim5"/>
<time:item dur="1200ms" select="#canim6"/>
<time:item dur="1200ms" select="#canim7"/>
<time:item dur="1200ms" select="#canim8"/>
<time:item dur="1200ms" select="#canim9"/>
<time:item dur="1200ms" select="#canim10"/>
<time:item dur="1200ms" select="#canim11"/>
<time:item dur="1200ms" select="#canim12"/>
<time:item dur="1200ms" select="#canim13"/>
<time:item dur="1200ms" select="#canim14"/>
<time:item dur="1200ms" select="#canim15"/>
<time:item dur="3s" select="#anim5"/>
<time:item dur="200ms" select="#canim1"/>
<time:item dur="200ms" select="#canim2"/>
<time:item dur="200ms" select="#canim3"/>
<time:item dur="200ms" select="#canim4"/>
<time:item dur="200ms" select="#canim5"/>
<time:item dur="200ms" select="#canim6"/>
<time:item dur="200ms" select="#canim7"/>
<time:item dur="200ms" select="#canim8"/>
<time:item dur="200ms" select="#canim9"/>
<time:item dur="200ms" select="#canim10"/>
<time:item dur="200ms" select="#canim11"/>
<time:item dur="200ms" select="#canim12"/>
<time:item dur="200ms" select="#canim13"/>
<time:item dur="200ms" select="#canim14"/>
<time:item dur="200ms" select="#canim15"/>
<time:item dur="3s" select="#anim6"/>
<time:item dur="3s" select="#empty"/>
</time:seq>
</time:seq>
</time:time>
</head>
<body>
<p class="mainimage">
<a href="http://www.xsmiles.org">
<img alt="x-smiles" src="title.gif"/>
</a>
</p>
<p style="display:none!important;" id="empty"/>
<div class="animation">
<p class="ad" id="anim1">X-Smiles 1.2</p>
<p class="ad" id="anim2">Making the Web as it should be.</p>
<p class="ad" id="anim3">With small steps...</p>
<p class="ad" id="anim4">We have demos about:</p>
<p class="ad" id="anim5">That was:</p>
<p class="ad" id="anim6">Got it?</p>
<p class="ad2" id="canim1">X-Smiles 1.2</p>
<p class="ad2" id="canim2">XBL 2.0</p>
<p class="ad2" id="canim3">XForms</p>
<p class="ad2" id="canim4">Timesheets</p>
<p class="ad2" id="canim5">XHTML</p>
<p class="ad2" id="canim6">SVG</p>
<p class="ad2" id="canim7">SMIL</p>
<p class="ad2" id="canim8">SIP</p>
<p class="ad2" id="canim9">Signatures</p>
<p class="ad2" id="canim10">Extensions</p>
<p class="ad2" id="canim11">X3D</p>
<p class="ad2" id="canim12">XSL FO</p>
<p class="ad2" id="canim13">Applets</p>
<p class="ad2" id="canim14">Applications</p>
<p class="ad2" id="canim15">DigiTV Apps</p>
</div>
<div class="menu">
<div class="file">
<label>Navigate</label>
<ul>
<li>X-Smiles 1.2 &gt; 
            <ul>
<li>
<a href="./testsuite/testsuite.xml">Testsuite (lots of examples)</a>
</li>
<li>
<a href="http://www.x-smiles.org/">Homepage: www.x-smiles.org (HTML-&gt;XHTML)</a>
</li>
</ul>
</li>
<li>XBL 2.0 &gt; 
            <ul>
<li>
<a href="xbl2/template_layout.xhtml">Defining layout by XBL</a>
</li>
<li>
<a href="xbl2/handlers_tictactoe.xhtml">Tic Tac Toe</a>
</li>
<li>
<a href="xbl2/xforms.xhtml">SMS editor</a>
</li>
<li>
<a href="testsuite/xbl2/index.html">XBL 2.0 Test Suite</a>
</li>
</ul>
</li>
<li>XForms &gt; 
            <ul>
<li>
<a href="./timesheets/slideshow/slideeditor.xhtml">SlowerPoint - slide editor</a>
</li>
<li>
<a href="./xforms/folders/all_editors.xhtml">Content Editors</a>
</li>
<li>
<a href="./xforms/folders/xhtmleditor.xhtml">XForms Extension: tree</a>
</li>
<li>
<a href="./testsuite/xforms/controls.xhtml">XForms controls</a>
</li>
<li>
<a href="./testsuite/xforms/datatypes/adaptive.xhtml">Datatype-aware controls</a>
</li>
<li>
<a href="./xforms/discount.xhtml">Repeating order with calculations</a>
</li>
<li>
<a href="./xhtml/repeat.xhtml">XHTML bookmarks editor</a>
</li>
<li>
<a href="./xforms/email.xhtml">Send mail+attachments</a>
</li>
<li>
<a href="./testsuite/xforms/functions.xhtml">XForms functions</a>
</li>
<li>
<a href="./xforms/itemset.xhtml">Itemset</a>
</li>
<li>
<a href="./xforms/search.xhtml">URL Generation</a>
</li>
<li>
<a href="./xforms/sms.xhtml">SMS editor</a>
</li>
<li>
<a href="testsuite/xforms/message.xhtml">Messages and Dialogs</a>
</li>
</ul>
</li>
<li>Timesheets &gt; 
            <ul>
<li>
<a href="./timesheets/drinkit/kuuma_kylma.smi">Drinks</a>
</li>
<li>
<a href="./timesheets/killthekids/ktk.xhtml">KilltheKids</a>
</li>
<li>
<a href="./timesheets/sizedemo.xhtml">Epilepsia</a>
</li>
<li>
<a href="./timesheets/demo_lecture/wlan_lecture.xhtml">Demo lecture</a>
</li>
<li>
<a href="./timesheets/slideshow/timesheetslides.xhtml">Slideshow</a>
</li>
<li>
<a href="./timesheets/slideshow/xforms_2006_02.xhtml">XForms presentation (new)</a>
</li>
</ul>
</li>
<li>XHTML &gt; 
            <ul>
<li>
<a href="testsuite/css/menu.html">CSS Dynamic Menus</a>
</li>
<li>
<a href="testsuite/css/overflowscroll.html">CSS Overflow Scroll</a>
</li>
<li>
<a href="./xhtml/xhtmlcss.xhtml">Simple XHTML document</a>
</li>
<li>
<a href="./xhtml/fonttest.xhtml">Font test</a>
</li>
<li>
<a href="./xhtml/xhtmlinsmil.smi">XHTML inside SMIL document</a>
</li>
<li>
<a href="./svg_demo/svg_in_xhtml.xhtml">XHTML+SVG images</a>
</li>
</ul>
</li>
<li>SVG &gt; 
            <ul>
<li>
<a href="./svg_demo/svgbyinclusion.xhtml">SVG by inclusion in XHTML</a>
</li>
<li>
<a href="./xbl/staticxbl.xhtml">XHTML+SVG using XBL</a>
</li>
<li>
<a href="./xbl/dynamicxbl.xhtml">Dynamic  XBL</a>
</li>
<li>
<a href="./svg_demo/testimonials.svg">X-Smiles testimonials</a>
</li>
<li>
<a href="./svg_demo/finland.svg">Map Of Finland</a>
</li>
<li>
<a href="./svg_demo/otaniemistreet.svg">Map Of Otaniemi</a>
</li>
<li>
<a href="./svg_demo/finland-xform.xhtml">Interactive Map through XForms</a>
</li>
<li>
<a href="./svg_demo/mapform.xml">Location Based Messages</a>
</li>
<li>
<a href="./svg_demo/comic.svg">Comic</a>
</li>
<li>
<a href="./svg_demo/clock.svg">Animation</a>
</li>
<li>
<a href="./fo/svg.fo">SVG inside XSL FO document</a>
</li>
</ul>
</li>
<li>SMIL &gt; 
            <ul>
<li>
<a href="./smil/misc/pda/main.smil">PDA main page</a>
</li>
<li>
<a href="./smil/ahma/ahma.smil">Ahma</a>
</li>
<li>
<a href="./smil/demox/demox2.smil">Bikes</a>
</li>
<li>
<a href="./smil/drinkit/kuuma_kylma.smi">Drinks</a>
</li>
<li>
<a href="./smil/kontio/intro.smil">Kontio</a>
</li>
<li>
<a href="./fo/smil.fo">SMIL inside XSL FO document</a>
</li>
<li>
<a href="./smil/demox/demox3svg.smil">SVG inside SMIL</a>
</li>
<li>
<a href="./smil/foinsmil.smi">XSL FO inside SMIL</a>
</li>
<li>
<a href="./smil/css/css.smil">CSS in SMIL</a>
</li>
<li>
<a href="./smil/scripting/menu.smil">Dynamic SMIL with ECMA</a>
</li>
<li>
<a href="./smil/audio/audio.smil">Audio streaming (OGG Vorbis)</a>
</li>
<li>
<a href="./smil/anims/animations.smil">Animations</a>
</li>
<li>
<a href="./smil/xforms/audioform/audiofeedback.smil">Audio Enhanced Form</a>
</li>
<li>
<a href="./smil/xforms/animated/phoneorder.smil">Animated Phone Order</a>
</li>
</ul>
</li>
<li>SIP &gt; 
            <ul>
<li>
<a href="./sip/sip.xhtml">SIP example (new)</a>
</li>
</ul>
</li>
<li>Signatures &gt; 
            <ul>
<li>
<a href="http://sinex.tml.hut.fi:8080/xforms/email.xhtml">Signed e-mail</a>
</li>
<li>
<a href="http://sinex.tml.hut.fi:8080/xforms/insurance">Signed insurance claim</a>
</li>
</ul>
</li>
<li>Extensions &gt; 
            <ul>
<li>
<a href="./services/chat/chatnew.smil">JXTA chat (needs jxta.jar)</a>
</li>
<li>
<a href="./x3d/links.x3d">X3D (needs x3d.jar)</a>
</li>
</ul>
</li>
<li>X3D &gt; 
            <ul>
<li>
<a href="./x3d/KlainbusRunning.x3d">Kleinbus Running</a>
</li>
<li>
<a href="./x3d/phone/xsmilesphone.x3d">Mobile Phone</a>
</li>
<li>
<a href="./x3d/woman/woman.x3d">Woman</a>
</li>
<li>
<a href="./x3d/texture.x3d">Textures</a>
</li>
</ul>
</li>
<li>XSL FO &gt; 
            <ul>
<li>
<a href="./fo/images.fo">Images</a>
</li>
<li>
<a href="./fo/table.fo">Table</a>
</li>
<li>
<a href="./fo/newlinktest.fo">Links</a>
</li>
<li>
<a href="./fo/readme.fo">Readme</a>
</li>
</ul>
</li>
<li>Applets &gt; 
            <ul>
<li>
<a href="./applet/tower/tower.xhtml">Tower (new)</a>
</li>
<li>
<a href="http://www.bitstorm.org/gameoflife/">Game of Life (new)</a>
</li>
<li>
<a href="./applet/math/AnimatedGraph.html">Math applets (new)</a>
</li>
<li>
<a href="http://java.sun.com/docs/books/tutorial/listofapplets.html">SUN demo applets</a>
</li>
</ul>
</li>
<li>Applications &gt; 
            <ul>
<li>
<a href="./services/weather/weather.xml">Weather Demo</a>
</li>
<li>
<a href="./services/news/news.xhtml">News</a>
</li>
</ul>
</li>
<li>DigiTV Apps &gt; 
            <ul>
<li>
<a href="./dtv/home.fo">DigiTV pages</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div id="appletdiv"/>
<div class="section">
<h2>X-Smiles 1.2</h2>
<p class="link">
<a style="color:black;" href="./testsuite/testsuite.xml">Testsuite (lots of examples)</a>
</p>
<p class="link">
<a style="color:black;" href="http://www.x-smiles.org/">Homepage: www.x-smiles.org (HTML-&gt;XHTML)</a>
</p>
</div>
<div class="section">
<h2>XBL 2.0</h2>
<p class="link">
<a style="color:black;" href="xbl2/template_layout.xhtml">Defining layout by XBL</a>
</p>
<p class="link">
<a style="color:black;" href="xbl2/handlers_tictactoe.xhtml">Tic Tac Toe</a>
</p>
<p class="link">
<a style="color:black;" href="xbl2/xforms.xhtml">SMS editor</a>
</p>
<p class="link">
<a style="color:black;" href="testsuite/xbl2/index.html">XBL 2.0 Test Suite</a>
</p>
</div>
<div class="section">
<h2>XForms</h2>
<p class="link">
<a style="color:black;" href="./timesheets/slideshow/slideeditor.xhtml">SlowerPoint - slide editor</a>
</p>
<p class="link">
<a style="color:black;" href="./xforms/folders/all_editors.xhtml">Content Editors</a>
</p>
<p class="link">
<a style="color:black;" href="./xforms/folders/xhtmleditor.xhtml">XForms Extension: tree</a>
</p>
<p class="link">
<a style="color:black;" href="./testsuite/xforms/controls.xhtml">XForms controls</a>
</p>
<p class="link">
<a style="color:black;" href="./testsuite/xforms/datatypes/adaptive.xhtml">Datatype-aware controls</a>
</p>
<p class="link">
<a style="color:black;" href="./xforms/discount.xhtml">Repeating order with calculations</a>
</p>
<p class="link">
<a style="color:black;" href="./xhtml/repeat.xhtml">XHTML bookmarks editor</a>
</p>
<p class="link">
<a style="color:black;" href="./xforms/email.xhtml">Send mail+attachments</a>
</p>
<p class="link">
<a style="color:black;" href="./testsuite/xforms/functions.xhtml">XForms functions</a>
</p>
<p class="link">
<a style="color:black;" href="./xforms/itemset.xhtml">Itemset</a>
</p>
<p class="link">
<a style="color:black;" href="./xforms/search.xhtml">URL Generation</a>
</p>
<p class="link">
<a style="color:black;" href="./xforms/sms.xhtml">SMS editor</a>
</p>
<p class="link">
<a style="color:black;" href="testsuite/xforms/message.xhtml">Messages and Dialogs</a>
</p>
</div>
<div class="section">
<h2>Timesheets</h2>
<p class="link">
<a style="color:black;" href="./timesheets/drinkit/kuuma_kylma.smi">Drinks</a>
</p>
<p class="link">
<a style="color:black;" href="./timesheets/killthekids/ktk.xhtml">KilltheKids</a>
</p>
<p class="link">
<a style="color:black;" href="./timesheets/sizedemo.xhtml">Epilepsia</a>
</p>
<p class="link">
<a style="color:black;" href="./timesheets/demo_lecture/wlan_lecture.xhtml">Demo lecture</a>
</p>
<p class="link">
<a style="color:black;" href="./timesheets/slideshow/timesheetslides.xhtml">Slideshow</a>
</p>
<p class="link">
<a style="color:black;" href="./timesheets/slideshow/xforms_2006_02.xhtml">XForms presentation (new)</a>
</p>
</div>
<div class="section">
<h2>XHTML</h2>
<p class="link">
<a style="color:black;" href="testsuite/css/menu.html">CSS Dynamic Menus</a>
</p>
<p class="link">
<a style="color:black;" href="testsuite/css/overflowscroll.html">CSS Overflow Scroll</a>
</p>
<p class="link">
<a style="color:black;" href="./xhtml/xhtmlcss.xhtml">Simple XHTML document</a>
</p>
<p class="link">
<a style="color:black;" href="./xhtml/fonttest.xhtml">Font test</a>
</p>
<p class="link">
<a style="color:black;" href="./xhtml/xhtmlinsmil.smi">XHTML inside SMIL document</a>
</p>
<p class="link">
<a style="color:black;" href="./svg_demo/svg_in_xhtml.xhtml">XHTML+SVG images</a>
</p>
</div>
<div class="section">
<h2>SVG</h2>
<p class="link">
<a style="color:black;" href="./svg_demo/svgbyinclusion.xhtml">SVG by inclusion in XHTML</a>
</p>
<p class="link">
<a style="color:black;" href="./xbl/staticxbl.xhtml">XHTML+SVG using XBL</a>
</p>
<p class="link">
<a style="color:black;" href="./xbl/dynamicxbl.xhtml">Dynamic  XBL</a>
</p>
<p class="link">
<a style="color:black;" href="./svg_demo/testimonials.svg">X-Smiles testimonials</a>
</p>
<p class="link">
<a style="color:black;" href="./svg_demo/finland.svg">Map Of Finland</a>
</p>
<p class="link">
<a style="color:black;" href="./svg_demo/otaniemistreet.svg">Map Of Otaniemi</a>
</p>
<p class="link">
<a style="color:black;" href="./svg_demo/finland-xform.xhtml">Interactive Map through XForms</a>
</p>
<p class="link">
<a style="color:black;" href="./svg_demo/mapform.xml">Location Based Messages</a>
</p>
<p class="link">
<a style="color:black;" href="./svg_demo/comic.svg">Comic</a>
</p>
<p class="link">
<a style="color:black;" href="./svg_demo/clock.svg">Animation</a>
</p>
<p class="link">
<a style="color:black;" href="./fo/svg.fo">SVG inside XSL FO document</a>
</p>
</div>
<div class="section">
<h2>SMIL</h2>
<p class="link">
<a style="color:black;" href="./smil/misc/pda/main.smil">PDA main page</a>
</p>
<p class="link">
<a style="color:black;" href="./smil/ahma/ahma.smil">Ahma</a>
</p>
<p class="link">
<a style="color:black;" href="./smil/demox/demox2.smil">Bikes</a>
</p>
<p class="link">
<a style="color:black;" href="./smil/drinkit/kuuma_kylma.smi">Drinks</a>
</p>
<p class="link">
<a style="color:black;" href="./smil/kontio/intro.smil">Kontio</a>
</p>
<p class="link">
<a style="color:black;" href="./fo/smil.fo">SMIL inside XSL FO document</a>
</p>
<p class="link">
<a style="color:black;" href="./smil/demox/demox3svg.smil">SVG inside SMIL</a>
</p>
<p class="link">
<a style="color:black;" href="./smil/foinsmil.smi">XSL FO inside SMIL</a>
</p>
<p class="link">
<a style="color:black;" href="./smil/css/css.smil">CSS in SMIL</a>
</p>
<p class="link">
<a style="color:black;" href="./smil/scripting/menu.smil">Dynamic SMIL with ECMA</a>
</p>
<p class="link">
<a style="color:black;" href="./smil/audio/audio.smil">Audio streaming (OGG Vorbis)</a>
</p>
<p class="link">
<a style="color:black;" href="./smil/anims/animations.smil">Animations</a>
</p>
<p class="link">
<a style="color:black;" href="./smil/xforms/audioform/audiofeedback.smil">Audio Enhanced Form</a>
</p>
<p class="link">
<a style="color:black;" href="./smil/xforms/animated/phoneorder.smil">Animated Phone Order</a>
</p>
</div>
<div class="section">
<h2>SIP</h2>
<p class="link">
<a style="color:black;" href="./sip/sip.xhtml">SIP example (new)</a>
</p>
</div>
<div class="section">
<h2>Signatures</h2>
<p class="link">
<a style="color:black;" href="http://sinex.tml.hut.fi:8080/xforms/email.xhtml">Signed e-mail</a>
</p>
<p class="link">
<a style="color:black;" href="http://sinex.tml.hut.fi:8080/xforms/insurance">Signed insurance claim</a>
</p>
</div>
<div class="section">
<h2>Extensions</h2>
<p>These demos need extension plugins, which can be downloaded from the download section of http://www.x-smiles.org/</p>
<p class="link">
<a style="color:black;" href="./services/chat/chatnew.smil">JXTA chat (needs jxta.jar)</a>
</p>
<p class="link">
<a style="color:black;" href="./x3d/links.x3d">X3D (needs x3d.jar)</a>
</p>
</div>
<div class="section">
<h2>X3D</h2>
<p class="link">
<a style="color:black;" href="./x3d/KlainbusRunning.x3d">Kleinbus Running</a>
</p>
<p class="link">
<a style="color:black;" href="./x3d/phone/xsmilesphone.x3d">Mobile Phone</a>
</p>
<p class="link">
<a style="color:black;" href="./x3d/woman/woman.x3d">Woman</a>
</p>
<p class="link">
<a style="color:black;" href="./x3d/texture.x3d">Textures</a>
</p>
</div>
<div class="section">
<h2>XSL FO</h2>
<p class="link">
<a style="color:black;" href="./fo/images.fo">Images</a>
</p>
<p class="link">
<a style="color:black;" href="./fo/table.fo">Table</a>
</p>
<p class="link">
<a style="color:black;" href="./fo/newlinktest.fo">Links</a>
</p>
<p class="link">
<a style="color:black;" href="./fo/readme.fo">Readme</a>
</p>
</div>
<div class="section">
<h2>Applets</h2>
<p class="link">
<a style="color:black;" href="./applet/tower/tower.xhtml">Tower (new)</a>
</p>
<p class="link">
<a style="color:black;" href="http://www.bitstorm.org/gameoflife/">Game of Life (new)</a>
</p>
<p class="link">
<a style="color:black;" href="./applet/math/AnimatedGraph.html">Math applets (new)</a>
</p>
<p class="link">
<a style="color:black;" href="http://java.sun.com/docs/books/tutorial/listofapplets.html">SUN demo applets</a>
</p>
</div>
<div class="section">
<h2>Applications</h2>
<p class="link">
<a style="color:black;" href="./services/weather/weather.xml">Weather Demo</a>
</p>
<p class="link">
<a style="color:black;" href="./services/news/news.xhtml">News</a>
</p>
</div>
<div class="section">
<h2>DigiTV Apps</h2>
<p class="link">
<a style="color:black;" href="./dtv/home.fo">DigiTV pages</a>
</p>
<p>The HTML project website can be found at http://www.xsmiles.org/</p>
</div>
</body>
</html>
