Kune

index.html

<!--Icons from: https://www.flaticon.com/packs/logistics-74-->

<div class="site">
  <header class="masthead">
    <!--<h1>Kune</h1>-->
    <img src="http://kune.tech/kune.png" />
    <h2>Vous êtes déjà en vacances</h2>
    <p>
      Une plateforme qui vous assiste dans la création du voyage de vos rêves
    </p>
  </header>
  
  <div class="feature" id="planning">
    <img src='https://image.flaticon.com/icons/svg/1600/1600181.svg'/>
    <h3>Planning fiable</h3>
    <p>
      Vous décidez des dates de départ-retour,
      Kune s'occupe de la logistique.
    </p>
  </div>
  
  <div class="feature" id="maitrise-budget">
    <img src="https://image.flaticon.com/icons/svg/1600/1600157.svg"/>
    <h3>Budget maitrisé</h3>
    <p>
      Calcul du budget total automatisé, fini les surprises, 
      Kune pense à tout.
    </p>
  </div>
  
  <div class="feature" id="temps">
     <img src="https://image.flaticon.com/icons/svg/1600/1600197.svg" />
    <h3>Gain de temps</h3>
    <p>
        Kune effectue toutes les tâches répétitives et fastidieuses
        pour que vous puissiez vous concentrer sur ce que vous aimez vraiment
    </p>
  </div>
  
  <div class="feature" id="personalise">
    <img src="https://image.flaticon.com/icons/svg/1600/1600161.svg"/>
    <h3>Assistant personnel</h3>
    <p>
      Créez une expérience qui vous ressemble 
      grâce aux suggestions personnalisées
    </p>
  </div>
  
  <footer>
    
    <a href="mailto:[email protected]">Contact us<a>
    
  <form onsubmit="return validateFormOnSubmit(this);">
    <button type=submit>
        Let's do it
    </button>
  </form>    
      
  </footer>
  
</div>

kune.markdown

Kune

A Pen by Christian glacet on CodePen.

License.

script.babel

// ADD https://cdpn.io in CORS (https://restdb.io/account/databases/testcg-96eb/api)

function handleResponse(response) {  
  return response.json()
    .then(function(json) {
      if (response.ok) {
        return json;
      } else {
        return Promise.reject(json)
      }
    });
}

function handleDBSuccess(data) {
  console.log(`Data is ${JSON.stringify(data)}`);
}

function handleDBError(error) {
  //console.log(`Error is ${JSON.stringify(error)}`);
  if (error.name == "ValidationError"){
    for (const fieldError of error.list){
      if (fieldError.field == "email" && fieldError.message[0] == "Already exists"){
        console.log("Mail already exist.");
      }
    }
  }
}

function validateFormOnSubmit(form){
  
  const now = new Date().toISOString();
  
  const body = { 
    submited_on: now,
    submited_from: "codepen",
    email: form.email
  };

  const url = 'https://testcg-96eb.restdb.io/rest/kune';
  const options = { 
    method: 'post',
    headers: { 
      'cache-control': 'no-cache',
      'x-apikey': '5cddb49e780a473c8df5c894',
      'content-type': 'application/json' 
    },
    body: JSON.stringify(body)
  };

  fetch(url, options)
    .then(handleResponse)
    .then(handleDBSuccess)
    .catch(handleDBError);
}

validateFormOnSubmit({email: "[email protected]"});

style.css

/* Base CSS */
body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
  /*font-family: 'Source Sans Pro', 'Helvetica', 'Arial', sans-serif;*/
  font-family: 'Roboto', 'Source Sans Pro', 'Helvetica', 'Arial', sans-serif;
  font-weight: 500;
  font-size: 17px;
	line-height: 1.5;
}

header {
  text-align: center;  
  margin-bottom: 50px
}

header img {
  height: 200px;
}

header h1 {
  text-align: center;
  font-size: 3em;
  margin-bottom: 0;
}

header h2 {
  text-align: center;
  font-size: 1em;
}

header p {
  text-align: center;
  display:inline-block;
  width: 300px;
  color: grey;
}

.feature img {
  height: 80px;
  width: 80px;
  margin: auto 0;
}

.feature h3 {
  margin: 5px 0 10px 0;
}

.feature p {
  magin: 0;
  color: grey;
}

/* Grid layout CSS (3 cols, 3 rows) */
.site header { grid-area: header; }
#planning { grid-area: planning; }
#maitrise-budget { grid-area: budget; }
#temps { grid-area: temps; }
#personalise { grid-area: personalise; }
footer {grid-area: footer;}
.feature img { grid-area: feature-img; }
.feature h3 { grid-area: feature-title; }
.feature p { grid-area: feature-txt; }

.site {
  margin: 0 auto;
}

.feature {
  display: grid;
  margin: 20px 3% 10px 8%;
  grid-template:
      "feature-img feature-title" auto 
      "feature-img feature-txt" auto / auto auto;
  grid-column-gap: 10%;
}

@media screen and (min-width: 50em){
  .site {
    margin: 0 auto;
    display: grid;
    grid-template-column: 1fr 1fr;
    grid-template-rows: 1fr auto auto 1fr;
    grid-template-areas:
      "header header"
      "planning budget"
      "temps personalise"
      "footer footer";
  }
  .feature {
    width: 300px;
    text-align: center;
    margin: 30px auto;
    display: inline;
  }
  .feature img {
    height: 120px;
    width: 120px;
    margin: auto 0;
  }
}

@media screen and (min-width: 100em){
  .site {
    margin: 0 auto;
    display: grid;
    grid-template-column: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr auto 1fr;
    grid-template-areas:
      "header header header header"
      "planning budget temps personalise"
      "footer footer footer footer";
  }
}