neocities/views/tutorial/html/9.erb
2024-03-26 21:03:26 -05:00

57 lines
2.4 KiB
Text

<div class="comic" style="margin-top: 5em; height: 650px; background-image: url(/img/tutorial/ch1pg9.png); background-size: 481px">
<div class="dialogue" style="top: -23px; left: 10px; width: 230px">
Great work! You can save everything you've coded so far to your <a href="<%= current_site.uri %>">Neocities site</a> to continue working on it.
It'll be saved as <strong>index.html</strong>, which is the first web page people see when they visit your site.
</div>
<div class="dialogue" style="left: 283px;top: 190px; width:160px">
You can find and edit index.html by visiting your <a href="/dashboard">Neocities dashboard</a>.
</div>
<div class="dialogue" style="left: 280px;top: 580px">
<!-- A cheat sheet of all the tags you've learned can be found in the tutorial section. -->
</div>
</div>
<script>
$(document).ready(function() {
$('#editor').css('display', 'none')
$('.editor-heading').css('display', 'none')
$('h3#sitePreview').css('display', 'none')
$('.preview').css('margin-top', '20px')
$('#saveToSite').on('click', function(event) {
event.preventDefault()
var formData = new FormData()
var fileContent = sessionStorage.getItem('tutorialHtml')
formData.append('index.html', new File([fileContent], 'index.html', { type: 'text/html' }))
formData.append('csrf_token', '<%= escape_javascript csrf_token %>')
formData.append('username', '<%= escape_javascript current_site.username %>')
$.ajax({
url: '/api/upload',
data: formData,
processData: false,
contentType: false,
type: 'POST',
error: function(jqXHR, textStatus, errorThrown) {
var errorMessage = 'There has been an error saving your file, please try again. If it continues to fail, make a copy of the file locally so you don\'t lose your changes!'
if(jqXHR.responseText) {
try {
// Attempt to parse the JSON responseText to get the error message
var parsedResponse = JSON.parse(jqXHR.responseText);
errorMessage += ' ERROR MESSAGE: ' + parsedResponse.message;
alert(errorMessage)
} catch (error) {
}
}
alert(errorMessage)
},
success: function(response, textStatus, xhr){
window.location = '/tutorial/html/10'
}
})
})
})
</script>