Mettre un fichier HTML en C# , S.V.P. !!
Admou-535
Messages postés
13
Statut
Membre
-
Admou-535 Messages postés 13 Statut Membre -
Admou-535 Messages postés 13 Statut Membre -
Bonjour,
J'aimerais bien mettre ce script en C# (et en ayant la possibilité d'importer des fichiers vidéos dans le logiciel , en Choissisant la durée du logo jusqu'à 3:00:00 maximum , ajouter ses logos Nolife & que le logiciel soit téléchargable ) mais je ne m'y connais pas & j'ai besoin d'aide S.V.P. . Pourriez - vous m'aider ???
Merci .
Admou535 ou Prodt Ml
J'aimerais bien mettre ce script en C# (et en ayant la possibilité d'importer des fichiers vidéos dans le logiciel , en Choissisant la durée du logo jusqu'à 3:00:00 maximum , ajouter ses logos Nolife & que le logiciel soit téléchargable ) mais je ne m'y connais pas & j'ai besoin d'aide S.V.P. . Pourriez - vous m'aider ???
Merci .
Admou535 ou Prodt Ml
3 réponses
-
<html>
<head>
<meta charset='utf-8'>
<title>Logolife</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src= "https://player.twitch.tv/js/embed/v1.js"></script>
<style type="text/css">
body {
background-color: grey;
font-family: st
}
#back {
position: absolute;
top: 10px;
left: 10px;
width: 1600px;
height: 900px;
background-color: black;
}
#stock {
position: absolute;
top: 10px;
left: 10px;
width: 1600px;
height: 225px;
}
#stock img {
position: absolute;
top: 0px;
left: 0px;
width: 1600px;
height: 225px;
}
#img {
position: absolute;
top: 608px;
left: 0;
width: 1600px;
height: 225px;
opacity: 1;
display: none;
}
@font-face {
font-family: bh;
src: url('blue highway rg.ttf');
}
@font-face {
font-family: bhb;
src: url('blue highway bd.ttf');
}
@font-face {
font-family: st;
src: url('Franklin Gothic Demi Regular.ttf');
}
#title {
display: inline-block;
position: absolute;
top: 658px;
left: 337px;
font-family: bh;
font-size: 36px;
letter-spacing: 0.015em;
color: white;
transform: skew(-12deg, 0deg);
}
#artist {
display: inline-block;
position: absolute;
top: 705px;
left: 360px;
font-family: bh;
font-size: 38px;
letter-spacing: -1px;
}
#label {
display: inline-block;
position: absolute;
top: 765px;
left: 390px;
font-family: bh;
font-size: 36px;
letter-spacing: 0.01em;
color: #aa1123;
}
#year {
display: inline-block;
position: absolute;
top: 660px;
left: 1315px;
font-family: bhb;
font-size: 36px;
letter-spacing: 0.04em;
}
#author {
display: inline-block;
position: absolute;
top: 715px;
right: 205px;
font-family: bh;
font-size: 26px;
letter-spacing: 0.02em;
}
.text {
opacity: 0;
}
#title_cart {
position: absolute;
top: 750px;
right: 207px;
font-family: bh;
font-size: 22px;
letter-spacing: 0.06em;
transform: skew(-12deg, 0deg);
text-shadow: 2px 2px grey;
}
#artist_cart {
position: absolute;
top: 778px;
right: 205px;
font-family: bh;
font-size: 22px;
letter-spacing: 0.07em;
color: #dddddd;
text-shadow: 2px 2px black, -2px 2px black, 2px -2px black, -2px -2px black;
}
.text_cart {
display: none;
}
#logo {
position: absolute;
top: 56px;
left: 76px;
opacity: 0.65;
display: none;
}
#logo img {
width: 212px;
}
#player {
position: absolute;
top: 0;
left: 0;
display: none;
}
#plein {
position: absolute;
top: 0px;
left: 0px;
background-size: 212px;
transform: skew(21.5deg);
height: 71px;
}
#plein.R {
background-image: url('R_bar.png');
}
#plein.G {
background-image: url('G_bar.png');
}
#plein.B {
background-image: url('B_bar.png');
}
#plein.M {
background-image: url('M_bar.png');
}
#plein.R {
background-image: url('R_bar.png');
}
#plein.P {
background-image: url('P_bar.png');
}
#plein.J {
background-image: url('J_bar.png');
}
#plein.V {
background-image: url('V_bar.png');
}
#plein.GR {
background-image: url('GR_bar.png');
}
#plein.GB {
background-image: url('GB_bar.png');
}
#plein.N {
background-image: url('N_bar.png');
}
#buttons {
position: absolute;
top: 10px;
left: 1620px;
width: calc(100% - 1630px);
}
.button {
width: 80px;
height: 80px;
background-color: white;
background-size: 64px;
background-repeat: no-repeat;
background-position: center;
border: 1px solid black;
border-radius: 10px;
cursor: pointer;
margin: 5px;
display: inline-block;
}
#url {
display: block;
position: absolute;
top: 920px;
left: 10px;
}
.button.G {
background-image: url('Logo_G2.png');
}
.button.B {
background-image: url('Logo_B2.png');
}
.button.M {
background-image: url('Logo_M2.png');
}
.button.R {
background-image: url('Logo_R2.png');
}
.button.P {
background-image: url('Logo_P2.png');
}
.button.J {
background-image: url('Logo_J2.png');
}
.button.V {
background-image: url('Logo_V2.png');
}
.button.GR {
background-image: url('Logo_GR2.png');
}
.button.GB {
background-image: url('Logo_WB.png');
}
.button.N {
background-image: url('Logo_N2.png');
}
.button.G.selected{
background-color: #eeeeee;
}
.button.B.selected, .button.GB.selected{
background-color: #bbdefb;
}
.button.M.selected{
background-color: #e1bee7;
}
.button.R.selected, .button.GR.selected{
background-color: #ffcdd2;
}
.button.P.selected{
background-color: #f8bbd0;
}
.button.J.selected{
background-color: #ffe0b2;
}
.button.V.selected, .button.N.selected{
background-color: #c8e6c9;
}
.input_synthe {
max-width: calc(100% - 10px);
}
.ytp-caption-segment {
font-family: st !important;
}
</style>
</head>
<body>
<div id="stock"></div>
<div id="back">
<div id="player"></div>
<div id="playerTwitch"></div>
<div id="logo">
<div id="plein" class="G"></div>
<img id="img_logo" src="G.png">
</div>
<span id="title_cart" class="text_cart"></span>
<span id="artist_cart" class="text_cart"></span>
<img src="./000.png" id="img">
<span id="title" class="text"></span>
<span id="artist" class="text"></span>
<span id="label" class="text"></span>
<span id="year" class="text"></span>
<span id="author" class="text"></span>
</div>
<input id="url" type="text" placeholder="URL YouTube/Twitch">
<div id="buttons">
<h4>Logo</h4>
<div class="button G selected" data-logo="G"></div>
<div class="button B" data-logo="B"></div>
<div class="button M" data-logo="M"></div>
<div class="button R" data-logo="R"></div>
<div class="button P" data-logo="P"></div>
<div class="button J" data-logo="J"></div>
<div class="button V" data-logo="V"></div>
<div class="button GR" data-logo="GR"></div>
<div class="button GB" data-logo="GB"></div>
<div class="button N" data-logo="N"></div>
<h4>Synthé clip</h4>
<input type="checkbox" id="activ_synthe"> Activer<br/>
<input type="text" class="input_synthe" id="input_artist" placeholder="Artiste">
<input type="text" class="input_synthe" id="input_title" placeholder="Titre">
<input type="text" class="input_synthe" id="input_year" placeholder="Année">
<input type="text" class="input_synthe" id="input_author" placeholder="Auteur">
<input type="text" class="input_synthe" id="input_label" placeholder="Label">
</div>
<script type="text/javascript">
for(var i=0; i<89; i++)
$('#stock').append('<img src="./'+i.toString().padStart(3, '0')+'.png"/>');
var delai_debut=5, delai_fin=5;
var synthe=$('#activ_synthe').prop('checked');
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
var playerTwitch, twitchLive;
function onYouTubeIframeAPIReady(){
player = new YT.Player('player', {
height: '900',
width: '1600',
videoId: '',
playerVars: {
modestbranding: 1,
rel: 0,
showinfo: 0
},
events: {
'onReady': onPlayerReady
}
});
}
function onPlayerReady(event) {
event.target.playVideo();
updateLogo();
showSynthe();
}
function updateLogo(){
var width=29+161*player.getCurrentTime()/player.getDuration();
var widthStr=width+"px"
document.getElementById("plein").style.width = widthStr;
setTimeout(updateLogo, 40);
}
function updateLogoTwitch(){
var width;
if(twitchLive)
width=29+161;
else
width=29+161*playerTwitch.getCurrentTime()/playerTwitch.getDuration();
var widthStr=width+"px"
document.getElementById("plein").style.width = widthStr;
setTimeout(updateLogoTwitch, 40);
}
var frameTime=40;
var dureeAnim=89*frameTime/1000+8+0.64;
function showSynthe(){
if(synthe)
{
var currentTime = player.getCurrentTime(), remainTime=player.getDuration()-currentTime;
if(currentTime>delai_debut&&remainTime>delai_fin)
{
var time=Math.min(currentTime-delai_debut, remainTime-delai_fin);
if(time>dureeAnim-0.64)
$('.text_cart').show();
else
$('.text_cart').hide();
if(time<dureeAnim)
{
//Affichage image
var image;
if(time<41*frameTime/1000)
image=Math.floor(time*1000/frameTime);
else if(time<42*frameTime/1000+8)
image=41;
else if(time<dureeAnim-0.64)
image=Math.floor((time-8)*1000/frameTime);
else
image=88;
$('#img').attr('src', './'+image.toString().padStart(3, '0')+'.png');
if(time>dureeAnim-0.64)
$('#img').css('opacity', (dureeAnim-time)/0.64);
else
$('#img').css('opacity', 1);
$('#img').show();
//Affichage textes
if(image>=30&&image<=41)
{
$('.text').show();
if(image<35)
$('.text').css('opacity', (image-30)/5);
else if(image==41&&time>42*frameTime/1000+8-0.2)
$('.text').css('opacity', 1-(time-(42*frameTime/1000+8-0.2)/0.2));
else
$('.text').css('opacity', 1);
}
else
$('.text').hide();
}
else
{
$('#img').hide();
$('.text').hide();
}
}
else
{
$('.text_cart').hide();
$('#img').hide();
$('.text').hide();
}
}
else
{
$('.text_cart').hide();
$('#img').hide();
$('.text').hide();
}
setTimeout(showSynthe, 40);
}
function showImage(){
$('#img').attr('src', './'+image.toString().padStart(3, '0')+'.png');
$('#img').show();
}
$('.button').click(function(){
var color=$(this).data('logo');
$('.button').removeClass('selected');
$(this).addClass('selected');
$('#img_logo').attr('src', color+'.png');
$('#plein').removeClass("G B M R P J V GR GB N");
$('#plein').addClass(color);
})
$("#url").on('input', function(){
var parts=$(this).val().split('/');
console.log(parts);
if(parts[0].includes('twitch')||parts[2].includes('twitch'))
{
var options={
width: 1600,
height: 900
}
var idx=(parts[0].includes('twitch') ? 1 : 3);
if(parts[idx]=='videos')
{
twitchLive=false;
options.video=parts[idx+1];
}
else
{
twitchLive=true;
options.channel=parts[idx];
}
$('#playerTwitch').html('');
playerTwitch = new Twitch.Player("playerTwitch", options);
playerTwitch.play();
$('#player').hide();
$('#playerTwitch').show();
$('#logo').show();
updateLogoTwitch();
}
else
{
var r=$(this).val().match(/^.*(?:(?:youtu\.be\/|v\/|vi\/|u\/\w\/|embed\/)|(?:(?:watch)?\?v(?:i)?=|\&v(?:i)?=))([^#\&\?]*).*/);
player.loadVideoById(r[1]);
total=player.getDuration();
$('#player').show();
$('#playerTwitch').hide();
$('#logo').show();
}
});
$("#activ_synthe").change(function(){synthe=this.checked});
$('#input_artist').on('input', function(){
var val=$('#input_artist').val();
$('#artist_cart').html(val);
$('#artist').html(val);
});
$('#input_title').on('input', function(){
var val=$('#input_title').val();
$('#title_cart').html(val);
$('#title').html(val);
});
$('#input_year').on('input', function(){
$('#year').html($('#input_year').val());
});
$('#input_author').on('input', function(){
author = ($('#input_author').val() ? '('+$('#input_author').val()+')' : '');
$('#author').html(author);
});
$('#input_label').on('input', function(){
$('#label').html($('#input_label').val());
});
var val=$('#input_artist').val();
$('#artist_cart').html(val);
$('#artist').html(val);
var val=$('#input_title').val();
$('#title_cart').html(val);
$('#title').html(val);
$('#year').html($('#input_year').val());
var author = ($('#input_author').val() ? '('+$('#input_author').val()+')' : '');
$('#author').html(author);
$('#label').html($('#input_label').val());
</script>
</body>
</html> -
C# est totalement différent de HTML/CSS/JS/JQuery il va te falloir tout redévelopper.
On a pas forcément le temps de redévelopper un logiciel pour toi, donc regarde des tutoriels et tentes ta chance.
-
Merci . Je suis décu de la réponse mais dans tous les cas , je vais me débrouiller de moi - même . Merci quand même .
