首頁 AI 【畫圖變網頁】超神前端網頁設計工具介紹、設定、示範

【畫圖變網頁】超神前端網頁設計工具介紹、設定、示範

由

C w C

21 12 月, 2023

1726

圖像變程式碼的轉換是一種利用人工智能和機器學習技術的方法，目的是從圖像中提取信息並生成對應的程式碼。這種轉換技術通常應用在網頁開發或設計領域，可以幫助開發人員快速創建網頁的基本結構和樣式。

這種轉換的過程通常涉及以下步驟：

圖像分析： 利用計算機視覺和機器學習算法，對輸入的圖像進行分析和處理。這可能包括識別和標記圖像中的不同元素，如文本、圖形、按鈕等。
特徵提取： 從圖像中提取關鍵的特徵和信息，這些特徵可以是像素的排列、色彩、形狀、文本內容等。
模式識別： 透過訓練過的機器學習模型，識別和匹配圖像中的模式和結構，例如識別特定的文本塊、按鈕、導航欄等。
代碼生成： 基於圖像分析和模式識別的結果，生成相應的網頁程式碼，包括HTML、CSS、甚至可能是JavaScript。這些程式碼將根據圖像中的排版、風格和元素生成相似的網頁結構。

這種技術的優點在於可以幫助快速生成網頁的基本結構和樣式，節省開發時間。但需要注意的是，生成的程式碼可能需要進一步的調整和優化，以確保網頁的功能性和響應性。

畫圖變網頁連結：

https://screenshottocode.com

此網站服務使用Open AI API Key，可以來這裡申請：

https://platform.openai.com/api-keys

開發者的GitHub：https://github.com/abi/screenshot-to-code

程式方享：

手繪登入系統：

<html>
<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <style>
        body {
            background-color: #f8f9fa;
        }
        .login-container {
            max-width: 400px;
            margin: 50px auto;
            padding: 20px;
            border: 1px solid #dee2e6;
            background-color: white;
        }
        .login-header {
            border-bottom: 1px solid #dee2e6;
            padding-bottom: 10px;
            margin-bottom: 20px;
        }
        .login-header h2 {
            display: inline-block;
            margin: 0;
            padding: 0 10px;
            font-size: 24px;
            color: #495057;
            border-bottom: 2px solid transparent;
        }
        .login-header .active {
            border-bottom: 2px solid #007bff;
        }
        .form-control {
            margin-bottom: 20px;
        }
        .login-btn {
            width: 100%;
            padding: 10px;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <div class="login-container">
        <div class="login-header">
            <h2 class="active">Login</h2>
            <h2>Sign Up</h2>
        </div>
        <form>
            <div class="mb-3">
                <label for="username" class="form-label">Username</label>
                <input type="text" class="form-control" id="username" placeholder="Enter username">
            </div>
            <div class="mb-3">
                <label for="password" class="form-label">Password</label>
                <input type="password" class="form-control" id="password" placeholder="Enter password">
            </div>
            <button type="submit" class="btn btn-primary login-btn">Login</button>
        </form>
    </div>
</body>
</html>

表單

<html>
<head>
    <title>Form Submission Page</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500&display=swap" rel="stylesheet">
    <style>
        body {
            background-color: #E5E5E5;
            font-family: 'Noto Sans TC', sans-serif;
        }

        .container {
            background-color: #FFFFFF;
            margin-top: 50px;
            padding: 30px;
            border-radius: 4px;
        }

        .header {
            color: #4F4F4F;
            background-color: #BDBDBD;
            padding: 10px;
            text-align: center;
            font-size: 24px;
            font-weight: 500;
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-label {
            color: #4F4F4F;
            font-size: 18px;
            font-weight: 500;
            margin-bottom: 10px;
        }

        .form-control {
            background-color: #F2F2F2;
            border: 1px solid #BDBDBD;
            border-radius: 4px;
        }

        .btn-submit {
            background-color: #6F42C1;
            border: none;
            padding: 10px 20px;
            color: white;
            font-size: 18px;
            border-radius: 4px;
            width: 100%;
            margin-top: 20px;
        }

        .captcha-image {
            background-color: #F2F2F2;
            border: 1px solid #BDBDBD;
            padding: 10px;
            display: inline-block;
            margin-right: 10px;
        }

        .form-check-label {
            margin-left: 5px;
        }

        .form-check-input {
            width: 20px;
            height: 20px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="header">
        會員資料修改頁
    </div>
    <form>
        <div class="row">
            <div class="col-md-6 form-group">
                <label class="form-label" for="username">會員帳號</label>
                <input class="form-control" id="username" placeholder="帳號" required type="text">
            </div>
            <div class="col-md-6 form-group">
                <label class="form-label" for="password">會員密碼</label>
                <input class="form-control" id="password" placeholder="請輸入密碼" required type="password">
            </div>
        </div>
        <div class="row">
            <div class="col-md-6 form-group">
                <label class="form-label" for="name">姓名</label>
                <input class="form-control" id="name" placeholder="姓名" type="text">
            </div>
            <div class="col-md-6 form-group">
                <label class="form-label" for="email">Email</label>
                <input class="form-control" id="email" placeholder="Email" type="email">
            </div>
        </div>
        <div class="row">
            <div class="col-md-6 form-group">
                <label class="form-label" for="birthday">生日</label>
                <input class="form-control" id="birthday" type="date">
            </div>
            <div class="col-md-6 form-group">
                <label class="form-label" for="gender">性別</label>
                <select class="form-control" id="gender">
                    <option>男性</option>
                    <option>女性</option>
                    <option>其他</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="form-label" for="captcha">驗證碼</label>
            <div class="d-flex align-items-center">
                <div class="captcha-image">
                    <img alt="Placeholder image representing a captcha code with random characters" height="50"
                         src="https://placehold.co/120x50" width="120">
                </div>
                <input class="form-control" id="captcha" placeholder="請輸入驗證碼" type="text">
            </div>
        </div>
        <div class="form-group form-check">
            <input type="checkbox" class="form-check-input" id="terms">
            <label class="form-check-label" for="terms">我已閱讀，並同意隱私政策</label>
        </div>
        <button class="btn btn-submit" type="submit">送出</button>
    </form>
</div>
</body>
</html>

檔案上傳系統

<html>
<head>
    <meta charset="UTF-8">
    <title>Web Page</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500&display=swap" rel="stylesheet">
    <style>
        body {
            background-color: #E5E5E5;
            font-family: 'Noto Sans TC', sans-serif;
        }
        .card {
            border-radius: 25px;
            padding: 20px;
            max-width: 400px;
            margin: 50px auto;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            background-color: white;
        }
        .input-group-text {
            background-color: #F0F0F0;
            border: none;
            color: #A0A0A0;
        }
        .form-control {
            border: 1px solid #A0A0A0;
        }
        .btn-outline-primary {
            color: #007BFF;
            border: none;
            margin-top: 10px; /* Added margin-top for spacing */
        }
        .btn-primary {
            background-color: #A0A0A0;
            border: none;
        }
        .btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
            background-color: #A0A0A0;
            border: none;
        }
        .container {
            padding: 20px; /* Increased padding for the container */
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">C w C檔案上傳系統</h5> <!-- Updated title -->
                <div class="mb-3">
                    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="描述..."></textarea>
                </div>
                <div class="mb-3">
                    <span class="input-group-text" id="basic-addon1">選擇上傳檔案：</span>
                </div>
                <div class="input-group mb-3">
                    <input type="file" class="form-control" aria-label="Upload">
                    <button class="btn btn-outline-primary" type="button" id="button-addon2"><i class="fas fa-plus"></i></button>
                </div>
                <div class="d-grid gap-2">
                    <button class="btn btn-primary" type="button">送出</button>
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/all.min.js"></script>
</body>
</html>

影片管理系統

<html>
 <head>
  <title>
   Video Management System
  </title>
  <meta charset="utf-8"/>
  <meta content="width=device-width, initial-scale=1" name="viewport"/>
  <link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" rel="stylesheet"/>
  <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>
  <style>
   body {
            font-family: 'Roboto', sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

        .header {
            background-color: lightgray;
            text-align: center;
            font-size: 36px;
            padding: 20px;
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 1000;
        }

        .search-bar {
            display: flex;
            justify-content: center;
            margin-top: 100px; /* Adjusted to push content below fixed header */
            margin-bottom: 20px;
        }

        .search-bar input {
            width: 60%;
            padding: 10px;
        }

        .search-bar button {
            padding: 10px;
            background: none;
            border: none;
        }

        .search-icons {
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
        }

        .search-icons i {
            font-size: 24px;
            margin: 0 10px;
        }

        .video-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            padding: 0 50px;
            margin-top: 20px; /* Added margin to push content below search icons */
            margin-bottom: 80px; /* Added margin to create space above the fixed footer */
        }

        .video-item {
            border: 1px solid #000;
            overflow: hidden; /* Added to prevent any whitespace around the image */
        }

        .video-item img {
            width: 100%;
            height: 150px; /* Adjusted to cover the whole area */
            object-fit: cover; /* Ensures the image covers the area without distortion */
        }

        .video-item button {
            width: 100%;
            padding: 10px;
            border: none;
            background-color: #007bff; /* Changed to blue background */
            color: #fff;
            cursor: pointer;
        }

        .footer {
            background-color: lightgray;
            text-align: center;
            font-size: 24px;
            padding: 10px;
            position: fixed;
            width: 100%;
            bottom: 0;
            z-index: 1000;
        }

        @media (max-width: 768px) {
            .video-grid {
                grid-template-columns: repeat(2, 1fr); /* Adjusts to 2 columns on smaller screens */
            }
        }

        @media (max-width: 576px) {
            .video-grid {
                grid-template-columns: 1fr; /* Adjusts to 1 column on extra small screens */
            }

            .search-bar input {
                width: 80%; /* Adjusts search bar width on extra small screens */
            }
        }
  </style>
 </head>
 <body>
  <div class="header">
   Video Management System
  </div>
  <div class="search-bar">
   <input placeholder="SEARCH" type="text"/>
   <button>
    <i class="fas fa-search">
    </i>
   </button>
  </div>
  <div class="search-icons">
   <i class="fas fa-th">
   </i>
   <i class="fas fa-list">
   </i>
  </div>
  <div class="video-grid">
   <div class="video-item">
    <img alt="Placeholder image for System 1" height="150" src="https://oaidalleapiprodscus.blob.core.windows.net/private/org-u93eezWcx12F8jnc9FdbiCVm/user-PmnvFa3kywhyEsXKEyJ0UKur/img-sXy7WfiqYQByw3vxNr2zalca.png?st=2023-12-18T17%3A26%3A36Z&se=2023-12-18T19%3A26%3A36Z&sp=r&sv=2021-08-06&sr=b&rscd=inline&rsct=image/png&skoid=6aaadede-4fb3-4698-a8f6-684d7786b067&sktid=a48cca56-e6da-484e-a814-9c849652bcb3&skt=2023-12-18T12%3A13%3A00Z&ske=2023-12-19T12%3A13%3A00Z&sks=b&skv=2021-08-06&sig=90BfvSJ5hSWKCYFLKWsEkRGLV3rjCosrXY6gcl82KzA%3D" width="150"/>
    <button>
     System 1
    </button>
   </div>
   <div class="video-item">
    <img alt="Placeholder image for System 2" height="150" src="https://oaidalleapiprodscus.blob.core.windows.net/private/org-u93eezWcx12F8jnc9FdbiCVm/user-PmnvFa3kywhyEsXKEyJ0UKur/img-GRpSB5UEiRtCLV1QlHbiFs44.png?st=2023-12-18T17%3A26%3A36Z&se=2023-12-18T19%3A26%3A36Z&sp=r&sv=2021-08-06&sr=b&rscd=inline&rsct=image/png&skoid=6aaadede-4fb3-4698-a8f6-684d7786b067&sktid=a48cca56-e6da-484e-a814-9c849652bcb3&skt=2023-12-17T19%3A19%3A19Z&ske=2023-12-18T19%3A19%3A19Z&sks=b&skv=2021-08-06&sig=dKcZd8TO8bOVYleLZkS9/YfLBS6ObqMd3vENYDjzBcc%3D" width="150"/>
    <button>
     System 2
    </button>
   </div>
   <div class="video-item">
    <img alt="Placeholder image for System 3" height="150" src="https://oaidalleapiprodscus.blob.core.windows.net/private/org-u93eezWcx12F8jnc9FdbiCVm/user-PmnvFa3kywhyEsXKEyJ0UKur/img-ZtBAa38bNG3CYgzw2DS2wlPg.png?st=2023-12-18T17%3A26%3A37Z&se=2023-12-18T19%3A26%3A37Z&sp=r&sv=2021-08-06&sr=b&rscd=inline&rsct=image/png&skoid=6aaadede-4fb3-4698-a8f6-684d7786b067&sktid=a48cca56-e6da-484e-a814-9c849652bcb3&skt=2023-12-18T17%3A08%3A08Z&ske=2023-12-19T17%3A08%3A08Z&sks=b&skv=2021-08-06&sig=skOtA6mOYJPJLpJd4Cr%2Buh%2Bp2qZ59BqwS4EwXl9Lw7o%3D" width="150"/>
    <button>
     System 3
    </button>
   </div>
   <div class="video-item">
    <img alt="Placeholder image for System 4" height="150" src="https://oaidalleapiprodscus.blob.core.windows.net/private/org-u93eezWcx12F8jnc9FdbiCVm/user-PmnvFa3kywhyEsXKEyJ0UKur/img-kDT4VICPRkYw4paYDuWh2uaw.png?st=2023-12-18T17%3A26%3A37Z&se=2023-12-18T19%3A26%3A37Z&sp=r&sv=2021-08-06&sr=b&rscd=inline&rsct=image/png&skoid=6aaadede-4fb3-4698-a8f6-684d7786b067&sktid=a48cca56-e6da-484e-a814-9c849652bcb3&skt=2023-12-17T19%3A44%3A19Z&ske=2023-12-18T19%3A44%3A19Z&sks=b&skv=2021-08-06&sig=mxX18wNcZJKOwgVKdiUhBkujFXe4HtUo96KJXesVCVI%3D" width="150"/>
    <button>
     System 4
    </button>
   </div>
  </div>
  <div class="footer">
   CwC Channel
  </div>
 </body>
</html>

【畫圖變網頁】超神前端網頁設計工具介紹、設定、示範

請按讚：

發表迴響取消回覆

請按讚：

發表迴響取消回覆

探索更多來自 C w C Channel 的內容