[<<[

html = [ "<!DOCTYPE html>",

"<html lang=\"fr\">",

"<head>", #head,

"</head><body>", #header, #nav, #content, #footer,

"</body></html>" ],

alohaColors = [ "rgba(245,214,149,1.0)", // makeColor("black", "vert", 0, 1.0),

"rgba(239,189,185,1.0)", //makeColor("white", "orange", 0, 1.0),

"rgba(150,170,124,1.0)", //makeColor("black", "vert", 5, 1.0),

"rgba(232,135,45,1.0)", // makeColor("white", "orange", 3, 1.0),

makeColor("white", "noir", 1, 0.8),

makeColor("black", "blanc", 23, 1.0),

"rgba(126,198,194,1.0)", //makeColor("white", "gris", 0, 0.9),

"rgba(231,203,177,1.0)" ],//makeColor("white", "orange", 3, 0.9) ],

fun css[alohaColors](index) {

output("border:1px solid " alohaColors(6) ";

background-color:" alohaColors(index) ";

border-radius:50%;

width:100%;

height:100%

")

},

cssFont = "

@font-face {

font-family : \"Open-Sans\";

src : url(\"fonts/Open-Sans/OpenSans-Regular.ttf\");

}


@font-face {

font-family : \"Titillium\";

src : url(\"fonts/Titillium/TitilliumWeb-Italic.ttf\");

}


@font-face {

font-family: \"Abel\";

src : url(\"fonts/Abel/Abel-Regular.ttf\");

}

",

cssCode = "body {

font-size:device-dependent(14pt,12pt,11pt);

line-height:device-dependent(16pt,14pt,14pt);

font-family:Open-Sans, Arial, Helvetica;

color:" alohaColors(4) ";

min-width:330px

}

header {

padding-bottom:15px;

border-bottom:1px solid " alohaColors(4) ";

border-radius:15px;

}


.title {

font-family:Abel, Arial, Helvetica;

border:1px solid " alohaColors(4) ";

border-radius : 15px;

margin-left:30px;

background-color : " alohaColors(6) ";

color:white;

font-size : 64px;

}

.title>div::first-letter {

font-family:Titillium;

font-size:80px;

}

.square1 {

" css(6) " }

.square2 {" css(1) " }

.square3 {" css(2) " }

.square4 {" css(3) " }


a {

text-decoration: none;

font-size:device-dependent(8pt,11pt,12pt);

line-height:device-dependent(9pt,12pt,14pt);

font-family:Open-Sans, Arial, Helvetica;

background-color : " alohaColors(6) ";

color:" alohaColors(4) ";

border:1px solid " alohaColors(5) ";

border-radius : 15px;

margin-left:15px;

margin-right:15px;

padding-left:15px;

padding-right:15px;

cursor:pointer;

transition : background-color 1s, color 1s;

}


a:hover {

background-color : " alohaColors(0) ";

}


a:active {

background-color : " alohaColors(2) ";

}


ul,li {

line-height:device-dependent(18pt,20pt,22pt);

}


h1 {

font-size:device-dependent(16pt,14pt,14pt);

line-heignt:device-dependent(18pt,16pt,16pt);

text-decoration: underline;

text-decoration-color:" alohaColors(1) "

}


h2 {

font-size:device-dependent(15pt,13pt,13pt);

line-heignt:device-dependent(17pt,15pt,15pt);

text-decoration: underline;

text-decoration-color:" alohaColors(1) "

}


blockquote {

border-left:3px solid " alohaColors(3) ";

border-radius:5px;

padding-left:20px;

margin-left:2rem;

background-color:" alohaColors(0) "

}


.code {

font-size:device-dependent(8pt,10pt,11pt);

line-height:device-dependent(10pt,12pt,13pt);

display:inline-block;

border:1px solid " alohaColors(3) ";

border-radius:15px;

padding-left:5px;

padding-right:5px;

margin-left:5px;

margin-right:5px;

vertical-align:middle;

}

",

resp = css@generateResponsive(cssCode, ["0px", "700px", "1000px"], {}),

indentSize = 0,

cssCode = compile("[<<indent[" resp.normal(0) resp.normal(1)

resp.normal(2) "]>>]"),

cssCode = cssFont list@ToString(cssCode),

meta = "<meta charset=\"utf-8\"><meta name=\"description\" content=\"Le langage de programmation talenha génère des programmes informatique et des sites web\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",

titleTag = "<title>Le langage de programmation Talenha</title>",

fonts = "<link rel=\"preload\" as=\"font\" type=\"font/ttf\" crossorigin=\"\" href=\"fonts/Open-Sans/OpenSans-Regular.ttf\"/>"

"<link rel=\"preload\" as=\"font\" type=\"font/ttf\" crossorigin=\"\" href=\"fonts/Abel/Abel-Regular.ttf\"/>"

"<link rel=\"preload\" as=\"font\" type=\"font/ttf\" crossorigin=\"\" href=\"fonts/Titillium/TitilliumWeb-Italic.ttf\"/>",

t = [<<design[

fun square(size) {

m1 = column("div",100%, "","") [ 25, 25, 25, 25 ]

[ #content1, #content2, #content3, #content4 ],

m2 = column("div",100%, "","") [ 25, 25, 25, 25 ]

[ #content4, #content3, #content2, #content1 ],

p = row("div", 100%, "", "") [ 25, 25, 25, 25 ]

[ m1, m2, m1, m2 ],

t = column("div", size px, "", "") [ 100 ] [ p ],

k = row("div", size px, "", "") [ 100 ] [ t ],

output(row("div", size px, "", "") [ 100 ] [ t ]),

},

square = square(75),

row("div",100%, "", "") [ 100 ] [ square ],

]>>],

t = box@GenerateBox(t, true),

t2 = [<<design[

square = square(37),

row("div",100%, "", "") [ 100 ] [ css("", "position:relative;left:25%", square) ],

]>>],

t2 = box@GenerateBox(t2, true),

c1 = "<div class=\"square1\">&nbsp;</div>",

c2 = "<div class=\"square2\">&nbsp;</div>",

c3 = "<div class=\"square3\">&nbsp;</div>",

c4 = "<div class=\"square4\">&nbsp;</div>",

sqList = [ #content1, c1,

#content2, c2,

#content3, c3,

#content4, c4 ],

t = list@Output(t, sqList),

t2 = list@Output(t2, sqList),

r = [<<design[

a1 = column("div", 75px, "", "") [ 50, 50 ] [

css("", "vertical-align:middle;margin:auto 0", #square2), #square ],

a2 = column("div", 75px, "", "") [ 50, 50 ] [

#square, #square ],

s1 = row("div", 150px, "", "") [ 50, 50 ] [ a1, a2 ],

style = "min-width:150px;border-radius:15px;padding-bottom:2px;padding-right:2px;background-color:" alohaColors(6),

row("div", 150px, "", "") [ 100 ] [ css("", style, s1) ],

]>>],

r = box@GenerateBox(r, true),

r = list@Output(r, [ #square, t, #square2, t2 ]),

m = [<<design[

column("header", 150px, "", "") [ 40, 60 ] [ #square, css("title", "text-align:center;line-height:150px;height:150px", #title) ],

]>>],

m = box@GenerateBox(m, true),

title = "<div style=\"line-height:0.5;display:inline-block;vertical-align:middle\">Talenha<br/><span style=\"font-size:0.3em;font-weight:bold\">LE LANGAGE DE PROGRAMMATION</span></div>",

m = list@Output(m, [ #square, r, #title, title ]),


// navigation

fun buttonLink(name, ref) {

output("<a alt=\"" name "\" href=\"" ref "\">" name "</a>")

},

links = [ buttonLink("Accueil", "#"),

buttonLink("Documentation", "./documentation.html"),

buttonLink("Connexion", "./login.html") ],

links = list@ToString(links),

n = [<<design[

column("nav", 30px, "", "margin-top:15px") [ 100 ] [ links ]

]>>],

n = box@GenerateBox(n, true),


// content

style = "margin-top:15px;border-top:1px solid " alohaColors(4)

";border-bottom:1px solid " alohaColors(4) ";border-radius:15px",

text = compile "aloha/intro.txt",

text = unescape(list@ToString(makeTBM(0, 1, 0))) unescape(list@ToString(text)),

c = [<<design[

row("article", 100%, "", style) [ 100 ] [ css("", "padding-left:15px;padding-right:15px", text) ])

]>>],

c = box@GenerateBox(c, true),


// footer

style = "margin-top:15px;border-top:1px solid " alohaColors(4)

";border-radius:15px;background-color:" alohaColors(6),

f = [<<design[

column("footer", 150px, "", style) [ 100 ] [ "&nbsp;" ])

]>>],

f = box@GenerateBox(f, true),



// generating page

head = compile("[<<HTML3[" unescape(list@ToString([ meta, titleTag, fonts, "<style>", cssCode, "</style>" ])) "]>>]"),

header = compile("[<<HTML3[" unescape(m) "]>>]"),

nav = compile("[<<HTML3[" unescape(list@ToString(n)) "]>>]"),

content = compile("[<<HTML3[" list@ToString(c) "]>>]"),

footer = compile("[<<HTML3[" unescape(list@ToString(f)) "]>>]"),

main = list@Aspect(html, [

#head,

list@ToString(head),

#header, list@ToString(header), #nav, list@ToString(nav),

#content, list@ToString(content),

#footer, list@ToString(footer) ]),

indentSize = 0,

main = compile("[<<indent[" list@ToString(main) "]>>]"),

main = list@Output(main, [ #codeOpen, "[<<[", #codeClose, "]>>]", #codeOpenName, "[<<nom[" ]),// ]>>]

write("main.html", [ unescape(main) ]),

print("finished")

]>>]