\n );\n }\n}\n\nexport default Slideshow;","import React from \"react\";\nimport appPowerAnalysis from \"../images/app/app-power-dark.png\";\nimport {Image} from \"react-bootstrap\";\nimport { Slide } from 'react-slideshow-image';\nimport 'react-slideshow-image/dist/styles.css';\nimport Button from \"react-bootstrap/Button\";\nimport rider1 from \"../images/final/rider-1.jpg\";\nimport rider2 from \"../images/final/bike-computer-za-site-3.jpg\";\nimport rider3 from \"../images/final/rider-3.jpg\";\nimport rider4 from \"../images/final/bike-computer-za-site-4.jpg\"\nimport Slideshow from \"../components/Slideshow\";\nimport Card from \"../components/Card\";\nimport {FontAwesomeIcon} from \"@fortawesome/react-fontawesome\";\nimport { faPlug, faServer, faSquareRootVariable, faUpload} from \"@fortawesome/free-solid-svg-icons\";\n\n\nclass SiteSection extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n\n }\n }\n\n resize() {\n this.setState({innerWidth: window.innerWidth})\n }\n\n componentDidMount() {\n window.addEventListener(\"resize\", this.resize.bind(this))\n this.resize()\n }\n\n render() {\n const images = [rider2, rider1, rider4];\n const centering = [\"center\", \"center\", \"center\"]\n return(\n
\n
\n
\n
\n
BIKE COMPUTER
\n
Relevate traces your every move and connects to any Bluetooth sensor you have on your bike. Enjoy all the functionalities of professional riding head-end units combined with a seamless user experience.
\n
Next time you go for a ride, your phone is all you will need to take with you to analyse your ride, both on-the-go and once you get back home.
\n
INCLUDING ROUTE PLANNER, NAVIGATION & ALTITUDE PROFILE
\n
\n
\n 991 ? \"500px\" : \"350px\"}/>\n
\n
\n
\n
\n );\n }\n\n\n}\n\nexport default SiteSection;","export default __webpack_public_path__ + \"static/media/ride.6055c9b6.jpg\";","export default __webpack_public_path__ + \"static/media/devices-1.af56bc61.jpg\";","export default __webpack_public_path__ + \"static/media/devices-2.ff8b642b.jpg\";","export default __webpack_public_path__ + \"static/media/sa-site-video-2-264.4dc35a06.mp4\";","import React from \"react\";\nimport appPowerAnalysis from \"../images/app/app-power-dark.png\";\nimport img from \"../images/final/sensors.jpg\"\nimport device1 from \"../images/final/devices-1.jpg\";\nimport device2 from \"../images/final/devices-2.jpg\";\nimport Button from \"react-bootstrap/Button\";\nimport Card from \"../components/Card\";\nimport {FontAwesomeIcon} from \"@fortawesome/react-fontawesome\";\nimport {faBolt, faGaugeSimpleHigh, faHeart, faRotate} from \"@fortawesome/free-solid-svg-icons\";\nimport Slideshow from \"../components/Slideshow\";\n\nclass DevicesSection extends React.Component {\n constructor(props) {\n super(props);\n }\n render() {\n const images = [device1, device2];\n const centering = [\"center\", \"center\"];\n return(\n
\n
\n
\n
DEVICES
\n
Connect to any Bluetooth-enabled sensor, regardless of the vendor. Connecting sensors is easy and intuitive, and you will have to do it only once for each sensor.
\n
Relevate is smart. It will recognise whether you are going out or spinning indoors and will connect the correct sensor automatically.
\n
Connecting your smart turbo trainer has never been easier. Apart from Wahoo, Tacx and Elite, we support any FTMS-ready trainer on the market.
\n
\n
\n \n
\n
\n
\n );\n }\n}\n\nexport default DevicesSection;","export default __webpack_public_path__ + \"static/media/sa-video-2.4c98701a.mov\";","import React from \"react\";\n\nimport Button from \"react-bootstrap/Button\";\n//import banner265 from \"../videos/sa-site-video-2-265.mp4\";\nimport bannerMov from \"../videos/sa-video-2.mov\";\nimport banner264 from \"../videos/sa-site-video-2-264.mp4\";\nimport image from \"../images/final/rider-1.jpg\";\nimport {Image, Spinner} from \"react-bootstrap\";\nimport stravaLogo from \"../images/final/api_logo_pwrdBy_strava_stack_white.png\";\n\n\nclass HeaderSection extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n innerWidth: null\n }\n }\n\n resize() {\n this.setState({innerWidth: window.innerWidth})\n }\n\n componentDidMount() {\n window.addEventListener(\"resize\", this.resize.bind(this))\n this.resize()\n }\n\n render() {\n return(\n
\n );\n }\n}\n\nexport default OverviewCard;","import React from \"react\";\n\nclass RingWidget extends React.Component {\n render(){\n let r = 48.0;\n let strokeWidth = 12.0;\n let size = 2*r + strokeWidth\n let bottomDeg = 1;\n let bottomRad = bottomDeg/180 * Math.PI;\n let bottomSin = Math.sin(bottomRad);\n let bottomCos = Math.cos(bottomRad);\n let topDeg = 360 - this.props.percentPerUnit * 360;\n let topRad = topDeg/180 * Math.PI;\n let topSin = Math.sin(topRad);\n let topCos = Math.cos(topRad);\n let bigArc = topDeg > 180 ? 0 : 1 // ali vzamemo večji ali manjši arc\n let bottomArcPath = \"M\" + (r + strokeWidth / 2) + \",\" + (strokeWidth / 2) + \" a\" + r + \",\" + r + \" 0 1,1 \" + - bottomSin * r + \", \" + (r - bottomCos * r)\n let topArcPath = \"M\" + (r + strokeWidth / 2) + \",\" + strokeWidth / 2 + \" a\" + r + \",\" + r + \" 0 \" + bigArc + \",1 \" + (- topSin * r) + \", \" + (r - topCos * r)\n let labelTopMargin = size / 2 - 30;\n return(\n
\n
\n
\n \n
\n
{this.props.title}
\n
{this.props.value}
\n
\n
\n );\n }\n}\n\nexport default RingWidget;","import React from \"react\";\n\nclass LineWidget extends React.Component {\n render() {\n let strokeWidth = 12.0;\n let lineWidth = 300 - strokeWidth * 2;\n return(\n
\n
\n
\n
{this.props.title}
\n
\n
\n
\n \n
\n
\n
\n
{this.props.value}
\n
\n
\n
\n );\n }\n\n drawTopBar(ppu, strokeWidth, lineWidth){\n if (ppu > 0){\n return(\n \n );\n }\n }\n}\n\nexport default LineWidget;","import Moment from 'moment';\n\nexport function testFunction( a){\n return a;\n}\n\nexport function formatDate( date, formatType){\n var formattedDate = Moment(date).format(formatType);\n return formattedDate;\n}\n\nexport function timestampFormatter(cell) {\n return formatDate( Date(cell).toString(), \"DD.MM.YYYY HH:mm\");\n //return new Date(cell).toDateString()\n}\n\nexport function distanceFormatter(cell) {\n return Math.round(cell)/1000;\n}\n\nexport function avgSpeedFormatter(cell) {\n return Math.round(cell);\n}\n\nexport function createSamplesFromSamplesContainer(samplesContainer)\n{\n if (samplesContainer == null){\n return [];\n }\n\n var lap = {};\n lap.samples = [];\n lap.sampledUnit = this;\n for (var i = 0; i < samplesContainer.sequence.length; i++){\n var sample = {};\n sample.sequence = (samplesContainer.sequence[i]);\n sample.timestamp = samplesContainer.timestamp[i];\n sample.distance = (samplesContainer.distance[i]);\n sample.duration = (samplesContainer.duration[i]);\n sample.altitude = (samplesContainer.altitude[i]);\n sample.heartRate = samplesContainer.heartRate[i];\n sample.power = samplesContainer.power[i];\n sample.cadence = samplesContainer.cadence[i];\n sample.speed = (samplesContainer.speed[i]);\n sample.longitude = (samplesContainer.longitude[i]);\n sample.latitude = (samplesContainer.latitude[i]);\n sample.temperature = samplesContainer.temperature[i];\n sample.altitudeGain = (samplesContainer.altitudeGain[i]);\n sample.altitudeGainPerUnit = (samplesContainer.altitudeGainPerUnit[i]);\n lap.samples.push(sample);\n sample.lap = lap;\n }\n return lap.samples;\n}\n\nexport function getTimestamp(activity) {\n if (activity !== undefined) {\n var date = new Date(activity.timestamp);\n return date.toISOString();\n } else {\n return \"...\";\n }\n}\n\nexport function secondsToTimestamp(seconds){\n let minutes = Math.floor(seconds / 60);\n let residuum = seconds % 60;\n let residuumFormatted = (residuum < 10) ? '0' + residuum.toString() : residuum.toString(); // dve števki\n let formattedText = minutes + \":\" + residuumFormatted\n return formattedText;\n /*var date = new Date(null);\n date.setSeconds(seconds); // specify value for SECONDS here\n return date.toISOString();*/\n}","import React, {useState} from \"react\";\nimport powerCurveJson from './powerCurve.json';\nimport powerCurveRefJson from './powerCurveRef.json';\nimport Chart from 'chart.js';\nimport RingWidget from \"../activity/RingWidget\";\nimport LineWidget from \"../activity/LineWidget\";\nimport {secondsToTimestamp} from \"../activity/Helper\";\n\nclass ChartEntity {\n constructor(x, y) {\n this.x = x;\n this.y = y;\n }\n}\n\nlet powerCurve = JSON.parse(JSON.stringify(powerCurveJson))\nlet powerCurveRef = JSON.parse(JSON.stringify(powerCurveRefJson))\nlet zones = [12,63,315,682,412,127,322];\n\nclass AnalysisSection extends React.Component {\n constructor() {\n super();\n this.state = {\n relativePosition: 0.0\n }\n }\n\n componentDidMount() {\n window.addEventListener('scroll', this.listenToScroll)\n this.populateChart()\n }\n\n listenToScroll = () => {\n {/*const winScroll =\n document.body.scrollTop || document.documentElement.scrollTop\n\n const height =\n document.documentElement.scrollHeight -\n document.documentElement.clientHeight\n\n const scrolled = winScroll / height\n\n this.setState({\n relativePosition: (window.scrollY / 800) % 1\n });\n this.populateChart()*/}\n }\n\n\n render() {\n let duration = zones.reduce(function(a, b){\n return a + b;\n });\n return(\n
\n
POWER PROFILE
\n \n
\n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n
\n
\n \n \n \n \n \n \n \n
\n
\n );\n }\n\n populateChart() {\n var ctx = document.getElementById(this.props.chartName).getContext('2d');\n ctx.height = \"150px\";\n\n let data1 = [];\n let data2 = [];\n\n for (let i = 0; i < powerCurve.powerCurvePoints.length; i++) {\n const powerCurvePoint = powerCurve.powerCurvePoints[i];\n data1.push(new ChartEntity(i, powerCurvePoint.value));\n }\n\n for (let i = 0; i < powerCurveRef.powerCurvePoints.length; i++) {\n const powerCurvePoint = powerCurveRef.powerCurvePoints[i];\n data2.push(new ChartEntity(i, powerCurvePoint.value));\n }\n\n let chart = new Chart(ctx, {\n type: 'line',\n data: {\n datasets: [{\n label: 'First dataset',\n data: data1,\n tension: 0.4,\n backgroundColor: \"rgba(15, 186, 248, 0.7)\",\n fill: true,\n pointRadius: 0,\n borderColor: \"#0FBAF8\",\n borderWidth: 1.0\n },\n {\n label: 'First dataset',\n data: data2,\n tension: 0.4,\n backgroundColor: \"#1E272E\",\n fill: true,\n pointRadius: 0,\n borderColor: \"#1E272E\",\n borderWidth: 1.0\n }]\n },\n options: {\n maintainAspectRatio: true,\n spanGaps: false,\n legend: {\n display: false\n },\n animation: false,\n scales: {\n yAxes: [\n {\n max: 1500,\n display: false,\n ticks: {\n max: 1300,\n beginAtZero: true\n }\n },\n {\n max: 1500,\n display: false,\n ticks: {\n max: 1300,\n beginAtZero: true\n }\n }\n ],\n xAxes: [\n {\n type: 'linear',\n display: false\n }\n ]\n },\n plugins: {\n legend: {\n display: false\n },\n deferred: {\n xOffset: 150, // defer until 150px of the canvas width are inside the viewport\n yOffset: '50%', // defer until 50% of the canvas height are inside the viewport\n delay: 500 // delay of 500 ms after the canvas is considered inside the viewport\n }\n }\n }\n });\n }\n}\n\nexport default AnalysisSection;","export default __webpack_public_path__ + \"static/media/workout-2.aff51d08.jpg\";","export default __webpack_public_path__ + \"static/media/workout-3.09df4a6a.jpg\";","import {Image} from \"react-bootstrap\";\nimport Card from \"../components/Card\";\nimport workout1 from \"../images/final/workout-1.jpg\";\nimport workout2 from \"../images/final/workout-2.jpg\";\nimport workout3 from \"../images/final/workout-3.jpg\";\nimport {FontAwesomeIcon} from \"@fortawesome/react-fontawesome\";\nimport {\n faCheck,\n faCircleCheck,\n faClockRotateLeft,\n faMedal,\n faSquarePollVertical,\n faTv\n} from \"@fortawesome/free-solid-svg-icons\";\nimport React from \"react\";\nimport Slideshow from \"../components/Slideshow\";\n\nclass WorkoutSection extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n innerWidth: null\n }\n }\n\n resize() {\n this.setState({innerWidth: window.innerWidth})\n }\n\n componentDidMount() {\n window.addEventListener(\"resize\", this.resize.bind(this))\n this.resize()\n }\n\n render(){\n const images = [workout1, workout3, workout2]\n const centering = [\"center\", \"center\", \"right\"]\n\n\n\n if (this.state.innerWidth < 1000){\n return(\n
\n
WORKOUTS
\n
No excuses! Roll up your sleeves during the colder months and get ready for riding season! Connect to your smart turbo trainer via Bluetooth and start working out even when the weather is against you.
\n
Relevate offers wide variety of training possibilities - from structured workouts to epic climbs we all know and love.
\n {/*
Relive your most epic road rides with our Recollections feature and see how your virtual self stacks up against the real you!
*/}\n {/**/}\n \n
\n
\n {/*
\n } />\n
*/}\n
\n } />\n
\n
\n } />\n
\n
\n } />\n
\n
\n
\n
\n );\n }\n else{\n return(\n
\n
\n
\n
\n
\n {/**/}\n
\n \n
\n
\n
\n
WORKOUTS
\n
No excuses! Roll up your sleeves during the colder months and get ready for riding season! Connect to your smart turbo trainer via Bluetooth and start working out even when the weather is against you.
\n
Relevate offers wide variety of training possibilities - from structured workouts to epic climbs we all know and love.
\n {/*
Relive your most epic road rides with our Recollections feature and see how your virtual self stacks up against the real you!
Experience stunning 3D virtual cycling and explore legendary destinations with our expertly crafted selection, suitable for every type of cyclist.
\n
Whether you're a lightweight climber, an all-around rolleur, or a heavy-weight sprinter, our product offers the perfect virtual ride for your cycling goals!
Upgrade to our product today and take your cycling experience to the next level risk free. Enjoy your Free Month while sharing your new activities to Strava or exporting them to TCX.
Upgrade to our product today and take your cycling experience to the next level risk free. Enjoy your Free Month while sharing your new activities to Strava or exporting them to TCX.
\n \n
\n
\n
\n
\n );\n };\n}\n\nexport default OverviewSection;","import React from \"react\";\nimport programJson from \"../sections/programs.json\";\nimport {forEach} from \"react-bootstrap/ElementChildren\";\n\n/*export class Interval{\n constructor(duration, value, color) {\n this.duration = duration;\n this.value = value;\n this.color = color;\n }\n}*/\n\nclass PowerZone{\n constructor(lowerBound, upperBound, color) {\n this.lowerBound = lowerBound;\n this.upperBound = upperBound;\n this.color = color;\n }\n}\n\nlet powerZones = [\n new PowerZone(0.0, 0.55, \"#34E7E3\"),\n new PowerZone(0.55, 0.75, \"#00D7D5\"),\n new PowerZone(0.75, 0.90, \"#0FBAF8\"),\n new PowerZone(0.90, 1.05, \"#0CA9E2\"),\n new PowerZone(1.05, 1.20, \"#FFD32A\"),\n new PowerZone(1.20, 1.50, \"#FFA801\"),\n new PowerZone(1.50, 10, \"#EF5777\"),\n];\n\nlet programs = JSON.parse(JSON.stringify(programJson));\nprograms.forEach(program => {});\n\nclass IntervalTraining extends React.Component{\n constructor(props) {\n super(props);\n this.state = {\n\n }\n }\n\n render(){\n let margin = 1.0\n let totalWidth = this.props.width;\n let totalHeight = 200;\n let sum = this.props.program.intervals.map(x => x.duration).reduce((prev, current) => {return(prev + current)});\n let intervalCount = this.props.program.intervals.length;\n let widthFactor = (totalWidth - 2 * margin * intervalCount) / sum;\n return(\n
Looking for an outstanding workout session? Look no further than our ERG interval training program on your smart turbo trainer!
\n
Whether you're looking to recover from a tough day or push yourself to the limit with a high-intensity session, our range of workouts has got you covered! If that's not enough, you can design your own personalized interval training sessions effortlessly using our in-app training creator.
Virtual Power Meter estimates your power output in real-time based various factors, such as your current speed, acceleration, road inclination (grade), weight of a system (rider + bike), wind speed and direction, and many others.
\n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n
\n
\n );\n }\n else{\n return(\n
\n
\n
\n
\n
\n {/*
current time: {Math.round(this.state.currentTime * 100) / 100}
Don't have a power meter yet or has it run out of juice during your ride? Here's a solution!
\n
Virtual Power Meter estimates your power output in real-time based various factors, such as your current speed, acceleration, road inclination (grade), weight of a system (rider + bike), wind speed and direction, and many others.
\n
The algorithm estimates aerodynamic drag coefficient based on your body weight and height as well as bike type and assumes you are taking more aerodynamic position on your bike as your speed increases.
\n {/*
Relive your most epic road rides with our Recollections feature and see how your virtual self stacks up against the real you!
*/}\n
\n
\n
\n
\n
\n );\n }\n }\n}\n\nexport default VPMSection;","import React from \"react\";\nimport { Image} from \"react-bootstrap\";\nimport MobileStoreButton from \"react-mobile-store-button\";\nimport appHome from \"./images/app/app-home-dark.png\";\nimport trenazer from \"./images/final/workout-1.jpg\";\nimport appScreen1 from \"./images/app/v2/app-screens-v3-67-1_02.jpg\"\nimport appScreen2 from \"./images/app/v2/app-screens-v2-67-2_03.jpg\"\nimport appScreen3 from \"./images/app/v2/app-screens-v2-67-2_04.jpg\"\nimport appScreen4 from \"./images/app/v2/app-screens-v2-67-2_05.jpg\"\nimport appScreen5 from \"./images/app/v2/app-screens-v2-67-2_06.jpg\"\nimport appScreen6 from \"./images/app/v2/app-screens-v2-67-2_07.jpg\"\nimport appScreen7 from \"./images/app/v2/app-screens-v2-67-2_08.jpg\"\nimport appScreen8 from \"./images/app/v2/app-screens-v2-67-2_09.jpg\"\nimport appScreen9 from \"./images/app/v2/app-screens-v2-67-2_10.jpg\"\nimport appPowerAnalysis from \"./images/app/app-power-dark.png\";\nimport appHeatmaps from \"./images/app/app-heatmap-dark.png\";\nimport appAchievements from \"./images/app/app-achievements-dark.png\";\nimport appSectorDetails from \"./images/app/app-sectors-dark.png\";\nimport appStatsAnalysis from \"./images/app/app-stats-dark.png\";\nimport appEpicRide from \"./images/app/app-epic-ride.png\";\nimport appRide from \"./images/app/app-ride.png\";\nimport phoneOnBike from \"./images/final/phone-on-bike.jpg\";\nimport phoneOnBikeNarrow from \"./images/final/phone-on-bike-narrow.jpg\";\nimport analysis from \"./images/final/analysis.jpg\";\nimport analysisSmall from \"./images/final/analysis-small.jpg\";\nimport appAnalysis from \"./images/app/app-analysis.jpg\";\nimport appAnalysis2 from \"./images/app/app-analysis-2.jpg\";\nimport Card from \"./components/Card\";\nimport phoneSensor from \"./images/final/sensors.jpg\";\nimport smoothscroll from 'smoothscroll-polyfill';\nimport SAStylisedText from \"./SAStylisedText\";\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport {\n faBolt, faChartLine, faCheckCircle,\n faClockRotateLeft, faGaugeSimpleHigh,\n faHeart, faHeartPulse, faListOl,\n faMedal, faMobilePhone,\n faRotate,\n faSquarePollVertical,\n faTv\n} from '@fortawesome/free-solid-svg-icons'\nimport videoMov from \"./videos/app-store-promo.mov\";\nimport videoMp4 from \"./videos/app-store-promo.mp4\";\nimport videoSmallMov from \"./videos/site-promo-small.mov\";\nimport videoSmallMp4 from \"./videos/site-promo-small.mp4\"\nimport SiteSection from \"./sections/SiteSection\";\n\nimport imageRide from \"./images/final/ride.jpg\";\nimport DevicesSection from \"./sections/DevicesSection\";\nimport HeaderSection from \"./sections/HeaderSection\";\nimport Overview from \"./activity/Overview\";\nimport OverviewCard from \"./components/OverviewCard\";\nimport AnalysisSection from \"./sections/AnalysisSection\";\nimport WorkoutSection from \"./sections/WorkoutSection\";\nimport EpicRidesSection from \"./sections/EpicRidesSection\";\nimport OverviewSection from \"./sections/OverviewSection\";\nimport UixSection from \"./sections/UixSection\";\nimport ReliveSection from \"./sections/ReliveSection\";\nimport SectionsGraph from \"./components/SectionsGraph\";\nimport VPMSection from \"./sections/VPMSection\";\n\nclass MainSite extends React.Component {\n constructor(props) {\n super(props);\n this.refRide = React.createRef()\n this.refWorkout = React.createRef()\n this.refAnalyse = React.createRef()\n this.refVpm = React.createRef()\n this.refSectors = React.createRef()\n this.refIntervalTrainings = React.createRef()\n this.refVirtualRides = React.createRef()\n smoothscroll.polyfill();\n this.handleSelect = this.handleSelect.bind(this);\n this.state = {\n innerWidth: null,\n prevScroll: \"\"\n }\n }\n\n handleSelect(eventKey) {\n this.props.modeChanged(eventKey);\n }\n\n resize() {\n this.setState({innerWidth: window.innerWidth})\n }\n\n componentDidUpdate() {\n if (this.state.scroll === this.props.scroll){\n return;\n }\n switch (this.props.scroll){\n case \"ride\":\n this.refRide.current.scrollIntoView({ behavior: 'smooth', block: 'center' });\n break;\n case \"workout\":\n this.refWorkout.current.scrollIntoView({ behavior: 'smooth', block: 'center' });\n break;\n case \"analyse\":\n this.refAnalyse.current.scrollIntoView({ behavior: 'smooth', block: 'center' });\n break;\n case \"vpm\":\n this.refVpm.current.scrollIntoView({ behavior: 'smooth', block: 'center' });\n break;\n case \"sectors\":\n this.refSectors.current.scrollIntoView({ behavior: 'smooth', block: 'center' });\n break;\n case \"intervalTrainings\":\n this.refIntervalTrainings.current.scrollIntoView({ behavior: 'smooth', block: 'center' });\n break;\n case \"virtualRides\":\n this.refVirtualRides.current.scrollIntoView({ behavior: 'smooth', block: 'center' });\n break;\n default:\n break;\n }\n\n this.setState({\n scroll: this.props.scroll\n });\n }\n\n componentDidMount() {\n window.addEventListener(\"resize\", this.resize.bind(this))\n this.resize()\n }\n\n getImage(){\n if (this.state.innerWidth < 800){\n return \n }\n else{\n return \n }\n }\n\n isPhone(){\n return this.state.innerWidth < 450;\n }\n\n render() {\n return (\n
\n
\n \n
\n
\n \n
\n {/*
\n
\n
\n
\n
\n
\n
\n
RIDE
\n
Saddle Addict traces your every move and connects to any Bluetooth sensor you have on your bike. Enjoy all the functionalities of professional riding head-end units combined with a seamless user experience.
\n
Next time you go for a ride, your phone is all you will need to take with you to analyse your ride, both on-the-go and once you get back home.
\n
\n
\n
\n
\n
*/}\n
\n \n
\n {/*
\n
ROUTE PLANNER & NAVIGATION
\n
\n
\n } />\n
\n
\n } />\n
\n
\n } />\n
\n
\n
*/}\n
\n
\n
\n
\n
\n
\n
\n
ACTIVE SECTORS
\n
Introducing on-the-fly sectors to start instant real-time comparison with your previous efforts with a press on button!
\n
Compete with your personal best and most recent effort while recording all the relevant stats along the way. Or analyse custom-made sectors in post-ride analysis
\n
\n
\n \n
\n
\n
\n
\n
\n
\n
\n
\n \n
\n
\n \n
\n
{this.getAnalysisSection()}
\n {/*
\n
\n
\n
\n
USER EXPERIENCE
\n
One app. One screen.
\n
Taking advantage of beautiful high-resolution displays of modern mobile devices, Saddle Addict will show you all the important metrics on a single screen.
\n
Our user interface is optimised for high-readability with carefully configured layouts. Find all the information you need just by glancing your phone. No swiping, so you can focus on your performance.
\n
We also paid special attention to battery usage and made sure you can do as many kilometres as your legs allow.
\n
\n
\n \n
\n
\n
\n
*/}\n {/*
\n \n
*/}\n
\n
\n
\n
\n } />\n
\n
\n } />\n
\n
\n } />\n
\n
\n
\n
\n
\n \n
\n
\n
HIGHLIGHTS
\n
\n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n {/*\n
\n
\n \n
POWER ANALYSIS
\n
Compare your current power curve with your all-time power bests
\n
\n
\n
\n
\n \n
SECTORS
\n
Compete against yourself through your previous rides
\n
\n
\n
\n
\n \n
EPIC RIDES
\n
Climb your favourite hill and join cycling legends
\n
\n
\n
\n
\n \n
HEATMAPS
\n
Quickly find that ride you are looking for by picking it on a map
\n
\n
\n
\n
\n \n
ACTIVE DAYS
\n
Graphical analysis of your activity for every month and every year
\n
\n
\n
\n
\n \n
ACHIEVEMENTS
\n
Find standout moments on your recent ride or workout
\n
\n
\n */}\n\n
\n
\n
\n \n
\n );\n }\n\n\n getAnalysisSection(){\n return(\n
\n
\n
\n
\n
\n \n
\n
992 ? \"96px\" : \"0px\"}}>\n
ANALYTICS
\n
Relevate is all about offering an all-in-one experience to athletes who do outdoor riding as well as indoor workouts.
\n
Geek out on your data with our powerful analysis tools, performance evaluation, heatmaps and sectors.
\n
\n
\n
\n
\n
\n \n
\n
\n );\n }\n}\n\nexport default MainSite;","export default __webpack_public_path__ + \"static/media/logo-v2.a6970403.png\";","import React from \"react\";\nimport Navbar from 'react-bootstrap/Navbar';\nimport Nav from 'react-bootstrap/Nav';\nimport {Container, Image} from \"react-bootstrap\";\nimport logo from \"./images/logo-v2.png\";\nimport SAStylisedText from \"./SAStylisedText\";\nimport Button from \"react-bootstrap/Button\";\n\nclass NaviagtionBar extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n selectedItem: \"Administrator\"\n };\n this.navItemClicked = this.navItemClicked.bind(this);\n this.handleSelect = this.handleSelect.bind(this);\n this.handleLogout = this.handleLogout.bind(this);\n }\n handleSelect(eventKey) {\n this.props.modeChanged(eventKey);\n }\n\n handleLogout(eventKey) {\n this.props.logout();\n }\n\n navItemClicked(item) {\n this.props.modeChanged(item);\n }\n\n render() {\n return (\n \n \n this.handleSelect(\"main\")}>\n
\n \n
Relevate
\n {/**/}\n
\n \n \n {/*\n \n \n */}\n \n \n );\n }\n}\n\nexport default NaviagtionBar","import React from \"react\";\nimport MobileStoreButton from \"react-mobile-store-button\";\nimport {Button} from \"react-bootstrap\";\n\nclass GetStarted extends React.Component {\n render() {\n return(\n
\n
\n
\n
\n
{navigator.language || navigator.userLanguage}
\n
GET FREE MONTH
\n
Download Relevate app and join the most advanced cycling service available today
\n
MONTHLY PLAN
\n
4.99 $ / month
\n
ANNUAL PLAN
\n
2.49 $ / month
\n
Billed annually at 29.99 per year
\n
Try out the full experience risk-free. Before you make a commitment, we offer a 1-MONTH Free Trial of the most comprehensive riding experience.
\n \n );\n }\n\n getTitle(activity) {\n if (activity !== undefined) {\n return activity.name;\n } else {\n return \"...\";\n }\n }\n\n getActivity(activityId)\n {\n if(activityId !== undefined)\n {\n let urlOfFunc = '/Activity/getSharedActivity';\n\n fetch(\"https://service.saddleaddict.com\" + urlOfFunc + '?activityId=' + activityId,{\n headers: new Headers({'Authorization': \"Bearer \" + this.props.serverAccessToken})\n })\n .then(res => res.json())\n .then(\n ((result) => {\n if (result.status === undefined) // Ce je 200, ne pride nazaj status ampak samo direkt Json, kar pomeni da ce je status undefined, imamo rezultat\n {\n var username = result.value0;\n var userid = result.value1;\n var unitSystem = result.value2;\n var activity = result.value3;\n if(activity === undefined)\n {\n username = \"Your friend\"\n activity = result;\n } \n activity.samples = createSamplesFromSamplesContainer(activity.samplesContainer);\n this.setState({\n activity: activity,\n activityId: activity.id,\n unitSystem: unitSystem,\n sharedUsername: username,\n userId: userid,\n mapState: [\n {\n activity: activity\n }\n ]\n });\n this.props.onNameChange(username); // 5.4.2022: ta klic mora bit nujno za set state, sicer se zacikla render\n }\n },\n // Note: it's important to handle errors here\n // instead of a catch() block so that we don't swallow\n // exceptions from actual bugs in components.\n (error) => {\n var username = error.value0;\n var activity = error.value3;\n var userid = error.value1;\n var unitSystem = error.value2;\n if(activity === undefined)\n {\n username = \"Your friend\"\n activity = error;\n } \n activity.samples = createSamplesFromSamplesContainer(activity.samplesContainer);\n this.setState({\n activity: activity,\n activityId: activity.id,\n unitSystem: unitSystem,\n sharedUsername: username,\n userId: userid,\n mapState: [\n {\n activity: activity\n }\n ]\n });\n this.props.onNameChange(username); // 5.4.2022: ta klic mora bit nujno za set state, sicer se zacikla render\n }\n ))\n }\n }\n}\n\nexport default Activity;","import React from \"react\";\nimport {createSamplesFromSamplesContainer} from \"./activity/Helper\";\nimport queryString from \"query-string\";\n\n\nclass AccountValidation extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n validationKey: undefined,\n validationSuccessful: undefined\n };\n //this.onSegmentSelected = this.onSegmentSelected.bind(this);\n }\n\n onValidationSuccess(){\n this.setState({\n validationSuccessful: true\n })\n }\n\n onValidationError(){\n this.setState({\n validationSuccessful: false\n })\n }\n\n componentDidMount() {\n let search = this.props.location.search;\n const values = queryString.parse(search)\n let email = values.email\n let validationKey = values.validationKey\n this.validateAccount(email, validationKey)\n }\n\n render(){\n return(\n
\n
{this.showMessage()}
\n
\n );\n }\n\n showMessage(){\n if (this.state.validationSuccessful !== undefined && this.state.validationSuccessful){\n return \"Account Validation successful! Thanks for joining our community!\"\n }\n else if (this.state.validationSuccessful !== undefined && !this.state.validationSuccessful){\n return \"An error occurred during the Account validation process. Please try again later or contact support.\"\n }\n }\n\n validateAccount(email, validationKey)\n {\n if(validationKey !== undefined)\n {\n let urlOfFunc = '/validateAccount';\n\n fetch(\"http://Bostjans-MacBook-Pro.local:3000\" + urlOfFunc + \"?email=\" + email + '&validationKey=' + validationKey, {method: 'POST'})\n .then((response) => {\n if (response.status === 200){\n this.setState({\n validationSuccessful: true\n })\n }\n else{\n this.setState({\n validationSuccessful: false\n })\n }\n })\n }\n }\n}\n\nexport default AccountValidation;","import React from \"react\";\nimport {createSamplesFromSamplesContainer} from \"./activity/Helper\";\nimport queryString from \"query-string\";\nimport Button from \"react-bootstrap/Button\";\n\n\n\nclass UnsubscribeNews extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n validationSuccessful: undefined\n };\n //this.onSegmentSelected = this.onSegmentSelected.bind(this);\n }\n\n // Vedno ko se ta komponenta inicializira, ugotovimo id zadnjega Activity-a...\n componentDidMount() {\n let search = this.props.location.search;\n const values = queryString.parse(search)\n this.email = values.email;\n // this.unsubscribe(this.email);\n }\n\n\n render(){\n return (\n this.state.validationSuccessful ?\n
\n
UNSUBSCRIBED FROM RELEVATE NEWS
\n
{this.showMessage()}
\n
: \n
\n
Are you sure you want to unsubscribe from Relevate news?
\n \n
\n );\n }\n\n showMessage(){\n if (this.state.validationSuccessful !== undefined && this.state.validationSuccessful)\n return \"You were successfully unsubscribed from Relevate news!\"\n else if (this.state.validationSuccessful !== undefined && !this.state.validationSuccessful)\n return \"Unsubscribe user error! Please try again later or contact support.\"\n }\n\n unsubscribe(email)\n {\n if(email !== undefined)\n {\n fetch(\"https://service.saddleaddict.com/unsubscribeMailing?emailAddress=\"+email,\n {\n method: 'post',\n body: {\n \"emailAddress\": email\n }\n })\n .then((response) => {\n if (response.status === 200){\n this.setState({\n validationSuccessful: true\n })\n }\n else{\n this.setState({\n validationSuccessful: false\n })\n }\n }).catch(error => {\n this.setState({\n validationSuccessful: false\n })\n })\n }\n \n }\n}\n\nexport default UnsubscribeNews;","import React, { Component } from 'react';\nimport './App.css';\nimport './components/Loader.css';\nimport 'bootstrap/dist/css/bootstrap.css';\nimport MainSite from \"./MainSite\";\nimport NavigationBar from \"./NavigationBar\";\nimport {Button, Image, Modal} from \"react-bootstrap\";\nimport logo from './images/logo-v2.png'\nimport SAStylisedText from \"./SAStylisedText\";\nimport GetStarted from \"./GetStarted\";\nimport Activity from \"./activity/Activity\";\nimport {\n Switch,\n Route,\n BrowserRouter,\n Link\n} from \"react-router-dom\";\nimport queryString from \"query-string\";\nimport ReactGA from \"react-ga4\";\nimport AccountValidation from \"./AccountValidation\";\nimport UnsubscribeNews from \"./UnsubscribeNews\";\nimport HeaderSection from \"./sections/HeaderSection\";\n\n//ReactGA.initialize(\"AW-11077181381\");//G-NGZYPPM7P8\");\n//ReactGA.send(\"pageview\");\n\nclass App extends Component {\n constructor(props) {\n super(props);\n //const { cookies } = props;\n this.state = {\n supportedModes: [],\n selectedMode: \"main\",\n token: null,\n prevScrollPosition: 0,\n navbarVisible: true\n };\n this.modeChanged = this.modeChanged.bind(this);\n this.onNameChange = this.onNameChange.bind(this);\n this.handleScroll = this.handleScroll.bind(this);\n }\n\n // NavigationBar javi, kateri sajt bo aktiven: 0 - main site, 1 - ride, 2 - workout, 3 - analysis\n modeChanged(mode) {\n this.setState({\n selectedMode: mode\n });\n }\n\n onNameChange(newSharedUserName) {\n this.setState({\n sharedUsername: newSharedUserName\n });\n }\n\n componentDidMount() {\n //window.addEventListener(\"scroll\", this.handleScroll);\n }\n\n handleScroll(){\n const prevScrollpos = this.state.prevScrollPosition;\n const currentScrollPos = window.scrollY;\n var visible = true;\n if (prevScrollpos < currentScrollPos && currentScrollPos > 100){\n visible = false;\n }\n\n this.setState({\n prevScrollPosition: currentScrollPos,\n navbarVisible: visible,\n });\n };\n\n render() {\n return(\n
\n \n \n \n \n \n (\n
\n
YOUR FRIEND SHARED THEIR ACTIVITY WITH YOU
\n \n
Powered by Relevate
\n {this.getMode()}\n \n
)}/>\n (\n
\n \n \n \n \n \n \n
)}/>\n (\n
\n
SUPPORT
\n
If you encounter any issue with Relevate mobile application, have any questions regarting its functionality or have any suggestions for improvements, contact us on any of the following ways: