ProductPlayer/cardsFitter.html at master · GuardCat/ProductPlayer · GitHub

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
<!doctype HTML>
<html>
<head>
	<link rel="stylesheet" id="mainstyle"></link>
	<link rel="stylesheet" id="cardstyle"></link>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta charset="utf-8">
</head>

<body>

<header>
	<h1>Каталог продуктов</h1>
</header>

<nav>Поле фильтров</nav>

<div class="cardContainer">

	<article>

		<div class="cardHeader SA" data-key="header">
			<div class="type">SA</div>

			<div class="categories icons">
				<div class="insurance"				>	<img class="icon" src="img/icons/category/insurance.png">		<div class="mask"></div>	</div>
				<div class="consultation enabled"	>	<img class="icon" src="img/icons/category/consultation.png">	<div class="mask"></div>	</div>
				<div class="service"				>	<img class="icon" src="img/icons/category/service.png">			<div class="mask"></div>	</div>
			</div>

		</div>

		<div class="name">Ваш юрист</div>

		<div class="segments icons">
			<div>	                <img class="icon" src="img/icons/segment/property.png">			<div class="mask"></div>	</div>
			<div class="enabled">	<img class="icon" src="img/icons/segment/law.png">				<div class="mask"></div>	</div>
			<div>					<img class="icon" src="img/icons/segment/health.png">			<div class="mask"></div>	</div>
			<div>					<img class="icon" src="img/icons/segment/job.png">				<div class="mask"></div>	</div>
			<div>					<img class="icon" src="img/icons/segment/home.png">				<div class="mask"></div>	</div>
			<div>					<img class="icon" src="img/icons/segment/road.png">				<div class="mask"></div>	</div>
		</div>

		<img class="cover"	src="img/covers/SA/lawer_24.png">

		<div class="map"	>
			<div class="RC">СЗРЦ</div>
			<div class="RC">СБРЦ</div>
			<div class="RC">ЮЖРЦ</div>
			<div class="RC">ВВРЦ</div>
			<div class="RC">ВУРЦ</div>
			<div class="RC">ДВРЦ</div>
			<div class="RC">МСРЦ</div>
		</div>

		<section class="descClicker">
			<hr>
			<div class="tabCaption">
				<input id="descinput1-1" type="radio" name="desc-1" class="tabpad-1">				<label for="descinput1-1">ЭКОНОМ</label>
				<input id="descinput2-1" type="radio" name="desc-1" class="tabpad-2" checked>		<label for="descinput2-1">СТАНДАРТ</label>
				<input id="descinput3-1" type="radio" name="desc-1" class="tabpad-3">				<label for="descinput3-1">ПРЕМИУМ</label>
				<div class="breaker"></div>

				<div class="description tabpad-1"	>
					<div>Цена: 800 рублей. Покрытие: 400 000 рублей. 10 консультаций</div>
					Устная и письменная консультация из любой точки мира в любой момент, позволит защитить свои права и сэкономить.
				</div>
				<div class="description tabpad-2"	>Здесь, значицца, описание Стандарт</div>
				<div class="description tabpad-3"	>Здесь, значицца, описание Премиум</div>
			</div>
		</section>

		<section class="companyClicker">
			<hr>
			<div class="tabCaption">
				<input id="companyinput1-1" type="radio" name="company-1" class="tabpad-1">			<label for="companyinput1-1">АЛЬФА</label>
				<input id="companyinput2-1" type="radio" name="company-1" class="tabpad-2" checked>	<label for="companyinput2-1">РОСГОССТРАХ</label>
				<input id="companyinput3-1" type="radio" name="company-1" class="tabpad-3">			<label for="companyinput3-1">Ренессанс</label>
				<input id="companyinput4-1" type="radio" name="company-1" class="tabpad-4">			<label for="companyinput4-1">ЗЕТТА</label>
				<input id="companyinput5-1" type="radio" name="company-1" class="tabpad-5">			<label for="companyinput5-1">ЕЮС</label>
				<input id="companyinput5-1" type="radio" name="company-1" class="tabpad-6">			<label for="companyinput5-1">ВСК</label>
				<div class="breaker"></div>

				<div class="description tabpad-1">
					<img src="img/companies/alpha.png" class="companyimg">
					<a class="policy" href="https://webtutor.otpbank.ru/download_file.html?file_id=6668274844734395514">ПОЛИС</a>
					<a class="policy" href="https://webtutor.otpbank.ru/download_file.html?file_id=6668274844734395514">ИНСТРУКЦИЯ</a>
					<a class="policy" href="https://webtutor.otpbank.ru/download_file.html?file_id=6668274844734395514">ОФОРМЛЕНИЕ</a>
				</div>
				<div class="description tabpad-2"	>РГС</div>
				<div class="description tabpad-3"	>Про РЕНЕССАНС</div>
				<div class="description tabpad-4"	>Про зетту</div>
				<div class="description tabpad-5"	>Это вымышленная СК</div>
			</div>
		</section>

	</article>

</div>


<script type="text/javascript" id="observer"	></script>
<script type="text/javascript" id="utilities"	></script>
<script type="text/javascript" id="fetcher"		></script>
<script type="text/javascript" id="base"		></script>
<script type="text/javascript" id="cardmaker"	></script>
<script type="text/javascript" id="loadlist" src="https://guardcat.github.io/GCLibraries/loadlistclass.js"></script>


<script type="text/javascript">

const data = {
	forLoad: {
		observer:	{attribute:	"src",	value:	"js/observer.js"},
		fetcher:	{attribute: "src",	value:	"js/fetcher.js"},
		utilities:	{attribute:	"src",	value:	"js/utilities.js"},
		cardmaker:	{attribute: "src",	value:	"js/cardmaker.js"},
		base:		{attribute:	"src",	value:	"base.jsonp"},
		mainstyle:	{attribute:	"href",	value:	"css/mainstyle.css"},
		cardstyle:	{attribute:	"href",	value:	"css/card.css"}
	}
};

function director( ) {
	base = JSON.parse( decodeURIComponent(base) ); /* определение глобальной переменной base зашито в jsonp */
	/*base.desc.forEach( ( e, i ) => {
		document.querySelector(".cardContainer").appendChild( (new SACard(e, i, base)).html );
	} );*/
	//let cards = new CardMaker(base.desc, document.querySelector(".cardContainer") );
}


new LoadList(data.forLoad, director);


</script>

</body>
</html>