-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
164 lines (154 loc) · 8.4 KB
/
index.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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="images/trajectory.png">
<title>Stories - Customer Journey - Artefact</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Custom styles for this template -->
<link href="kour.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href=""><img src="images/logo.gif" height="30px" alt="Artefact"/></a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Stories - Customer Journey</a></li>
</ul>
<button type="button" class="btn btn-success contact" onclick="window.open("mailto:pr@machine-zero.com?subject=Reaching out","_self");">
<span class="glyphicon glyphicon-play" aria-hidden="true" lang="fr"/> Aller plus loin</span>
<span class="glyphicon glyphicon-play" aria-hidden="true" lang="en"/> Contact</span>
</button>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<div class="panel panel-default">
<div class="panel-heading"><span lang="fr">Campagne multi-étape, multi-canal, multi-message : trouvez le parcours le plus performant puis comparez-vous à une intelligence artificielle</span>
<span lang="en">Multistep, multichannel, multimessage campaing : find the best-performing customer journey, then compare your score to that of an A.I.</span></div>
<div class="row">
<div class="col-lg-8">
<div id="kour" class="panel-body"></div>
</div>
<div class="col-lg-4 right-pane">
<button type="button" class="btn btn-primary launch" onclick="launchCampaign(true);">
<span class="glyphicon glyphicon-star" aria-hidden="true" lang="fr"/> Lancer la campagne (vague 1)</span>
<span class="glyphicon glyphicon-star" aria-hidden="true" lang="en"/> Launch campaign (1st wave)<span>
</button>
<button type="button" class="btn btn-primary optim" onclick="optimizeByIA();" disabled="true">
<span class="glyphicon glyphicon-signal" aria-hidden="true" lang="fr"/> Optimiser avec I.A. (vague 2)</span>
<span class="glyphicon glyphicon-signal" aria-hidden="true" lang="en"/> A.I. optimization (2nd wave)</span>
</button>
<div class="results">
<!--div class="graph">
</div-->
<h3><span lang="fr">Résultats Vague 1</span><span lang="en">1st wave results</span></h3>
<p>Conversions : <span class="conversions"></span> pers.</p>
<p><span lang="fr">Coûts Campagne :</span><span lang="en">Campaign costs: </span><span class="media-cost"></span>€ (CAC : <span class="cac"></span>€)</p>
<p><span lang="fr">Bénéfices nets : </span><span lang="en">Net profits: <span><span class="roi"></span>€</p>
<div class="results-ia">
<h3><span lang="fr">Résultats Vague 2 (IA)</span><span lang="en">2nd wave results</span></h3>
<p>Conversions : <span class="conversions"></span> pers.</p>
<p><span lang="fr">Coûts Campagne :</span><span lang="en">Campaign costs: </span><span class="media-cost"></span>€ (CAC : <span class="cac"></span>€)</p>
<p><span lang="fr">Bénéfices nets : </span><span lang="en">Net profits: <span><span class="roi"></span>€</p>
<h4><span lang="fr">Gains de l'IA</h4>
<p><span lang="fr">Temps d'apprentissage IA :</span><span lang="en">Learning time of AI: </span><span class="learning-time"></span> <span lang="fr">jours</span><span lang="en">days</span></p>
<p><span lang="fr">Gains en conversion : </span><span lang="en">Conversion gains: </span><span class="conversion-gain"></span> pers.</p>
<p><span lang="fr">Gains en euros : </span><span lang="en">Gains in euros: </span><span class="roi-gain"></span>€</p>
<!--p class="note">La performance de l'IA est calculée par rapport au dernier parcours que vous avez réalisé avant de cliquer sur "Optimiser par IA"</p-->
</div>
<button type="button" class="btn btn-primary retry" onclick="retry();">
<span class="glyphicon glyphicon-repeat" aria-hidden="true"/> Retry
</button>
</div>
<!-- Légende -->
<div class="panel panel-primary legende">
<div class="panel-heading">
<h3 class="panel-title"><a role="button" data-toggle="collapse" href="#collapseInfo" aria-expanded="false" aria-controls="collapseInfo">Informations</a></h3>
</div>
<div class="panel-body collapse" id="collapseInfo">
<div class="perf-info"><h4><span lang="fr">KPIs de campagne</span><span lang="en">Campaign KPIs</span></h4></div>
<div class="channel-info"><h4><span lang="fr">Canaux disponibles</span><span lang="en">Available channels</span></h4></div>
<div class="message-info"><h4><span lang="fr">Messages disponibles</span><span lang="en">Available messages</span></h4></div>
<div class="branch-info"><h4><span lang="fr">Types de réactions</span><span lang="en">Possible outcomes</span></h4></div>
</div>
</div>
<!---->
</div>
</div>
</div>
</div><!-- /.container -->
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel"><span lang="fr">Choisissez le canal et le message</span><span lang="en">Choose channel and message</span></h4>
</div>
<div class="modal-body row">
<div class="col-md-6">
<div class="form-group">
<label for="sel1"><span lang="fr">Canal:</span><span lang="en">Channel:</span></label>
<select class="form-control" id="canal">
<option value="display">Display</option>
<option value="video">Vidéo</option>
<option value="sms">SMS</option>
<option value="email">E-mail</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="sel1">Message:</label>
<select class="form-control" id="message">
<option value="notoriete">Brand image</option>
<option value="achat">Promotion</option>
</select>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" data-dismiss="modal" onclick="currentNode.updateStep(); return false;">Ok</button>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="lib/d3.v4.min.js"></script>
<script src="lib/jquery.min.js"></script>
<script src="lib/bootstrap.min.js"></script>
<script src="data.js"></script>
<script src="nodes.js"></script>
<script src="kour.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-97701888-1', 'auto');
ga('send', 'pageview');
$(function() {
$('[lang="fr"]').hide();
});
</script>
</body>
</html>