Captive Web Portal redesign

  • 1
  • Question
  • Updated 2 years ago
  • (Edited)
I've been rebuilding the HTML pages from scratch. Using css and making a responsive login page. It looks nice, but I can't get the login to work.

I must be forgetting something. I think I used the same form-fields as in the standard pages. But I end up with an internet service error 500.

Can you give me some pointers?


*******************************

Well, never mind. Been debugging for a few hours. Someone forgot to connect us to the network :-)
Photo of Martin vander Linden

Martin vander Linden

  • 5 Posts
  • 2 Reply Likes
  • Happy & Ashamed

Posted 3 years ago

  • 1
Photo of Mike Kouri

Mike Kouri, Official Rep

  • 1030 Posts
  • 271 Reply Likes
Martin,
Glad to see you figured out what was causing that error. I'm intrigued by your new CWP pages, would you mind sharing them here once they are done? We get many people asking about customization, and it sounds like your work may serve as a good example.
Photo of Martin vander Linden

Martin vander Linden

  • 5 Posts
  • 2 Reply Likes
Mike,
Allright. No problem. But I really need to clean up the css first. So give me a few days. 
Photo of Volkan Bagci

Volkan Bagci

  • 55 Posts
  • 3 Reply Likes
It would be great for us as well :)
Photo of Micka T

Micka T

  • 2 Posts
  • 0 Reply Likes
hello Martin
do you manage to use a css in an independent file ? or you need to create only one file for both css and html ?
Photo of Martin vander Linden

Martin vander Linden

  • 5 Posts
  • 2 Reply Likes
I think i put the css inside the file. I'll post it this afternoon. Completely forgot about it.
Photo of Martin vander Linden

Martin vander Linden

  • 5 Posts
  • 2 Reply Likes
How do I add a file here? Van I just copy paste the html?
Photo of Martin vander Linden

Martin vander Linden

  • 5 Posts
  • 2 Reply Likes
Right, here it is. It is way more css than you need, but i left it in so you can easily customize it yourself. Sorry for the delay.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>


  <title>Wifi</title>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  <META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">
  <meta name="viewport" content="width=device-width, initial-scale=1">



  <style type="text/css">
<!--
body {
  /* Location of the image */
  background-image: url(background-big.jpg);
 
  /* Background image is centered vertically and horizontally at all times */
  background-position: center center;
 
  /* Background image doesn't tile */
  background-repeat: no-repeat;
 
  /* Background image is fixed in the viewport so that it doesn't move when
     the content's height is greater than the image's height */
  background-attachment: fixed;
 
  /* This is what makes the background image rescale based
     on the container's size */
  background-size: cover;
 
  /* Set a background color that will be displayed
     while the background image is loading */
  background-color: #464646;
}

body {
  padding: 15%;
  font-family:  "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  color: #fff;
}

@media only screen and (min-width: 1200px) {

body {
    padding: 20% 30%;
}

form {
    width: 750px;
}

}
form {
    background-color:  #702C91;
    padding: 0px;
    padding-bottom: 10px;
}

form header {
  background-color: #8853A4;
  color: #ffffff;
  padding: 10px;
}

form header div {
  font-size: 90%;
  color: #fff;
 
}

#logo {
    position: fixed;
    bottom: 35px;
    left: 35px;
}

@media only screen and (max-width: 767px) {
  body {
    /* The file size of this background image is 93% smaller
       to improve page load speed on mobile internet connections */
    background-image: url(background-mobile.jpg);
    padding: 0px;
    margin: 0px;
  }
  form {
  width: 100%;
  padding: 0px;
  margin: 0px;
  Background-color: #702C91;
  position: fixed;
  bottom: 0px;

  }
  form header  {
  background-color: #8853A4;
  color: #ffffff;
  padding: 10px;
 
  }
  form header div {
  color: #fff;
  }
}




* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}


form header {
  margin: 0 0 20px 0;
}

form header h2 {
  margin: 0 0 5px 0;
}
form > div {
  clear: both;
  overflow: hidden;
  padding: 1px;
  margin: 0 0 10px 0;
}
form > div > fieldset > div > div {
  margin: 0 0 5px 0;
}
form > div > label,
legend {
    width: 25%;
  float: left;
  padding-right: 10px;
}
form > div > div,
form > div > fieldset > div {
  width: 75%;
  float: right;
}
form > div > fieldset label {
    font-size: 90%;
}
fieldset {
    border: 0;
  padding: 0;
}

input[type=text],
input[type=email],
input[type=url],
input[type=password],
textarea {
    width: 100%;
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  border-right: 1px solid #eee;
  border-bottom: 1px solid #eee;
}
input[type=text],
input[type=email],
input[type=url],
input[type=password] {
  width: 50%;
}
input[type=text]:focus,
input[type=email]:focus,
input[type=url]:focus,
input[type=password]:focus,
textarea:focus {
  outline: 0;
  border-color: #4697e4;
}


@media (max-width: 600px) {
  form > div {
    margin: 0 0 15px 0;
  }
  form > div > label,
  legend {
    display:none;
  }
  form > div > div,
  form > div > fieldset > div {
    width: 100%;
    float: none;
  }
  input[type=text],
  input[type=email],
  input[type=url],
  input[type=password],
  textarea,
  select {
    width: 85%;
    align: center;
    margin-left: 8%;
    padding: 5px;
    border-radius: 5px;
    -moz-border-radius: 5px;
  }
  input[type=submit] {
  margin-left: 30%;
    padding: 5px;
    border-radius: 5px;
    -moz-border-radius: 5px;
  }
}
@media (min-width: 1200px) {
  form > div > label,
    legend {
      text-align: right;
  }
}
--></style>
</head>
<body>
<div id="logo">
<img src="logo.png">
</div>

<form class="login" name="form2" action="reg.php" method="post" onsubmit="return validateSubmit(this);">
  <header>
    <h2>Hotspot</h2>
    <div>Het kan 20 seconden duren voordat het proces voltooid is.     Door in te loggen gaat u akkoord met de <A style="color: #000000;" HREF="voorwaarden.html">Gebruikersovereenkomst</A></div>
  </header>
 
  <div>
    <label class="desc" id="title1" for="field12">Inlognaam</label>
    <div>
      <input id="field12" type="text" name="username" maxlength=32 placeholder="inlognaam">
    </div>
  </div>
   
  <div>
    <label class="desc" id="title2" for="field22">
      Wachtwoord
    </label>
    <div>
      <input id="field22" type="password" name="password" maxlength=32 placeholder="wachtwoord">
   </div>
  </div>
   
 
  </div>
   
 
 
 
  <div>
        <div>
        <input style="width:140px;" type="submit" value="Log in" class="login_button" />
        <input name="checkbox" type="hidden" id="checkbox" value="checkbox" />
    </div>
    </div>
 
</form>
</body>
</html>           
(Edited)
Photo of Micka T

Micka T

  • 2 Posts
  • 0 Reply Likes
Hi Marten,
thank you for your help.
I will try to redesign my portal ;)