mirror of
https://github.com/PranshulGG/WeatherMaster.git
synced 2026-10-22 02:52:37 -05:00
Removed Moon Phases page
This commit is contained in:
Pranshul authored and GitHub committed
1 parent
fdd9456ff4
commit
149df5c6c8
1 file changed
+1
-388
@@ -1,388 +1 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" data-theme="dark">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
|
||||
<title>MoonPhases</title>
|
||||
<link rel="stylesheet" href="../ui-files/font-usage.css">
|
||||
<link rel="stylesheet" href="../ui-files/variables.css">
|
||||
<link rel="stylesheet" href="../components/components.css">
|
||||
<link rel="stylesheet" href="../components/modal-ver.css">
|
||||
<link rel="stylesheet" href="../ripple-files/ripple.css">
|
||||
<link rel="stylesheet" href="moonphaseUi.css">
|
||||
<script src="../app/apiKeysRotation.js"></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="moon_activity">
|
||||
|
||||
<div class="moon_activity_header">
|
||||
<button class="ripple-icon-btn regular" ontouchstart="playEffect(this)" ontouchend="playEffect2(this)"
|
||||
onclick="sendThemeToAndroid('GoBack')" style="--ripple-unbounded: white">
|
||||
<span class="ripple-effect-icon"></span>
|
||||
<span icon-outlined style="font-size: 24px !important; color: white;">arrow_back</span>
|
||||
</button>
|
||||
|
||||
<p style="color: white;">Moon phases</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="moon_Phase_content">
|
||||
|
||||
<div class="moon_phase_current_data">
|
||||
|
||||
<div class="moon_phase_img_text_current">
|
||||
<moonPhase>
|
||||
<moonPhaseProgress>
|
||||
|
||||
</moonPhaseProgress>
|
||||
</moonPhase>
|
||||
<p id="currentMoonPhase_name"></p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="moon_phase_current_text_data">
|
||||
|
||||
<div class="moon_phase_current_text_data_item">
|
||||
<span>Illumination:</span>
|
||||
<p id="IlluminationText"></p>
|
||||
</div>
|
||||
|
||||
<div class="moon_phase_current_text_data_item">
|
||||
<span>Moonrise:</span>
|
||||
<p id="MoonriseText"></p>
|
||||
</div>
|
||||
|
||||
<div class="moon_phase_current_text_data_item">
|
||||
<span>Moonset:</span>
|
||||
<p id="MoonsetText"></p>
|
||||
</div>
|
||||
|
||||
<div class="moon_phase_current_text_data_item">
|
||||
<span>Next phase:</span>
|
||||
<p id="NextphaseText"></p>
|
||||
</div>
|
||||
|
||||
<div class="moon_phase_current_text_data_item">
|
||||
<span>Next phase in:</span>
|
||||
<p id="NextphaseinText"></p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<moonPhasetitle>
|
||||
Moon phase forecast
|
||||
</moonPhasetitle>
|
||||
|
||||
<div class="moonPhase_forecast" id="moonPhase_forecast">
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="moonphase_loader">
|
||||
<md-circular-progress indeterminate style="margin-bottom: 100px;"></md-circular-progress>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
function sendThemeToAndroid(theme) {
|
||||
|
||||
AndroidInterface.updateStatusBarColor(theme);
|
||||
};
|
||||
|
||||
const latDif = localStorage.getItem('currentLat');
|
||||
const longDif = localStorage.getItem('currentLong');
|
||||
|
||||
|
||||
let currentKeyMoonIndex = 0;
|
||||
|
||||
Fetchmoonphases(latDif, longDif)
|
||||
|
||||
function switchApiKey() {
|
||||
currentKeyMoonIndex = (currentKeyMoonIndex + 1) % apiKeysVisual.length;
|
||||
Fetchmoonphases(latDif, longDif)
|
||||
}
|
||||
|
||||
function Fetchmoonphases(lat, long) {
|
||||
const apiKey = apiKeysVisual[currentKeyMoonIndex];
|
||||
|
||||
fetch(`https://weather.visualcrossing.com/VisualCrossingWebServices/rest/services/timeline/${lat},${long}?unitGroup=metric&include=days&key=${apiKey}&contentType=json`)
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
switchApiKey();
|
||||
throw new Error('API limit reached or error occurred');
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then(data => {
|
||||
|
||||
|
||||
|
||||
|
||||
const moon_phase_img = document.getElementById('current_phase_img');
|
||||
const moonPhaseText = document.getElementById('currentMoonPhase_name');
|
||||
const moonPhase = data.days[0].moonphase;
|
||||
const moonPhase_forecast = document.getElementById('moonPhase_forecast')
|
||||
|
||||
let phaseName = '';
|
||||
let phaseImg = '';
|
||||
let daysLeft = 0;
|
||||
let nextPhaseName = '';
|
||||
|
||||
|
||||
|
||||
|
||||
if (moonPhase === 0) {
|
||||
phaseName = 'New Moon';
|
||||
phaseImg = '../moon_phases/moon_new.svg';
|
||||
daysLeft = Math.round((0.25 - moonPhase) * 29.53);
|
||||
nextPhaseName = 'Waxing Crescent';
|
||||
|
||||
} else if (moonPhase > 0 && moonPhase < 0.25) {
|
||||
phaseName = 'Waxing Crescent';
|
||||
phaseImg = '../moon_phases/moon_waxing_crescent.svg';
|
||||
daysLeft = Math.round((0.25 - moonPhase) * 29.53);
|
||||
nextPhaseName = 'First Quarter';
|
||||
|
||||
} else if (moonPhase === 0.25) {
|
||||
phaseName = 'First Quarter';
|
||||
phaseImg = '../moon_phases/moon_first_quarter.svg';
|
||||
daysLeft = Math.round((0.5 - moonPhase) * 29.53);
|
||||
nextPhaseName = 'Waxing Gibbous';
|
||||
|
||||
} else if (moonPhase > 0.25 && moonPhase < 0.5) {
|
||||
phaseName = 'Waxing Gibbous';
|
||||
phaseImg = '../moon_phases/moon_waxing_gibbous.svg';
|
||||
daysLeft = Math.round((0.5 - moonPhase) * 29.53);
|
||||
nextPhaseName = 'Full Moon';
|
||||
|
||||
|
||||
} else if (moonPhase === 0.5) {
|
||||
phaseName = 'Full Moon';
|
||||
phaseImg = '../moon_phases/moon_full.svg';
|
||||
daysLeft = Math.round((0.75 - moonPhase) * 29.53);
|
||||
nextPhaseName = 'Waning Gibbous';
|
||||
|
||||
} else if (moonPhase > 0.5 && moonPhase < 0.75) {
|
||||
phaseName = 'Waning Gibbous';
|
||||
phaseImg = '../moon_phases/moon_waning_gibbous.svg';
|
||||
daysLeft = Math.round((0.75 - moonPhase) * 29.53);
|
||||
nextPhaseName = 'Last Quarter';
|
||||
|
||||
|
||||
} else if (moonPhase === 0.75) {
|
||||
phaseName = 'Last Quarter';
|
||||
phaseImg = '../moon_phases/moon_last_quarter.svg';
|
||||
daysLeft = Math.round((1 - moonPhase) * 29.53);
|
||||
nextPhaseName = 'Waning Crescent';
|
||||
|
||||
} else if (moonPhase > 0.75 && moonPhase < 1) {
|
||||
phaseName = 'Waning Crescent';
|
||||
phaseImg = '../moon_phases/moon_waning_crescent.svg';
|
||||
daysLeft = Math.round((1 - moonPhase) * 29.53);
|
||||
nextPhaseName = 'New Moon';
|
||||
|
||||
|
||||
}
|
||||
moonPhaseText.textContent = phaseName
|
||||
document.getElementById('NextphaseText').innerHTML = nextPhaseName;
|
||||
|
||||
if (daysLeft > 1) {
|
||||
document.getElementById('NextphaseinText').innerHTML = `${daysLeft} days`;
|
||||
} else {
|
||||
document.getElementById('NextphaseinText').innerHTML = `${daysLeft} day`;
|
||||
}
|
||||
|
||||
const formatDate = (dateStr) => {
|
||||
const options = { day: 'numeric', month: 'long' };
|
||||
const date = new Date(dateStr);
|
||||
return date.toLocaleDateString('en-US', options);
|
||||
|
||||
|
||||
};
|
||||
|
||||
const currentDateMoonPhase = Math.floor(new Date().getTime() / 1000);
|
||||
|
||||
|
||||
|
||||
fetch(`https://api.farmsense.net/v1/moonphases/?d=${currentDateMoonPhase}`)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
const MoonIllumination = Math.round(data[0].Illumination * 100)
|
||||
|
||||
|
||||
document.getElementById('IlluminationText').innerHTML = `${MoonIllumination}%`
|
||||
|
||||
const moonPhaseProgress = document.querySelector('moonPhaseProgress');
|
||||
|
||||
if (MoonIllumination >= 50) {
|
||||
moonPhaseProgress.style.width = `${MoonIllumination}%`;
|
||||
moonPhaseProgress.style.right = '0';
|
||||
moonPhaseProgress.style.left = 'auto';
|
||||
} else {
|
||||
moonPhaseProgress.style.width = `${MoonIllumination}%`;
|
||||
moonPhaseProgress.style.left = '0';
|
||||
moonPhaseProgress.style.right = 'auto';
|
||||
}
|
||||
|
||||
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching data:', error);
|
||||
});
|
||||
|
||||
|
||||
const startDate = data.days[1].datetime;
|
||||
const endDate = data.days[data.days.length - 1].datetime;
|
||||
|
||||
|
||||
document.querySelector('moonPhasetitle').innerHTML = `Moon phases from ${formatDate(startDate)} to ${formatDate(endDate)}`
|
||||
|
||||
moonPhase_forecast.innerHTML = '';
|
||||
|
||||
for (let i = 1; i < data.days.length; i++) {
|
||||
const day = data.days[i];
|
||||
const phase = day.moonphase;
|
||||
const phasePercentage = Math.round(phase * 100);
|
||||
let phaseForecastName = '';
|
||||
let phaseForecastImg = '';
|
||||
|
||||
if (phase === 0) {
|
||||
phaseForecastName = 'New Moon';
|
||||
phaseForecastImg = '../moon_phases/moon_new.svg';
|
||||
} else if (phase > 0 && phase < 0.25) {
|
||||
phaseForecastName = 'Waxing Crescent';
|
||||
phaseForecastImg = '../moon_phases/moon_waxing_crescent.svg';
|
||||
} else if (phase === 0.25) {
|
||||
phaseForecastName = 'First Quarter';
|
||||
phaseForecastImg = '../moon_phases/moon_first_quarter.svg';
|
||||
} else if (phase > 0.25 && phase < 0.5) {
|
||||
phaseForecastName = 'Waxing Gibbous';
|
||||
phaseForecastImg = '../moon_phases/moon_waxing_gibbous.svg';
|
||||
} else if (phase === 0.5) {
|
||||
phaseForecastName = 'Full Moon';
|
||||
phaseForecastImg = '../moon_phases/moon_full.svg';
|
||||
} else if (phase > 0.5 && phase < 0.75) {
|
||||
phaseForecastName = 'Waning Gibbous';
|
||||
phaseForecastImg = '../moon_phases/moon_waning_gibbous.svg';
|
||||
} else if (phase === 0.75) {
|
||||
phaseForecastName = 'Last Quarter';
|
||||
phaseForecastImg = '../moon_phases/moon_last_quarter.svg';
|
||||
} else if (phase > 0.75 && phase < 1) {
|
||||
phaseForecastName = 'Waning Crescent';
|
||||
phaseForecastImg = '../moon_phases/moon_waning_crescent.svg';
|
||||
}
|
||||
|
||||
|
||||
const forecastItem = document.createElement('div');
|
||||
const forecastDate = document.createElement('span');
|
||||
const forecastImg = document.createElement('img');
|
||||
const forecastName = document.createElement('p');
|
||||
|
||||
forecastImg.src = phaseForecastImg;
|
||||
forecastName.textContent = phaseForecastName ;
|
||||
forecastDate.textContent = formatDate(day.datetime);
|
||||
forecastItem.appendChild(forecastDate);
|
||||
|
||||
forecastItem.appendChild(forecastImg);
|
||||
forecastItem.appendChild(forecastName);
|
||||
moonPhase_forecast.appendChild(forecastItem);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// set/rise
|
||||
|
||||
|
||||
let currentAstronomyKeyIndex = 0;
|
||||
fetchAstronomyData(latDif, longDif)
|
||||
|
||||
function switchAstronomyApiKey() {
|
||||
currentAstronomyKeyIndex = (currentAstronomyKeyIndex + 1) % astronomyApiKeys.length;
|
||||
}
|
||||
|
||||
function fetchAstronomyData(lat, long) {
|
||||
const apiKey = astronomyApiKeys[currentAstronomyKeyIndex];
|
||||
|
||||
fetch(`https://api.ipgeolocation.io/astronomy?apiKey=${apiKey}&lat=${lat}&long=${long}`)
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
switchAstronomyApiKey();
|
||||
throw new Error('API limit reached or error occurred');
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then(data => {
|
||||
const moonRise = data.moonrise;
|
||||
const moonSet = data.moonset;
|
||||
|
||||
const moonRiseAmPm = convertToAmPm(moonRise);
|
||||
const moonSetAmPm = convertToAmPm(moonSet);
|
||||
|
||||
|
||||
document.getElementById('MoonriseText').innerHTML = moonRiseAmPm;
|
||||
document.getElementById('MoonsetText').innerHTML = moonSetAmPm;
|
||||
|
||||
})
|
||||
.catch(error => {
|
||||
console.error(error);
|
||||
// Retry the request with the new key after switching
|
||||
fetchAstronomyData(lat, long);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function convertToAmPm(time) {
|
||||
let [hour, minute] = time.split(':');
|
||||
hour = parseInt(hour);
|
||||
const ampm = hour >= 12 ? 'PM' : 'AM';
|
||||
hour = hour % 12;
|
||||
hour = hour ? hour : 12;
|
||||
return `${hour}:${minute} ${ampm}`;
|
||||
}
|
||||
|
||||
|
||||
setTimeout(()=>{
|
||||
document.querySelector('.moonphase_loader').style.opacity = '0';
|
||||
}, 3000);
|
||||
|
||||
setTimeout(()=>{
|
||||
document.querySelector('.moonphase_loader').hidden = true;;
|
||||
}, 3200);
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="../components-script.js/components.js"></script>
|
||||
<script src="../ripple-files/icon-ripple.js"></script>
|
||||
<script src="../modules/ripple_acc.js"></script>
|
||||
<script src="../bundle.js"></script>
|
||||
<script type="module" src="../index.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
<!-- Moon page -->
|
||||
Reference in new issue
Block a user