-
Notifications
You must be signed in to change notification settings - Fork 141
/
Copy pathtest.html
110 lines (102 loc) · 6.9 KB
/
test.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Awesome Dataset Distillation</title>
<link rel="stylesheet" media="screen" href="css/styles.css">
<link rel="apple-touch-icon" sizes="180x180" href="images/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
<link rel="mask-icon" href="images/safari-pinned-tab.svg" color="#5bbad5">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Li Longzhen">
<meta name="description" content="A curated list of awesome papers on dataset distillation and related applications.">
<meta name="color-scheme" content="light">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Outfit:[email protected]&display=swap" rel="stylesheet">
</head>
<body id="awesome-dataset-distillation" class="background">
<div class="overall-container">
<h2 class="section-title display-medium on-background-text">Content</h2>
<div class="main-content">
<ul id="ul_main">
<li><h3 class="section-subtitle headline-medium on-background-text" id="main">Main</h3></li>
</ul>
</div>
<!-- <div class="lastupdate-container surface-variant">-->
<!-- <ul id="latest_update">-->
<!-- </ul>-->
<!-- </div>-->
</div>
<script>
let container = document.getElementById('ul_main');
let main_container = document.getElementById('ul_main');
fetch('articles.json')
.then(response => response.json())
.then(data =>{
// div0 = document.createElement('div');
// div0.innerHTML = section;
// container.appendChild(div0)
let main_papers = data['Main'];
Object.keys(main_papers).forEach(section=>{
if (!(section === "Base")){
let li_section = document.createElement('li');
li_section.innerHTML = `<h3 class="section-subtitle headline-medium on-background-text" id=${section}>${section}</h3>`;
container.appendChild(li_section)
}
console.log(section);
let papers = main_papers[section];
papers.forEach(paper =>{
let li0 = document.createElement('li');
li0.setAttribute('class', "essay-container title-large surface-variant on-surface-variant-text");
let div_content = document.createElement('div');
let p1 = document.createElement('p');
p1.setAttribute('class', "essay-content");
if (paper['github']){
p1.innerHTML = `<a class="on-surface-variant-text" href=${paper.github}>${paper.title}</a>`;
}else{
p1.innerHTML = `${paper.title}`;
}
let p2 = document.createElement('p');
p2.setAttribute('class', "title-medium essay-author");
p2.innerHTML = `<i>${paper.author}</i>`
div_content.appendChild(p1);
div_content.appendChild(p2);
li0.appendChild(div_content);
container.appendChild(li0);
let div_btn = document.createElement('div');
div_btn.setAttribute('class', "button-group");
if (paper['website']){
div_btn.innerHTML += `<a href=${paper.website}>
<span class="essay-button surface">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
<path d="M480-80q-82 0-155-31.5t-127.5-86Q143-252 111.5-325T80-480q0-83 31.5-155.5t86-127Q252-817 325-848.5T480-880q83 0 155.5 31.5t127 86q54.5 54.5 86 127T880-480q0 82-31.5 155t-86 127.5q-54.5 54.5-127 86T480-80Zm0-82q26-36 45-75t31-83H404q12 44 31 83t45 75Zm-104-16q-18-33-31.5-68.5T322-320H204q29 50 72.5 87t99.5 55Zm208 0q56-18 99.5-55t72.5-87H638q-9 38-22.5 73.5T584-178ZM170-400h136q-3-20-4.5-39.5T300-480q0-21 1.5-40.5T306-560H170q-5 20-7.5 39.5T160-480q0 21 2.5 40.5T170-400Zm216 0h188q3-20 4.5-39.5T580-480q0-21-1.5-40.5T574-560H386q-3 20-4.5 39.5T380-480q0 21 1.5 40.5T386-400Zm268 0h136q5-20 7.5-39.5T800-480q0-21-2.5-40.5T790-560H654q3 20 4.5 39.5T660-480q0 21-1.5 40.5T654-400Zm-16-240h118q-29-50-72.5-87T584-782q18 33 31.5 68.5T638-640Zm-234 0h152q-12-44-31-83t-45-75q-26 36-45 75t-31 83Zm-200 0h118q9-38 22.5-73.5T376-782q-56 18-99.5 55T204-640Z"/>
</svg>
</span>
</a>`;
}else {
div_btn.innerHTML += `<span class="placeholder"></span>`
}
div_btn.innerHTML += `<a href=${paper.cite}>
<span class="essay-button surface">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px">
<path d="M0 0h24v24H0V0z" fill="none"/><path d="M18.62 18h-5.24l2-4H13V6h8v7.24L18.62 18zm-2-2h.76L19 12.76V8h-4v4h3.62l-2 4zm-8 2H3.38l2-4H3V6h8v7.24L8.62 18zm-2-2h.76L9 12.76V8H5v4h3.62l-2 4z"/>
</svg>
</span>
</a>`;
div_btn.innerHTML += `<a href=${paper.url}>
<span class="essay-button surface">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
<path d="m720-120 160-160-56-56-64 64v-167h-80v167l-64-64-56 56 160 160ZM560 0v-80h320V0H560ZM240-160q-33 0-56.5-23.5T160-240v-560q0-33 23.5-56.5T240-880h280l240 240v121h-80v-81H480v-200H240v560h240v80H240Zm0-80v-560 560Z"/>
</svg>
</span>
</a>`;
li0.appendChild(div_btn);
container.appendChild(li0);
});
})
})
</script>
</body>
</html>