API tools faq
paste
Guest User

Untitled

a guest
Jul 13th, 2018
330
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 23.15 KB | None | 0 0
raw download clone embed print report
  1. <html lang="en">
  2.  
  3. <head>
  4. <title>Web Support Contact Tracker</title>
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <link href="css/app.css" rel="stylesheet">
  7. </head>
  8.  
  9. <body>
  10. <a href="#form"><span class="sr-only">skip to main content</span></a>
  11. <header>
  12. <div class="nw-library-brand nw-container nw-inner-bun--lg">
  13. <div class="h4 nw-bottom-none ">
  14. <h1>Web Support Contact Tracker</h1></div>
  15. <img class="nw-library-logo" src="images/header-logo.svg" alt="Nationwide logo">
  16. </div>
  17. </header>
  18.  
  19. <div id="container" class="nw-container">
  20.  
  21. <!-- Modal Call Data Submitted -->
  22. <div class="modal" id="success-submit-call" tabindex="-1" role="dialog" aria-labelledby="successCallSubmitted" aria-hidden="true">
  23. <div class="modal-dialog" role="document">
  24. <div class="modal-content">
  25. <div class="modal-header">
  26. <h5 class="modal-title" id="success-submit-call-header">Success!</h5>
  27. </div>
  28. <div class="modal-body">
  29. <div class="media">
  30. <div class="media-left">
  31. <span class="nw-modal-icon nw-icon-checkmark nw-fg-green"></span>
  32. </div>
  33. <div class="media-body">
  34. <span>Call data submitted successfully.</span>
  35. </div>
  36. </div>
  37. </div>
  38.  
  39. </div>
  40. </div>
  41. </div>
  42.  
  43. <!-- Modal Disconnected Call Submitted -->
  44. <div class="modal" id="success-submit-disconnect" tabindex="-1" role="dialog" aria-labelledby="successDisconnectSubmitted" aria-hidden="true">
  45. <div class="modal-dialog" role="document">
  46. <div class="modal-content">
  47. <div class="modal-header">
  48. <h5 class="modal-title" id="success-submit-disconnect-header">Call disconnected</h5>
  49. </div>
  50. <div class="modal-body">
  51. <div class="media">
  52. <div class="media-left">
  53. <span class="nw-modal-icon nw-icon-info nw-fg-blue"></span>
  54. </div>
  55. <div class="media-body">
  56. <span><span>Disconnected call submitted.</span></span>
  57. </div>
  58. </div>
  59. </div>
  60.  
  61. </div>
  62. </div>
  63. </div>
  64.  
  65. <form id="form">
  66. <div class="row">
  67. <div class="col-sm-6">
  68. <div class="row form-group">
  69. <div class="col-md-12">
  70. <fieldset>
  71. <legend>Session source&nbsp;*</legend>
  72. <div class="styled-radio-container clearfix">
  73. <div class="toggle__switch">
  74. <input type="radio" name="session-source-radio" id="session-source-call" tabindex="1">
  75. <label for="session-source-call">Call</label>
  76. <input type="radio" name="session-source-radio" id="session-source-email" tabindex="2">
  77. <label for="session-source-email">Email</label>
  78. <input type="radio" name="session-source-radio" id="session-source-chat" tabindex="3">
  79. <label for="session-source-chat">Chat</label>
  80. </div>
  81. </div>
  82. </fieldset>
  83. <span class="alert alert-danger nw-field-error" role="alert" id="session-source-error" style="display:none;">Selection is required</span>
  84. </div>
  85. </div>
  86.  
  87.  
  88.  
  89. <div class="row form-group">
  90. <div class="col-md-12">
  91. <fieldset>
  92. <legend for="">Digital source&nbsp;*</legend>
  93. <div class="styled-radio-container clearfix">
  94. <div class="toggle__switch">
  95. <input type="radio" name="digital-source-radio" id="digital-source-nw" tabindex="4">
  96. <label for="digital-source-nw">NW</label>
  97. <input type="radio" name="digital-source-radio" id="digital-source-allied" tabindex="5">
  98. <label for="digital-source-allied">Allied</label>
  99. <input type="radio" name="digital-source-radio" id="digital-source-mobile" tabindex="6">
  100. <label for="digital-source-mobile">Mobile</label>
  101. <input type="radio" name="digital-source-radio" id="digital-source-ns" tabindex="7">
  102. <label for="digital-source-ns">NS</label>
  103. <input type="radio" name="digital-source-radio" id="digital-source-comm" tabindex="8">
  104. <label for="digital-source-comm">Comm</label>
  105. </div>
  106. </div>
  107. </fieldset>
  108. <span class="alert alert-danger nw-field-error" role="alert" id="digital-source-error" style="display:none;">Selection is required</span>
  109. </div>
  110. </div>
  111.  
  112. <div class="row form-group">
  113. <div class="col-md-12">
  114. <fieldset>
  115. <legend for="">Caller type&nbsp;*</legend>
  116. <div class="styled-radio-container clearfix">
  117. <div class="toggle__switch">
  118. <input type="radio" name="caller-type-radio" id="caller-type-member" tabindex="9">
  119. <label for="caller-type-member">Member</label>
  120. <input type="radio" name="caller-type-radio" id="caller-type-agent" tabindex="10">
  121. <label for="caller-type-agent">Agent</label>
  122. <input type="radio" name="caller-type-radio" id="caller-type-associate" tabindex="11">
  123. <label for="caller-type-associate">Associate</label>
  124. <input type="radio" name="caller-type-radio" id="caller-type-nonmember" tabindex="12">
  125. <label for="caller-type-associate">Non-member</label>
  126. </div>
  127. </div>
  128. </fieldset>
  129. <span class="alert alert-danger nw-field-error" role="alert" id="caller-type-error" style="display:none;">Selection is required</span>
  130. </div>
  131. </div>
  132.  
  133. <div class="form-group">
  134. <fieldset>
  135. <legend for="">Co-browsing</legend>
  136. <div class="styled-radio-container clearfix">
  137. <div class="toggle__switch">
  138. <input type="radio" name="co-browse-radio" id="co-browse-yes" tabindex="13">
  139. <label for="co-browse-yes">Yes</label>
  140. <input type="radio" name="co-browse-radio" id="co-browse-no" tabindex="14" checked>
  141. <label for="co-browse-no">No</label>
  142. </div>
  143. </div>
  144. </fieldset>
  145. </div>
  146.  
  147. <div class="row form-group">
  148. <div class="col-md-10" id="first-name-required">
  149. <label for="first-name">First name</label>
  150. <input type="text" class="form-control required" id="first-name" name="first-name-text" tabindex="15">
  151. <span class="alert alert-danger nw-field-error" role="alert" id="first-name-error" style="display:none;">Field is required</span>
  152. </div>
  153. </div>
  154.  
  155. <div class="row form-group">
  156. <div class="col-md-10" id="last-name-required">
  157. <label for="last-name">Last name</label>
  158. <input type="text" class="form-control required" id="last-name" name="last-name-text" tabindex="16">
  159. <span class="alert alert-danger nw-field-error" id="last-name-error" style="display:none;">Field is required</span>
  160. </div>
  161. </div>
  162. </div>
  163.  
  164. <div class="col-sm-6">
  165. <div class="row form-group">
  166. <div class="col-md-6" id="zip-required">
  167. <label for="zip">Zip code</label>
  168. <input type="text" class="form-control" id="zip" name="zip-text" tabindex="17">
  169. <span class="alert alert-danger nw-field-error" role="alert" id="zip-error" style="display:none;">Field is required</span>
  170. </div>
  171. <div class="col-md-6" id="state-required">
  172. <label for="state">State</label>
  173. <select class="form-control nw-input--medium required" name="state-select" id="state" tabindex="18">
  174. <option value="Select">Select</option>
  175. <option value="AL">AL</option>
  176. <option value="CA">CA</option>
  177. <option value="FL">FL</option>
  178. <option value="LA">LA</option>
  179. <option value="OH">OH</option>
  180. <option value="WA">WA</option>
  181. </select>
  182. <span class="alert alert-danger nw-field-error" role="alert" id="state-error" style="display:none;">Field is required</span>
  183.  
  184. </div>
  185.  
  186.  
  187. </div>
  188.  
  189. <div class="row form-group">
  190. <div class="col-md-10" id="phone-required">
  191. <label for="phone">Phone number</label>
  192. <input type="text" class="form-control required" id="phone" name="phone-text" tabindex="19">
  193. <span class="alert alert-danger nw-field-error" role="alert" id="phone-error" style="display:none;">Field is required</span>
  194. </div>
  195. </div>
  196.  
  197. <div class="row form-group">
  198. <div class="col-md-10" id="email-required">
  199. <label for="email">Email address&nbsp;*</label>
  200. <input type="text" class="form-control required" id="email" name="email-text" tabindex="20">
  201. <span class="alert alert-danger nw-field-error" role="alert" id="email-error" style="display:none;">Field is required</span>
  202. </div>
  203. </div>
  204.  
  205. <div class="form-group">
  206. <fieldset>
  207. <label for="policynumber">Policy number(s)</label>
  208. <div class="row">
  209. <div class="col-sm-7 col-md-5 col-lg-5">
  210. <input type="text" class="form-control" id="policynumber" name="policynumber-text" aria-required="true" tabindex="21">
  211. </div>
  212. <div class="col-sm-5 col-md-3">
  213. <button id="add-policy" type="submit" class="btn nw-btn-inline" tabindex="22">Add</button>
  214. </div>
  215. </div>
  216. </fieldset>
  217. <div id="policy"></div>
  218. </div>
  219.  
  220. <div class="form-group" id="contact-reason-required">
  221.  
  222. <label for="contact-reason">Contact reason&nbsp;*</label>
  223. <select class="form-control required" name="contact-reason-select" id="contact-reason" tabindex="23">
  224. <option value="Select">Select</option>
  225. <option value="1">1</option>
  226. <option value="2">2</option>
  227. <option value="3">3</option>
  228. <option value="4">4</option>
  229. <option value="5">5</option>
  230. <option value="6">6</option>
  231. <option value="7">7</option>
  232. <option value="8">8</option>
  233. </select>
  234. <span class="alert alert-danger nw-field-error" role="alert" id="contact-reason-error" style="display:none;">Selection is required</span>
  235. </div>
  236.  
  237. <div class="form-group" id="contact-reason-detail-required">
  238. <label for="contact-reason-detail">Contact reason detail&nbsp;*</label>
  239. <select class="form-control required" id="contact-reason-detail" name="contact-reason-detail-select" tabindex="24">
  240. <option value="Select">Select</option>
  241. <option value="1">1</option>
  242. <option value="2">2</option>
  243. <option value="3">3</option>
  244. <option value="4">4</option>
  245. <option value="5">5</option>
  246. <option value="6">6</option>
  247. <option value="7">7</option>
  248. <option value="8">8</option>
  249. </select>
  250. <span class="alert alert-danger nw-field-error" role="alert" id="contact-reason-detail-error" style="display:none;">Selection is required</span>
  251. </div>
  252.  
  253. <div class="form-group" id="contact-outcome-required">
  254. <label for="contact-outcome">Contact outcome&nbsp;*</label>
  255. <select class="form-control required" name="contact-outcome-select" id="contact-outcome" tabindex="25">
  256. <option value="Select">Select</option>
  257. <option value="1">1</option>
  258. <option value="2">2</option>
  259. <option value="3">3</option>
  260. <option value="4">4</option>
  261. <option value="5">5</option>
  262. <option value="6">6</option>
  263. <option value="7">7</option>
  264. <option value="8">8</option>
  265. </select>
  266. <span class="alert alert-danger nw-field-error" id="contact-outcome-error" style="display:none;">Selection is required</span>
  267. </div>
  268. </div>
  269. <div class="form-group clearfix">
  270.  
  271. <button type="button" class="btn btn-primary clear-form" id="display-success-submit-call" tabindex="26">Submit</button>
  272.  
  273. <button type="button" class="btn btn-default clear-form" id="submit-disconnect" tabindex="27">Call disconnected</button>
  274.  
  275. <button type="button" class="btn btn-default clear-form" id="clear" tabindex="28">Clear</button>
  276.  
  277. </div>
  278. </div>
  279.  
  280.  
  281. <div id="accordion" role="tablist" aria-multiselectable="true">
  282. <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne" tabindex="29">
  283. <div class="card">
  284. <div class="card-header" role="tab" id="headingOne">
  285. <h5 class="mb-0">Comments</h5>
  286. </div>
  287. <div id="collapseOne" class="collapse" role="tabpanel" aria-labelledby="headingOne">
  288. </a>
  289. <div class="card-block">
  290. <textarea class="form-control" rows="3" tabindex="30" placeholder="Enter comments for this call here."></textarea>
  291. </div>
  292. </div>
  293. </div>
  294.  
  295. <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" tabindex="31">
  296. <div class="card">
  297. <div class="card-header" role="tab" id="headingTwo">
  298. <h5 class="mb-0">History&nbsp;<span>(4)</span></h5>
  299. </div>
  300. <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
  301. </a>
  302. <div class="card-block">
  303. <div class="table-responsive">
  304. <table id="caller-history-table" class="table table-bordered table-striped">
  305. <caption>Caller history</caption>
  306. <thead>
  307. <tr>
  308. <th style="width:20%;" class="text-center">Submitted on</th>
  309. <th style="width:5%;" class="short">Analyst</th>
  310. <th style="width:10%;">Contact info</th>
  311. <th style="width:10%;">Source</th>
  312. <th style="width:20%;">Disposition</th>
  313. <th style="width:10%;">Policies</th>
  314. <th style="width:25%;">Comments</th>
  315. </tr>
  316. </thead>
  317. <tbody>
  318.  
  319. <tr>
  320. <td class="text-center align-middle">1/1/2017 8:30 AM </td>
  321. <td class="text-center align-middle">FERGM3</td>
  322. <td>Albert Johnson
  323. <br>albert@gmail.com
  324. <br>(123) 555-5555
  325. <br>New York, 10304
  326. </td>
  327. <td class="text-center">Call
  328. <br>Mobile
  329. <br>Member
  330. </td>
  331. <td>Reason
  332. <br>Reason Detail
  333. <br>Outcome
  334. </td>
  335. <td class="text-center">1234567890</td>
  336. <td>Member called from agent's office</td>
  337. </tr>
  338. <tr>
  339. <td class="text-center align-middle">2/1/2017 11:00 AM</td>
  340. <td class="text-center align-middle">FAWCETS</td>
  341. <td>Clifford Smith
  342. <br>cliff@gmail.com
  343. <br>(123) 555-5555
  344. <br>New York, 10304
  345. </td>
  346. <td class="text-center">Call
  347. <br>Comm
  348. <br>Member
  349. </td>
  350. <td>Reason
  351. <br>Reason Detail
  352. <br>Outcome
  353. </td>
  354. <td class="text-center">2234567890</td>
  355. <td>Member having trouble with online account password</td>
  356. </tr>
  357. <tr>
  358. <td class="text-center align-middle">3/1/2017 12:00 PM</td>
  359. <td class="text-center align-middle">SMITE</td>
  360. <td>Eric Wright
  361. <br>eric@gmail.com
  362. <br>(310) 555-5555
  363. <br>California, 90059
  364. </td>
  365. <td class="text-center">Chat
  366. <br>NW
  367. <br>Member
  368. </td>
  369. <td>Reason
  370. <br>Reason Detail
  371. <br>Outcome
  372. </td>
  373. <td class="text-center">3234567890</td>
  374. <td>Member call disconnected</td>
  375. </tr>
  376.  
  377. <tr>
  378. <td class="text-center align-middle">4/1/2017 3:00 PM</td>
  379. <td class="text-center align-middle">ZASYD</td>
  380. <td>Marshall Mathers
  381. <br>em@gmail.com
  382. <br>(310) 555-5555
  383. <br>Michigan, 20987
  384. </td>
  385. <td class="text-center">Email
  386. <br>NS
  387. <br>Member
  388. </td>
  389. <td>Reason
  390. <br>Reason Detail
  391. <br>Outcome
  392. </td>
  393. <td class="text-center">4234567890</td>
  394. <td>Member can't access online policy</td>
  395. </tr>
  396. </tbody>
  397. </table>
  398. </div>
  399. </div>
  400. </div>
  401. </div>
  402.  
  403. </div>
  404.  
  405.  
  406. </form>
  407.  
  408. </div>
  409.  
  410.  
  411. <div class="nw-bg-black-75">
  412. <div class="nw-container nw-inner-bun--lg text-center small">
  413. <img src="./images/footer-logo.svg" alt="Nationwide logo" width="120">
  414. <br>
  415. <div class="nw-inner-bun">
  416. &copy; 2017 Nationwide - Confidential Proprietary
  417. </div>
  418. </div>
  419. </div>
  420.  
  421. <div class="modal-backdrop" style="display:none;"></div>
  422.  
  423. </body>
  424.  
  425. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!