API tools faq
paste
Advertisement
Gaudenz

ViolationDetails.html

Gaudenz
Mar 31st, 2025
519
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 17.56 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Violation Details</title>
  7.     <style>
  8.       * {
  9.         margin: 0;
  10.         padding: 0;
  11.         box-sizing: border-box;
  12.         font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  13.       }
  14.  
  15.       body {
  16.         background-color: #f5f5f5;
  17.         color: #333;
  18.         line-height: 1.6;
  19.         padding: 20px;
  20.       }
  21.  
  22.       .container {
  23.         max-width: 1000px;
  24.         margin: 0 auto;
  25.         background: white;
  26.         border-radius: 8px;
  27.         box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  28.         overflow: hidden;
  29.       }
  30.  
  31.       .header {
  32.         background: #3a56a7;
  33.         color: white;
  34.         padding: 20px;
  35.         text-align: center;
  36.       }
  37.  
  38.       .header h1 {
  39.         font-size: 24px;
  40.         margin-bottom: 5px;
  41.       }
  42.  
  43.       .section {
  44.         padding: 20px;
  45.         border-bottom: 1px solid #eee;
  46.       }
  47.  
  48.       .section-title {
  49.         font-size: 18px;
  50.         color: #3a56a7;
  51.         margin-bottom: 15px;
  52.         padding-bottom: 5px;
  53.         border-bottom: 2px solid #3a56a7;
  54.       }
  55.  
  56.       .info-group {
  57.         margin-bottom: 15px;
  58.       }
  59.  
  60.       .info-label {
  61.         font-weight: bold;
  62.         margin-bottom: 5px;
  63.         color: #555;
  64.       }
  65.  
  66.       .info-value {
  67.         background: #f9f9f9;
  68.         padding: 10px;
  69.         border-radius: 4px;
  70.         border-left: 3px solid #3a56a7;
  71.       }
  72.  
  73.       .info-text {
  74.         white-space: pre-wrap;
  75.         line-height: 1.5;
  76.       }
  77.  
  78.       .badge {
  79.         display: inline-block;
  80.         padding: 5px 10px;
  81.         border-radius: 4px;
  82.         font-size: 14px;
  83.         font-weight: bold;
  84.         color: white;
  85.       }
  86.  
  87.       .badge-danger {
  88.         background-color: #e74c3c;
  89.       }
  90.  
  91.       .badge-success {
  92.         background-color: #27ae60;
  93.       }
  94.  
  95.       .session-box {
  96.         background: #f9f9f9;
  97.         border-radius: 4px;
  98.         padding: 15px;
  99.         margin-bottom: 15px;
  100.         border-left: 3px solid #3a56a7;
  101.       }
  102.  
  103.       .session-date {
  104.         font-size: 14px;
  105.         color: #777;
  106.         margin-bottom: 10px;
  107.       }
  108.  
  109.       .meta-info {
  110.         display: flex;
  111.         justify-content: space-between;
  112.         margin-bottom: 15px;
  113.       }
  114.  
  115.       .meta-item {
  116.         font-size: 14px;
  117.         color: #666;
  118.       }
  119.  
  120.       .action-buttons {
  121.         padding: 20px;
  122.         text-align: right;
  123.       }
  124.  
  125.       .btn {
  126.         padding: 10px 20px;
  127.         border: none;
  128.         border-radius: 4px;
  129.         cursor: pointer;
  130.         font-weight: bold;
  131.         margin-left: 10px;
  132.       }
  133.  
  134.       .btn-primary {
  135.         background: #3a56a7;
  136.         color: white;
  137.       }
  138.  
  139.       .btn-secondary {
  140.         background: #f1f1f1;
  141.         color: #333;
  142.       }
  143.  
  144.       .btn-success {
  145.         background: #27ae60;
  146.         color: white;
  147.       }
  148.  
  149.       .student-info {
  150.         display: grid;
  151.         grid-template-columns: 1fr 1fr;
  152.         gap: 15px;
  153.       }
  154.  
  155.       @media (max-width: 768px) {
  156.         .student-info {
  157.           grid-template-columns: 1fr;
  158.         }
  159.       }
  160.  
  161.       .student-header {
  162.         display: flex;
  163.         align-items: center;
  164.         margin-bottom: 20px;
  165.       }
  166.  
  167.       .student-name-section h2 {
  168.         font-size: 20px;
  169.         margin-bottom: 5px;
  170.       }
  171.  
  172.       .student-id {
  173.         font-size: 14px;
  174.         color: #666;
  175.       }
  176.  
  177.       .example-buttons {
  178.         display: flex;
  179.         justify-content: center;
  180.         padding: 15px;
  181.         background: #f9f9f9;
  182.         border-bottom: 1px solid #eee;
  183.       }
  184.  
  185.       .example-btn {
  186.         padding: 8px 16px;
  187.         margin: 0 10px;
  188.         border: 2px solid #3a56a7;
  189.         border-radius: 4px;
  190.         background: white;
  191.         color: #3a56a7;
  192.         font-weight: bold;
  193.         cursor: pointer;
  194.         transition: all 0.3s ease;
  195.       }
  196.  
  197.       .example-btn:hover,
  198.       .example-btn.active {
  199.         background: #3a56a7;
  200.         color: white;
  201.       }
  202.  
  203.       #example1,
  204.       #example2 {
  205.         display: none;
  206.       }
  207.  
  208.       #example1.active,
  209.       #example2.active {
  210.         display: block;
  211.       }
  212.  
  213.       @media print {
  214.         .action-buttons,
  215.         .example-buttons {
  216.           display: none;
  217.         }
  218.  
  219.         body {
  220.           background: white;
  221.         }
  222.  
  223.         .container {
  224.           box-shadow: none;
  225.         }
  226.       }
  227.     </style>
  228.   </head>
  229.   <body>
  230.     <div class="container">
  231.       <div class="header">
  232.         <h1>Violation Details</h1>
  233.       </div>
  234.  
  235.       <div class="example-buttons">
  236.         <button class="example-btn active" onclick="showExample(1)">
  237.           Example 1: Ongoing Violation
  238.         </button>
  239.         <button class="example-btn" onclick="showExample(2)">
  240.           Example 2: Resolved Violation
  241.         </button>
  242.       </div>
  243.  
  244.       <!-- Example 1: Ongoing Violation -->
  245.       <div id="example1" class="active">
  246.         <div class="section">
  247.           <h2 class="section-title">Student Information</h2>
  248.           <div class="student-header">
  249.             <div class="student-name-section">
  250.               <h2>Juan Dela Cruz</h2>
  251.               <div class="student-id">LRN: 123456789012</div>
  252.             </div>
  253.           </div>
  254.  
  255.           <div class="student-info">
  256.             <div class="info-group">
  257.               <div class="info-label">Grade & Section</div>
  258.              <div class="info-value">Grade 10 - Einstein</div>
  259.            </div>
  260.  
  261.            <div class="info-group">
  262.              <div class="info-label">Sex</div>
  263.              <div class="info-value">Male</div>
  264.            </div>
  265.  
  266.            <div class="info-group">
  267.              <div class="info-label">Age</div>
  268.              <div class="info-value">16</div>
  269.            </div>
  270.  
  271.            <div class="info-group">
  272.              <div class="info-label">Contact Number</div>
  273.              <div class="info-value">09123456789</div>
  274.            </div>
  275.          </div>
  276.        </div>
  277.  
  278.        <div class="section">
  279.          <div class="meta-info">
  280.            <div class="meta-item">
  281.              Date Recorded: <strong>April 1, 2025</strong>
  282.            </div>
  283.            <div class="meta-item">Status: <strong>Ongoing</strong></div>
  284.          </div>
  285.  
  286.          <h2 class="section-title">Violation Information</h2>
  287.          <div class="info-group">
  288.            <div class="info-label">Violation Type</div>
  289.            <div class="info-value">
  290.              <span class="badge badge-danger">Bullying</span>
  291.            </div>
  292.          </div>
  293.  
  294.          <div class="info-group">
  295.            <div class="info-label">Violation Description</div>
  296.            <div class="info-value info-text">
  297.              Student was involved in verbal bullying of another student during
  298.              lunch break. Witnesses reported hearing derogatory comments and
  299.              threats being made. This is the second reported incident this
  300.              semester.
  301.            </div>
  302.          </div>
  303.        </div>
  304.  
  305.        <div class="section">
  306.          <h2 class="section-title">Incident Details</h2>
  307.          <div class="info-group">
  308.            <div class="info-label">Action Taken</div>
  309.            <div class="info-value info-text">
  310.              1. Immediate intervention by supervising teacher. 2. Both students
  311.              separated and brought to guidance office. 3. Parents of both
  312.              students notified via phone call. 4. Initial counseling session
  313.              conducted. 5. Incident documented and filed according to school
  314.              policy.
  315.            </div>
  316.          </div>
  317.        </div>
  318.  
  319.        <div class="section">
  320.          <h2 class="section-title">Counseling Sessions</h2>
  321.  
  322.          <div class="session-box">
  323.            <div class="session-date">Session Date: March 25, 2025</div>
  324.            <div class="info-group">
  325.              <div class="info-label">Session Summary</div>
  326.              <div class="info-value info-text">
  327.                Student expressed remorse for actions. Discussed underlying
  328.                issues including academic pressure and family concerns. Student
  329.                agreed to participate in weekly check-ins and anti-bullying
  330.                program.
  331.              </div>
  332.            </div>
  333.  
  334.            <div class="info-group">
  335.              <div class="info-label">Session Notes</div>
  336.              <div class="info-value info-text">
  337.                Student was initially resistant to discussing the incident but
  338.                opened up after establishing rapport. Identified triggers for
  339.                behavior and developed initial coping strategies. Recommended
  340.                continued individual counseling and possible group intervention.
  341.              </div>
  342.            </div>
  343.          </div>
  344.  
  345.          <div class="session-box">
  346.            <div class="session-date">Session Date: April 1, 2025</div>
  347.            <div class="info-group">
  348.              <div class="info-label">Session Summary</div>
  349.              <div class="info-value info-text">
  350.                Follow-up session showed improvement in attitude. Student
  351.                completed first worksheet on empathy building. Parents report
  352.                improved behavior at home as well. Will continue with scheduled
  353.                program.
  354.              </div>
  355.            </div>
  356.  
  357.            <div class="info-group">
  358.              <div class="info-label">Session Notes</div>
  359.              <div class="info-value info-text">
  360.                Student demonstrated improved self-awareness and showed genuine
  361.                interest in making amends. Discussed specific strategies for
  362.                managing anger and frustration. Role-played appropriate
  363.                responses to triggering situations. Next session will focus on
  364.                conflict resolution skills.
  365.              </div>
  366.            </div>
  367.          </div>
  368.        </div>
  369.  
  370.        <div class="action-buttons">
  371.          <button class="btn btn-primary">Resolve</button>
  372.          <button class="btn btn-secondary">Close</button>
  373.        </div>
  374.      </div>
  375.  
  376.      <!-- Example 2: Resolved Violation -->
  377.      <div id="example2">
  378.        <div class="section">
  379.          <h2 class="section-title">Student Information</h2>
  380.          <div class="student-header">
  381.            <div class="student-name-section">
  382.              <h2>Maria Santos</h2>
  383.              <div class="student-id">LRN: 987654321098</div>
  384.            </div>
  385.          </div>
  386.  
  387.          <div class="student-info">
  388.            <div class="info-group">
  389.              <div class="info-label">Grade & Section</div>
  390.              <div class="info-value">Grade 9 - Newton</div>
  391.            </div>
  392.  
  393.            <div class="info-group">
  394.              <div class="info-label">Sex</div>
  395.              <div class="info-value">Female</div>
  396.            </div>
  397.  
  398.            <div class="info-group">
  399.              <div class="info-label">Age</div>
  400.              <div class="info-value">15</div>
  401.            </div>
  402.  
  403.            <div class="info-group">
  404.              <div class="info-label">Contact Number</div>
  405.              <div class="info-value">09876543210</div>
  406.            </div>
  407.          </div>
  408.        </div>
  409.  
  410.        <div class="section">
  411.          <div class="meta-info">
  412.            <div class="meta-item">
  413.              Date Recorded: <strong>February 15, 2025</strong>
  414.            </div>
  415.            <div class="meta-item">Status: <strong>Resolved</strong></div>
  416.          </div>
  417.  
  418.          <h2 class="section-title">Violation Information</h2>
  419.          <div class="info-group">
  420.            <div class="info-label">Violation Type</div>
  421.            <div class="info-value">
  422.              <span class="badge badge-success">Cutting Classes</span>
  423.            </div>
  424.          </div>
  425.  
  426.          <div class="info-group">
  427.            <div class="info-label">Violation Description</div>
  428.            <div class="info-value info-text">
  429.              Student was found outside school premises during class hours
  430.              without permission. This is the first recorded incident of this
  431.              nature. Student admitted to leaving campus during mathematics
  432.              class due to anxiety about an upcoming test.
  433.            </div>
  434.          </div>
  435.        </div>
  436.  
  437.        <div class="section">
  438.          <h2 class="section-title">Incident Details</h2>
  439.          <div class="info-group">
  440.            <div class="info-label">Action Taken</div>
  441.            <div class="info-value info-text">
  442.              1. Student was escorted back to school by security personnel. 2.
  443.              Parents were notified immediately. 3. Initial discussion with
  444.              guidance counselor conducted. 4. Academic advisor consulted
  445.              regarding math anxiety. 5. Student assigned to after-school
  446.              detention for one week.
  447.            </div>
  448.          </div>
  449.        </div>
  450.  
  451.        <div class="section">
  452.          <h2 class="section-title">Counseling Sessions</h2>
  453.  
  454.          <div class="session-box">
  455.            <div class="session-date">Session Date: February 16, 2025</div>
  456.            <div class="info-group">
  457.              <div class="info-label">Session Summary</div>
  458.              <div class="info-value info-text">
  459.                Initial session to discuss reasons behind cutting class. Student
  460.                revealed significant math anxiety and pressure from parents to
  461.                maintain high grades. Developed short-term coping strategies and
  462.                communication plan with math teacher.
  463.              </div>
  464.            </div>
  465.  
  466.            <div class="info-group">
  467.              <div class="info-label">Session Notes</div>
  468.              <div class="info-value info-text">
  469.                Student was cooperative and honest about her struggles. Shows
  470.                signs of perfectionism and fear of failure. Recommended weekly
  471.                check-ins with guidance office and potential math tutoring.
  472.                Parents have been invited for a family conference to discuss
  473.                academic expectations.
  474.              </div>
  475.            </div>
  476.          </div>
  477.  
  478.          <div class="session-box">
  479.            <div class="session-date">Session Date: March 2, 2025</div>
  480.            <div class="info-group">
  481.              <div class="info-label">Session Summary</div>
  482.              <div class="info-value info-text">
  483.                Follow-up session showed significant improvement. Student has
  484.                attended all classes and implemented suggested coping
  485.                strategies. Meeting with math teacher was productive, and
  486.                accommodations were made for testing anxiety. Family meeting was
  487.                successful with parents agreeing to adjust expectations.
  488.              </div>
  489.            </div>
  490.  
  491.            <div class="info-group">
  492.              <div class="info-label">Session Notes</div>
  493.              <div class="info-value info-text">
  494.                Student demonstrated remarkable progress in just two weeks. Math
  495.                teacher reports active participation in class. Parents have
  496.                adjusted their approach, focusing on effort rather than just
  497.                grades. Student will continue weekly tutoring but counseling can
  498.                be reduced to monthly check-ins. Case can be considered resolved
  499.                with monitoring.
  500.              </div>
  501.            </div>
  502.          </div>
  503.  
  504.          <div class="session-box">
  505.            <div class="session-date">Session Date: April 1, 2025</div>
  506.            <div class="info-group">
  507.              <div class="info-label">Session Summary</div>
  508.              <div class="info-value info-text">
  509.                Final check-in confirms sustained improvement. Student has not
  510.                missed any classes for the past six weeks and reports decreased
  511.                anxiety. Recent math test score showed improvement, and student
  512.                used proper coping mechanisms before and during the test.
  513.              </div>
  514.            </div>
  515.  
  516.            <div class="info-group">
  517.              <div class="info-label">Session Notes</div>
  518.              <div class="info-value info-text">
  519.                Violation case officially resolved. Student has shown consistent
  520.                positive behavior and improved academic performance. Recommended
  521.                continued use of stress management techniques but no further
  522.                counseling sessions needed at this time. Student knows she can
  523.                access guidance services if needed in the future.
  524.              </div>
  525.            </div>
  526.          </div>
  527.        </div>
  528.  
  529.        <div class="action-buttons">
  530.          <button class="btn btn-success">Reopen</button>
  531.          <button class="btn btn-secondary">Close</button>
  532.        </div>
  533.      </div>
  534.    </div>
  535.  
  536.    <script>
  537.      function showExample(exampleNum) {
  538.        // Hide all examples
  539.        document.getElementById("example1").classList.remove("active");
  540.         document.getElementById("example2").classList.remove("active");
  541.  
  542.         // Show the selected example
  543.         document.getElementById("example" + exampleNum).classList.add("active");
  544.  
  545.         // Update button styles
  546.         const buttons = document.querySelectorAll(".example-btn");
  547.         buttons.forEach((btn, index) => {
  548.           if (index + 1 === exampleNum) {
  549.             btn.classList.add("active");
  550.           } else {
  551.             btn.classList.remove("active");
  552.           }
  553.         });
  554.       }
  555.     </script>
  556.   </body>
  557. </html>
  558.  
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!