web reimplementation of Sigmar's Garden https://bits.ondrovo.com/sigmar/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
sigmar/index.html

91 lines
3.8 KiB

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>Sigmar's Garden Online</title>
<link rel="stylesheet" href="style.css">
<meta name="author" content="Ondřej Hruška">
<meta name="description" content="Play Sigmar's Garden online. Opus Magnum minigame re-implemented in JavaScript and SVG.">
<!--
Based on the Sigmar's Garden minigame in Zachtronics' Opus Magnum
-> http://www.zachtronics.com/opus-magnum/
Code, Readme & issue tracker: https://git.ondrovo.com/MightyPork/sigmar
Live demo: https://bits.ondrovo.com/sigmar
Contact: ondra@ondrovo.com
-->
</head>
<body>
<div id="wrap">
<svg version="1.1" baseProfile="full" width="1100" height="980"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
id="board">
<defs>
<linearGradient id="linGradSlotBg">
<stop style="stop-color:#c1b495;stop-opacity:1" offset="0" />
<stop style="stop-color:#9e906f;stop-opacity:1" offset="1" />
</linearGradient>
<filter id="filterDropshadow" x="-10" y="-10" width="300" height="300">
<feGaussianBlur stdDeviation="5"/>
</filter>
<linearGradient id="linGradOrbDark">
<stop style="stop-color:#000000;stop-opacity:0;" offset="0"/>
<stop style="stop-color:#000000;stop-opacity:1" offset="1"/>
</linearGradient>
<linearGradient id="linGradOrbBottom">
<stop style="stop-color:#ffffff;stop-opacity:0.85" offset="0"/>
<stop style="stop-color:#ffffff;stop-opacity:0;" offset="1"/>
</linearGradient>
<linearGradient id="linGradOrbTop">
<stop style="stop-color:#ffffff;stop-opacity:1;" offset="0"/>
<stop style="stop-color:#ffffff;stop-opacity:0;" offset="1"/>
</linearGradient>
<linearGradient id="linGradMetallicInlay"
gradientUnits="userSpaceOnUse"
y2="8" x2="45" y1="8" x1="-45"
xlink:href="#linGradOrbDark" />
<radialGradient id="radGradOrbTop"
gradientTransform="matrix(1.1,0,0,0.7627688,-0.9,47)"
gradientUnits="userSpaceOnUse"
r="33" fy="-96" fx="0" cy="-96" cx="0"
xlink:href="#linGradOrbTop"/>
<radialGradient id="radGradOrbBottom"
gradientTransform="matrix(0.72177816,0,0,0.38047885,0.55112178,40.171783)"
gradientUnits="userSpaceOnUse"
r="33" fy="11" fx="0" cy="11" cx="0"
xlink:href="#linGradOrbBottom"/>
<radialGradient id="radGradOrbDark"
gradientTransform="matrix(1.1755206,0,0,1.8030383,0,-18.355162)"
gradientUnits="userSpaceOnUse"
r="50" fy="19" fx="0" cy="19" cx="0"
xlink:href="#linGradOrbDark"/>
<radialGradient
gradientTransform="matrix(1.7254491,-4.9104912e-8,5.383127e-8,1.8915239,-9.5971015,-257.22095)"
gradientUnits="userSpaceOnUse"
r="9.8552256" fy="291.02457" fx="13.229165" cy="291.02457" cx="13.229165"
id="radGradSlotBg"
xlink:href="#linGradSlotBg" />
</defs>
<g id="root">
<g id="boardbg"></g>
<g id="orbs"></g>
</g>
</svg>
<div id="menu">
<a id="new-game" href=""></a>
<div id="counts">
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>