-
Notifications
You must be signed in to change notification settings - Fork 0
/
twibbon.html
85 lines (77 loc) · 5.76 KB
/
twibbon.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<div class="page" data-name="twibbon">
<div class="navbar">
<div class="navbar-bg"></div>
<div class="navbar-inner sliding">
<div class="left">
<a href="#" class="link back">
<i class="icon icon-back"></i>
<span class="ios-only">Back</span>
</a>
</div>
<div class="title">Twibbon</div>
</div>
</div>
<div class="page-content">
<div class="row mybsmi-twibbon">
<div class="col-100 small-75 medium-55 xlarge-40" >
<div class="card">
<div class="card-header display-flex flex-direction-column justify-content-center align-content-center align-items-center text-align-center">
<img class="mybsmi-twibbon-avatar" src="avatar.png" style="width:4em;aspect-ratio: 1 / 1;height:4em;object-fit:cover;border-radius:50% 50%;overflow:hidden;">
<p class="no-margin-bottom color-gray mybsmi-twibbon-nama text-color-red" style="font-weight:normal"></p>
<p class="no-margin-bottom mybsmi-twibbon-judul"></p>
<p class="no-margin-bottom color-gray" style="font-weight:normal;font-size:0.8em"><i class="icons f7-icons size-16">person_2</i> <span class="mybsmi-twibbon-pendukung"></span> Pendukung <i class="icons f7-icons size-16">paperclip</i> Twibbon <i class="icons f7-icons size-16">calendar</i> <span class="mybsmi-twibbon-date"></span></p>
<p class="no-margin-bottom color-gray mybsmi-twibbon-deskripsi" style="font-weight:normal"></p>
</div>
<div class="card-content card-content-padding">
<!--<img class="mybsmi-twibbon-poster" src="photo.svg" style="width:100%;aspect-ratio: 1 / 1;object-fit:cover;">-->
<canvas id="mybsmi-twibbon-canvas" style="width:100%;aspect-ratio: 1 / 1;"></canvas>
<canvas id="mybsmi-twibbon-canvas-photo" class="display-none" style="width:100%;aspect-ratio: 1 / 1;"></canvas>
<input id="zoom-slider" type="range" class="display-none" style="width:100%"/>
<img id="mybsmi-twibbon-poster" class="display-none" src="photo.svg" style="width:100%;aspect-ratio: 1 / 1;object-fit:cover;">
<img id="mybsmi-twibbon-photo" class="display-none" src="photo.svg" style="width:100%;">
<form class="display-none">
<input id="mybsmi-twibbon-photo-upload" type="file" accept="image/*">
</form>
<label id="mybsmi-twibbon-photo-watermark" class="item-content display-none">
<div class="item-inner">
<div class="item-title float-left">Watermark </div>
<div class="item-after float-right">
<div class="toggle toggle-init color-red">
<input type="checkbox" checked>
<span class="toggle-icon"></span>
</div>
</div>
</div>
</label>
</div>
<div class="card-footer">
<button class="button button-fill mybsmi-twibbon-photo-button"><i class="icons f7-icons">photo</i> <span>PILIH PHOTO</span></button>
<button class="button button-fill mybsmi-twibbon-photo-download display-none"><i class="icons f7-icons">cloud_download</i> <span>Download</span></button>
<button class="button button-fill mybsmi-twibbon-photo-bagikan display-none"><i class="icons f7-icons">app_badge</i> <span>Bagikan</span></button>
</div>
</div>
</div>
</div>
<div class="row margin-bottom mybsmi-twibbon">
<div class="col-100 small-75 medium-55 xlarge-40" >
<div class="card">
<div class="card-header">Pendukung <span class="mybsmi-twibbon-pendukung"></span></div>
<div class="card-content card-content-padding">
<div class="row mybsmi-twibbon-pendukungdetail" style="width:100%">
<!-- <div class="col-100 margin-bottom">
<div class="float-left" style="width:3em;"><img src="https://drive.google.com/uc?export=view&id=1DpW9uvPjFuVJkBr05sXfGQd2uuBK0toU" style="width:1.5em;aspet-ratio 1/1;object-fit:cover;border-radius:50% 50%;overflow:hidden;"></div>
<div class="float-left" style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">Nuzulul Zulkarnain</div>
</div>
<div class="col-100 margin-bottom">
<div class="float-left" style="width:3em;"><img src="https://drive.google.com/uc?export=view&id=1DpW9uvPjFuVJkBr05sXfGQd2uuBK0toU" style="width:1.5em;aspet-ratio 1/1;object-fit:cover;border-radius:50% 50%;overflow:hidden;"></div>
<div class="float-left" style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">Nuzulul Zulkarnain</div>
</div>
-->
</div>
</div>
<div class="card-footer"><span class="mybsmi-twibbon-share"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-share" viewBox="0 0 16 16"> <path d="M13.5 1a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3M11 2.5a2.5 2.5 0 1 1 .603 1.628l-6.718 3.12a2.499 2.499 0 0 1 0 1.504l6.718 3.12a2.5 2.5 0 1 1-.488.876l-6.718-3.12a2.5 2.5 0 1 1 0-3.256l6.718-3.12A2.5 2.5 0 0 1 11 2.5m-8.5 4a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3m11 5.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3"/> </svg></span></div>
</div>
</div>
</div>
</div>
</div>