API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Jul 17th, 2018
97
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 29.47 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <title>Phaze5</title>
  7.     <meta name="viewport" content="width=device-width, initial-scale=1">
  8.     <!-- Css -->
  9.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  10.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  11.     <!-- JavaScript -->
  12.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  13.     <!-- Fonts -->
  14.     <link href="https://fonts.googleapis.com/css?family=Chonburi" rel="stylesheet">
  15.  
  16. </head>
  17. <body>
  18.         @inherits  Glass.Mapper.Sc.Web.Mvc.GlassView<Pfizer.BTOD.Feature.PCRequest.PCRequest>
  19.                 @if (Model != null)
  20.                 {
  21.                     <section class="page-header" data-module="pageHeader">
  22.                         <div class="container">
  23.                             <div class="row">
  24.                                 <div class="large-12 columns">
  25.                                     <nav aria-label="You are here:" role="navigation">
  26.                                         @Html.Sitecore().Placeholder("Breadcrumb")
  27.                                     </nav>
  28.                                     <h1 id="pcRequestHeader" class="article-title">New PC Orders</h1>                  
  29.                                 </div>
  30.                             </div>
  31.                         </div>
  32.                     </section>
  33.                     <style>
  34.                     @media (min-width: 1000px){
  35.                         .title{
  36.                             font-weight:bold;
  37.                         }
  38.                         .desc{
  39.                             font-weight:normal;
  40.                             font-size:small;
  41.                         }
  42.                         .pcrequest-tile{
  43.                             position: relative;
  44.                             width: 15%;
  45.                             display: inline-block;
  46.                             border: 1px solid lightgray;
  47.                             margin: 15px;
  48.                             text-align:center;
  49.                             justify-content: center;
  50.                             align-items: center;
  51.                             height: 300px;
  52.                             cursor: pointer;
  53.                             column-gap: length;
  54.                         }
  55.                         .active, .pcrequest-tile:hover{
  56.                             border: 1px solid black;
  57.                         }
  58.                
  59.                         .pcimg{
  60.                
  61.                         }
  62.                         }
  63.                         @media (max-width: 1000px){
  64.                         .title{
  65.                             font-weight:bold;
  66.                         }
  67.                         .desc{
  68.                             font-weight:normal;
  69.                             font-size:small;
  70.                         }
  71.                         .pcrequest-tile{
  72.                             position: relative;
  73.                             width: 100%;
  74.                             display: inline-block;
  75.                             border: 1px solid lightgray;
  76.                             margin: 20px auto 0 auto;
  77.                             text-align:center;
  78.                             justify-content: center;
  79.                             align-items: center;
  80.                             height: 300px;
  81.                             cursor: pointer;
  82.                        
  83.                         }
  84.                         .active, .pcrequest-tile:hover{
  85.                             border: 1px solid black;
  86.                         }
  87.                
  88.                         .pcimg{
  89.                
  90.                         }
  91.                         }
  92.                            @media (max-width: 500px){
  93.                         .title{
  94.                             font-weight:bold;
  95.                         }
  96.                         .desc{
  97.                             font-weight:normal;
  98.                             font-size:small;
  99.                         }
  100.                         .pcrequest-tile{
  101.                             position: relative;
  102.                             width: 100%;
  103.                             display: inline-block;
  104.                             border: 1px solid lightgray;
  105.                             margin-right: auto;
  106.                             margin-left: auto;
  107.                             text-align:center;
  108.                             justify-content: center;
  109.                             align-items: center;
  110.                             height: 300px;
  111.                             cursor: pointer;
  112.                        
  113.                         }
  114.                         .active, .pcrequest-tile:hover{
  115.                             border: 1px solid black;
  116.                         }
  117.                
  118.                         .pcimg{
  119.                
  120.                         }
  121.                         }
  122.                     </style>
  123.                
  124.                     <div class="container contact-service-desk" id="page-content">
  125.                         <div class="row">
  126.                             <div id="pcRequestTab1" style="display:inline" class="small-12 columns">
  127.                                 <!--New PC Orders-->
  128.                                 <br/>
  129.                                 <br/>
  130.                                 <p>@Editable(x => x.Tab_1_Description)</p>
  131.                                 <br/>
  132.                                 <br/>
  133.                                 <br/>
  134.                                 <br/>
  135.                                 <br/>
  136.                                 <p style="background:#f7f7f7; width:67%">  
  137.                                     @Editable(x => x.Tab_1_Related_Links)
  138.                                 </p>
  139.                                 <button class="button pull-right" onclick="document.getElementById('pcRequestHeader').innerHTML = '@Editable(x => x.Tab_2_Title)'; document.getElementById('pcRequestTab1').style.display = 'none'; document.getElementById('pcRequestTab2').style.display = 'inline';">
  140.                                     @Editable(x => x.Tab_1_Next_Button_Text)
  141.                                 </button>
  142.                             </div>
  143.                             <div id="pcRequestTab2" style="display:none;" class="small-12 columns">
  144.                                 <!--Choose Your PC-->
  145.                                 <p>@Editable(x => x.Tab_2_Description)</p>
  146.                                 <div class="container flex-container" id="pcRequestContainer">
  147.                                 <ul style="list-style-type: none; width: 100%; align-content:center;">
  148.                                     <li class="pcrequest-tile active flex-item">
  149.                                         <div class="title">Standard Office</div>
  150.                                         <br />
  151.                                         <div>
  152.                                             <p class="desc">most common standard model</p>
  153.                                             <img class="pcimg" src="http://btod-dev.pfizer.com/-/media/btod/feature/pcrequest/lenovo-laptop-thinkpad-T-Series.png" />
  154.                                             <br />
  155.                                             <div>
  156.                                                 <p class="desc">
  157.                                                     <span>T-Series</span><br />
  158.                                                     <span>$855 USD</span>
  159.                                                 </p>
  160.                                             </div>
  161.                                         </div>
  162.                                     </li>
  163.                                     <li class="pcrequest-tile flex-item">
  164.                                         <div class="title">Great for Travel</div>
  165.                                         <br />
  166.                                         <div>
  167.                                             <p class="desc">smaller more compact than T-Series</p>
  168.                                             <img class="pcimg" src="http://btod-dev.pfizer.com/-/media/btod/feature/pcrequest/lenovo-laptop-thinkpad-X-Series.png" />
  169.                                             <br />
  170.                                             <div>
  171.                                                 <p class="desc">
  172.                                                     <span>X-Series</span><br />
  173.                                                     <span>$996 USD</span>
  174.                                                 </p>
  175.                                             </div>
  176.                                         </div>
  177.                                     </li>
  178.                                      <li class="pcrequest-tile flex-item">
  179.                                         <div class="title">Great for Travel</div>
  180.                                         <br />
  181.                                         <div>
  182.                                             <p class="desc">smaller more compact than T-Series</p>
  183.                                             <img class="pcimg" src="http://btod-dev.pfizer.com/-/media/btod/feature/pcrequest/lenovo-laptop-thinkpad-X-Series.png" />
  184.                                             <br />
  185.                                             <div>
  186.                                                 <p class="desc">
  187.                                                     <span>X-Series</span><br />
  188.                                                     <span>$996 USD</span>
  189.                                                 </p>
  190.                                             </div>
  191.                                         </div>
  192.                                     </li>
  193.                                     <li class="pcrequest-tile flex-item">
  194.                                         <div class="title">Executive Model</div>
  195.                                         <br />
  196.                                         <div>
  197.                                             <p class="desc">thin, powerful, tablet functionality</p>
  198.                                             <img class="pcimg" src="http://btod-dev.pfizer.com/-/media/btod/feature/pcrequest/lenovo-thinkpad-X1-Yoga.png" />
  199.                                             <br />
  200.                                             <div>
  201.                                                 <p class="desc">
  202.                                                     <span>X1 Yoga</span><br />
  203.                                                     <span>$1,567 USD</span>
  204.                                                 </p>
  205.                                             </div>
  206.                                         </div>
  207.                                     </li>
  208.                                     <li class="pcrequest-tile flex-item">
  209.                                         <div class="title">Companion Device</div>
  210.                                         <br />
  211.                                         <div>
  212.                                             <p class="desc">used when  you have another primary device(e.g an iPad)</p>
  213.                                             <img class="pcimg" src="http://btod-dev.pfizer.com/-/media/btod/feature/pcrequest/lenovo-laptop-thinkpad-L-Series.png" />
  214.                                             <br />
  215.                                             <div>
  216.                                                 <p class="desc">
  217.                                                     <span>L-Series</span><br />
  218.                                                     <span>$564 USD</span>
  219.                                                 </p>
  220.                                             </div>
  221.                                         </div>
  222.                                     </li>
  223.                                     <li class="pcrequest-tile flex-item">
  224.                                         <div class="title">Stationary Desktop</div>
  225.                                         <br />
  226.                                         <div>
  227.                                             <p class="desc">stationary tower connects easily to external devices</p>
  228.                                             <img class="pcimg" src="http://btod-dev.pfizer.com/-/media/btod/feature/pcrequest/lenovo-thinkstation-Workstation.png" />
  229.                                             <br />
  230.                                             <div>
  231.                                                 <p class="desc">
  232.                                                     <span>Workstation</span><br />
  233.                                                     <span>$1,000 USD</span>
  234.                                                 </p>
  235.                                             </div>
  236.                                         </div>
  237.                                     </li>
  238.                                 </ul>
  239.                                 </div>
  240.                                 <button class="button pull-left" onclick="document.getElementById('pcRequestHeader').innerHTML = '@Editable(x => x.Tab_1_Title)'; document.getElementById('pcRequestTab2').style.display = 'none'; document.getElementById('pcRequestTab1').style.display = 'inline';">@Editable(x => x.Tab_2_Back_Button_Text)</button>
  241.                                 <button class="button pull-right" onclick="document.getElementById('pcRequestHeader').innerHTML = '@Editable(x => x.Tab_3_Title)'; document.getElementById('pcRequestTab2').style.display = 'none'; document.getElementById('pcRequestTab3').style.display = 'inline';">@Editable(x => x.Tab_2_Next_Button_Text)</button>
  242.                             </div>
  243.                             <div id="pcRequestTab3" style="display:none" class="small-12 columns">
  244.                                 <!--Requestor Details-->
  245.                                 <fieldset class="large-8 columns">
  246.                                     <legend>This order is for <span class="required">*</span></legend>
  247.                                     <input name="user" type="radio" value="me"> <label for="me">Myself</label>
  248.                                     <input name="user" type="radio" value="others"> <label for="me">Someone Else</label>
  249.                                     <div class="medium-12 columns">
  250.                                         <form class="people-picker pplSearch" id="people">
  251.                                             <div class="row">
  252.                                                 <div class="small-8 columns">
  253.                                                     <label>Select Owner(last name, first)</label>
  254.                                                 </div>
  255.                                             </div>
  256.                                             <div class="row">
  257.                                                 <div class="medium-8 columns">
  258.                                                     <input type="text" id="peopleAutoSearch" autocomplete="off">
  259.                                                 </div>
  260.                                                 <div class="medium-8 columns">
  261.                                                     <label>
  262.                                                         First Name:
  263.                                                         <label class="label-user-value"></label>
  264.                                                     </label>
  265.                                                 </div>
  266.                                                 <div class="medium-8 columns">
  267.                                                     <label>
  268.                                                         Last Name:
  269.                                                         <label class="label-user-value"></label>
  270.                                                     </label>
  271.                                                 </div>
  272.                                                 <div class="medium-8 columns">
  273.                                                     <label>
  274.                                                         User ID:
  275.                                                         <label class="label-user-value"></label>
  276.                                                     </label>
  277.                                                 </div>
  278.                                                 <div class="medium-8 columns">
  279.                                                     <label>
  280.                                                         Email Address:
  281.                                                         <label class="label-user-value"></label>
  282.                                                     </label>
  283.                                                 </div>
  284.                                                 <div class="medium-8 columns">
  285.                                                     <label>
  286.                                                         Manager:
  287.                                                         <label class="label-user-value"></label>
  288.                                                     </label>
  289.                                                 </div>
  290.                                                 <div class="medium-8 columns">
  291.                                                     <label>
  292.                                                         Phone Number <span class="required">*</span>
  293.                                                         <input type="text" placeholder="" pattern="^\d{10}" class="phoneNumber">
  294.                                                     </label>
  295.                                                 </div>
  296.                                                 <div class="medium-8 columns">
  297.                                                     <label>
  298.                                                         Charge Code / Cost Center <span class="required">*</span>
  299.                                                         <input type="text" placeholder="" class="cccode">
  300.                                                     </label>
  301.                                                 </div>
  302.                                                 <div class="medium-8 columns">
  303.                                                     <label>
  304.                                                         Site
  305.                                                     </label>
  306.                                                 </div>
  307.                                                 <div class="medium-8 columns">
  308.                                                     <label>
  309.                                                         <label><div class="ac_container" style="width: 352px;"><input type="text" id="issueLocationText" autocomplete="off" class="ac_input"><div class="ac_button ac_btn_out" title="Get All (Down key)"><i class="fa fa-angle-down"></i></div><div class="ac_result_area" style="display: none;"><div class="ac_navi"><div class="info"></div><p></p></div><ul class="ac_results ac_results_off"></ul><div class="ac_subinfo"></div></div><input type="hidden" name="issueLocationText_primary_key" id="issueLocationText_primary_key" value="OTHER LOCATION"></div></label>
  310.                                                     </label>
  311.                                                 </div>
  312.                                                 <div class="action-bar clearfix large-12 columns">
  313.                                                     <a href="#" class="button small float-right"> Clear</a>
  314.                                                 </div>
  315.                                             </div>
  316.                                         </form>
  317.                                     </div>                    
  318.                                 </fieldset>
  319.                                 <fieldset class="large-8 columns">
  320.                                     <legend>Ship To <span class="required">*</span></legend>
  321.                                     <input name="siteOption" type="radio" value="pfizer" onclick="document.getElementById('remoteLoc').style.display = 'none';"> <label for="pfizer">Pfizer Site(above)</label>
  322.                                     <input name="siteOption" type="radio" value="others" onclick="document.getElementById('remoteLoc').style.display = 'inline';"> <label for="others">Non-Pfizer/Remote Location</label>
  323.                                     <div id="remoteLoc" class="medium-12 columns" style="display:none;">
  324.                                         <form class="people-picker pplSearch" id="address">
  325.                                             <div class="row">
  326.                                                 <div class="medium-8 columns">
  327.                                                     <label>
  328.                                                         Address
  329.                                                         <input type="text" placeholder="" class="Address">
  330.                                                     </label>
  331.                                                 </div>
  332.                                                 <div class="medium-8 columns">
  333.                                                     <label>
  334.                                                         <div class="medium-4 columns">
  335.                                                             City
  336.                                                             <input type="text" placeholder="" class="City">
  337.                                                         </div>
  338.                                                     </label>
  339.                                                     <label>
  340.                                                         <div class="medium-4 columns">
  341.                                                             State / Province
  342.                                                             <input type="text" placeholder="" class="State">
  343.                                                         </div>
  344.                                                     </label>
  345.                                                     <label>
  346.                                                         <div class="medium-4 columns">
  347.                                                             Postal Code
  348.                                                             <input type="text" placeholder="" class="ZIP">
  349.                                                         </div>
  350.                                                     </label>
  351.                                                     <label>
  352.                                                         <div class="medium-4 columns">
  353.                
  354.                                                             Country
  355.                                                             <input type="text" placeholder="" class="Country">
  356.                
  357.                                                         </div>
  358.                                                     </label>                                      
  359.                                                 </div>
  360.                                                <div class="medium-8 columns" style="display:none;">
  361.                                                     <label>
  362.                                                         Country
  363.                                                         <input type="text" placeholder="" class="dummy">
  364.                                                     </label>
  365.                                                 </div>                              
  366.                                             </div>
  367.                                         </form>
  368.                                     </div>
  369.                                 </fieldset>
  370.                                 <fieldset class="large-12 columns">
  371.                                     <button class="button pull-left" onclick="document.getElementById('pcRequestHeader').innerHTML='Choose Your PC'; document.getElementById('pcRequestTab3').style.display='none'; document.getElementById('pcRequestTab2').style.display='inline';">BACK</button>
  372.                                     <button class="button pull-right" onclick="document.getElementById('pcRequestHeader').innerHTML='Confirm Your Order'; document.getElementById('pcRequestTab3').style.display='none'; document.getElementById('pcRequestTab4').style.display='inline';">NEXT</button>
  373.                                 </fieldset>
  374.                             </div>
  375.                             <div id="pcRequestTab4" style="display:none" class="small-12 columns">
  376.                                 <!--Confirm Your Order-->
  377.                                 <fieldset class="large-8 columns">
  378.                                     Please review your  order  details below. Note:  Estimated delivery will be approximately 15 business
  379.                                     days after manager approval. Shipment  times may vary.
  380.                                     <br />
  381.                                     <br />
  382.                                     <div class="row">
  383.                                         <div class="medium-12 columns">
  384.                                             <label>
  385.                                                 PC Selection:
  386.                                                 <label class="label-user-value"><span id="myText"></span></label>
  387.                                             </label>
  388.                                         </div>
  389.                                         <div class="medium-12 columns">
  390.                                             <label>
  391.                                                 Estimated Price:
  392.                                                 <label class="label-user-value">-PLACEHOLDER VALUE-</label>
  393.                                             </label>
  394.                                         </div>
  395.                                         <div class="medium-12 columns">
  396.                                             <label>
  397.                                                 Charge To:
  398.                                                 <label class="label-user-value">-PLACEHOLDER VALUE-</label>
  399.                                             </label>
  400.                                         </div>
  401.                                         <div class="medium-12 columns">
  402.                                             <label>
  403.                                                 Deliver To:
  404.                                                 <label class="label-user-value">-PLACEHOLDER VALUE-</label>
  405.                                             </label>
  406.                                         </div>
  407.                                      </div>
  408.                                 </fieldset>
  409.                                
  410.                                 <fieldset class="large-12 columns">
  411.                                     <br />
  412.                                     <br />
  413.                                     <br />
  414.                                     <br />
  415.                                     <button class="button pull-left" onclick="document.getElementById('pcRequestHeader').innerHTML='Requestor Details'; document.getElementById('pcRequestTab4').style.display='none'; document.getElementById('pcRequestTab3').style.display='inline';">@Editable(x => x.Tab_4_Back_Button_Text)</button>
  416.                                     <button class="button pull-right" onclick="document.getElementById('pcRequestHeader').innerHTML='Order Submitted'; document.getElementById('pcRequestTab4').style.display='none'; document.getElementById('pcRequestTab5').style.display='inline';">@Editable(x => x.Tab_4_Place_Order_Text)</button>
  417.                                 </fieldset>
  418.                             </div>
  419.                             <div id="pcRequestTab5" style="display:none" class="small-12 columns">
  420.                                 <!--Order Submitted-->
  421.                                 <br />
  422.                                 <br />
  423.                                 <p>@Editable(x => x.Tab_5_Desciption_1_Text)</p>
  424.                                 <br />
  425.                                 <br />
  426.                                 <br />
  427.                                 <br />
  428.                                 <br />
  429.                                 <br />
  430.                                 <br />
  431.                                 <br />
  432.                             </div>
  433.                         </div>
  434.                     </div>
  435.                
  436.                     <script type="text/javascript">
  437.                         // Add active class to the current button (highlight it)
  438.                         var header = document.getElementById("pcRequestContainer");
  439.                         var btns = header.getElementsByClassName("pcrequest-tile");
  440.                         for (var i = 0; i < btns.length; i++) {
  441.                            btns[i].addEventListener("click", function () {
  442.                                //alert("c");
  443.                            var current = document.getElementsByClassName("active");
  444.                            current[0].className = current[0].className.replace(" active", "");
  445.                            this.className += " active";
  446.                          });
  447.                        }
  448.                        
  449.                    </script>
  450.                 }
  451.                
  452.                
  453.                
  454.                
  455.                
  456.                            
  457. </body>
  458. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!