Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update index.html #7

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 1 addition & 55 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,55 +1 @@
# Getting Started

These steps will get this sample HTML application running for you using DigitalOcean App Platform.

**Note: Following these steps may result in charges for the use of DigitalOcean services**

## Requirements

* You need a DigitalOcean account. If you don't already have one, you can sign up at https://cloud.digitalocean.com/registrations/new

## Deploying the App

Click this button to deploy the app to the DigitalOcean App Platform. If you are not logged in, you will be prompted to log in with your DigitalOcean account.

[![Deploy to DigitalOcean](https://www.deploytodo.com/do-btn-blue.svg)](https://cloud.digitalocean.com/apps/new?repo=https://github.com/digitalocean/sample-html/tree/main)

Using this button disable the "Auto deploy changes on push" feature as you are using this repo directly. If you wish to try that feature, you will need to make your own copy of this repository.

To make a copy, click the Fork button above and follow the on-screen instructions. In this case, you'll be forking this repo as a starting point for your own app (see [GitHub documentation](https://docs.github.com/en/github/getting-started-with-github/fork-a-repo) to learn more about forking repos.

After forking the repo, you should now be viewing this README in your own github org (e.g. `https://github.com/<your-org>/sample-html`). To deploy the new repo, visit https://cloud.digitalocean.com/apps and click "Create App" or "Launch Your App". Then, select the repository you created and be sure to select the `main` branch.

After clicking the "Deploy to DigitalOcean" button or completing the instructions above to fork the repo, follow these steps:

1. Select which region you wish to deploy your app to and click Next. The closest region to you should be selected by default. All App Platform apps are routed through a global CDN so this will not affect your app performance, unless it needs to talk to external services.
1. On the following screen, leave all the fields as they are and click Next.
1. Confirm your Plan settings and how many containers you want to launch and click **Launch Basic/Pro App**.
1. You should see a "Building..." progress indicator. And you can click "Deployments"→"Details" to see more details of the build.
1. It can take a few minutes for the build to finish, but you can follow the progress by clicking the "Details" link in the top banner.
1. Once the build completes successfully, click the "Live App" link in the header and you should see your running application in a new tab, displaying the home page.

## Making Changes to Your App

If you followed the steps above to fork the repo and used your own copy when deploying the app, you can enjoy automatic deploys whenever changes are made to the repo. During these automatic deployments, your application will never pause or stop serving request because App Platform offers zero-downtime deployments.

Here's an example code change you can make for this app:

1. Edit code within the repository
1. Commit the change to the `main` branch. Normally it's a better practice to create a new branch for your change and then merge that branch to `main` after review, but for this demo you can commit to the `main` branch directly.
1. Visit https://cloud.digitalocean.com/apps and navigate to your sample app.
1. You should see a "Building..." progress indicator, just like when you first created the app.
1. Once the build completes successfully, click the "Live App" link in the header and you should see your updated application running. You may need to force refresh the page in your browser (e.g. using Shift+Reload).

## Learn More

You can learn more about the App Platform and how to manage and update your application at https://www.digitalocean.com/docs/app-platform/.

## Deleting the App

When you no longer need this sample application running live, you can delete it by following these steps:
1. Visit the Apps control panel at https://cloud.digitalocean.com/apps
1. Navigate to the sample app
1. Choose "Settings"->"Destroy"

**Note: If you don't delete your app, charges for the use of DigitalOcean services will continue to accrue.**
Ini adalah static page
6 changes: 6 additions & 0 deletions aaa/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
<!DOCTYPE html>
<html>
<body>
<h1>Ini adalah tes domain</h1>
</body>
</html>
138 changes: 6 additions & 132 deletions index.html
Original file line number Diff line number Diff line change
@@ -1,133 +1,7 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>#000000</title>
<link type="image/x-icon" rel="shortcut icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAHklEQVQ4T2NkYGD4z0ABYBw1gGE0DBhGw4BhWIQBAE5OEAELnjVHAAAAAElFTkSuQmCC">
<style>
:root {
--color: #000000;
--color-transparent: #00000022;
}

::selection {
background: var(--color-transparent);
}

html,
body {
background: var(--color);
height: 100%;
margin: 0;
}

body {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}

#color {
background: white;
color: var(--color);
font-size: 2.5rem;
font-weight: 300;
padding: 2.25rem 3rem;
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif;
cursor: text;
}
</style>
</head>

<body>
<p id="color">#000000</p>
<script>
function randomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}

function hslToHex(h, s, l) {
h /= 360;
s /= 100;
l /= 100;
var r = void 0,
g = void 0,
b = void 0;
if (s === 0) {
r = g = b = l; // achromatic
} else {
var hue2rgb = function hue2rgb(p, q, t) {
if (t < 0) t += 1;
if (t > 1) t -= 1;
if (t < 1 / 6) return p + (q - p) * 6 * t;
if (t < 1 / 2) return q;
if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
return p;
};
var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
var p = 2 * l - q;
r = hue2rgb(p, q, h + 1 / 3);
g = hue2rgb(p, q, h);
b = hue2rgb(p, q, h - 1 / 3);
}
var toHex = function toHex(x) {
var hex = Math.round(x * 255).toString(16);
return hex.length === 1 ? '0' + hex : hex;
};
return '#' + toHex(r) + toHex(g) + toHex(b);
}

window.onload = function () {
let stopProp = function (ev) {
ev.stopPropagation();
}

var colorElement = document.getElementById("color");
colorElement.addEventListener("click", stopProp, false);
colorElement.addEventListener("mousedown", stopProp, false);

var setFavicon = function (hex) {
var canvas = document.createElement('canvas');
canvas.width = 16;
canvas.height = 16;
var ctx = canvas.getContext('2d');
ctx.fillStyle = hex;
ctx.fillRect(0, 0, 16, 16);
document.getElementsByTagName('link')[0].href = canvas.toDataURL("image/x-icon");
}

var setRandomColor = function setRandomColor() {
var h = void 0,
s = void 0,
l = void 0;

h = randomInt(0, 359);
s = randomInt(55, 75);
l = randomInt(40, 60);

document.documentElement.style.setProperty('--color', 'hsl(' + h + ', ' + s + '%, ' + l + '%)');
var hex = hslToHex(h, s, l);
document.title = hex;
colorElement.innerHTML = hex;
document.documentElement.style.setProperty('--color-transparent', hex + '22');

setFavicon(hex);
};
setRandomColor();

var body = document.getElementsByTagName("body")[0];
body.addEventListener("mousedown", function (ev) {
ev.preventDefault();
});
body.addEventListener("click", function () {
setRandomColor();
}, false);
};
</script>
</body>

</html>
<html>
<body>
<h1>Ini adalah static domain</h1>
<h5>Menggunakan index file</h5>
</body>
</html>