-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
147 lines (109 loc) · 7.88 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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>CMS Lucide</title>
<meta name="description" content="Un éditeur de site statique écoconçu">
<meta name="robots" content="index, follow">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- media sociaux -->
<meta property="og:title" content="CMS Lucide">
<meta property="og:description" content="Un éditeur de site statique écoconçu">
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.translucide.net/">
<link rel="canonical" href="https://www.translucide.net/">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="mw960p center">
<div>
<img src="media/1.png?1" class="mtm editable">
<img src="media/2.png?2" class="editable" width="50">
<img src="media/3.png?3">
<img src="" class="editable">
<img src="media/4.png?4" class="editable test">
<img src="media/logo.png?5" class="editable" width="150">
</div>
<nav>
<input id="burger-switch" type="checkbox">
<label id="burger-open" for="burger-switch">Menu</label>
<ul id="burger-content" class="unstyled">
<li><a href="#s1">Section 1</a></li>
<li><a href="#s2">Section 2</a></li>
<li><a href="#s3">Section 3</a></li>
</ul>
</nav>
</header>
<main class="mw960p center h100vh">
<section>
<h1 class="editable">1 non conséctetur à erat nam</h1>
<article id="s1" class="mtl fullpage">
<h2 class='editable'>2 consequat ac felis donec et</h2>
<div class="editable">
3 Lorem ipsum dolor sit amet, <b>consectetur</b> adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nascetur ridiculus mus mauris vitae <i>ultricies</i> leo integer. Dolor sit amet consectetur adipiscing elit ut aliquam purus sit. Et malesuada fames ac turpis egestas integer eget aliquet nibh. Lacus vestibulum sed arcu non odio euismod lacinia at quis. Neque vitae tempus quam pellentesque nec nam. Malesuada bibendum arcu vitae elementum curabitur vitae nunc sed. Id semper risus in hendrerit gravida rutrum quisque non. Commodo viverra maecenas accumsan lacus vel. Amet nulla facilisi morbi tempus. In iaculis nunc sed augue lacus viverra vitae congue eu. Sapien faucibus et molestie ac feugiat sed lectus. Amet risus nullam eget felis eget nunc. Suscipit tellus mauris a diam maecenas sed enim ut sem. Interdum posuere lorem ipsum dolor sit amet consectetur adipiscing. Ullamcorper eget nulla facilisi etiam dignissim diam quis enim. Ac turpis egestas sed tempus. Massa tempor nec feugiat nisl pretium fusce id. Eu non diam phasellus vestibulum lorem sed.
</div>
</article>
<article id="s2" class="mtl fullpage">
<h3 class="editable">4 posuere ac ut consequat semper</h3>
<span class="editable">
5 Nulla aliquet enim tortor at auctor urna nunc id cursus. Odio morbi quis commodo odio aenean sed. Lacus suspendisse faucibus interdum posuere lorem ipsum dolor sit. Id diam maecenas ultricies mi eget mauris pharetra et. Lorem ipsum dolor sit amet consectetur adipiscing elit pellentesque. Ornare massa eget egestas purus viverra accumsan in nisl. Malesuada bibendum arcu vitae elementum curabitur. Nisl purus in mollis nunc sed id semper risus. Vel risus commodo viverra maecenas accumsan lacus vel facilisis. Elementum tempus egestas sed sed risus pretium quam. Odio pellentesque diam volutpat commodo sed egestas egestas. Dui vivamus arcu felis bibendum ut. Ut tristique et egestas quis ipsum suspendisse ultrices gravida. Ac turpis egestas maecenas pharetra. Odio ut enim blandit volutpat.
</span>
</article>
<article id="s3" class="mtl fullpage">
<h4 class="editable">6 vitae tortor condimentum lacinia quis</h4>
<article class="editable">
7 Netus et malesuada fames ac turpis. Sagittis aliquam malesuada bibendum arcu vitae elementum. Tincidunt praesent semper feugiat nibh sed pulvinar. Laoreet id donec ultrices tincidunt arcu. Sit amet risus nullam eget felis. Id donec ultrices tincidunt arcu. Convallis posuere morbi leo urna molestie at elementum eu facilisis. Sollicitudin tempor id eu nisl. Quis varius quam quisque id diam vel quam elementum. Donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum arcu. Nisi lacus sed viverra tellus in hac habitasse platea dictumst. Nisl condimentum id venenatis a condimentum vitae sapien. Enim neque volutpat ac tincidunt vitae semper quis. Consequat id porta nibh venenatis cras. Ac tortor dignissim convallis aenean. Eu feugiat pretium nibh ipsum consequat nisl vel pretium lectus. Tempus imperdiet nulla malesuada pellentesque elit eget gravida cum.
</article>
</article>
<article id="s4" class="mtl fullpage">
<h5 class="editable">8 vitae tortor condimentum lacinia quis</h5>
<section class="editable">
9 Netus et malesuada fames ac turpis. Sagittis aliquam malesuada bibendum arcu vitae elementum. Tincidunt praesent semper feugiat nibh sed pulvinar. Laoreet id donec ultrices tincidunt arcu. Sit amet risus nullam eget felis. Id donec ultrices tincidunt arcu. Convallis posuere morbi leo urna molestie at elementum eu facilisis. Sollicitudin tempor id eu nisl. Quis varius quam quisque id diam vel quam elementum. Donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum arcu. Nisi lacus sed viverra tellus in hac habitasse platea dictumst. Nisl condimentum id venenatis a condimentum vitae sapien. Enim neque volutpat ac tincidunt vitae semper quis. Consequat id porta nibh venenatis cras. Ac tortor dignissim convallis aenean. Eu feugiat pretium nibh ipsum consequat nisl vel pretium lectus. Tempus imperdiet nulla malesuada pellentesque elit eget gravida cum.
</section>
</article>
</section>
</main>
<footer class="mw960p center mtl mbl">
<section>
<div class="h3-like">Contact</div>
tel : 00.00.00.00.00<br>
mel : [email protected]<br>
</section>
<section class="mtm">
Site web écoconçu par <a href="translucide.net">Translucide</a>
– <a>Mentions légales</a>
</section>
</footer>
<!-- <a href="#" id="top" class="bt">haut</a> -->
<!-- plugin d'édition de contenu -->
<a class="bt edit">Editer</a>
<script>
// Au clic sur ctrl+e on édite la page
document.addEventListener('keydown', function(event) {
if(document.querySelector('#admin-bar') == null)// Pas d'admin lancé
if(event.ctrlKey || event.metaKey)// Ctrl
if(String.fromCharCode(event.which).toLowerCase() == 'e') {// e
event.preventDefault();
document.querySelector('a.bt.edit').click()
}
});
// Lance l'édition du contenu aux cliques sur le crayon
document.querySelector('.bt.edit').addEventListener('click', function()
{
// Ajax l'authentification
var xhr = new XMLHttpRequest();
xhr.open('GET', 'lucide/ajax.php?mode=login',true);
xhr.onload = function()
{
// Execute le js de la response
const response = document.createRange().createContextualFragment(this.response);
// Ajout du js à la page en cours
document.body.append(response);
}
xhr.send();
});
</script>
<!-- fin plugin d'édition de contenu-->
</body>
</html>