Immanuel
/
trendplays
1
0
Bifurcation 0
Code Tickets 0 Demandes d'ajout 0 Versions 1 Wiki Activité
Parcourir la source

Style services overlay

tags/v0.1.0
Immanuel Onyeka il y a 3 ans
Parent
b24b3b74d4
révision
a79f5fe771
5 fichiers modifiés avec 202 ajouts et 7 suppressions
Vue séparée
Option de Diff
Voir les Statistiques Télécharger le Fichier Patch Télécharger le Fichier des Différences
  1. +67
    -0
      resources/js/icons/instagram.vue
  2. +39
    -0
      resources/js/icons/youtube.vue
  3. +1
    -1
      resources/js/panel/service-pane.vue
  4. +20
    -0
      resources/js/panel/services.vue
  5. +75
    -6
      resources/scss/main.scss

+ 67
- 0
resources/js/icons/instagram.vue Voir le fichier

@@ -0,0 +1,67 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 551.034 551.034" style="enable-background:new 0 0 551.034 551.034;" xml:space="preserve">
<g>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="275.517" y1="4.57" x2="275.517" y2="549.72" gradientTransform="matrix(1 0 0 -1 0 554)">
<stop offset="0" style="stop-color:#E09B3D"/>
<stop offset="0.3" style="stop-color:#C74C4D"/>
<stop offset="0.6" style="stop-color:#C21975"/>
<stop offset="1" style="stop-color:#7024C4"/>
</linearGradient>
<path style="fill:url(#SVGID_1_);" d="M386.878,0H164.156C73.64,0,0,73.64,0,164.156v222.722
c0,90.516,73.64,164.156,164.156,164.156h222.722c90.516,0,164.156-73.64,164.156-164.156V164.156
C551.033,73.64,477.393,0,386.878,0z M495.6,386.878c0,60.045-48.677,108.722-108.722,108.722H164.156
c-60.045,0-108.722-48.677-108.722-108.722V164.156c0-60.046,48.677-108.722,108.722-108.722h222.722
c60.045,0,108.722,48.676,108.722,108.722L495.6,386.878L495.6,386.878z"/>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="275.517" y1="4.57" x2="275.517" y2="549.72" gradientTransform="matrix(1 0 0 -1 0 554)">
<stop offset="0" style="stop-color:#E09B3D"/>
<stop offset="0.3" style="stop-color:#C74C4D"/>
<stop offset="0.6" style="stop-color:#C21975"/>
<stop offset="1" style="stop-color:#7024C4"/>
</linearGradient>
<path style="fill:url(#SVGID_2_);" d="M275.517,133C196.933,133,133,196.933,133,275.516s63.933,142.517,142.517,142.517
S418.034,354.1,418.034,275.516S354.101,133,275.517,133z M275.517,362.6c-48.095,0-87.083-38.988-87.083-87.083
s38.989-87.083,87.083-87.083c48.095,0,87.083,38.988,87.083,87.083C362.6,323.611,323.611,362.6,275.517,362.6z"/>
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="418.31" y1="4.57" x2="418.31" y2="549.72" gradientTransform="matrix(1 0 0 -1 0 554)">
<stop offset="0" style="stop-color:#E09B3D"/>
<stop offset="0.3" style="stop-color:#C74C4D"/>
<stop offset="0.6" style="stop-color:#C21975"/>
<stop offset="1" style="stop-color:#7024C4"/>
</linearGradient>
<circle style="fill:url(#SVGID_3_);" cx="418.31" cy="134.07" r="34.15"/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

+ 39
- 0
resources/js/icons/youtube.vue Voir le fichier

@@ -0,0 +1,39 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 461.001 461.001" style="enable-background:new 0 0 461.001 461.001;" xml:space="preserve">
<path style="fill:#F61C0D;" d="M365.257,67.393H95.744C42.866,67.393,0,110.259,0,163.137v134.728
c0,52.878,42.866,95.744,95.744,95.744h269.513c52.878,0,95.744-42.866,95.744-95.744V163.137
C461.001,110.259,418.135,67.393,365.257,67.393z M300.506,237.056l-126.06,60.123c-3.359,1.602-7.239-0.847-7.239-4.568V168.607
c0-3.774,3.982-6.22,7.348-4.514l126.06,63.881C304.363,229.873,304.298,235.248,300.506,237.056z"/>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

+ 1
- 1
resources/js/panel/service-pane.vue Voir le fichier

@@ -2,7 +2,7 @@
<section class="services-pane youtube" >
<h4>{{site.charAt(0).toUpperCase() + site.slice(1)}}</h4>
<ul :key="service.id" v-for="service in filter(site)">
<li><span>{{service.name}}</span><span>{{service.price}}</span><span>{{service.minimum}}</span><span>{{service.maximum}}</span>
<li><span>{{service.name}}</span><span>{{service.price}}</span><span>{{service.minimum.toLocaleString('en')}}</span><span>{{service.maximum.toLocaleString('en')}}</span>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-square-fill" viewBox="0 0 16 16">
<path d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z"/>
</svg>


+ 20
- 0
resources/js/panel/services.vue Voir le fichier

@@ -12,6 +12,26 @@
<ServicePane :site="'instagram'" :services="services"></ServicePane>
<ServicePane :site="'twitter'" :services="services"></ServicePane>
<ServicePane :site="'tiktok'" :services="services"></ServicePane>
<div id="overlay">
<img class="cancel icon" src="../../images/cancel-icon2.svg" alt=""/>
<div class="overlay-item">
<img class="icon" src="../../images/youtube-icon.svg" alt="">
<h3>Location Targeted Views</h3>
<h4>Quantity</h4>
<div><input required type="number"><span> / 10000</span></div>
<h4>Location</h4>
<div><select required id="country" name="">
<option value="usa">USA</option>
<option value="canada">Canada</option>
<option value="uk">United Kingdom</option>
<option value="germany">Germany</option>
<option value="france">France</option>
</select></div>
<h4>URL</h4>
<div><input required type="url" id="url"></div>
<button>Submit</button>
</div>
</div>
</div>
</template>



+ 75
- 6
resources/scss/main.scss Voir le fichier

@@ -43,12 +43,17 @@ ul {
padding: 0;
}

input {
input, select {
border: 2px solid black;
border-radius: 20px;
padding: 4px;
}

.icon {
width: 25px;
margin: 10px;
}

.services-cards li {
padding-bottom: 8px;
&:before {
@@ -753,11 +758,6 @@ main.panel {
margin: 0;
}

.icon {
width: 25px;
margin: 10px;
}

.welcome-pane {
text-align: center;
}
@@ -1060,3 +1060,72 @@ main.panel {
color: vars.getColor('dark-orange');
}
}


#overlay {
position: fixed;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
left: 0;
top: 0;

.overlay-item {
transform: translateY(-50px);
width: 20em;
height: 20em;
background: white;
margin: auto;
margin-top: 25%;
opacity: 1;
border-radius: 4px;
padding: 5px;
@include vars.hovering2;

div {
width: 15em;
margin: auto;
margin-bottom: 1em;
}

input {
// width: 40%;
display: inline;
}
}

.icon {
width: 40px;
height: 40px;
display: block;
margin: 0 auto;
}

h3 {
text-align: center;
margin-top: 5px;
}

h4 {
text-align: center;
}

.cancel {
width: 30px;
margin-right: 10px;
margin-top: 10px;
}

button {
display: block;
margin: auto;
@include vars.brand-button('brand-orange');
width: 7em;
}

#url {
width: 100%;
}

}


Écrire Aperçu
Chargement…
Annuler
Enregistrer