generated from AhoyLemon/startHere
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
131 lines (129 loc) · 10.7 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The Next F1 Race</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<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=Figtree:wght@300..900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Unbounded:wght@700&display=swap" rel="stylesheet">
<link href="css/site.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Stay on track anywhere you go with with The Next F1 Race, the ultimate destination for the Formula 1 racing schedule. It's the prettiest race schedule on the internet.">
<meta http-equiv="last-modified" content="2024-02-29@14:06:48">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#d31029">
<meta name="msapplication-TileColor" content="#b91d47">
<meta name="theme-color" content="#d31029">
<!-- Twitter-->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:creator" content="@SavasLabs">
<meta name="twitter:title" content="The Next F1 Race">
<meta name="twitter:description" content="Stay on track anywhere you go with with The Next F1 Race, the ultimate destination for the Formula 1 racing schedule. It's the prettiest race schedule on the internet.">
<meta name="twitter:image" content="https://thenextf1race.com/og-wide.png">
<meta name="twitter:url" content="https://thenextf1race.com">
<meta property="og:title" content="The Next F1 Race">
<meta property="og:type" content="website">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:description" content="Stay on track anywhere you go with with The Next F1 Race, the ultimate destination for the Formula 1 racing schedule. It's the prettiest race schedule on the internet.">
<meta property="og:url" content="https://thenextf1race.com">
<meta property="og:image" content="https://thenextf1race.com/og-wide.png">
</head>
<body>
<div id="app" v-cloak>
<header class="site-header">
<div class="inner">
<h1>The Next F1 Race</h1>
<div class="when" v-if="!computedNextRace.raceNumber"><span>will be in 2024. Check back then.</span></div>
<div class="when" v-else><span>is in </span><a class="next-race" @click="scrollTo(computedNextRace.raceNumber)">{{computedNextRace.raceTitle}}</a>
<template v-if="computedNextRace.daysUntil > 1"><span>in </span><strong v-text="computedNextRace.daysUntil"></strong><span> days.</span></template>
<template v-else><span>this weekend.</span></template>
</div>
</div>
</header>
<main>
<div class="race-grid inner">
<section class="race" v-for="(race, raceCount) in races" :id="'Round'+(raceCount+1)"><a :name="'Stripe-'+race.title.replace(' ','')"></a>
<div class="inner">
<div class="top-info">
<div class="round-holder">
<div class="label-and-count"><span class="label">Round</span><span class="count">{{padNumber(race.round,2)}}</span></div>
</div>
<div class="dates" v-html="prettyDateRange(race.startDate,race.endDate)"></div>
<div class="line-holder">
<div class="line"></div>
</div>
<div class="laps-holder" v-if="race.laps">
<div class="label-and-count"><span class="count">{{padNumber(race.laps,2)}}</span><span class="label">Laps</span></div>
</div>
</div>
<div class="big">
<div class="title-holder">
<h2 class="title" :letters="race.title.length" :start-width="getTitleWidths(race).startWidth" :end-width="getTitleWidths(race).endWidth" :style="titleStyle(race)">{{race.title}}</h2>
</div>
<figure class="track-holder" :style="trackMapStyles(race.customMapWidth)">
<template v-if="race.trackFile"><img :src="'svg/tracks/'+race.trackFile" :alt="race.title+' track'"></template>
</figure>
</div>
<div class="location-info">
<div class="flag-holder"><img v-if="race.countryCode" :src="'svg/flags/'+race.countryCode+'.svg'"></div>
<div class="location-text" :row-count="getRowCount(race)">
<div class="row event-name" v-if="race.raceName"><span class="race-name">{{race.raceName}}</span></div>
<div class="row circuit" v-if="race.trackName || race.km"><span class="track-name">{{race.trackName}}</span><span class="km" v-if="race.km">{{race.km}} km</span></div>
</div>
</div>
</div>
</section>
</div>
</main>
<footer class="site-footer">
<div class="inner">
<div class="ava-holder"><a href="https://savaslabs.com/labs"><img src="/svg/ava-lab.svg"></a></div>
<div class="repo-holder"><a href="https://github.com/savaslabs/f1#readme"><span>Fork this project on GitHub.</span></a></div>
<div class="networks-holder">
<div class="networks"><a href="https://github.com/savaslabs">
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<title>GitHub</title>
<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path>
</svg></a><a href="https://twitter.com/savaslabs">
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<title>Twitter</title>
<path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"></path>
</svg></a><a href="https://www.linkedin.com/company/savas-labs">
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<title>LinkedIn</title>
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"></path>
</svg></a><a href="https://www.instagram.com/savas_labs/">
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<title>Instagram</title>
<path d="M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678c-3.405 0-6.162 2.76-6.162 6.162 0 3.405 2.76 6.162 6.162 6.162 3.405 0 6.162-2.76 6.162-6.162 0-3.405-2.76-6.162-6.162-6.162zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405c0 .795-.646 1.44-1.44 1.44-.795 0-1.44-.646-1.44-1.44 0-.794.646-1.439 1.44-1.439.793-.001 1.44.645 1.44 1.439z"></path>
</svg></a></div>
</div>
</div>
</footer>
</div>
<div class="javascripts">
<script src="js/libraries/vue.min.js"></script>
<script>
const testing = false;
</script>
<script src="js/libraries/moment.min.js"></script>
<script src="js/libraries/jquery.min.js"></script>
<script src="js/libraries/scrollmagic.min.js"></script>
<script src="js/min/site.min.js?updated2024-02-29@14:06:48"></script>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-PDH43TV090"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-PDH43TV090');
</script>
</div>
</body>
</html>