0% found this document useful (0 votes)
5 views4 pages

Verif

The document is an HTML file for a web form titled 'Sélection Premium' that allows users to select a country, number, and tariff. It includes styling and JavaScript functionality to enhance user interaction, such as using the Select2 library for dropdowns and AJAX for dynamic content loading. The form submission is handled via AJAX to save the selected data and redirect the user based on the response.

Uploaded by

flashaquenn2006
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
5 views4 pages

Verif

The document is an HTML file for a web form titled 'Sélection Premium' that allows users to select a country, number, and tariff. It includes styling and JavaScript functionality to enhance user interaction, such as using the Select2 library for dropdowns and AJAX for dynamic content loading. The form submission is handled via AJAX to save the selected data and redirect the user based on the response.

Uploaded by

flashaquenn2006
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 4

<!-- index.

php -->
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sélection Premium</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css"
rel="stylesheet" />
<style>
:root {
--primary: #2A2F4F;
--secondary: #917FB3;
--accent: #E5BEEC;
--background: #FDE2F3;
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', sans-serif;
}

body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(45deg, var(--background), #ffffff);
padding: 20px;
}

.container {
background: rgba(255, 255, 255, 0.95);
padding: 40px;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
width: 100%;
max-width: 600px;
transform: translateY(0);
transition: transform 0.3s ease;
}

.container:hover {
transform: translateY(-5px);
}

.form-group {
margin-bottom: 30px;
position: relative;
}

label {
display: block;
margin-bottom: 10px;
color: var(--primary);
font-weight: 600;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 1px;
}

.select2-container--default .select2-selection--single {
height: 50px;
border: 2px solid #eee;
border-radius: 10px;
padding: 10px;
transition: all 0.3s ease;
}

.select2-container--default .select2-selection--single:hover {
border-color: var(--secondary);
}

.select2-container--open .select2-selection--single {
border-color: var(--primary) !important;
}

button {
background: var(--primary);
color: white;
border: none;
padding: 15px 40px;
border-radius: 25px;
font-size: 16px;
cursor: pointer;
transition: all 0.3s ease;
display: block;
width: 100%;
position: relative;
overflow: hidden;
}

button:hover {
background: var(--secondary);
letter-spacing: 2px;
}

button::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 300px;
height: 300px;
background: rgba(255,255,255,0.1);
border-radius: 50%;
transform: translate(-50%, -50%) scale(0);
animation: pulse 1.5s infinite;
}

@keyframes pulse {
0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}
@media (max-width: 768px) {
.container {
padding: 20px;
}
}
</style>
</head>
<body>
<div class="container">
<form id="mainForm">
<div class="form-group">
<label>Pays</label>
<select id="country" class="form-control" required>
<option value="">Sélectionnez un pays</option>
<?php include 'get_countries.php'; ?>
</select>
</div>

<div class="form-group">
<label>Numéro</label>
<select id="number" class="form-control" required disabled>
<option value="">Choisissez d'abord un pays</option>
</select>
</div>

<div class="form-group">
<label>Tarif</label>
<select id="tariff" class="form-control" required>
<option value="">Sélectionnez un tarif</option>
<?php include 'get_tariffs.php'; ?>
</select>
</div>

<button type="submit">CONFIRMER →</button>


</form>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></
script>
<script>
$(document).ready(function() {
$('.form-control').select2({
minimumResultsForSearch: Infinity
});

$('#country').change(function() {
const countryId = $(this).val();
$('#number').prop('disabled', !countryId);

if(countryId) {
$.ajax({
url: 'get_numbers.php',
method: 'POST',
data: { country_id: countryId },
success: function(data) {
$('#number').html(data);
}
});
}
});

$('#mainForm').submit(function(e) {
e.preventDefault();

const formData = {
country: $('#country').val(),
number: $('#number').val(),
tariff: $('#tariff').val()
};

$.ajax({
url: 'save.php',
method: 'POST',
data: formData,
success: function(response) {
const result = JSON.parse(response);
if(result.success) {
window.location.href = result.redirect;
}
}
});
});

// Animation au changement de tarif


$('#tariff').on('select2:select', function() {
$('.container').css('background', 'rgba(255,255,255,0.95)');
setTimeout(() => {
$('.container').css({
'background': 'linear-gradient(45deg, #FDE2F3, #ffffff)',
'transition': 'background 0.5s ease'
});
}, 100);
});
});
</script>
</body>
</html>

You might also like