daily pastebin goal
10%
SHARE
TWEET

Untitled

a guest Oct 12th, 2018 57 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <template>
  2.    <div>
  3.   <div id="dropzone">
  4.   <p class="2nd-floor">2ND FLOOR</p>
  5.   <p class="empty-floor-message">This floor is empty. Upload a floor map.</p>
  6.   <div class="Rectangle-Copy-6">
  7.     <div class="outer-circle">
  8.     <div class="Oval-6" id="drag-and-drop">
  9.       <i class="fas fa-arrow-up fa-2x" id="arrow"></i>
  10.     </div>
  11.     </div>
  12.    <div class="Drag-Drop-the-file">
  13.    <h1>Drag & Drop</h1>
  14.     <a class="fileContainer">the file <span class="browse">or browse</span><input type="file"></a>
  15.    </div>
  16.  
  17.   </div>
  18.      </div>
  19.  </div>
  20. </template>
  21.  
  22. <script>
  23. import * as Dropzone from 'dropzone';
  24.  
  25. export default {
  26.   mounted() {
  27.      $("#dropzone").dropzone({
  28.      url: '/upload',
  29.      createImageThumbnails: true,
  30.    });
  31.  
  32.   }
  33. }
  34. </script>
  35.  
  36.  
  37. <style>
  38. .Sofia-DC-2nd-floor {
  39.   width: 266px;
  40.   height: 29px;
  41.   font-family: ProximaNova;
  42.   font-size: 24px;
  43.   font-weight: 900;
  44.   font-style: normal;
  45.   font-stretch: normal;
  46.   line-height: normal;
  47.   letter-spacing: normal;
  48.   margin: 0 auto;
  49.   color: #000000;
  50. }
  51.  
  52. .Rectangle-Copy-6 {
  53.   width: 388px;
  54.   height: 280px;
  55.   border-radius: 8px;
  56.   border: solid 2px#00a6ce;
  57.   border-style: dashed;
  58.   margin: 0 auto;
  59.   padding: 15px;
  60. }
  61.  
  62. .Drag-Drop-the-file {
  63.   width: 225px;
  64.   height: 56px;
  65.   font-family: OpenSans;
  66.   font-size: 14px;
  67.   font-weight: normal;
  68.   font-style: normal;
  69.   font-stretch: normal;
  70.   line-height: 2;
  71.   letter-spacing: normal;
  72.   color: #000000;
  73.   margin: 0 auto;
  74.   margin-top: 25px;
  75. }
  76.  
  77.  
  78. .empty-floor-message {
  79.   width: 442px;
  80.   height: 28px;
  81.   font-family: OpenSans;
  82.   font-size: 18px;
  83.   font-weight: bold;
  84.   line-height: 1.56;
  85.   letter-spacing: normal;
  86.   text-align: center;
  87. }
  88.  
  89.  
  90. a.fileContainer {
  91.   overflow: hidden;
  92.   position: relative;
  93.   display: inline-block;
  94. }
  95.  
  96.  
  97. a.fileContainer>input[type=file] {
  98.   cursor: inherit;
  99.   filter: alpha(opacity=0);
  100.   opacity: 0;
  101.   position: absolute;
  102.   top: 0;
  103.   left: 0;
  104.   width: 100%;
  105.   height: 100%;
  106.   text-align: right;
  107. }
  108.  
  109. .browse {
  110.   text-decoration: underline;
  111.   color: #00a6ce;
  112.   font-weight: bold
  113. }
  114.  
  115. a {
  116.   font-size: 24px;
  117. }
  118.  
  119. a:hover {
  120.   cursor: pointer;
  121. }
  122.  
  123. .Oval-6 {
  124.   width: 82px;
  125.   height: 82px;
  126.   border: solid 3px #c8f4ff;
  127.   border-radius: 50%;
  128.   margin: 0 auto;
  129. }
  130.  
  131. h1 {
  132.   text-align: center;
  133. }
  134. #arrow {
  135.   margin-left: 23px;
  136.   margin-top: 23px;
  137.   color: #C8F4FF;
  138. }
  139.  
  140. </style>
RAW Paste Data
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
 
Top