New Design for Login page, Color Scheme and where to find Turtle-Talks

After I spent a lot of time working on the PHP part of my project and setting up the connection to the database as well as the Sign-up, Log-in and Post form, I felt like it was alright to work a bit on the design and layout. Since we decided on our Name (Turtle-Talks), we thought it might be a good idea to stick to ocean and turtle related colours, like green and blue. Also, my group decided that we wanted a modern design.

In our last workshop, we learned how to use jQuery and how to make a menu toggle down. We thought it would be a nice touch for our Login page. So far, once the page is accessed, people see this:

Screenshot (262)

They can either enter their login information or click on “No account?”. Doing that, a small form pops up that enables a new user to register. Once that is done, the user can log in:

Screenshot (263)

Here, you can see the code for the toggle up menu. To get it to work, I created two “div” classes called “sign_up_box” and “login_toggle” in our index.php file:

Extract from our scripts2.js file:

$(document).ready(function() {
 console.log("clicked box");

Extract from our index.php file:

<div class="sign_up_box">
<p>No account? Sign up.</p>
<form action="index.php" method="post" autocomplete="off">
<div class="register-switch">
<input type="radio" name="gender" value="female" id="sex_f" class="register-switch-input" checked>
<label for="sex_f" class="register-switch-label">Female</label>
<input type="radio" name="gender" value="male" id="sex_m" class="register-switch-input">
<label for="sex_m" class="register-switch-label">Male</label>
<input type="text" name="name" value="" placeholder="Name"/>
<input type="password" name="password" value="" placeholder="Password"/>
<input type="password" name="confirm_password" value="" placeholder="Confirm Password"/>
<input type="text" name="student_id" value="" placeholder="Student ID"/>
<div class="dropdown">
<input type="submit" name="signup" value="Sign up!"/> </p>

Also, we now uploaded a temporary version of Turtle Talks to the Dakar server. It has been updated since then and has to be uploaded again, but it can still be accessed. It can be found here:


Buttner, D., Hughes, R., Tina, C., Negasi, I., 2015. Turtletalks. Available from: [Accessed: 13th March 2015]

Uploading code

After we created the folder structure and some code in our workshops, we could start using our freshly created GITHUB repositry. It was a bit tricky to figure out how to upload the code since I have never used GITHUB before. But after a while, I think I figured out a way to do it and uploaded all the files.

Screen Shot 2015-02-26 at 10.49.07

Screenshot (202)

Link to our repositry:

Github Group-Repositry & first group meeting

In our first group meeting, my group had a lot of things that had to be addressed. Starting with a theme for our project website, a possible layout and the creation of our first GITHUB repositry. We started with GITHUB. First, we logged in and followed each other. After we tried out some things, we created a shared project and made sure that all three of us where watching it. Because we did not have any code to upload at this point, we logged out and started to take care of the other things.

Screen Shot 2015-02-26 at 10.24.00Screen Shot 2015-02-26 at 10.39.21

Screenshot (200)

Our project

We collected some ideas and eventually, we found a theme that we all liked. The brief left us a lot of choice regarding the subject of our website. We could be as creative as we wanted, as long as we used databases and PHP. We all had to opinion that we wanted to create a website for an audience much like ourselves, students. Inspired by an app called YODEL, we liked the idea of some kind of anonymous live tweeting application.

We ended our first meeting after we collected a couple more ideas of how we could turn this into reality.