forked from Marco-Ammann/join-813
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcontacts.html
116 lines (103 loc) · 5.84 KB
/
contacts.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contacts | Join</title>
<link rel="stylesheet" href="./style/fonts.css">
<link rel="stylesheet" href="./style/contacts.css">
<script defer src="./js/contacts_HTML.js"></script>
<script defer src="./js/contacts.js"></script>
<script defer src="./js/array.js"></script>
<link rel="stylesheet" href="./assets/header-sidebar/header_sidebar.css">
<script src="./js/login_signup/storage.js"></script>
<script defer src="./assets/header-sidebar/header_sidebar.js"></script>
<!-- SVG -->
<link rel="icon" type="image/svg+xml" href="./assets/favicon/logo-black.svg" media="(prefers-color-scheme: light)">
<link rel="icon" type="image/svg+xml" href="./assets/favicon/logo-white.svg" media="(prefers-color-scheme: dark)">
<!-- 96x96 -->
<link rel="icon" type="image/png" href="./assets/favicon/logo-black-96.png" media="(prefers-color-scheme: light)" sizes="96x96">
<link rel="icon" type="image/png" href="./assets/favicon/logo-white-96.png" media="(prefers-color-scheme: dark)" sizes="96x96">
<!-- 32x32 -->
<link rel="icon" type="image/png" href="./assets/favicon/logo-black-32.png" media="(prefers-color-scheme: light)" sizes="32x32">
<link rel="icon" type="image/png" href="./assets/favicon/logo-white-32.png" media="(prefers-color-scheme: dark)" sizes="32x32">
<!-- 16x16 -->
<link rel="icon" type="image/png" href="./assets/favicon/logo-black-16.png" media="(prefers-color-scheme: light)" sizes="16x16">
<link rel="icon" type="image/png" href="./assets/favicon/logo-white-16.png" media="(prefers-color-scheme: dark)" sizes="16x16">
</head>
<body onload="init(), initContacts()">
<!-- Header template -->
<div w3-include-html="./assets/header-sidebar/header_sidebar.html"></div>
<!-- Content -->
<div id="content" class="content d-flex">
<div id="contact-list-container">
<div class="add-new noselect">
<div onclick="openAddNewContact()" class="add-new-button">
<span>Add new contact</span>
<img src="./assets/img/Desktop/contacts/person_add.svg">
</div>
</div>
<div onclick="openAddNewContact()" class="add-new-mobile">
<img src="./assets/img/Desktop/contacts/person_add.svg">
</div>
<div id="contactList" class="contact-list noselect">
</div>
</div>
<div id="main" class="main">
<section class="title">
<div class="contacts-title">
<h1>Contacts</h1>
<img onclick="closeContactMobile()" class="mobile-arrow"
src="./assets/img/Desktop/general_elements/arrow_left/default.svg" alt="Go Back">
</div>
<img src="./assets/img/Desktop/general_elements/bar/vector_blue.svg">
<span>Better with a team</span>
<img class="mobile-vector" src="./assets/img/Mobile/contacts_mobile/Vector 5.svg">
</section>
<section class="info" id="contactsInfo">
</section>
<div class="message-container">
<div id="message" class="message d-none">
<span>Contact succesfully created</span>
</div>
</div>
</div>
<div id="popUp" onclick="closePopUp()" class="popup-bg d-none">
<div class="popup" onclick="doNotClose(event)">
<div class="popup-title">
<img class="mobile-x" onclick="closePopUp()" src="./assets/img/Mobile/contacts_mobile/close.svg"
alt="Close">
<div class="p-relative">
<img class="popup-logo" src="./assets/img/Desktop/general_elements/join_light.svg" alt="Join">
</div>
<h1 id="popUpTitle">Add contact</h1>
<span id="popUpSubtitle">Tasks are better with a team!</span>
<img id="popUpVector" src="./assets/img/Desktop/general_elements/bar/vector_blue_vertical.svg">
</div>
<div class="popup-fields">
<div>
<img class="x-button noselect" onclick="closePopUp()"
src="./assets/img/Desktop/contacts/close.svg" alt="Close">
</div>
<div class="popup-section">
<div id="popUpProfile" class="popup-profile noselect"><img
src="./assets/img/Desktop/contacts/person.svg" alt="Profile-Image"></div>
<form class="popup-input noselect" onsubmit="return addNewContact()">
<input pattern="[a-zA-Z ]+" type="text" placeholder="Name" id="popUpName" required>
<input pattern="^[\w\.\+\-]+@[a-zA-Z0-9\.\-]+\.[a-zA-Z]{2,}$" type="email" placeholder="Email" id="popUpEmail" required>
<input title="Only +, numbers & spaces are allowed" pattern="[+]?[\d ]*" type="tel"
placeholder="Phone" id="popUpPhone" required>
<div id="popup-buttons" class="popup-buttons">
<button onclick="closePopUp()" type="button">Cancel<img
src="./assets/img/Desktop/contacts/iconoir_cancel.svg" alt="Cancel"></button>
<button id="popUpSubmit" type="submit">Create contact<img
src="./assets/img/Desktop/contacts/check.svg" alt="Create Contact"></button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>