Voici un code mis à votre disposition pour vos sms. Lisez-bien ce qui suit, vous allez voir, c'est simple d'utilisation. Un exemple est donné en-dessous pour un maximum de compréhension.
❯ Téléphone d'accueil:Voici
le premier code à insérer pour ouvrir votre sujet. Comme son titre l'indique, il s'agit simplement d'un téléphone d'accueil pour faire tout beau tout joli.
- Spoiler:
- Code:
-
<div class="phone"><div class="lockscreen"><div class="icons"></div><div class="lockicon"><img src="https://i.ibb.co/gDXjg8J/cadenas.png"></div><div class="time">21:23</div><div class="date">Friday, May 15th</div><div class="notif"><div class="spotify_album"><img src="https://i1.sndcdn.com/artworks-ubKDzyhsRDqT-0-t500x500.jpg"></div><div class="spotify_song" style="margin-left:5px;"><span style="font-size:8px;line-height:12px;">IPhone</span><br><span style="font-weight:700;line-height:10px;font-size:12px;">Everybody knows</span><br>Sigrid - Justice League</div><div class="spotify_musicplayer"><img src="https://i.ibb.co/L5nXdvY/Pngtree-png-music-player-background-8468984.png"></div></div><div class="notif" style="margin-top:5px;padding:0!important;"><div class="notif_header"><img src="https://2img.net/image.noelshack.com/fichiers/2016/45/1478945172-icon.png">MESSAGES</div><div class="apercu_pseudo">Verizon</div><div class="apercu_texto">Votre nouvelle facture est prête. Connectez-vous pour en savoir plus. </div></div></div></div>
<div class="bouton_unlock" tabindex="0">slide to unlock<div class="arrow">❯</div><div class="unlockscreenmain"><br><div class="contenu_unlockscreen">
</div></div></div></div></div>
<style>.lockscreen{position:absolute;width:245px;height:445px;margin:56px 0 0 49px;background-image:url(https://i.ibb.co/DtW0fpx/pexels-photo-12167617.jpg);background-size:cover;z-index:3;}.phone{width:350px;height:600px;margin:auto;background-image:url(https://i.servimg.com/u/f15/20/38/34/97/xa5has12.png);font-family:Roboto;text-align:center;}.icons{width:255px;height:30px;margin-left:-5px;background-image:url(https://i.servimg.com/u/f15/20/38/34/97/icones10.png);background-size:contain;opacity:0.5;}.lockicon img{width:50px;opacity:0.6;}.time{margin-top:25px;font-size:55px;font-family:Roboto;font-weight:100;color:#959393;}.date{font-family:roboto;font-size:14px;font-weight:300;margin:18px auto 5px;color:#959393;}.notif{backdrop-filter: blur(3px);padding:5px 5px 0 5px; width:92%; background-color:#a1a1a150;border-radius:10px;margin:auto;box-sizing:border-box;text-align:left;display:flex;flex-wrap:wrap;align-items:center;color:#121212;}.notif_header{width:100%; display:flex; height:20px;background-color:#a1a1a160; border-radius:5px 5px 0 0;padding: 2px 0 2px 5px;align-items:center;}.notif_header img {width:15px;margin-right:5px;opacity:0.7;}.spotify_album img{height:45px;width:45px;border-radius:3px;}.spotify_musicplayer{text-align:center;width:100%;} .spotify_musicplayer img{height:45px;width:90%;opacity:0.8;margin-top:5px;text-align:center;} .apercu_texto{width:100%;padding:3px 5px;margin-top:-5px;line-height:12px;}.arrow {color:black;border-radius:5px;transition: width 1s;position:relative;height:30px; width:20px; padding:6px;background-color:#a1a1a160;font-size:20px;text-align:right;margin-top: -25px;margin-left: -7px; box-sizing:border-box;z-index:5;}.bouton_unlock {font-size:15px;backdrop-filter: blur(1px);border-radius:5px;background-color:#00000060;opacity:1;position:relative; height:30px;width: 200px;margin:-187px auto 75px;z-index:5;padding:7px;box-sizing:border-box;text-align:center;font-family:roboto;}.bouton_unlock .unlockscreenmain {position:absolute;opacity:0;transition:opacity 0s; transition-delay:3s; margin-top:-423px; margin-left:-33px; width:245px; height:445px; padding:5px; overflow:hidden; text-align:justify; font-size:11px; line-height:14px;background-size:cover;box-sizing:border-box;}.bouton_unlock:hover .unlockscreenmain {opacity:1 !important; transition-delay:1s;}.bouton_unlock:hover .arrow{width:200px;transistion-delay:0s;}::-webkit-scrollbar {display: none;}.unlockscreenmain{z-index:99;background-image:url(https://i.ibb.co/FJbhCfy/main.jpg);filter:brightness(0.7);}.apercu_pseudo{padding-left:5px;font-weight:700}</style>
❯ Initier un SMS: Voici
le deuxième code à insérer dans le même post. Ce code devra être
ajouté entre les balises Code. C'est aussi celui que vous utiliserez lorsque vous serez
celui ou celle qui initie la conversation:
- Spoiler:
- Code:
-
<div class="phone"><div class="lockscreen"><div class="icons"></div><div class="lockicon"><img src="https://i.ibb.co/gDXjg8J/cadenas.png"></div><div class="time">21:23</div><div class="date">Friday, May 15th</div><div class="notif"><div class="spotify_album"><img src="https://i1.sndcdn.com/artworks-ubKDzyhsRDqT-0-t500x500.jpg"></div><div class="spotify_song" style="margin-left:5px;"><span style="font-size:8px;line-height:12px;">IPhone</span><br><span style="font-weight:700;line-height:10px;font-size:12px;">Everybody knows</span><br>Sigrid - Justice League</div><div class="spotify_musicplayer"><img src="https://i.ibb.co/L5nXdvY/Pngtree-png-music-player-background-8468984.png"></div></div><div class="notif" style="margin-top:5px;padding:0!important;"><div class="notif_header"><img src="https://2img.net/image.noelshack.com/fichiers/2016/45/1478945172-icon.png">MESSAGES</div><div class="apercu_pseudo">Verizon</div><div class="apercu_texto">Votre nouvelle facture est prête. Connectez-vous pour en savoir plus. </div></div></div></div>
<div class="bouton_unlock" tabindex="0">slide to unlock<div class="arrow">❯</div><div class="unlockscreen"><br><div class="pseudo_contact">PSEUDO</div><br><div class="now" style="margin-top:-5px">Aujourd'hui</div><div class="contenu_unlockscreen">
<div class="sms reply">TEXTO DE RÉPONSE </div>
</div></div></div></div></div>
<style>.lockscreen{position:absolute;width:245px;height:445px;margin:56px 0 0 49px;background-image:url(https://i.ibb.co/DtW0fpx/pexels-photo-12167617.jpg);background-size:cover;z-index:3;}.phone{width:350px;height:600px;margin:auto;background-image:url(https://i.servimg.com/u/f15/20/38/34/97/xa5has12.png);font-family:Roboto;text-align:center;}.icons{width:255px;height:30px;margin-left:-5px;background-image:url(https://i.servimg.com/u/f15/20/38/34/97/icones10.png);background-size:contain;opacity:0.5;}.lockicon img{width:50px;opacity:0.6;}.time{margin-top:25px;font-size:55px;font-family:Roboto;font-weight:100;color:#959393;}.date{font-family:roboto;font-size:14px;font-weight:300;margin:18px auto 5px;color:#959393;}.notif{backdrop-filter: blur(3px);padding:5px 5px 0 5px; width:92%; background-color:#a1a1a150;border-radius:10px;margin:auto;box-sizing:border-box;text-align:left;display:flex;flex-wrap:wrap;align-items:center;color:#121212;}.notif_header{width:100%; display:flex; height:20px;background-color:#a1a1a160; border-radius:5px 5px 0 0;padding: 2px 0 2px 5px;align-items:center;}.notif_header img {width:15px;margin-right:5px;opacity:0.7;}.spotify_album img{height:45px;width:45px;border-radius:3px;}.spotify_musicplayer{text-align:center;width:100%;} .spotify_musicplayer img{height:45px;width:90%;opacity:0.8;margin-top:5px;text-align:center;} .apercu_texto{width:100%;padding:3px 5px;margin-top:-5px;line-height:12px;}.arrow {color:black;border-radius:5px;transition: width 1s;position:relative;height:30px; width:20px; padding:6px;background-color:#a1a1a160;font-size:20px;text-align:right;margin-top: -25px;margin-left: -7px; box-sizing:border-box;z-index:5;}.bouton_unlock {font-size:15px;backdrop-filter: blur(1px);border-radius:5px;background-color:#00000060;opacity:1;position:relative; height:30px;width: 200px;margin:-187px auto 75px;z-index:5;padding:7px;box-sizing:border-box;text-align:center;font-family:roboto;}.bouton_unlock .unlockscreen {position:absolute;opacity:0;transition:opacity 0s; transition-delay:3s; margin-top:-423px; margin-left:-33px; width:245px; height:445px; padding:5px; overflow:hidden; text-align:justify; font-size:11px; line-height:14px;background-size:cover;box-sizing:border-box;}.bouton_unlock:hover .unlockscreen {opacity:1 !important; transition-delay:1s;}.bouton_unlock:hover .arrow{width:200px;transistion-delay:0s;}::-webkit-scrollbar {display: none;}.unlockscreen{z-index:99;background-image:url(https://i.servimg.com/u/f15/20/38/34/97/essai12.jpg);filter:brightness(0.9);}.contenu_unlockscreen{overflow-y:auto;overflow-x:hidden; height:313px; width:100%}.now{font-size:9px; color:#ccc;text-align:center;margin: 15px 0 0 0;}.pseudo_contact{font-size:9px; color:#121212;text-align:center;margin: 15px 0 0 0;}.sms {width: 80%; padding: 5px; text-align: left;} .message {background: #2EA2FD; color: #fff; margin: 0 0 0 35px; border-radius: 15px 15px 0 15px;} .reply {background: #E5E5EA; color: #000; margin: 0px 0 0px 5px; border-radius: 15px 15px 15px 0;}.apercu_pseudo{padding-left:5px;font-weight:700}</style>
❯ Répondre à un SMS:Voici
le troisième code à insérer. Encore une fois, ce code devra être
ajouté entre les balises Code. Il s'agit de celui que vous utiliserez
lorsque vous voudrez répondre à un texto qu'on vous a envoyé.
- Spoiler:
- Code:
-
<div class="phone"><div class="lockscreen"><div class="icons"></div><div class="lockicon"><img src="https://i.ibb.co/gDXjg8J/cadenas.png"></div><div class="time">21:23</div><div class="date">Friday, May 15th</div><div class="notif"><div class="spotify_album"><img src="https://i1.sndcdn.com/artworks-ubKDzyhsRDqT-0-t500x500.jpg"></div><div class="spotify_song" style="margin-left:5px;"><span style="font-size:8px;line-height:12px;">IPhone</span><br><span style="font-weight:700;line-height:10px;font-size:12px;">Everybody knows</span><br>Sigrid - Justice League</div><div class="spotify_musicplayer"><img src="https://i.ibb.co/L5nXdvY/Pngtree-png-music-player-background-8468984.png"></div></div><div class="notif" style="margin-top:5px;padding:0!important;"><div class="notif_header"><img src="https://2img.net/image.noelshack.com/fichiers/2016/45/1478945172-icon.png">MESSAGES</div><div class="apercu_pseudo">Verizon</div><div class="apercu_texto">Votre nouvelle facture est prête. Connectez-vous pour en savoir plus. </div></div></div></div>
<div class="bouton_unlock" tabindex="0">slide to unlock<div class="arrow">❯</div><div class="unlockscreen"><br><div class="pseudo_contact">PSEUDO</div><br><div class="now" style="margin-top:-5px">Aujourd'hui</div><div class="contenu_unlockscreen"><div class="sms message">TEXTO DE DÉBUT</div>
<div class="sms reply">TEXTO DE RÉPONSE </div>
</div></div></div></div></div>
<style>.lockscreen{position:absolute;width:245px;height:445px;margin:56px 0 0 49px;background-image:url(https://i.ibb.co/DtW0fpx/pexels-photo-12167617.jpg);background-size:cover;z-index:3;}.phone{width:350px;height:600px;margin:auto;background-image:url(https://i.servimg.com/u/f15/20/38/34/97/xa5has12.png);font-family:Roboto;text-align:center;}.icons{width:255px;height:30px;margin-left:-5px;background-image:url(https://i.servimg.com/u/f15/20/38/34/97/icones10.png);background-size:contain;opacity:0.5;}.lockicon img{width:50px;opacity:0.6;}.time{margin-top:25px;font-size:55px;font-family:Roboto;font-weight:100;color:#959393;}.date{font-family:roboto;font-size:14px;font-weight:300;margin:18px auto 5px;color:#959393;}.notif{backdrop-filter: blur(3px);padding:5px 5px 0 5px; width:92%; background-color:#a1a1a150;border-radius:10px;margin:auto;box-sizing:border-box;text-align:left;display:flex;flex-wrap:wrap;align-items:center;color:#121212;}.notif_header{width:100%; display:flex; height:20px;background-color:#a1a1a160; border-radius:5px 5px 0 0;padding: 2px 0 2px 5px;align-items:center;}.notif_header img {width:15px;margin-right:5px;opacity:0.7;}.spotify_album img{height:45px;width:45px;border-radius:3px;}.spotify_musicplayer{text-align:center;width:100%;} .spotify_musicplayer img{height:45px;width:90%;opacity:0.8;margin-top:5px;text-align:center;} .apercu_texto{width:100%;padding:3px 5px;margin-top:-5px;line-height:12px;}.arrow {color:black;border-radius:5px;transition: width 1s;position:relative;height:30px; width:20px; padding:6px;background-color:#a1a1a160;font-size:20px;text-align:right;margin-top: -25px;margin-left: -7px; box-sizing:border-box;z-index:5;}.bouton_unlock {font-size:15px;backdrop-filter: blur(1px);border-radius:5px;background-color:#00000060;opacity:1;position:relative; height:30px;width: 200px;margin:-187px auto 75px;z-index:5;padding:7px;box-sizing:border-box;text-align:center;font-family:roboto;}.bouton_unlock .unlockscreen {position:absolute;opacity:0;transition:opacity 0s; transition-delay:3s; margin-top:-423px; margin-left:-33px; width:245px; height:445px; padding:5px; overflow:hidden; text-align:justify; font-size:11px; line-height:14px;background-size:cover;box-sizing:border-box;}.bouton_unlock:hover .unlockscreen {opacity:1 !important; transition-delay:1s;}.bouton_unlock:hover .arrow{width:200px;transistion-delay:0s;}::-webkit-scrollbar {display: none;}.unlockscreen{z-index:99;background-image:url(https://i.servimg.com/u/f15/20/38/34/97/essai12.jpg);filter:brightness(0.9);}.contenu_unlockscreen{overflow-y:auto;overflow-x:hidden; height:313px; width:100%}.pseudo_contact{font-size:9px; color:#121212;text-align:center;margin: 15px 0 0 0;}.now{font-size:9px; color: #ccc;text-align:center;margin: 15px 0 0 0;}.sms {width: 80%; padding: 5px; text-align: left;} .message {background: #2EA2FD; color: #fff; margin: 0 0 0 35px; border-radius: 15px 15px 0 15px;} .reply {background: #E5E5EA; color: #000; margin: 0px 0 0px 5px; border-radius: 15px 15px 15px 0;}.apercu_pseudo{padding-left:5px;font-weight:700}</style>
❯ Légende et conseilsPlusieurs sections sont
entièrement personnalisables dans le code mis à votre disposition. Pour se faire, repérez les divisions (div class) suivantes avec un Ctrl+F:
Image de fond (wallpaper) de l'écran verrouillé Repérez cette section entre les balises
Style:
- Code:
-
.lockscreen{position:absolute;width:245px;height:445px;margin:56px 0 0 49px;background-image:url(https://i.ibb.co/DtW0fpx/pexels-photo-12167617.jpg);background-size:cover;z-index:3;}.
Remplacez le lien de l'image en arrière fond (background-image:url (
https://i.ibb.co/DtW0fpx/pexels-photo-12167617.jpg)). Attention à ne pas effacer les parenthèses!
Time Modifiez
21:23 Notez toutefois que l'heure n'est modifiable que sur l'écran verrouillé.
Date Modifiez
Friday, May 15thSpotify_album Remplacez le lien de l'image entre guillemets (img src="
https://i1.sndcdn.com/artworks-ubKDzyhsRDqT-0-t500x500.jpg") pour modifier l'album spotify. Attention à ne pas effacer les guillemets!
Spotify_song Modifiez les éléments suivants:
Everybody knows (titre de la chanson)
Sigrid (artiste)
Justice League (album)
apercu_pseudo Modifiez
Vizeron apercu_text Modifiez
Votre nouvelle facture est prête. Connectez-vous pour en savoir plus.Lorsque vous personnalisez un élément dans votre téléphone d'accueil,
n'oubliez pas de mettre à jour les mêmes éléments dans les codes Initier un SMS et Répondre à un SMS pour les membres qui veulent les utiliser afin de communiquer avec vous.
pseudo_contact Lorsque
vous initiez un SMS ou répondez à un SMS modifiez
PSEUDO pour le nom ou le surnom de votre personnage.
❯ Insérer une deuxième bulle message dans un même code:Envie scinder votre message en plusieurs bulles? Aucun problème. Repérez la section suivante dans votre code,
faites un saut de ligne et copiez-collez son contenu à la suite de celle-ci:
- Code:
-
<div class="sms reply">TEXTO DE RÉPONSE </div>
Accueil 
MESSAGES