use html5 instead of svg only

bufferoverflow · Jun 28, 2015 · edcd5e5 · edcd5e5
1 parent 5a2e1c3
commit edcd5e5
Showing 1 changed file with 27 additions and 17 deletions.
diff --git a/index.html b/index.html
@@ -1,20 +1,29 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- 
-Copyright (c) 2012 Rüdiger Appel
-Copyright (c) 2015 Roger Meier <roger@bufferoverflow.ch>
-
-SPDX-License-Identifier:	MIT
--->
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>the CLOCK</title>
+<link rel="license" href="LICENSE.md">
+<meta name="application-name" content="the CLOCK">
+<link rel="icon" sizes="16x16" href="icons/icon16x16.png">
+<link rel="icon" sizes="48x48" href="icons/icon48x48.png">
+<link rel="icon" sizes="60x60" href="icons/icon60x60.png">
+<link rel="icon" sizes="128x128" href="icons/icon128x128.png">
 <script type="text/javascript" src="js/app.js"  charset="utf-8"></script>
+<style type="text/css">
+body { overflow: hidden }
+svg  { height: 96vh }
+html { height: 100% }
+body { min-height: 100% }
+</style>
+</head>
+<body>
 <svg xmlns="http://www.w3.org/2000/svg"
-     xmlns:xlink="http://www.w3.org/1999/xlink"
-     xmlns:ev="http://www.w3.org/2001/xml-events"
      version="1.1"
      baseProfile="full"
-     width="100%" 
-     height="100%" 
+     width="100%"
+     height="100%"
      viewBox="0 0 200 200">
-
   <defs>
 
     <!-- three hour stroke (DIN 41091.1) -->
@@ -68,14 +77,14 @@
 
   <!-- hour hand -->
   <g id="hourHand" style="fill:#222" visibility="hidden">
-    <rect x="97.3" y="65" width="5.4" height="35" style="stroke:none"/>      
+    <rect x="97.3" y="65" width="5.4" height="35" style="stroke:none"/>
     <circle cx="97.3" cy="58.5" r="9" style="stroke:none"/>
     <circle cx="102.7" cy="58.5" r="9" style="stroke:none"/>
     <path d="M 88.3,58.5 Q 88.3,52 100,37.5 Q 111.7,52 111.7,58.5 Z" style="stroke:none"/>
     <path d="M 93.5,123 Q 100,125.5 106.5,123 Q 103,116 102.7,100 L 97.3,100 Q 97.3,116 93.5,123 Z" style="stroke:none"/>
     <circle cx="100" cy="100" r="7.4" style="stroke:none"/>
   </g>
-  
+
   <!-- minute hand -->
   <g id="minuteHand" style="fill:#222" visibility="hidden">
     <polygon points="95.3,49 99.5,2 100.5,2 104.7,49 102.7,100 97.3,100" style="stroke:none"/>
@@ -89,11 +98,12 @@
     <circle cx="100" cy="45" r="10" style="fill:none; stroke:#ad1a14; stroke-width:4"/>
     <polygon points="97.5,56 102.5,55 103,102 97,102" style="fill:#ad1a14; stroke:none"/>
   </g>
-  
+
   <!-- axis cover -->
   <g id="axisCover" style="fill:#222">
     <circle id="axisCoverCircle" cx="100" cy="100" r="7" style="stroke:none"/>
   </g>
-  
+
 </svg>
-
+</body>
+</html>