apxtrib/nationschainssave/tribes/smatchit/www/presentation/index.html

199 lines
7.9 KiB
HTML
Raw Normal View History

2023-04-29 06:32:56 +00:00
<!DOCTYPE html>
<html>
<head>
<!-- Google tag (gtag.js)
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2N37S6B74Z"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-2N37S6B74Z');
</script>
-->
<meta charset="utf-8" />
<title>smatchit—la nouvelle manière de rencontrer l'emploi qu'il vous faut</title>
<meta name="description" content="Pourquoi chercher un emploi quand l'emploi peut venir à vous ? >Plus de CVs, plus de candidatures sans réponse, plus de recherche sur des job boards. Notre solution basée sur l'IA analyse à la fois les candidats et les offres d'emploi et vous apporte des candidats sélectionnés en temps réel, pour rendre votre recherche <strong> rapide, simple et sans stress." />
<!-- init tachyons -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./css/tachyons.css"/>
<!-- styles -->
<link rel="stylesheet" href="./css/global.css?v=3" />
<link rel="stylesheet" href="./css/index.css?v=3" />
<link href="https://fonts.cdnfonts.com/css/futura-std-4" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet" />
<script src="./js/jquery-3.6.1.min.js"></script>
<script src="./js/velocity.min.js"></script>
<script type="text/javascript">
function toggleContent(type)
{
switch(type)
{
case 'candidate':
$("#candidate-content").fadeIn(200);
$("#recruiter-content").fadeOut(100);
$("#candidate-tab").css("background-size", "100%");
$("#recruiter-tab").css("background-size", "0%");
break;
case 'recruiter':
$("#candidate-content").fadeOut(100);
$("#recruiter-content").fadeIn(200);
$("#candidate-tab").css("background-size", "0%");
$("#recruiter-tab").css("background-size", "100%");
break;
}
}
function sendNotify()
{
$("#sendBt").prop("disabled", true);
var _email = document.querySelector("input[name='user_email']").value;
var _typeSelected = document.querySelector("input[name='user_type']:checked");
var _user_type = (_typeSelected) ? _typeSelected.value : "none";
console.log(_email + " is " + _user_type);
if (validateEmail(_email))
{
$.post(
'save.php',
{ email: _email, user_type: _user_type },
function (response)
{
if (response)
{
$("#mini-form").html("<p class='text'>Merci ! Nous vous tiendrons informé dès que <span class='smatchit'>smatchit</span> est live. Nous avons hâte de vous voir <span class='smatchit'>smatcher</span> 😉.</p>");
}
else
{
$("#error").html("<p class='error-message'>Désolé, nous rencontrons une difficulté, merci d'essayer dans quelques instants.</p>");
setTimeout(function()
{
$("#error").html("<p class='error-message'>&nbsp;</p>");
}, 2000);
}
$("#sendBt").prop("disabled", false);
}
);
}
else
{
$("#error").html("<p class='error-message'>Il semble que l'adresse email soit invalide...</p>");
setTimeout(function()
{
$("#error").html("<p class='error-message'>&nbsp;</p>");
}, 1800);
$("#sendBt").prop("disabled", false);
}
}
function validateEmail(email)
{
if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email))
{
console.log("Email is valid")
return true;
}
console.log("You have entered an invalid email address!")
return false;
}
function init()
{
var _hash = window.location.hash;
var _content = (_hash) ? _hash.split("#")[1] : "candidate";
toggleContent(_content);
};
</script>
</head>
<body onload="init()">
<div class="flex flex-wrap container">
<div class="flex flex-column header">
<div class="fl logo">
<h1><img alt="smatchit" src="./img/smatchit-logo.svg" /></h1>
</div>
<div class="fl tabs">
<span id="candidate-tab" class="ib candidate-tab">
<a href="#candidate" onclick="toggleContent('candidate')">Talent</a>
</span>
<div class="vertical-line">
<img src="./img/tab-divider.svg" />
</div>
<span id="recruiter-tab" class="ib recruiter-tab">
<a href="#recruiter" onclick="toggleContent('recruiter')">Entreprise</a>
</span>
</div>
</div>
<div class="flex flex-column w-100 content">
<div id="candidate-content" class="fl w-100 mw7 ph4 center cf">
<p class="title">Pourquoi chercher un emploi quand l'emploi peut venir à vous ?</p>
<p class="text">Plus de CVs, plus de candidatures sans réponse, plus de recherche sur des job boards.</p>
<p class="text-cta underline-candidates"><span class="smatchit">smatchit</span> choisi les meilleures opportunités d'emploi en temps réel et là où vous êtes !</p>
<p><img class="screenshot candidates-img" alt="screenshot of the candidates app" src="./img/candidates@2x.png"></p>
</div>
<div id="recruiter-content" class="fl w-100 ph4 center cf">
<p class="mw7 center title">Ne perdez plus de temps à rédiger un descriptif de poste ou à lire des CVs qui ne smatch pas. <span class="smatchit">smatchit</span> le fait pour vous.</p>
<p class="mw7 center text">Notre solution basée sur l'IA analyse à la fois les candidats et les offres d'emploi et vous apporte des candidats sélectionnés en temps réel, pour rendre votre recherche <strong> rapide, simple et sans stress.</strong></p>
<p class="mw7 center text-cta underline-recruiters">Utilisez votre temps à rencontrer le candidat idéal.</p>
<p><img class="screenshot recruiters-img" alt="screenshot of the recruiters app" src="./img/recruiters@2x.png"></p>
</div>
</div>
<div class="flex flex-wrap w-100 footer">
<div class="hr"></div>
<div class="w-100-m w-50-l ph4 pv2 mw7 center">
<p class="title">Voulez vous être informé des étapes de développement de <span class="smatchit">smatchit</span> ?</p>
<p class="text">Confiez-nous votre email et suivez l'aventure <span class="smatchit">smatchit</span> !</p>
</div>
<div id="mini-form" class="w-100-m w-50-l pl4 pr6 pv2 mw7 center">
<p class="ib">
<span>Vous êtes :</span>
<span class="pl2">
<input type="radio" id="candidate" name="user_type" value="candidate" class="radio-input">
<label for="candidate">talent</label>
</input>
</span>
<span class="pl2">
<input type="radio" id="recruiter" name="user_type" value="recruiter" class="radio-input">
<label for="recruiter">entreprise</label>
</input>
</span>
</p>
<p class="input-form">
<input class="mr2 textfield-input" name="user_email" type="text" placeholder="Enter your email">
<button id="sendBt" onclick="sendNotify()" class="button">
<span class="send-b">Send</span>
</button>
</p>
<div id="error"><p class="error-message">&nbsp;</p></div>
</div>
</div>
</div>
</body>
</html>