Files

639 lines
38 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Contacts Settings</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="theme-color" content="#fff">
<meta name="format-detection" content="telephone=no">
<meta name="description" content="Page description"><!-- Twitter Card data-->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@publisher_handle">
<meta name="twitter:title" content="Page Title">
<meta name="twitter:description" content="Page description less than 200 characters">
<meta name="twitter:creator" content="@author_handle">
<meta name="twitter:image" content="http://www.example.com/image.jpg"><!-- Open Graph data-->
<meta property="og:title" content="Title Here">
<meta property="og:type" content="article">
<meta property="og:url" content="http://www.example.com/">
<meta property="og:image" content="http://example.com/image.jpg">
<meta property="og:description" content="Description Here">
<meta property="og:site_name" content="Site Name, i.e. Moz">
<meta property="fb:admins" content="Facebook numeric ID">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&amp;display=swap" rel="stylesheet">
<link rel="stylesheet" media="all" href="css/app.css"><!-- favicon-->
<link rel="apple-touch-icon" sizes="180x180" href="img/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="img/favicon-16x16.png">
<link rel="manifest" href="img/site.webmanifest">
<link rel="mask-icon" href="img/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
</head>
<body>
<!-- page-->
<div class="page">
<!-- sidebar-->
<div class="sidebar js-sidebar">
<div class="sidebar__nav">
<!-- nav-->
<nav class="nav js-nav"><a class="nav__link nav__link_head" href="/">
<div class="nav__preview"><img class="nav__pic" src="img/logo.svg" alt="Logo"></div>
<div class="nav__title"><img class="nav__pic" src="img/betaCRM.svg" alt="betaCRM"></div>
</a>
<div class="nav__list">
<!-- mobile primary menu-->
<div class="nav__primary js-nav-primary">
<div class="nav__group"><a class="nav__link active" href="#" title="Dashboard">
<div class="nav__preview"><i class="la la-tachometer-alt "></i></div>
<div class="nav__title">Dashboard</div>
</a><a class="nav__link" href="#" title="Projects">
<div class="nav__preview"><i class="la la-toolbox "></i></div>
<div class="nav__title">Projects</div>
</a><a class="nav__link" href="#" title="Tasks">
<div class="nav__preview"><i class="la la-clipboard-check "></i></div>
<div class="nav__title">Tasks</div>
</a><a class="nav__link" href="#" title="Kanban">
<div class="nav__preview"><i class="la la-images "></i></div>
<div class="nav__title">Kanban</div>
</a><a class="nav__link" href="#" title="Calendar">
<div class="nav__preview"><i class="la la-calendar-week "></i></div>
<div class="nav__title">Calendar</div>
</a><a class="nav__link nav__link_menu js-nav-link-menu" href="#">
<div class="nav__preview"><i class="la la-bars "></i></div>
</a></div>
</div><!-- mobile secondary menu-->
<div class="nav__secondary js-nav-secondary">
<div class="nav__group"><a class="nav__link" href="#" title="Contacts">
<div class="nav__preview"><i class="la la-user-lock "></i></div>
<div class="nav__title">Contacts</div>
</a><a class="nav__link" href="#" title="Messages">
<div class="nav__preview"><i class="la la-comments "></i>
<div class="nav__online online"></div>
</div>
<div class="nav__title">Messages</div>
</a><a class="nav__link" href="#" title="Products">
<div class="nav__preview"><i class="la la-cube "></i></div>
<div class="nav__title">Products</div>
</a><a class="nav__link" href="#" title="Invoices">
<div class="nav__preview"><i class="la la-calculator "></i></div>
<div class="nav__title">Invoices</div>
</a><a class="nav__link" href="#" title="File Browser">
<div class="nav__preview"><i class="la la-folder-open "></i></div>
<div class="nav__title">File Browser</div>
</a><a class="nav__link" href="#" title="Notifications">
<div class="nav__preview"><i class="la la-bullseye "></i>
<div class="nav__online online bg-red-raw"></div>
</div>
<div class="nav__title">Notifications</div>
</a><a class="nav__link" href="#" title="Reports">
<div class="nav__preview"><i class="la la-chart-area "></i></div>
<div class="nav__title">Reports</div>
</a><a class="nav__link" href="#" title="Help Center">
<div class="nav__preview"><i class="la la-question "></i></div>
<div class="nav__title">Help Center</div>
</a><a class="nav__link nav__link_user" href="#" title="John Doe">
<div class="nav__preview"><img class="nav__pic" src="img/user-1.jpg" alt="User">
<div class="nav__online online"></div>
</div>
<div class="nav__title">John Doe</div>
</a></div>
</div>
</div>
</nav>
</div>
<div class="sidebar__container js-sidebar-container">
<div class="sidebar__head">
<div class="sidebar__preview"><img class="sidebar__pic" src="img/user-1.jpg" alt="User"></div>
<div class="sidebar__wrap">
<div class="sidebar__title">Vincent Moody</div>
<div class="sidebar__text">UI/UX Designer</div>
</div><button class="sidebar__action sidebar__action_toggle action js-sidebar-toggle"><i class="la la-angle-left "></i></button>
</div>
<div class="sidebar__inner">
<div class="sidebar__section">
<!-- info-->
<div class="info">
<div class="info__section">
<div class="info__title">About</div>
<div class="info__body">
<div class="info__text">Color is so powerful that it can persuade, motivate, inspire and touch people’s soft spot the heart. This is the reason why understanding colors is pretty crucial in relating.</div>
</div>
</div>
<div class="info__section">
<div class="info__title">Members</div>
<div class="info__body">
<div class="members">
<div class="members__item"><img class="members__pic" src="img/user-1.jpg" alt="User" /></div>
<div class="members__item"><img class="members__pic" src="img/user-2.jpg" alt="User" /></div>
<div class="members__item"><img class="members__pic" src="img/user-3.jpg" alt="User" /></div>
<div class="members__item"><button class="action action_stroke"><i class="la la-plus "></i></button></div>
</div>
</div>
</div>
<div class="info__section">
<div class="info__title">Contact details</div>
<div class="info__body">
<!-- contacts-->
<div class="contacts">
<div class="contacts__item">
<div class="contacts__icon"><i class="la la-envelope-open "></i></div>
<div class="contacts__detail">johanna.stevens<wbr>@gmail.com</div>
</div>
<div class="contacts__item">
<div class="contacts__icon"><i class="la la-fax "></i></div>
<div class="contacts__detail">402-001-4477</div>
</div>
<div class="contacts__item">
<div class="contacts__icon"><i class="la la-globe-americas "></i></div>
<div class="contacts__detail">05 Otilia Brook Apt. 181</div>
</div>
</div>
</div>
</div>
<div class="info__section">
<div class="info__title">Categories</div>
<div class="info__body">
<!-- tag group-->
<div class="tag-group">
<div class="tag gray">Designers</div>
<div class="tag gray">Employees</div>
</div>
</div>
</div>
<div class="info__section">
<div class="info__title">Overall progress</div>
<div class="info__body">
<div class="info__cover">
<div class="info__stats">
<div class="info__subtitle">Tasks</div>
<div class="info__values"><strong>96</strong> / 148</div>
</div><!-- progress-->
<div class="info__progress progress">
<div class="progress__value bg-red-raw" style="width: 30%"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="sidebar__section">
<div class="history">
<div class="history__container">
<div class="history__head">
<div class="history__wrap">
<div class="history__title title title_sm">Conversion history</div>
<div class="history__text">Week to week performance</div>
</div><a class="history__link" href="#"><i class="la la-chart-area "></i></a>
</div>
<div class="history__chart">
<div id="chart-history-area"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div><!-- container-->
<div class="container js-container">
<div class="container__head"><button class="container__action container__action_menu action js-container-toggle"><i class="la la-bars "></i></button>
<div class="container__title title title_md">Account Settings</div><!-- search-->
<div class="container__search search js-search"><button class="search__action action js-search-open"><i class="la la-search "></i></button>
<div class="search__dropdown js-search-dropdown">
<div class="search__field"><input class="search__input js-search-input" type="search" placeholder="Start typing…">
<div class="search__icon"><i class="la la-search "></i></div>
</div>
<div class="search__results js-search-results"><a class="search__result" href="#">
<div class="search__cell">
<div class="search__preview color-red"><i class="lab la-dribbble "></i></div>
</div>
<div class="search__cell">
<div class="search__title">Dribble Redesign</div>
<div class="search__text">Webdesign</div>
</div>
<div class="search__cell mobile-hide">
<!-- tag-->
<div class="search__tag tag gray">24 Feb 2019</div>
</div>
</a><a class="search__result" href="#">
<div class="search__cell">
<div class="search__preview color-green"><i class="lab la-evernote "></i></div>
</div>
<div class="search__cell">
<div class="search__title">New HTML Theme</div>
<div class="search__text">Theme</div>
</div>
<div class="search__cell mobile-hide">
<!-- tag-->
<div class="search__tag tag gray">20 May 2019</div>
</div>
</a><a class="search__result" href="#">
<div class="search__cell">
<div class="search__preview"><img class="search__pic" src="img/user-1.jpg" alt="User"></div>
</div>
<div class="search__cell">
<div class="search__title">Bradley Wilkins</div>
<div class="search__text">[email protected]</div>
</div>
<div class="search__cell mobile-hide">
<!-- tag-->
<div class="search__tag tag gray">Designer</div>
</div>
</a></div>
</div>
<div class="search__backdrop backdrop js-search-backdrop"></div>
</div><!-- new-->
<div class="container__new new js-new"><button class="new__action action js-new-open"><i class="la la-plus-circle "></i></button>
<div class="new__dropdown js-new-dropdown"><a class="new__item" href="#">
<div class="new__icon"><i class="la la-toolbox "></i></div>
<div class="new__title">New Project</div>
</a><a class="new__item" href="#">
<div class="new__icon"><i class="la la-clipboard-check "></i></div>
<div class="new__title">New Task</div>
</a><a class="new__item" href="#">
<div class="new__icon"><i class="la la-user-lock "></i></div>
<div class="new__title">New Contact</div>
</a><a class="new__item" href="#">
<div class="new__icon"><i class="la la-calendar-week "></i></div>
<div class="new__title">New Event</div>
</a><a class="new__item" href="#">
<div class="new__icon"><i class="la la-cube "></i></div>
<div class="new__title">New Product</div>
</a><a class="new__item" href="#">
<div class="new__icon"><i class="la la-calculator "></i></div>
<div class="new__title">New Invoice</div>
</a></div>
<div class="new__backdrop backdrop js-new-backdrop"></div>
</div>
</div>
<div class="container__body">
<!-- panel-->
<div class="panel">
<div class="panel__body">
<!-- settings-->
<div class="settings">
<div class="settings__container">
<div class="settings__inner">
<div class="settings__tab" style="display: block" data-tabs-group="settings" data-tabs-item="01">
<!-- form-->
<div class="form form_settings">
<!-- upload-->
<div class="form__field upload"><input class="upload__input" type="file"><!-- caption-->
<div class="upload__caption caption"><i class="la la-cloud-upload-alt "></i>Upload Image</div>
</div>
<div class="form__row">
<div class="form__col">
<div class="field form__field">
<div class="field__label">Full name</div>
<div class="field__wrap"><input class="field__input" type="text" placeholder="Start typing…">
<div class="field__icon"><i class="la la-user "></i></div>
</div>
</div>
</div>
<div class="form__col">
<div class="field form__field">
<div class="field__label">Role</div>
<div class="field__wrap"><input class="field__input" type="text" placeholder="Start typing…">
<div class="field__icon"><i class="la la-user-cog "></i></div>
</div>
</div>
</div>
</div>
<div class="form__row">
<div class="form__col">
<div class="field form__field">
<div class="field__label">Email</div>
<div class="field__wrap"><input class="field__input" type="email" placeholder="Start typing…">
<div class="field__icon"><i class="la la-envelope "></i></div>
</div>
</div>
</div>
<div class="form__col">
<div class="field form__field">
<div class="field__label">Phone</div>
<div class="field__wrap"><input class="field__input" type="text" placeholder="Start typing…">
<div class="field__icon"><i class="la la-fax "></i></div>
</div>
</div>
</div>
</div>
<div class="field form__field">
<div class="field__label">Address line</div>
<div class="field__wrap"><input class="field__input" type="text" placeholder="Start typing…">
<div class="field__icon"><i class="la la-city "></i></div>
</div>
</div>
<div class="form__row">
<div class="form__col">
<div class="field form__field">
<div class="field__label">Language</div>
<div class="field__wrap"><select class="field__select">
<option disabled selected>Select language</option>
<option>English</option>
<option>Chinese</option>
<option>Spanish</option>
</select>
<div class="field__icon"><i class="la la-angle-down "></i></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="settings__tab" style="display: none" data-tabs-group="settings" data-tabs-item="02">
<!-- form-->
<div class="form form_settings">
<div class="form__row">
<div class="form__col">
<div class="field form__field active">
<div class="field__label">Account</div>
<div class="field__wrap"><input class="field__input" type="text" value="Facebook">
<div class="field__icon"><i class="la la-facebook "></i></div>
</div>
</div>
</div>
<div class="form__col">
<div class="field form__field">
<div class="field__label">Link</div>
<div class="field__wrap"><input class="field__input" type="text" placeholder="Start typing…">
<div class="field__icon"><i class="la la-link "></i></div>
</div>
</div>
</div>
</div>
<div class="form__row">
<div class="form__col">
<div class="field form__field active">
<div class="field__label">Account</div>
<div class="field__wrap"><input class="field__input" type="text" value="Twitter">
<div class="field__icon"><i class="la la-twitter "></i></div>
</div>
</div>
</div>
<div class="form__col">
<div class="field form__field">
<div class="field__label">Link</div>
<div class="field__wrap"><input class="field__input" type="text" placeholder="Start typing…">
<div class="field__icon"><i class="la la-link "></i></div>
</div>
</div>
</div>
</div>
<div class="form__row">
<div class="form__col">
<div class="field form__field active">
<div class="field__label">Account</div>
<div class="field__wrap"><input class="field__input" type="text" value="Skype">
<div class="field__icon"><i class="la la-skype "></i></div>
</div>
</div>
</div>
<div class="form__col">
<div class="field form__field">
<div class="field__label">Link</div>
<div class="field__wrap"><input class="field__input" type="text" placeholder="Start typing…">
<div class="field__icon"><i class="la la-link "></i></div>
</div>
</div>
</div>
</div>
<div class="form__row">
<div class="form__col">
<div class="field form__field active">
<div class="field__label">Account</div>
<div class="field__wrap"><input class="field__input" type="text" value="Behance">
<div class="field__icon"><i class="la la-behance "></i></div>
</div>
</div>
</div>
<div class="form__col">
<div class="field form__field">
<div class="field__label">Link</div>
<div class="field__wrap"><input class="field__input" type="text" placeholder="Start typing…">
<div class="field__icon"><i class="la la-link "></i></div>
</div>
</div>
</div>
</div><!-- caption--><button class="form__caption caption"><i class="la la-plus-circle "></i>Add more</button>
</div>
</div>
<div class="settings__tab" style="display: none" data-tabs-group="settings" data-tabs-item="03">
<!-- form-->
<div class="form form_settings">
<div class="form__title">Change password</div>
<div class="form__row">
<div class="form__col">
<div class="field form__field">
<div class="field__label">Current password</div>
<div class="field__wrap"><input class="field__input" type="password" placeholder="Start typing…">
<div class="field__icon"><i class="la la-lock "></i></div>
</div>
</div>
</div>
<div class="form__col">
<div class="field form__field">
<div class="field__label">New password</div>
<div class="field__wrap"><input class="field__input" type="password" placeholder="Start typing…">
<div class="field__icon"><i class="la la-lock "></i></div>
</div>
</div>
</div>
</div>
<div class="form__title">Security questions</div>
<div class="form__row">
<div class="form__col">
<div class="field form__field">
<div class="field__label">Questions #1</div>
<div class="field__wrap"><input class="field__input" type="password" placeholder="Start typing…">
<div class="field__icon"><i class="la la-question "></i></div>
</div>
</div>
</div>
<div class="form__col">
<div class="field form__field">
<div class="field__label">Answer</div>
<div class="field__wrap"><input class="field__input" type="password" placeholder="Start typing…">
<div class="field__icon"><i class="la la-newspaper "></i></div>
</div>
</div>
</div>
</div>
<div class="form__row">
<div class="form__col">
<div class="field form__field">
<div class="field__label">Questions #2</div>
<div class="field__wrap"><input class="field__input" type="password" placeholder="Start typing…">
<div class="field__icon"><i class="la la-question "></i></div>
</div>
</div>
</div>
<div class="form__col">
<div class="field form__field">
<div class="field__label">Answer</div>
<div class="field__wrap"><input class="field__input" type="password" placeholder="Start typing…">
<div class="field__icon"><i class="la la-newspaper "></i></div>
</div>
</div>
</div>
</div><!-- caption--><button class="form__caption caption"><i class="la la-plus-circle "></i>Add more</button>
</div>
</div>
<div class="settings__tab" style="display: none" data-tabs-group="settings" data-tabs-item="04">
<!-- form-->
<div class="form form_settings">
<div class="form__title">Payment details</div><!-- details-->
<div class="form__details details">
<div class="details__row">
<div class="details__cell details__cell_lg color-gray">Payment method</div>
<div class="details__cell">MasterCard ending in 4078, exp: 08/2020</div>
<div class="details__cell"><a class="details__link" href="#">Update</a></div>
</div>
<div class="details__row">
<div class="details__cell details__cell_lg color-gray">Billing period</div>
<div class="details__cell">Plan billed monthly</div>
<div class="details__cell"><a class="details__link" href="#">Update</a></div>
</div>
<div class="details__row">
<div class="details__cell details__cell_lg color-gray">License keys</div>
<div class="details__cell"><a class="details__link" href="#">Redeem a license key</a></div>
</div>
</div>
<div class="form__title">Payment history</div><!-- details-->
<div class="form__details details">
<div class="details__row">
<div class="details__cell details__cell_lg color-gray">21 Oct 2018</div>
<div class="details__cell">CRM Pro (9/21/2018 to 10/21/2019)</div>
<div class="details__cell"><strong>$34.00</strong></div>
<div class="details__cell"><a class="details__link" href="#">Invoice</a></div>
</div>
<div class="details__row">
<div class="details__cell details__cell_lg color-gray">21 Oct 2018</div>
<div class="details__cell">CRM Pro (9/21/2018 to 10/21/2019)</div>
<div class="details__cell"><strong>$34.00</strong></div>
<div class="details__cell"><a class="details__link" href="#">Invoice</a></div>
</div>
<div class="details__row">
<div class="details__cell details__cell_lg color-gray">21 Oct 2018</div>
<div class="details__cell">CRM Pro (9/21/2018 to 10/21/2019)</div>
<div class="details__cell"><strong>$34.00</strong></div>
<div class="details__cell"><a class="details__link" href="#">Invoice</a></div>
</div>
</div>
</div>
</div>
<div class="settings__tab" style="display: none" data-tabs-group="settings" data-tabs-item="05">
<!-- subscriptions-->
<div class="subscriptions">
<div class="subscriptions__item">
<div class="subscriptions__cell">
<div class="subscriptions__title active">Product updates</div>
<div class="subscriptions__text">Stair Lifts Feel The Freedom Of Your Home</div>
</div>
<div class="subscriptions__cell">
<!-- switch--><label class="switch switch_toggle"><input class="switch__input" type="checkbox" checked><span class="switch__content"></span></label></div>
</div>
<div class="subscriptions__item">
<div class="subscriptions__cell">
<div class="subscriptions__title">Product updates</div>
<div class="subscriptions__text">A Right Media Mix Can Make The Difference</div>
</div>
<div class="subscriptions__cell">
<!-- switch--><label class="switch switch_toggle"><input class="switch__input" type="checkbox"><span class="switch__content"></span></label></div>
</div>
<div class="subscriptions__item">
<div class="subscriptions__cell">
<div class="subscriptions__title">Comments</div>
<div class="subscriptions__text">Advertising Relationships Vs Business Decisions</div>
</div>
<div class="subscriptions__cell">
<!-- switch--><label class="switch switch_toggle"><input class="switch__input" type="checkbox"><span class="switch__content"></span></label></div>
</div>
<div class="subscriptions__item">
<div class="subscriptions__cell">
<div class="subscriptions__title">Notifications</div>
<div class="subscriptions__text">Creating Remarkable Poster Prints Through</div>
</div>
<div class="subscriptions__cell">
<!-- switch--><label class="switch switch_toggle"><input class="switch__input" type="checkbox"><span class="switch__content"></span></label></div>
</div>
</div>
</div>
</div>
<div class="settings__foot">
<div class="settings__btns"><button class="settings__btn btn">Update Settings</button><button class="settings__btn btn btn_light mobile-hide">Cancel</button></div>
</div>
</div>
<div class="settings__sidebar">
<!-- menu-->
<div class="menu js-menu">
<div class="menu__head js-menu-head">
<div class="menu__item js-menu-item">
<div class="menu__icon"><i class="la la-user-edit "></i></div>
<div class="menu__wrap">
<div class="menu__title">General Information</div>
<div class="menu__text">Main settings and details</div>
</div>
</div><button class="menu__action action js-menu-toggle"><i class="la la-bars "></i></button>
</div>
<div class="menu__container js-menu-container">
<div class="menu__section"><a class="menu__item js-menu-item active" href="#" data-menu-group="settings" data-menu-item="01">
<div class="menu__icon"><i class="la la-user-edit "></i></div>
<div class="menu__wrap">
<div class="menu__title">General Information</div>
<div class="menu__text">Main settings and details</div>
</div>
</a><a class="menu__item js-menu-item" href="#" data-menu-group="settings" data-menu-item="02">
<div class="menu__icon"><i class="la la-puzzle-piece "></i></div>
<div class="menu__wrap">
<div class="menu__title">Account &amp; Apps</div>
<div class="menu__text">Connected tools &amp; services</div>
</div>
</a><a class="menu__item js-menu-item" href="#" data-menu-group="settings" data-menu-item="03">
<div class="menu__icon"><i class="la la-umbrella "></i></div>
<div class="menu__wrap">
<div class="menu__title">Security</div>
<div class="menu__text">Password &amp; security questions</div>
</div>
</a><a class="menu__item js-menu-item" href="#" data-menu-group="settings" data-menu-item="04">
<div class="menu__icon"><i class="la la-credit-card "></i></div>
<div class="menu__wrap">
<div class="menu__title">Billing</div>
<div class="menu__text">Setup payment methods</div>
</div>
</a><a class="menu__item js-menu-item" href="#" data-menu-group="settings" data-menu-item="05">
<div class="menu__icon"><i class="la la-bell "></i></div>
<div class="menu__wrap">
<div class="menu__title">Notifications</div>
<div class="menu__text">Set your email notifications</div>
</div>
</a></div>
<div class="menu__section"><a class="menu__item" href="#" data-menu-group="settings" data-menu-item="">
<div class="menu__icon"><i class="la la-trash-alt "></i></div>
<div class="menu__wrap">
<div class="menu__title">Delete Project</div>
<div class="menu__text">Hide &amp; disable current project</div>
</div>
</a></div>
</div>
<div class="menu__backdrop backdrop js-menu-backdrop"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div><!-- modals-->
<!-- scripts-->
<script src="js/lib/jquery.min.js"></script>
<script src="js/lib/datepicker.min.js"></script>
<script src="js/lib/datepicker.en.js"></script>
<script src="js/lib/select2.min.js"></script>
<script src="js/lib/wNumb.min.js"></script>
<script src="js/lib/nouislider.min.js"></script>
<script src="js/lib/apexcharts.min.js"></script>
<script src="js/charts.js"></script>
<script src="js/app.js"></script>
</body>
</html>