100ProjectSite-1/project-calculator.php at master · yenchunchang/100ProjectSite-1 · 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
140
141
142
143
144
145
146
147
148
149
150
151
<?php
/*Template Name: Project Calculator*/
	get_header();
	get_template_part("template-parts/header-alone");
	$modules = get_option('my_theme_settings')['modules'];

?>

<div class="large-12 columns section align-center contact-page">
	<img src="<?= get_template_directory_uri() . '/images/calculator-icon.png' ?>" alt="" draggable="false" />
	<h4 class="align-center">Project Calculator</h4>
	<span class="align-center small-bold">LET'S APPROACH IN NUMBERS</span>
</div>

<div class="large-12 columns section project-calculator align-center">
	<h3>Drag to the calculator the services you are interested in.</h3>
	<br>
	<br>
	<br>
	<div class="row">
		<div class="large-7 medium-6 small-12 columns"
			id="draggables"
		>
				<?php $i = 1; foreach($modules as $module) {?>
					<div class="module-container large-6 columns"
						data-credit="<?= $module['duration'] ?>"
						id="module-<?= $i++ ?>"
					>
						<span
							class="large-9 columns button"
						>
							<?= $module['name'] ?>
						</span>
						<div class="large-1 columns"> </div>
						<span class="large-2 columns module-duration"><?= $module['duration'] ?></span>
						<div class="clearfix"></div>
					</div>
				<?php }?>
		</div>
		<div class="large-5 medium-6 small-12 columns">
			<div class="calculator large-12 columns">
				<div class="large-8 columns">
					<span>SERVICE</span>
				</div>
				<div class="large-4 columns">
					<span>CREDITS</span>
				</div>
				<div class="clearfix"></div>

				<div class="calculator large-12 columns"
				id="dropzone"
				style="overflow:scroll;"
				>

				</div>
			</div>
			<div class="calculator-footer large-12 columns">
				<div class="large-8 columns">
					<span>Total of credits</span>
				</div>
				<div class="large-4 columns">
					<span id="totalCredits">0</span>
				</div>
			</div>
		</div>
		<div class="clearfix"></div>

		<div class="align-center">
			<button class="button reset">RESET CALCULATOR</button>
		</div>

	</div>
</div>

<div class="large-12 columns section align-center according-credits">
	<h3>According to credits, this is the plan we recommend for you.</h3>
	<br>
	<br>
	<br>
	<div class="row">
		<div class="large-12 columns">
			<div class="large-4 columns">
				<div class="package startup">
					<div class="package-header blue">
						<span class="price">$0</span>
						<span class="name">Startup project</span>
					</div>

					<div class="package-content">
						<p>30 productive hours</p>
						<p>Monthly progress report</p>
					</div>

					<div class="package-footer">
						<a href="#" class="button blue">
							Yes i'm in!
						</a>
					</div>
				</div>
			</div>
			<div class="large-4 columns">
				<div class="package high">
					<div class="package-header red">
						<span class="price">$0</span>
						<span class="name">Startup project</span>
					</div>

					<div class="package-content">
						<p>30 productive hours</p>
						<p>Monthly progress report</p>
						<p>30 productive hours</p>
						<p>Monthly progress report</p>
					</div>

					<div class="package-footer">
						<a href="#" class="button red">
							Ok, let's do this!
						</a>
					</div>
				</div>
			</div>
			<div class="large-4 columns">
				<div class="package best">
					<div class="package-header green">
						<span class="price">$0</span>
						<span class="name">Startup project</span>
					</div>

					<div class="package-content">
						<p>30 productive hours</p>
						<p>Monthly progress report</p>
						<p>30 productive hours</p>
						<p>Monthly progress report</p>
						<p>30 productive hours</p>
						<p>Monthly progress report</p>
					</div>

					<div class="package-footer">
						<a href="#" class="button green">
							Let's fo team!
						</a>
					</div>
				</div>
			</div>
			<div class="clearfix"></div>
		</div>
	</div>
</div>


<?php get_footer() ?>