diff options
| author | Patrick Davison <snapwilliam@gmail.com> | 2012-07-09 13:30:30 -0700 |
|---|---|---|
| committer | Patrick Davison <snapwilliam@gmail.com> | 2012-07-09 13:30:30 -0700 |
| commit | 92fc724c91790cd0042354f99041b46ed9f670df (patch) | |
| tree | d36c7be2f051c1192ec93dcd5aba214c8ad22304 | |
| parent | 8ac6579f2dd3fe8e4739585dd24df51f3c54e7ac (diff) | |
| download | pathery-92fc724c91790cd0042354f99041b46ed9f670df.tar.xz | |
Added login div
| -rw-r--r-- | css/page.css | 72 | ||||
| -rw-r--r-- | includes/header.php | 31 | ||||
| -rw-r--r-- | index.php | 4 | ||||
| -rw-r--r-- | pages/tutorial.php | 2 |
4 files changed, 106 insertions, 3 deletions
diff --git a/css/page.css b/css/page.css index de0d953..f6a0096 100644 --- a/css/page.css +++ b/css/page.css @@ -47,6 +47,78 @@ a:hover { -moz-transition:color 0s ease-out;
}
+#oid_box {
+ width:500px;
+ height:300px;
+ background-color:#ccc;
+ padding:25px;
+ box-shadow: 0 0 4px #888;
+}
+#oid_btn {
+ background-color: #bbb;
+ box-shadow: 0 0 2px #444;
+ margin:7px;
+ margin-left:10px;
+}
+#oid_btn:hover {
+ background-color: #ddd;
+ box-shadow: 0 0 2px #663;
+}
+#oid_cancel {
+position:absolute;color:#333;right:50px;bottom:20px;
+}
+#oid_learn {
+position:absolute;color:#333;left:25px;bottom:20px;
+}
+#oid_wrapper {
+ animation: signinAnimate 1s;
+ -webkit-animation: signinAnimate 1s; /* Safari and Chrome */
+ -o-animation: signinAnimate 1s; /* Opera */
+ -moz-animation: signinAnimate 1s; /* Firefox */
+ position:fixed;
+ color:#000;
+ background-color:#999;
+ box-shadow: 0 0 5px #888;
+ z-index:200;
+ padding:15px;
+ text-align: left;
+ left:50%;
+ top:120px;
+ width:550px;
+ margin-left:-275px;
+}
+#oid_hidden {
+ position:fixed;
+ left:-100%;
+}
+
+
+
+
+@keyframes signinAnimate
+{
+0% {left:-50%;}
+100% {left:50%;}
+}
+@-webkit-keyframes signinAnimate /* Safari and Chrome */
+{
+0% {left:-50%;}
+100% {left:50%;}
+}
+@-o-keyframes signinAnimate /* Opera */
+{
+0% {left:-50%;}
+100% {left:50%;}
+}
+@-moz-keyframes signinAnimate /* Firefox */
+{
+0% {left:-50%;}
+100% {left:50%;}
+}
+
+
+
+
.wrapper {
width: 900px;
margin: 0 auto;
diff --git a/includes/header.php b/includes/header.php index a1dbfa4..472fcbc 100644 --- a/includes/header.php +++ b/includes/header.php @@ -33,6 +33,20 @@ function htmlHeader($css = array(), $title = 'Pathery', $desc = '') { }
?>
</script>
+
+<script>
+function showSignin() {
+ if (document.getElementById('oid_hidden') !== undefined) {
+ document.getElementById('oid_hidden').id = 'oid_wrapper';
+ }
+}
+function hideSignin() {
+ if (document.getElementById('oid_wrapper') !== undefined) {
+ document.getElementById('oid_wrapper').id = 'oid_hidden';
+ }
+}
+</script>
+
</head>
<?php
}
@@ -94,8 +108,21 @@ function topbar($links) { if ($_SESSION['displayName'] == 'noname')
echo "<a href='cp' title='change name'>Update your name</a> | ";
echo "<a href='logout'>Logout</a>";
- } else
- echo "<a href='login'>Sign in with Google</a>";
+ } else {
+ ?>
+<a href='javascript:showSignin();'>Sign in</a>
+<div class="wrapper" id="oid_hidden" >
+ <h2>Sign in</h2>
+ <div id="oid_box">
+ <h2 style="color:#333;">Do you have an account here?</h2>
+ <a href="login?op=google"><img id="oid_btn" src="images/btns/signin_Google.png" alt="Sign in with Google" /></a>
+ <a href="login?op=yahoo"><img id="oid_btn" src="images/btns/signin_Yahoo.png" alt="Sign in with Yahoo" /></a>
+ <a id="oid_learn" href="http://openid.net/get-an-openid/what-is-openid/" >Learn more about OpenID</a>
+ <a id="oid_cancel" href="javascript:hideSignin();">Cancel</a>
+ </div>
+</div>
+ <?
+ }
echo "</div>";
echo "</div>";
@@ -91,6 +91,10 @@ switch ($request) { require 'pages/login.php';
break;
+ case "chooselogin":
+ require 'pages/chooselogin.php';
+ break;
+
case "admin":
if ($_SESSION['isAdmin'] == true)
require 'pages/admin.php';
diff --git a/pages/tutorial.php b/pages/tutorial.php index d962f68..8e3b583 100644 --- a/pages/tutorial.php +++ b/pages/tutorial.php @@ -253,7 +253,7 @@ TutorialView.prototype.unlock = function(n) { if (this.locked >= this.cur) {
this.nextbtn.className = this.nextbtn.className.replace(' disabled', '');
this.interval1 = setInterval(function() {
- tv.nextbtn.className += ' flash';
+ this.nextbtn.className += ' flash';
}, 1200);
setTimeout(function() {
tv.interval2 = setInterval(function() {
|