atuy
134 lines
6.7 KiB
HTML
134 lines
6.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>svgLogin</title>
|
|
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body onload="openEyes()">
|
|
<div class="container" id="loginContainer">
|
|
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
|
viewBox="-120 100 1920 600" style="enable-background:new 0 0 1920 600;" xml:space="preserve">
|
|
<style type="text/css">
|
|
.st0{fill:none;stroke:#29ABE2;stroke-width:12;stroke-miterlimit:10;}
|
|
.st1{fill:#C69C6D;}
|
|
.st2{fill:#754C24;}
|
|
.st3{fill:#A67C52;}
|
|
.st4{fill:#D3BD95;stroke:#8C6239;stroke-width:4;stroke-miterlimit:10;}
|
|
.st5{fill:#FFFFFF;stroke:#A67C52;stroke-width:4;stroke-miterlimit:10;}
|
|
.st6{stroke:#29ABE2;stroke-width:5;stroke-miterlimit:10;}
|
|
.st7{fill:none;stroke:#000000;stroke-width:5;stroke-miterlimit:10;}
|
|
.st8{fill:#42210B;stroke:#42210B;stroke-width:5;stroke-miterlimit:10;}
|
|
.st9{fill:none;stroke:#42210B;stroke-width:5;stroke-miterlimit:10;}
|
|
.st10{fill:#C69C6D;stroke:#A67C52;stroke-width:4;stroke-miterlimit:10;}
|
|
.st11{fill:none;stroke:#8C6239;stroke-width:5;stroke-miterlimit:10;}
|
|
</style>
|
|
<circle id="outerCircle" class="st0" cx="831" cy="413" r="243"/>
|
|
<g>
|
|
<g>
|
|
<path id="outerEarRight" class="st1" d="M925.1,332.7c-2.5,0-5-0.4-7.4-1.3c-15.9-5.8-21.9-29.5-13.4-52.8c7.1-19.5,22.3-33.1,36.9-33.1
|
|
c2.5,0,5,0.4,7.4,1.3c7.6,2.8,13.2,9.7,15.7,19.5c2.7,10.1,1.8,21.9-2.3,33.3C954.9,319,939.8,332.7,925.1,332.7z"/>
|
|
<path id="outerEarRightOutline" class="st2" d="M941.3,243.4v4h0c2.3,0,4.6,0.4,6.7,1.2c6.9,2.5,12.1,9,14.5,18.1c2.6,9.7,1.7,21.1-2.3,32.2
|
|
c-3.4,9.3-8.9,17.6-15.4,23.3c-6.2,5.5-13.2,8.5-19.6,8.5c-2.3,0-4.6-0.4-6.7-1.2c-6.9-2.5-12.1-9-14.5-18.1
|
|
c-2.6-9.7-1.7-21.1,2.3-32.2c3.4-9.3,8.9-17.6,15.4-23.3c6.2-5.5,13.2-8.5,19.6-8.5L941.3,243.4 M941.3,243.4
|
|
c-15.1,0-31.2,13.8-38.8,34.4c-8.9,24.4-2.3,49.2,14.6,55.4c2.6,0.9,5.3,1.4,8,1.4c15.1,0,31.2-13.8,38.8-34.4
|
|
c8.9-24.4,2.3-49.2-14.6-55.4C946.7,243.9,944,243.4,941.3,243.4L941.3,243.4z"/>
|
|
</g>
|
|
<g>
|
|
<path id="innerEarRight" class="st3" d="M923.4,326c-1.2,0-2.3-0.2-3.3-0.6c-3.9-1.4-6.7-5.4-7.9-11.2c-1.2-6.2-0.5-13.5,2.1-20.7
|
|
c4.5-12.4,13.6-21.4,21.6-21.4c1.2,0,2.3,0.2,3.3,0.6c3.9,1.4,6.7,5.4,7.9,11.2c1.2,6.2,0.5,13.5-2.1,20.7
|
|
C940.5,317,931.4,326,923.4,326z"/>
|
|
<path id="innerEarRightOutline" class="st2" d="M935.9,274.1L935.9,274.1c0.9,0,1.8,0.2,2.6,0.5c4.4,1.6,6,6.8,6.6,9.7c1.2,5.8,0.4,12.8-2.1,19.7
|
|
c-4.2,11.4-12.7,20-19.8,20c-0.9,0-1.8-0.2-2.6-0.5c-4.4-1.6-6-6.8-6.6-9.7c-1.2-5.8-0.4-12.8,2.1-19.7
|
|
C920.3,282.7,928.8,274.1,935.9,274.1 M935.9,270.1c-8.7,0-18.6,9.2-23.5,22.7c-5.7,15.6-2.6,31.1,7,34.5c1.3,0.5,2.6,0.7,4,0.7
|
|
c8.7,0,18.6-9.2,23.5-22.7c5.7-15.6,2.6-31.1-7-34.5C938.7,270.4,937.3,270.1,935.9,270.1L935.9,270.1z"/>
|
|
</g>
|
|
</g>
|
|
<g>
|
|
<g>
|
|
<path id="outerEarLeft" class="st1" d="M737.7,332.7c-14.3,0-28.6-13-34.8-31.6c-7.7-23.2-0.5-47.4,15.9-54c2.7-1.1,5.6-1.7,8.6-1.7
|
|
c14.3,0,28.6,13,34.8,31.6c7.7,23.2,0.5,47.4-15.9,54C743.5,332.1,740.6,332.7,737.7,332.7z"/>
|
|
<path id="outerEarLeftOutline" class="st2" d="M727.3,243.4v4c13.5,0,27,12.4,32.9,30.2c7.3,22.2,0.7,45.3-14.7,51.5c-2.5,1-5.1,1.5-7.8,1.5
|
|
c-13.5,0-27-12.4-32.9-30.2c-7.3-22.2-0.7-45.3,14.7-51.5c2.5-1,5.1-1.5,7.8-1.5L727.3,243.4 M727.3,243.4c-3.1,0-6.3,0.6-9.3,1.8
|
|
c-17.4,7-25,32.2-17,56.4c6.6,20,21.8,33,36.7,33c3.1,0,6.3-0.6,9.3-1.8c17.4-7,25-32.2,17-56.4
|
|
C757.4,256.4,742.2,243.4,727.3,243.4L727.3,243.4z"/>
|
|
</g>
|
|
<g>
|
|
<path id="innerEarLeft" class="st3" d="M740.5,325.8c-7.9,0-16.5-8.6-20.4-20.4c-4.8-14.5-1.5-29.1,7.3-32.6c1.2-0.5,2.5-0.7,3.9-0.7
|
|
c7.9,0,16.5,8.6,20.4,20.4c4.8,14.5,1.5,29.1-7.3,32.6C743.1,325.5,741.8,325.8,740.5,325.8z"/>
|
|
<path id="innerEarLeftOutline" class="st2" d="M731.3,270v4c7.1,0,14.8,8,18.5,19.1c4.4,13.2,1.6,27-6.1,30.1c-1,0.4-2.1,0.6-3.1,0.6
|
|
c-7.1,0-14.9-8-18.5-19.1c-4.4-13.2-1.6-27,6.1-30.1c1-0.4,2.1-0.6,3.1-0.6L731.3,270 M731.3,270c-1.6,0-3.1,0.3-4.6,0.9
|
|
c-9.8,3.9-13.5,19.6-8.4,35.1c4.3,13.1,13.6,21.8,22.3,21.8c1.6,0,3.1-0.3,4.6-0.9c9.8-3.9,13.5-19.6,8.4-35.1
|
|
C749.2,278.7,739.9,270,731.3,270L731.3,270z"/>
|
|
</g>
|
|
</g>
|
|
<g>
|
|
<ellipse id="headInner" class="st1" cx="832" cy="432" rx="146" ry="155"/>
|
|
<path id="headOutline" class="st2" d="M832,279c38.4,0,74.6,15.9,101.7,44.7C961,352.6,976,391.1,976,432s-15,79.4-42.3,108.3
|
|
C906.6,569.1,870.4,585,832,585s-74.6-15.9-101.7-44.7C703,511.4,688,472.9,688,432s15-79.4,42.3-108.3
|
|
C757.4,294.9,793.6,279,832,279 M832,275c-81.7,0-148,70.3-148,157s66.3,157,148,157s148-70.3,148-157S913.7,275,832,275L832,275z"
|
|
/>
|
|
</g>
|
|
<ellipse id="snout" class="st4" cx="831.5" cy="489.5" rx="99.5" ry="83.5"/>
|
|
<ellipse id="eyeLeft" transform="matrix(0.9962 -8.715574e-02 8.715574e-02 0.9962 -27.4684 69.9878)" class="st5" cx="787.8" cy="349.6" rx="29.2" ry="36.1"/>
|
|
<ellipse id="eyeRight" transform="matrix(0.126 -0.992 0.992 0.126 416.1085 1177.406)" class="st5" cx="876.2" cy="352.6" rx="36.2" ry="29.1"/>
|
|
<circle id="pupilLeft" class="st6" cx="788.5" cy="356.5" r="14.5"/>
|
|
<circle id="pupilRight" class="st6" cx="877.5" cy="356.5" r="14.5"/>
|
|
<line id="SnoutLineDown" class="st7" x1="832.5" y1="454" x2="832.5" y2="525"/>
|
|
<ellipse id="nose" class="st8" cx="832.5" cy="453.5" rx="32" ry="21"/>
|
|
<path id="leftNoseArch" class="st9" d="M832.5,524.5c-1,1.3-8.7,10.8-22,11c-13.9,0.2-22.1-9.9-23-11"/>
|
|
<path id="rightNoseArch" class="st9" d="M877.5,524.5c-1,1.3-8.7,10.8-22,11c-13.9,0.2-22.1-9.9-23-11"/>
|
|
<g>
|
|
|
|
<ellipse id="closedEyeLeft" transform="matrix(0.9962 -8.715574e-02 8.715574e-02 0.9962 -27.726 70.0864)" class="st10" cx="788.8" cy="352.6" rx="29.2" ry="36.1"/>
|
|
<path id="closedEyeLeftLid" class="st11" d="M818.3,354.9c-1.4-1.1-12.3-9.2-29.9-7.9c-18.3,1.4-28.3,11.9-29.4,13.1"/>
|
|
</g>
|
|
<g>
|
|
<ellipse id="closedEyeRight" transform="matrix(0.126 -0.992 0.992 0.126 415.1164 1178.28)" class="st10" cx="876.2" cy="353.6" rx="36.2" ry="29.1"/>
|
|
<path id="closedEyeRightLid" class="st11" d="M906,359.7c-1.2-1.3-10.6-11.2-28.1-13c-18.3-1.8-29.9,6.8-31.2,7.8"/>
|
|
</g>
|
|
</svg>
|
|
|
|
<!--
|
|
Eye positions
|
|
|
|
straight forward:
|
|
788.5 356.5
|
|
877.5 356.5
|
|
|
|
|
|
down left is:
|
|
778.5 366.5
|
|
867.6 366.5
|
|
|
|
down middle:
|
|
788.5 366.5
|
|
877.6 366.5
|
|
|
|
right middle:
|
|
798.5 366.5
|
|
887.5 366.5
|
|
-->
|
|
|
|
<div style="width: 100%">
|
|
<div style="margin: 40px 40px;">
|
|
<form style="text-align: center">
|
|
<input onfocus="openEyes();" onblur="movePupilsToCenter();" id="username" type="text" placeholder="Username">
|
|
</form>
|
|
</div>
|
|
<div style="margin: 40px 40px;">
|
|
<form style="text-align: center">
|
|
<input onfocus="closeEyes();" onblur="openEyes();" id="password1" type="password" placeholder="Password">
|
|
</form>
|
|
</div>
|
|
<div style="margin: 40px 40px;">
|
|
<form style="text-align: center">
|
|
<button>Submit</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script rel="script" src="javascript.js"></script>
|
|
</body>
|
|
</html> |