Advertisement
Guest User

Untitled

a guest
Sep 15th, 2019
221
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 23.70 KB | None | 0 0
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="SurgeriesDashboard.aspx.cs" Inherits="SurgeriesDashboard" MasterPageFile="~/MasterPageWithBS.master" %>
  2.  
  3. <asp:Content ContentPlaceHolderID="head" runat="server">
  4.     <style>
  5.         body {
  6.             direction:rtl;
  7.             color: #9e9e9e;
  8.             font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  9.         }
  10.         .dim {
  11.             color: #aeaeae;
  12.         }
  13.         .datetime {
  14.             width: 10%;
  15.             height: 100%;
  16.             background-color: white;
  17.             position: fixed;
  18.             top: 0;
  19.             right: 0;
  20.         }
  21.         .datetime-time,
  22.         .clock {
  23.             text-align: center;
  24.             font-size: 2rem;
  25.         }
  26.  
  27.         .clock {
  28.             font-weight: bold;
  29.         }
  30.  
  31.         .content {
  32.             display: flex;
  33.             flex: 1;
  34.             width: 90%;
  35.             height: 100%;
  36.             position: absolute;
  37.             top: 0;
  38.             left: 0;
  39.             padding: 1rem;
  40.         }
  41.  
  42.         .room {
  43.             flex: 1;
  44.             min-width: 20%;
  45.             display: flex;
  46.             flex-direction: column;
  47.         }
  48.  
  49.         .room-name {
  50.             display: inline-block;
  51.             width: fit-content;
  52.             margin-bottom: 0.5rem;
  53.         }
  54.  
  55.         .details {
  56.             flex: 1;
  57.             padding: 0.5rem;
  58.             margin: 1rem;
  59.             margin-right: 0;
  60.             border: 1px solid gray;
  61.             background-color: white;
  62.             max-height: 27%;
  63.             min-height: 27%;
  64.             -webkit-box-shadow: -7px 6px 5px -5px rgba(189, 189, 189, 1);
  65.             -moz-box-shadow: -7px 6px 5px -5px rgba(189, 189, 189, 1);
  66.             box-shadow: -7px 6px 5px -5px rgba(189, 189, 189, 1);
  67.             position: relative;
  68.         }
  69.  
  70.         .room-name, .details {
  71.             font-size: 10px;
  72.         }
  73.  
  74.         .d-flex>* {
  75.             flex: 1;
  76.         }
  77.  
  78.         .d-flex>i {
  79.             flex: 0;
  80.         }
  81.  
  82.         .name {
  83.             font-size: 1.5em;
  84.             font-weight: bold;
  85.         }
  86.  
  87.         .start-cap,
  88.         .start {
  89.             flex-grow: 1.5;
  90.         }
  91.  
  92.         .text-center>* {
  93.             text-align: center;
  94.         }
  95.  
  96.         .big>* {
  97.             font-size: 1.25em;
  98.             font-weight: bold;
  99.         }
  100.  
  101.         .details::after {
  102.             content: '';
  103.             height: 5px;
  104.             width: 100%;
  105.             position: absolute;
  106.             bottom: 0;
  107.             left: 0;
  108.         }
  109.  
  110.         .primary::after, .primary::before {
  111.             background-color: rgb(115, 182, 248);
  112.         }
  113.  
  114.         .success::after, .success::before {
  115.             background-color: rgb(96, 203, 163);
  116.         }
  117.  
  118.         .idle::after, .idle::before {
  119.             background-color: rgb(215, 215, 215);
  120.         }
  121.         .warn::after, .warn::before {
  122.             background-color: #f8cc68;
  123.         }
  124.         .error::after, .error::before {
  125.             background-color: #fa8a8a;
  126.         }
  127.         .details::before {
  128.             font-family: "Font Awesome 5 Free";
  129.             position: absolute;
  130.             bottom: 0;
  131.             left: 0;
  132.             padding: inherit;
  133.             font-size: 2em;
  134.             color:white;
  135.             display: inline-block;
  136.             font-weight: 900;
  137.         }
  138.         .primary::before {
  139.             content: "\f4fc";
  140.         }
  141.         .success::before {
  142.             content: "\f00c";
  143.         }
  144.         .idle::before {
  145.             content: "";
  146.             display: none;
  147.         }
  148.         .warn::before {
  149.             content: "\f071";
  150.         }
  151.         .error::before {
  152.             content: "\f071";
  153.         }
  154.         .ready {
  155.             color: rgb(115, 182, 248);
  156.         }
  157.         .ok {
  158.             color: rgb(96, 203, 163);
  159.         }
  160.         .warning {
  161.             color: #f8cc68;
  162.         }
  163.         .err {
  164.             color: #fa8a8a;
  165.         }
  166.         .ready::before, .ok::before {
  167.             font-family: "Font Awesome 5 Free";
  168.             content: "\f00c ";
  169.             display: inline-block;
  170.             padding-right: 3px;
  171.             vertical-align: middle;
  172.             font-weight: 900;
  173.             padding-left: 3px;
  174.         }
  175.         .warning::before, .err::before {
  176.             font-family: "Font Awesome 5 Free";
  177.             content: "\f071 ";
  178.             display: inline-block;
  179.             padding-right: 3px;
  180.             vertical-align: middle;
  181.             font-weight: 900;
  182.             padding-left: 3px;
  183.         }
  184.     </style>
  185. </asp:Content>
  186. <asp:Content ContentPlaceHolderID="cp1" runat="server">
  187.     <div class="datetime">
  188.         <div class="datetime-date py-5 pl-3"></div>
  189.         <div class="clock"><i class="far fa-clock"></i></div>
  190.         <div class="datetime-time"></div>
  191.     </div>
  192.     <div class="content">
  193.         <div class="room">
  194.             <div class="room-name">חדר ניתוח 1 </div>
  195.             <div class="details primary">
  196.                 <div class="subject">החלפת ירך</div>
  197.                 <div class="name">ישראל ק</div>
  198.                 <div class="status ready">בהכנה</div>
  199.                 <div class="d-flex text-center dim">
  200.                     <div class="start-cap">שעת ניתוח מתוכננת</div>
  201.                     <div class="enter-cap">כניסה לניתוח</div>
  202.                     <div class="end-cap">סיום משוער</div>
  203.                 </div>
  204.                 <div class="d-flex text-center big">
  205.                     <div class="start">08:00</div>
  206.                     <div class="enter">________</div>
  207.                     <div class="end">12:30</div>
  208.                 </div>
  209.                 <div class="related d-flex">
  210.                     <i class="fa fa-stethoscope px-2 h3"></i>
  211.                     <div>
  212.                         מנתח:<b>ד"ר כץ</b><br>
  213.                         עוזר מנתח:<b>ד"ר גרינברג רפאל</b><br>
  214.                         מרדים:<b>ד"ר כהן מיכאל</b><br>
  215.                         אח\אחות:<b>נטלי לוי, דן ישראלי</b><br>
  216.                         סניטר:<b>משה ישראלי</b><br>
  217.                     </div>
  218.                 </div>
  219.             </div>
  220.             <div class="details success">
  221.                     <div class="subject">החלפת ירך</div>
  222.                     <div class="name">נטלי ר</div>
  223.                     <div class="status ok">הגיע</div>
  224.                     <div class="d-flex text-center dim">
  225.                         <div class="start-cap">שעת ניתוח מתוכננת</div>
  226.                         <div class="enter-cap">כניסה לניתוח</div>
  227.                         <div class="end-cap">סיום משוער</div>
  228.                     </div>
  229.                     <div class="d-flex text-center big">
  230.                         <div class="start">13:30</div>
  231.                         <div class="enter">________</div>
  232.                         <div class="16:00">12:30</div>
  233.                     </div>
  234.                     <div class="related d-flex">
  235.                         <i class="fa fa-stethoscope px-2 h3"></i>
  236.                         <div>
  237.                             מנתח:<b>ד"ר כץ</b><br>
  238.                             עוזר מנתח:<b>ד"ר גרינברג רפאל</b><br>
  239.                             מרדים:<b>ד"ר כהן מיכאל</b><br>
  240.                             אח\אחות:<b>נטלי לוי, דן ישראלי</b><br>
  241.                             סניטר:<b>משה ישראלי</b><br>
  242.                         </div>
  243.                     </div>
  244.                 </div><div class="details idle">
  245.                         <div class="subject">החלפת ירך</div>
  246.                         <div class="name">ישראל ק</div>
  247.                         <div class="status"><i class="fa fa-success"></i> בהכנה</div>
  248.                         <div class="d-flex text-center dim">
  249.                             <div class="start-cap">שעת ניתוח מתוכננת</div>
  250.                             <div class="enter-cap">כניסה לניתוח</div>
  251.                             <div class="end-cap">סיום משוער</div>
  252.                         </div>
  253.                         <div class="d-flex text-center big">
  254.                             <div class="start">08:00</div>
  255.                             <div class="enter">________</div>
  256.                             <div class="end">12:30</div>
  257.                         </div>
  258.                         <div class="related d-flex">
  259.                             <i class="fa fa-stethoscope px-2 h3"></i>
  260.                             <div>
  261.                                 מנתח:<b>ד"ר כץ</b><br>
  262.                                 עוזר מנתח:<b>ד"ר גרינברג רפאל</b><br>
  263.                                 מרדים:<b>ד"ר כהן מיכאל</b><br>
  264.                                 אח\אחות:<b>נטלי לוי, דן ישראלי</b><br>
  265.                                 סניטר:<b>משה ישראלי</b><br>
  266.                             </div>
  267.                         </div>
  268.                     </div>
  269.         </div>
  270.         <div class="room">
  271.             <div class="room-name">חדר ניתוח 2 </div>
  272.             <div class="details primary">
  273.                 <div class="subject">החלפת ירך</div>
  274.                 <div class="name">ישראל ק</div>
  275.                 <div class="status"><i class="fa fa-success"></i> בהכנה</div>
  276.                 <div class="d-flex text-center dim">
  277.                     <div class="start-cap">שעת ניתוח מתוכננת</div>
  278.                     <div class="enter-cap">כניסה לניתוח</div>
  279.                     <div class="end-cap">סיום משוער</div>
  280.                 </div>
  281.                 <div class="d-flex text-center big">
  282.                     <div class="start">08:00</div>
  283.                     <div class="enter">________</div>
  284.                     <div class="end">12:30</div>
  285.                 </div>
  286.                 <div class="related d-flex">
  287.                     <i class="fa fa-stethoscope px-2 h3"></i>
  288.                     <div>
  289.                         מנתח:<b>ד"ר כץ</b><br>
  290.                         עוזר מנתח:<b>ד"ר גרינברג רפאל</b><br>
  291.                         מרדים:<b>ד"ר כהן מיכאל</b><br>
  292.                         אח\אחות:<b>נטלי לוי, דן ישראלי</b><br>
  293.                         סניטר:<b>משה ישראלי</b><br>
  294.                     </div>
  295.                 </div>
  296.             </div>
  297.             <div class="details warn">
  298.                 <div class="subject">החלפת ירך</div>
  299.                 <div class="name">ישראל ק</div>
  300.                 <div class="status"><i class="fa fa-success"></i> בהכנה</div>
  301.                 <div class="d-flex text-center dim">
  302.                     <div class="start-cap">שעת ניתוח מתוכננת</div>
  303.                     <div class="enter-cap">כניסה לניתוח</div>
  304.                     <div class="end-cap">סיום משוער</div>
  305.                 </div>
  306.                 <div class="d-flex text-center big">
  307.                     <div class="start">08:00</div>
  308.                     <div class="enter">________</div>
  309.                     <div class="end">12:30</div>
  310.                 </div>
  311.                 <div class="related d-flex">
  312.                     <i class="fa fa-stethoscope px-2 h3"></i>
  313.                     <div>
  314.                         מנתח:<b>ד"ר כץ</b><br>
  315.                         עוזר מנתח:<b>ד"ר גרינברג רפאל</b><br>
  316.                         מרדים:<b>ד"ר כהן מיכאל</b><br>
  317.                         אח\אחות:<b>נטלי לוי, דן ישראלי</b><br>
  318.                         סניטר:<b>משה ישראלי</b><br>
  319.                     </div>
  320.                 </div>
  321.             </div>
  322.             <div class="details idle">
  323.                 <div class="subject">החלפת ירך</div>
  324.                 <div class="name">ישראל ק</div>
  325.                 <div class="status"><i class="fa fa-success"></i> בהכנה</div>
  326.                 <div class="d-flex text-center dim">
  327.                     <div class="start-cap">שעת ניתוח מתוכננת</div>
  328.                     <div class="enter-cap">כניסה לניתוח</div>
  329.                     <div class="end-cap">סיום משוער</div>
  330.                 </div>
  331.                 <div class="d-flex text-center big">
  332.                     <div class="start">08:00</div>
  333.                     <div class="enter">________</div>
  334.                     <div class="end">12:30</div>
  335.                 </div>
  336.                 <div class="related d-flex">
  337.                     <i class="fa fa-stethoscope px-2 h3"></i>
  338.                     <div>
  339.                         מנתח:<b>ד"ר כץ</b><br>
  340.                         עוזר מנתח:<b>ד"ר גרינברג רפאל</b><br>
  341.                         מרדים:<b>ד"ר כהן מיכאל</b><br>
  342.                         אח\אחות:<b>נטלי לוי, דן ישראלי</b><br>
  343.                         סניטר:<b>משה ישראלי</b><br>
  344.                     </div>
  345.                 </div>
  346.             </div>
  347.         </div>
  348.         <div class="room">
  349.             <div class="room-name">חדר ניתוח 3</div>
  350.             <div class="details success">
  351.                 <div class="subject">החלפת ירך</div>
  352.                 <div class="name">ישראל ק</div>
  353.                 <div class="status"><i class="fa fa-success"></i> בהכנה</div>
  354.                 <div class="d-flex text-center dim">
  355.                     <div class="start-cap">שעת ניתוח מתוכננת</div>
  356.                     <div class="enter-cap">כניסה לניתוח</div>
  357.                     <div class="end-cap">סיום משוער</div>
  358.                 </div>
  359.                 <div class="d-flex text-center big">
  360.                     <div class="start">08:00</div>
  361.                     <div class="enter">________</div>
  362.                     <div class="end">12:30</div>
  363.                 </div>
  364.                 <div class="related d-flex">
  365.                     <i class="fa fa-stethoscope px-2 h3"></i>
  366.                     <div>
  367.                         מנתח:<b>ד"ר כץ</b><br>
  368.                         עוזר מנתח:<b>ד"ר גרינברג רפאל</b><br>
  369.                         מרדים:<b>ד"ר כהן מיכאל</b><br>
  370.                         אח\אחות:<b>נטלי לוי, דן ישראלי</b><br>
  371.                         סניטר:<b>משה ישראלי</b><br>
  372.                     </div>
  373.                 </div>
  374.             </div>
  375.             <div class="details idle">
  376.                 <div class="subject">החלפת ירך</div>
  377.                 <div class="name">ישראל ק</div>
  378.                 <div class="status"><i class="fa fa-success"></i> בהכנה</div>
  379.                 <div class="d-flex text-center dim">
  380.                     <div class="start-cap">שעת ניתוח מתוכננת</div>
  381.                     <div class="enter-cap">כניסה לניתוח</div>
  382.                     <div class="end-cap">סיום משוער</div>
  383.                 </div>
  384.                 <div class="d-flex text-center big">
  385.                     <div class="start">08:00</div>
  386.                     <div class="enter">________</div>
  387.                     <div class="end">12:30</div>
  388.                 </div>
  389.                 <div class="related d-flex">
  390.                     <i class="fa fa-stethoscope px-2 h3"></i>
  391.                     <div>
  392.                         מנתח:<b>ד"ר כץ</b><br>
  393.                         עוזר מנתח:<b>ד"ר גרינברג רפאל</b><br>
  394.                         מרדים:<b>ד"ר כהן מיכאל</b><br>
  395.                         אח\אחות:<b>נטלי לוי, דן ישראלי</b><br>
  396.                         סניטר:<b>משה ישראלי</b><br>
  397.                     </div>
  398.                 </div>
  399.             </div>
  400.             <div class="details idle">
  401.                 <div class="subject">החלפת ירך</div>
  402.                 <div class="name">ישראל ק</div>
  403.                 <div class="status"><i class="fa fa-success"></i> בהכנה</div>
  404.                 <div class="d-flex text-center dim">
  405.                     <div class="start-cap">שעת ניתוח מתוכננת</div>
  406.                     <div class="enter-cap">כניסה לניתוח</div>
  407.                     <div class="end-cap">סיום משוער</div>
  408.                 </div>
  409.                 <div class="d-flex text-center big">
  410.                     <div class="start">08:00</div>
  411.                     <div class="enter">________</div>
  412.                     <div class="end">12:30</div>
  413.                 </div>
  414.                 <div class="related d-flex">
  415.                     <i class="fa fa-stethoscope px-2 h3"></i>
  416.                     <div>
  417.                         מנתח:<b>ד"ר כץ</b><br>
  418.                         עוזר מנתח:<b>ד"ר גרינברג רפאל</b><br>
  419.                         מרדים:<b>ד"ר כהן מיכאל</b><br>
  420.                         אח\אחות:<b>נטלי לוי, דן ישראלי</b><br>
  421.                         סניטר:<b>משה ישראלי</b><br>
  422.                     </div>
  423.                 </div>
  424.             </div>
  425.         </div>
  426.         <div class="room">
  427.             <div class="room-name">חדר ניתוח 4 </div>
  428.             <div class="details warn">
  429.                 <div class="subject">החלפת ירך</div>
  430.                 <div class="name">ישראל ק</div>
  431.                 <div class="status"><i class="fa fa-success"></i> בהכנה</div>
  432.                 <div class="d-flex text-center dim">
  433.                     <div class="start-cap">שעת ניתוח מתוכננת</div>
  434.                     <div class="enter-cap">כניסה לניתוח</div>
  435.                     <div class="end-cap">סיום משוער</div>
  436.                 </div>
  437.                 <div class="d-flex text-center big">
  438.                     <div class="start">08:00</div>
  439.                     <div class="enter">________</div>
  440.                     <div class="end">12:30</div>
  441.                 </div>
  442.                 <div class="related d-flex">
  443.                     <i class="fa fa-stethoscope px-2 h3"></i>
  444.                     <div>
  445.                         מנתח:<b>ד"ר כץ</b><br>
  446.                         עוזר מנתח:<b>ד"ר גרינברג רפאל</b><br>
  447.                         מרדים:<b>ד"ר כהן מיכאל</b><br>
  448.                         אח\אחות:<b>נטלי לוי, דן ישראלי</b><br>
  449.                         סניטר:<b>משה ישראלי</b><br>
  450.                     </div>
  451.                 </div>
  452.             </div>
  453.             <div class="details idle">
  454.                 <div class="subject">החלפת ירך</div>
  455.                 <div class="name">ישראל ק</div>
  456.                 <div class="status"><i class="fa fa-success"></i> בהכנה</div>
  457.                 <div class="d-flex text-center dim">
  458.                     <div class="start-cap">שעת ניתוח מתוכננת</div>
  459.                     <div class="enter-cap">כניסה לניתוח</div>
  460.                     <div class="end-cap">סיום משוער</div>
  461.                 </div>
  462.                 <div class="d-flex text-center big">
  463.                     <div class="start">08:00</div>
  464.                     <div class="enter">________</div>
  465.                     <div class="end">12:30</div>
  466.                 </div>
  467.                 <div class="related d-flex">
  468.                     <i class="fa fa-stethoscope px-2 h3"></i>
  469.                     <div>
  470.                         מנתח:<b>ד"ר כץ</b><br>
  471.                         עוזר מנתח:<b>ד"ר גרינברג רפאל</b><br>
  472.                         מרדים:<b>ד"ר כהן מיכאל</b><br>
  473.                         אח\אחות:<b>נטלי לוי, דן ישראלי</b><br>
  474.                         סניטר:<b>משה ישראלי</b><br>
  475.                     </div>
  476.                 </div>
  477.             </div>
  478.         </div>
  479.         <div class="room">
  480.             <div class="room-name">חדר ניתוח 5 </div>
  481.             <div class="details error">
  482.                 <div class="subject">החלפת ירך</div>
  483.                 <div class="name">ישראל ק</div>
  484.                 <div class="status"><i class="fa fa-success"></i> בהכנה</div>
  485.                 <div class="d-flex text-center dim">
  486.                     <div class="start-cap">שעת ניתוח מתוכננת</div>
  487.                     <div class="enter-cap">כניסה לניתוח</div>
  488.                     <div class="end-cap">סיום משוער</div>
  489.                 </div>
  490.                 <div class="d-flex text-center big">
  491.                     <div class="start">08:00</div>
  492.                     <div class="enter">________</div>
  493.                     <div class="end">12:30</div>
  494.                 </div>
  495.                 <div class="related d-flex">
  496.                     <i class="fa fa-stethoscope px-2 h3"></i>
  497.                     <div>
  498.                         מנתח:<b>ד"ר כץ</b><br>
  499.                         עוזר מנתח:<b>ד"ר גרינברג רפאל</b><br>
  500.                         מרדים:<b>ד"ר כהן מיכאל</b><br>
  501.                         אח\אחות:<b>נטלי לוי, דן ישראלי</b><br>
  502.                         סניטר:<b>משה ישראלי</b><br>
  503.                     </div>
  504.                 </div>
  505.             </div>
  506.             <div class="details idle">
  507.                 <div class="subject">החלפת ירך</div>
  508.                 <div class="name">ישראל ק</div>
  509.                 <div class="status"><i class="fa fa-success"></i> בהכנה</div>
  510.                 <div class="d-flex text-center dim">
  511.                     <div class="start-cap">שעת ניתוח מתוכננת</div>
  512.                     <div class="enter-cap">כניסה לניתוח</div>
  513.                     <div class="end-cap">סיום משוער</div>
  514.                 </div>
  515.                 <div class="d-flex text-center big">
  516.                     <div class="start">08:00</div>
  517.                     <div class="enter">________</div>
  518.                     <div class="end">12:30</div>
  519.                 </div>
  520.                 <div class="related d-flex">
  521.                     <i class="fa fa-stethoscope px-2 h3"></i>
  522.                     <div>
  523.                         מנתח:<b>ד"ר כץ</b><br>
  524.                         עוזר מנתח:<b>ד"ר גרינברג רפאל</b><br>
  525.                         מרדים:<b>ד"ר כהן מיכאל</b><br>
  526.                         אח\אחות:<b>נטלי לוי, דן ישראלי</b><br>
  527.                         סניטר:<b>משה ישראלי</b><br>
  528.                     </div>
  529.                 </div>
  530.             </div>
  531.         </div>
  532.     </div>
  533.     <script>
  534.         var now = moment();
  535.         var day = "יום " + ["ראשון", "שני", "שלישי", "רביעי", "חמישי", "שישי", "שבת"][now.weekday()];
  536.         $('.datetime-date').html(day + "<br>" + now.format('DD.MM.YYYY'));
  537.         setInterval(function () {
  538.             now = moment();
  539.             $('.datetime-time').html(now.format('HH:mm'));
  540.         }, 1000);
  541.         $('.room-name').each(function (i, item) {
  542.             var blue = (i * 60 > 255 ? 255 : i * 60);
  543.             var green = (blue >= 255 ? (255 - (i - 4 * 60)) : 255);
  544.             var bluehex = ('0' + (blue).toString(16)).slice(-2);
  545.             var greenhex = ('0' + (green).toString(16)).slice(-2);
  546.             $(item).css({
  547.                 'border-bottom': '0.75rem solid #00' + bluehex + greenhex
  548.             });
  549.         });
  550.     </script>
  551. </asp:Content>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement