artFi/app/templates/create_art.html

{% extends "base.html" %}

{% block content %}

<script>
$(function(){
  /* Set the Max date */
  var dtToday = new Date();

  var month = dtToday.getMonth() + 1;
  var day = dtToday.getDate() + 7;
  var year = dtToday.getFullYear();

  if(month < 10)
      month = '0' + month.toString();
  if(day < 10)
      day = '0' + day.toString();

  var maxDate = year + '-' + month + '-' + day;    
  /* Set the Min date */
  var dtToday_min = new Date();
  
  var month_min = dtToday.getMonth() + 1;
  var day_min = dtToday.getDate()+1;
  var year_min = dtToday.getFullYear();
  if(month_min < 10)
      month_min = '0' + month_min.toString();
  if(day_min < 10)
      day_min = '0' + day_min.toString();
  
  var minDate = year_min + '-' + month_min + '-' + day_min;
  
  /* Run the codes */
  $('#closing_date').attr('max', maxDate);
  $('#closing_date').attr('min', minDate);
});
</script>
<div class="container-create_art">
  <div class="wrap-create_art">
    <div class="create_art-pic" data-tilt>
      <img src="static/repository/website_photo/painting.jpg" alt="IMG">
    </div>
    <form action="" method="POST" enctype="multipart/form-data" class="contact100-form">
      <span class="create_art-form-title">
        <b>Create Art Auction</b>
      </span>
      <!--Input Art Name-->
      <div class="create_art-input-box">
        <input 
        type="art_name" 
        class="form-control create_art-input" 
        id="art_name"
        name="art_name"
        placeholder="Enter Art Name"
        />
      </div>
      <!--Input Minimum Price-->
      <div class="create_art-input-box">
        <input 
        type="number" 
        class="form-control create_art-input" 
        id="minimum_price"
        name="minimum_price"
        placeholder="Enter Minimum Price (USD)"
        />
      </div> 
      <!--Input Buyout Price-->
      <div class="create_art-input-box">
        <input 
        type="number" 
        class="form-control create_art-input" 
        id="buyout_price"
        name="buyout_price"
        placeholder="Enter Buyout Price (USD)"
        />
      </div>
      <!--Input Description-->
      <div class="create_art-input-box">
        <textarea type="description" class="form-control create_art-input description_size" id="description" name="description" placeholder="     Enter Description"></textarea>
      </div>
      <!--Upload Art or choose what they bought before-->
      <hr style="border: 2px solid rgb(177, 176, 176); width:327px; border-radius: 5px;">
      <div class="input-group">  
        <div class="input-group-prepend">  
          <span class="input-group-text"> File Upload </span>  
        </div>  
        <div class="custom-file">  
          <input type="file" id="art_img" name="art_img" accept="image/jpg, image/png">  
          <label class="custom-file-label"> Choose file </label>  
        </div>  
      </div>
      <p class="body-column-create_art" style="margin-top: 10px; font-size: 20px;"><b>OR</b></p>
      <!-- Dropdown Menu-->
      <div class="row">
        <div class="col input-group-prepend">  
          <span class="input-group-text">Select Art in Platform</span>  
          <select class="btn btn-secondary dropdown-toggle" name="web_group" style="height:47px; width:220px" required aria-invalid="false"> 
            <option value="cng-555">Select here</option>
            <option name="web_group" value="bought_art">bought_Art</option>
          </select>
        </div>
      </div>
      <hr style="border: 2px solid rgb(177, 176, 176); width:327px; border-radius: 5px;">
      <!--Choose Time for Auction ends (I will check how I can limit the user 14days)-->
      <div class="row">
        <div class="col input-group-prepend">  
          <span class="input-group-text" style="height:47px; width:175px">Auction End Date</span>
          <input type="date" id="closing_date" name="closing_date" class="body-column-create_art" style="height:47px; width:220px">
        </div>
      </div>
      <!-- Tips for the date to let user know-->
      <div class="row" style="margin-left:2px">
        <small>Tips:</small>
      </div>
      <div class="row" style="margin-left:25px">
        <small>- The maximum Auction time is 14 days</small>
      </div>
      <div class="row" style="margin-left:25px">
        <small>- The exact time of closing is 0000 hrs of that date</small>
      </div>
      <!-- Button for create Auction-->
      <div class="container-create_art-form-btn">
        <button class="create_art-form-btn">
          Create
        </button>
      </div>
    </form>
  </div>
</div>
{% endblock %}