sign up page design changed

This commit is contained in:
ilmedova 2023-05-01 18:38:58 +05:00
parent fa6410a801
commit eaa5e49b66
5 changed files with 147 additions and 75 deletions

View File

@ -2,6 +2,7 @@
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
text-align: justify;
}
body {
@ -11,9 +12,9 @@ body {
}
form {
width: 42%;
margin: 10px auto;
padding: 10px 20px;
width: 55%;
margin: 20px auto;
padding: 20px 30px;
background: #fff;
border-radius: 10px;
}
@ -35,19 +36,18 @@ input[type="time"],
input[type="url"],
textarea,
select {
background: rgba(255,255,255,0.1);
border: none;
font-size: 16px;
height: 40px;
margin: 0;
outline: 0;
padding: 15px;
width: 100%;
background-color: #f4f7f8;
color: #8a97a0;
box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset;
margin-bottom: 15px;
border-radius: 6px;
background: rgba(255,255,255,0.1);
border: 1px solid #686868;
font-size: 16px;
height: 40px;
margin: 0;
outline: 0;
padding: 15px;
width: 80%;
color: #8a97a0;
box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset;
margin-bottom: 15px;
border-radius: 5px;
}
input[type="radio"]{

BIN
public/img/disclaimer.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 254 KiB

BIN
public/img/euflag.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 246 KiB

After

Width:  |  Height:  |  Size: 71 KiB

View File

@ -1,72 +1,144 @@
@extends('layouts.app')
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EU Turkmenistan</title>
<script src="/js/tailwind.js"></script>
<link rel="stylesheet" href="{{ asset('css/main.css') }}">
</head>
<body class="bg-gray-100" style="height:max-content; min-height: 100%">
<div style="display:flex; justify-content: center; align-items: center; min-height: 100%; width: 100%">
<form class="p-6" action="/submit" method="post" enctype="multipart/form-data">
<div class="flex px-2 items-center pb-8" style="justify-content: space-between">
<a href="/">
<img style="width: 150px;" src="/img/euflag.png" alt="EU-TM">
</a>
<a href="/">
<img style="width: 150px" src="/img/eutm.jpg" alt="EU-TM">
</a>
</div>
{!! $event->form_text !!}
<br/>
@csrf
<input type="hidden" value="{{ $event->id }}" name="event_id">
@section('content')
<div style="display:flex; justify-content: center; align-items: center; min-height: 100%; width: 100%">
<form class="p-4" action="/submit" method="post" enctype="multipart/form-data">
{!! $event->form_text !!}
<br/>
@csrf
<input type="hidden" value="{{ $event->id }}" name="event_id">
<div class="grid grid-cols-2 gap-2">
<div>
<label for="name"><b>Name and surname <span class="text-blue-600">(as on your photo ID)</span></b></label>
<input type="text" id="name" name="name" required placeholder="Aman Amanov">
</div>
<label for="name">Name <span class="text-red-600">*</span></label>
<input type="text" id="name" name="name" required>
<div>
<label for="name"><b>Organization</b></label>
<input type="text" id="name" name="ogranization" placeholder="European Union">
</div>
<label for="name">Organization <span class="text-red-600">*</span></label>
<input type="text" id="name" name="ogranization">
<div>
<label for="name"><b>City and country</b></label>
<input type="text" id="name" name="name" required placeholder="Ashgabat, Turkmenistan">
</div>
<label for="email">Email <span class="text-red-600">*</span></label>
<input type="email" id="mail" name="email">
<br/><br/>
<div>
<label for="email"><b>Email</b></label>
<input type="email" id="mail" name="email" placeholder="test.tps@gmail.com">
</div>
</div>
<p class="text-red-800">
*Upon your confirmation of the following, you will receive a QR code to your e-mail which you must present at the registration together with your ID.
</p><br/>
<input type="radio" id="is_attending" name="is_attending" onclick="showConsent()" required value="1">
<label class="light" for="is_attending">I confirm my participation</label>
<input type="radio" name="is_attending" id="not_attending" onclick="hideConsent()" required value="0">
<label class="light" for="not_attending">I decline the invitation</label>
<br/> <br/>
<div id="hideBlock">
<p class="text-red-800">
*Please read EEAS PRIVACY STATEMENT - DATA PROTECTION NOTICE and sign the CONSENT FORM Purpose of the filming/photo shooting
</p><a class="text-blue-500 flex" href="/storage/{{ $event->file }}">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M18.375 12.739l-7.693 7.693a4.5 4.5 0 01-6.364-6.364l10.94-10.94A3 3 0 1119.5 7.372L8.552 18.32m.009-.01l-.01.01m5.699-9.941l-7.81 7.81a1.5 1.5 0 002.112 2.13" />
</svg>
consent form
</a><br/>
*Upon your confirmation of the following, you will receive a QR code to your e-mail which you must present at the registration together with your photo ID.
</p><br/>
<input type="radio" id="consent_form" name="consent_form" required value="1">
<label class="light" for="consent_form">I consent to filming/photo shooting</label>
<input type="radio" id="is_attending" name="is_attending" onclick="showConsent()" required value="1">
<label class="light" for="is_attending">I confirm my participation</label>&nbsp;&nbsp;
<input type="radio" name="consent_form" id="not_consent_form" required value="0">
<label class="light" for="not_consent_form">I decline to be filmed</label>
<input type="radio" name="is_attending" id="not_attending" onclick="hideConsent()" required value="0">
<label class="light" for="not_attending">I decline the invitation</label>
<br/><br/>
</div>
<br/> <br/>
<div id="hideBlock">
<p class="text-blue-600 underline">
To complete your registration, please scroll down to confirm your consent for processing of personal data.
</p> <br/>
<h3 class="font-bold pb-2 text-center">INFORMATION ON PROCESSING PERSONAL DATA</h3>
<p>
The European External Action Service together with EU Delegations process personal data in accordance with Regulation (EU) 2018/1725 of the European Parliament and of the Council of 23 October 2018 on the protection of natural persons with regard to the processing of personal data by the Union institutions, bodies, offices and agencies and on the free movement of such data. Please review the <a class="text-blue-600 underline" href="https://www.eeas.europa.eu/sites/default/files/documents/2023/EEAS%20Privacy%20Statement%20Europe%20Day%202023%20HQ-EUDEL.pdf">EEAS PRIVACY STATEMENT - DATA PROTECTION NOTICE.</a>
</p><br/>
<h3 class="font-bold pb-2 text-center">CONSENT FORM FOR PROCESSING PERSONAL DATA</h3>
<p>
In relation to the event organised by the EEAS/EU Delegation, your personal data, including your name, contact details and administrative information are collected to facilitate your participation in the event/meeting, including in person or via videoconferencing tools, to implement organisational arrangements and your entry to the building or connection to the videoconference. The processing of personal data is necessary for the task carried out in the public interest for the management and functioning of the European External Action Service, as mandated by the EU Treaties.<br/><br/>
During the event you may be photographed or filmed and your camera and microphone may be recorded. If you give your consent by written or oral statement, the EEAS or the specific Delegation of the European Union may disclose, publish, transmit or, if applicable, quote such material in activities intended for the public through communication channels of the EEAS (including social media accounts and channels) to promote EU values and disseminate information related to them. You can also consent to the publication of your name and contact data in the list of participants of the meeting and the use of your data to provide you with further information about the EU.<br/><br/>
You can withdraw consent any time and object to the processing indicating it to the organisers using the functional mailbox of the EEAS/EU Delegation or the e-mail address from which you have received the invitation from. This does not influence the legality of processing your data and using your content before we receive your withdrawal. We will remove all available material and information within a reasonable time after you withdrew consent.<br/><br/>
The Data Protection Notices in the context of standard in person events and meetings as well as hybrid or online (VTC) events contain information for participants about personal data processing. Both notices are accessible on the <a class="text-blue-600 underline" href="https://www.eeas.europa.eu/eeas/data-protection_en">Data Protection pages of the EEAS</a> website within the section <a class="text-blue-600 underline" href="https://www.eeas.europa.eu/eeas/privacy-statements-data-protection-notices_en">Privacy Statements Data Protection Notices</a> under the heading ”Privacy Statements Events & Meetings” The Data Protection Notice on in-person events is available in five languages <a class="text-blue-600 underline" href="https://www.eeas.europa.eu/eeas/privacy-statements-data-protection-notices_en#1157">@EEAS webpage on Privacy Statements</a>. You can also find further information on how your data is processed if you give consent to be included in a contact list - managed by the EEAS/EU Delegation - in the EEAS Privacy Statements on <a class="text-blue-600 underline" href="https://www.eeas.europa.eu/publication/eeas-privacy-statement-data-protection-notice-purpose-processing-personal-data-1_en">Contact lists</a> and on <a class="text-blue-600 underline" href="https://www.eeas.europa.eu/eeas/eeas-privacy-statement-data-protection-notice-purpose-processing-personal-data-related-public_en">Public Diplomacy Initiatives by the EEAS</a>.<br/><br/>
In addition to personal data that we process for the purpose of organising the event/meeting to enable your participation, in this consent form you have the option to provide consent to either one or more personal data processing activities.
</p><br/><br/>
<button class="p-2 bg-blue-700 text-gray-100 mb-2" type="submit">Submit</button>
<div class="pb-3" style="display: flex; width: 100%; align-items: center">
<p>Please review detailed <a class="text-blue-600 underline" href="https://intranet.eeas.europa.eu/system/files/inline-files/EEAS%20Consent%20Template%20EVENT%20PARTICIPANTS%20-%20To%20be%20adjusted%20by%20Divisions-Delegations_EN_0.docx">CONSENT FORM</a></p>
</div>
</form>
</div>
<script>
function hideConsent(){
var elem = document.getElementById('not_consent_form');
elem.setAttribute('checked', true);
var hideblock = document.getElementById('hideBlock');
hideblock.setAttribute('style', 'display:none');
}
<div>
<p><b><i>Disclaimer: The organisers waive responsibility of videos/photos taken, shared and published by participants or other individuals, including journalists and other media fora not contracted by the EEAS or the EU Delegation.</i></b></p>
</div><br/>
function showConsent(){
var elem = document.getElementById('not_consent_form');
elem.removeAttribute('checked');
var hideblock = document.getElementById('hideBlock');
hideblock.setAttribute('style', 'display:block');
}
</script>
@endsection
<div class="pb-3" style="display: flex; width: 100%; align-items: center">
<div style="width: 3%">
<input type="checkbox" name="consent_form" id="consent_form" style="display:block">
</div>
<div style="width: 97%">
<label for="consent_form">
I consent that video(s) and/or photo(s) taken of me during the event/meeting, including web streaming and the recording of the event/meeting are used in EU communication activities including social media platforms.
</label>
</div>
</div>
<div class="pb-3" style="display: flex; width: 100%; align-items: center">
<div style="width: 3%">
<input type="checkbox" name="consent_form_second" id="consent_form_second" style="display:block">
</div>
<div style="width: 97%">
<label for="consent_form_second">
I consent that my name and contact details are included in an established contact list shared internally among EEAS services for the purpose of promoting EU public diplomacy activities/events and disseminating information, including newsletters.
</label>
</div>
</div>
<div class="pb-3" style="display: flex; width: 100%; align-items: center">
<div style="width: 3%">
<input type="checkbox" name="consent_form_third" id="consent_form_third" style="display:block">
</div>
<div style="width: 95%">
<label for="consent_form_third">
I consent that my name and contact details are published in the list of participants of the event.
</label>
</div>
</div>
<br/>
</div>
<button style="width: fit-content" class="p-2 px-8 bg-blue-800 text-gray-100 mb-2" type="submit">Submit</button>
<div class="w-full text-center">
<img class="w-2/3 pt-5 m-auto" src="/img/disclaimer.png" alt="EU-Delegation"><br/><br/>
<h4><b>Our sponsors</b></h4>
</div>
</form>
</div>
<script>
function hideConsent(){
var elem = document.getElementById('consent_form');
elem.setAttribute('checked', true);
var hideblock = document.getElementById('hideBlock');
hideblock.setAttribute('style', 'display:none');
}
function showConsent(){
var elem = document.getElementById('consent_form');
elem.removeAttribute('checked');
var hideblock = document.getElementById('hideBlock');
hideblock.setAttribute('style', 'display:block');
}
</script>
</body>
</html>