JSFiddle - React, Tailwind, and code Playground

by dshilkret

HTML

<!DOCTYPE html>
<html ng-app="signatureApp">
<head>
  <title>Document Signature Preferences</title>
  <link rel="stylesheet" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
  <script src="app.js"></script>
</head>
<body ng-controller="SignatureController as ctrl">

<div class="signature-panel">
  <h2>SIGNATURE REQUIRED</h2>
  <p>The document(s) below will require a signature from the Assigned Members specified by you. Go ahead and assign the document to Assignees</p>
  
  <div ng-repeat="document in ctrl.documents">
    <span>{{ document.name }}</span>
    <span>{{ document.size }}</span>
    <button ng-click="ctrl.removeDocument($index)">X</button>
  </div>
  
  <button ng-click="ctrl.submit()">SUBMIT</button>
  <button ng-click="ctrl.cancel()">CANCEL</button>
</div>

<div class="preferences-panel">
  <h2>DOCUMENT PREFERENCES</h2>
  <div class="file-preview">
    <h3>FILE PREVIEW</h3>
    <div ng-repeat="preference in ctrl.preferences track by $index">
      <span>{{$index + 1}}</span>
      <input type="text" ng-model="preference.assignee" placeholder="Add Assignee(s)">
      <input type="text" ng-model="preference.dueDate" placeholder="Due Date">
      <button ng-click="ctrl.removePreference($index)">X</button>
    </div>
    <button ng-click="ctrl.addPreference()">+</button>
  </div>
  
  <div class="advanced-preferences">
    <h3>Advanced Preferences</h3>
    <!-- Other content here -->
  </div>
</div>

</body>
</html>

CSS

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    padding: 20px;
}

.left-panel, .right-panel {
    border: 1px solid #ccc;
    margin: 10px;
    padding: 20px;
    width: calc(50% - 40px); /* Adjust width minus margin and padding */
}

h2 {
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.file-item, .file-preference-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding: 10px;
    background-color: #f9f9f9;
    border: 1px solid #eee;
}

button {
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

.cancel-btn {
    background-color: #6c757d;
}

.cancel-btn:hover {
    background-color: #5a6268;
}

.add-btn {
    font-size: 24px;
    line-height: 24px;
    width: 24px;
    height: 24px;
    padding: 0;
    background-color: #28a745;
}

.add-btn:hover {
    background-color: #218838;
}

.submit-btn, .cancel-btn {
    margin-top: 20px;
}

.advanced-preferences {
    margin-top: 20px;
}

.handle {
    color: #999;
    margin-right: 10px;
}

.file-preview h3, .advanced-preferences h3 {
    margin-top: 20px;
    font-size: 16px;
    font-weight: normal;
    color: #333;
}

JavaScript

var app = angular.module('signatureApp', []);

app.controller('SignatureController', function() {
  this.documents = [{
    name: 'SignatureRequired.pdf',
    size: '359 kb'
  }];

  this.preferences = [{
    assignee: '',
    dueDate: ''
  }, {
    assignee: '',
    dueDate: ''
  }, {
    assignee: '',
    dueDate: ''
  }];

  this.addPreference = function() {
    this.preferences.push({
      assignee: '',
      dueDate: ''
    });
  };

  this.removePreference = function(index) {
    this.preferences.splice(index, 1);
  };

  this.submit = function() {
    // Logic to handle submission
  };

  this.cancel = function() {
    // Logic to handle cancelation
  };
});