<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Tailwind CSS</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="bg-red-400 w-40 h-40">Box 1</div>
<div class="bg-sky-400 w-[160px]">Box 2</div>
<div class="bg-orange-400 w-3/4">Box 3</div>
<div class="bg-green-400 w-[75%]">Box 4</div>
</body>
</html>月: 2024年6月
Tailwind CSS 色を指定する
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Tailwind CSS</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<h1 class="text-center text-4xl font-bold text-red-500 opacity-50">Hello</h1>
</body>
</html>ニコニコ動画風サイト
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ニコニコ動画風サイト</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
header {
background-color: #333;
color: #fff;
padding: 10px 20px;
text-align: center;
}
nav {
background-color: #555;
color: #fff;
display: flex;
justify-content: space-around;
padding: 10px 0;
}
nav a {
color: #fff;
text-decoration: none;
padding: 10px 20px;
}
main {
display: flex;
margin: 20px;
}
aside {
width: 25%;
background-color: #fff;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
section {
width: 75%;
padding: 20px;
}
.video-player {
background-color: #000;
height: 400px;
margin-bottom: 20px;
position: relative;
}
.video-player video {
width: 100%;
height: 100%;
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px 0;
}
.comments {
list-style: none;
padding: 0;
}
.comments li {
background-color: #fff;
margin-bottom: 10px;
padding: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.comment-form {
display: flex;
margin-top: 20px;
}
.comment-form input {
flex: 1;
padding: 10px;
margin-right: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}
.comment-form button {
padding: 10px 20px;
border: none;
background-color: #333;
color: #fff;
border-radius: 5px;
cursor: pointer;
}
.thumbnail {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.thumbnail img {
width: 120px;
height: 90px;
margin-right: 10px;
}
.login-form, .register-form, .upload-form, .profile {
background-color: #fff;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.login-form h2, .register-form h2, .upload-form h2, .profile h2 {
margin-top: 0;
}
.login-form input, .register-form input, .upload-form input {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}
.login-form button, .register-form button, .upload-form button {
width: 100%;
padding: 10px;
border: none;
background-color: #333;
color: #fff;
border-radius: 5px;
cursor: pointer;
}
.search-form {
display: flex;
justify-content: center;
margin: 20px 0;
}
.search-form input {
width: 70%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}
.search-form button {
padding: 10px 20px;
border: none;
background-color: #333;
color: #fff;
border-radius: 5px;
cursor: pointer;
}
.rating {
display: flex;
align-items: center;
margin-top: 10px;
}
.rating button {
border: none;
background: none;
cursor: pointer;
font-size: 1.2em;
margin-right: 10px;
}
.rating span {
margin-right: 20px;
}
</style>
</head>
<body>
<header>
<h1>ニコニコ動画風サイト</h1>
</header>
<nav>
<a href="index.html">ホーム</a>
<a href="ranking.html">ランキング</a>
<a href="categories.html">カテゴリー</a>
<a href="mypage.html">マイページ</a>
</nav>
<div class="search-form">
<input type="text" id="searchInput" placeholder="検索...">
<button onclick="search()">検索</button>
</div>
<main>
<aside>
<h2>おすすめ動画</h2>
<div class="thumbnail">
<a href="video.html"><img src="thumbnail1.jpg" alt="動画1"></a>
<a href="video.html">動画1のタイトル</a>
</div>
<div class="thumbnail">
<a href="video.html"><img src="thumbnail2.jpg" alt="動画2"></a>
<a href="video.html">動画2のタイトル</a>
</div>
<div class="thumbnail">
<a href="video.html"><img src="thumbnail3.jpg" alt="動画3"></a>
<a href="video.html">動画3のタイトル</a>
</div>
<div class="thumbnail">
<a href="video.html"><img src="thumbnail4.jpg" alt="動画4"></a>
<a href="video.html">動画4のタイトル</a>
</div>
</aside>
<section>
<div class="video-player">
<video controls>
<source src="sample.mp4" type="video/mp4">
あなたのブラウザは動画タグに対応していません。
</video>
</div>
<h2>動画タイトル</h2>
<p>動画の説明文がここに入ります。</p>
<div class="rating">
<button onclick="like()">👍</button><span id="likeCount">0</span>
<button onclick="dislike()">👎</button><span id="dislikeCount">0</span>
</div>
<h3>コメント</h3>
<ul class="comments" id="comments">
<li><span class="timestamp">12:34</span> コメント1</li>
<li><span class="timestamp">12:35</span> コメント2</li>
<li><span class="timestamp">12:36</span> コメント3</li>
<li><span class="timestamp">12:37</span> コメント4</li>
</ul>
<div class="comment-form">
<input type="text" id="commentInput" placeholder="コメントを入力してください">
<button onclick="addComment()">コメントを投稿</button>
</div>
</section>
</main>
<footer>
</footer>
<!-- Register Form -->
<div class="register-form">
<h2>ユーザー登録</h2>
<input type="text" id="registerUsername" placeholder="ユーザー名">
<input type="password" id="registerPassword" placeholder="パスワード">
<button onclick="register()">登録</button>
</div>
<!-- Login Form -->
<div class="login-form">
<h2>ログイン</h2>
<input type="text" id="loginUsername" placeholder="ユーザー名">
<input type="password" id="loginPassword" placeholder="パスワード">
<button onclick="login()">ログイン</button>
</div>
<!-- Upload Form -->
<div class="upload-form">
<h2>動画アップロード</h2>
<input type="file" id="uploadVideo">
<input type="text" id="uploadTitle" placeholder="タイトル">
<button onclick="upload()">アップロード</button>
</div>
<!-- Profile Page -->
<div class="profile">
<h2>プロフィール</h2>
<p>ユーザー名: <span id="profileUsername"></span></p>
<p>登録日: <span id="profileDate"></span></p>
</div>
<script>
let likeCount = 0;
let dislikeCount = 0;
function addComment() {
var commentInput = document.getElementById('commentInput');
var commentText = commentInput.value.trim();
if (commentText !== "") {
var commentsList = document.getElementById('comments');
var newComment = document.createElement('li');
var timestamp = new Date().toLocaleTimeString();
newComment.innerHTML = '<span class="timestamp">' + timestamp + '</span> ' + commentText;
commentsList.appendChild(newComment);
commentInput.value = "";
}
}
function like() {
likeCount++;
document.getElementById('likeCount').innerText = likeCount;
}
function dislike() {
dislikeCount++;
document.getElementById('dislikeCount').innerText = dislikeCount;
}
function search() {
var searchInput = document.getElementById('searchInput').value.trim();
if (searchInput !== "") {
alert('検索結果: ' + searchInput);
}
}
function register() {
var username = document.getElementById('registerUsername').value.trim();
var password = document.getElementById('registerPassword').value.trim();
if (username !== "" && password !== "") {
alert('ユーザー登録が完了しました: ' + username);
localStorage.setItem('username', username);
localStorage.setItem('password', password);
document.getElementById('registerUsername').value = "";
document.getElementById('registerPassword').value = "";
}
}
function login() {
var username = document.getElementById('loginUsername').value.trim();
var password = document.getElementById('loginPassword').value.trim();
var storedUsername = localStorage.getItem('username');
var storedPassword = localStorage.getItem('password');
if (username === storedUsername && password === storedPassword) {
alert('ログイン成功');
document.getElementById('profileUsername').innerText = username;
document.getElementById('profileDate').innerText = new Date().toLocaleDateString();
document.getElementById('loginUsername').value = "";
document.getElementById('loginPassword').value = "";
} else {
alert('ユーザー名またはパスワードが間違っています');
}
}
function upload() {
var video = document.getElementById('uploadVideo').files[0];
var title = document.getElementById('uploadTitle').value.trim();
if (video && title !== "") {
alert('動画アップロードが完了しました: ' + title);
document.getElementById('uploadVideo').value = "";
document.getElementById('uploadTitle').value = "";
}
}
</script>
</body>
</html>
TailwindCSS テキスト周りのスタイルを設定する
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Tailwind CSS</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<h1 class="text-center text-4xl font-bold">Hello</h1>
</body>
</html>Tailwind CSS 拡張機能
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Tailwind CSS</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<h1 class="text-center">Hello</h1>
</body>
</html>tailwind.config.js
python AI
プロジェクトのファイル構成
chatbot_project/
│
├── app.py
├── chatbot.db (自動生成されます)
├── requirements.txt
├── templates/
│ └── index.html
└── static/
└── css/
└── style.css
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AIチャットボット</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
<style>
.chat-container {
max-width: 700px;
margin: 50px auto;
background: #fff;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.messages {
height: 500px;
overflow-y: auto;
border-bottom: 1px solid #ddd;
padding: 20px;
}
.message {
margin: 10px 0;
}
.user .message-content {
background: #007bff;
color: #fff;
border-radius: 15px 15px 0 15px;
padding: 10px 15px;
display: inline-block;
}
.bot .message-content {
background: #f1f1f1;
border-radius: 15px 15px 15px 0;
padding: 10px 15px;
display: inline-block;
}
.input-group {
padding: 20px;
}
</style>
</head>
<body>
<div class="chat-container">
<div class="messages" id="messages"></div>
<div class="input-group">
<input type="text" id="userInput" class="form-control" placeholder="メッセージを入力">
<div class="input-group-append">
<button class="btn btn-primary" onclick="sendMessage()">送信</button>
</div>
</div>
</div>
<script>
async function sendMessage() {
const userInput = document.getElementById('userInput').value;
if (userInput.trim() === "") return;
displayMessage(userInput, 'user');
document.getElementById('userInput').value = "";
try {
const response = await fetch('/chat', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ message: userInput })
});
const data = await response.json();
displayMessage(data.reply, 'bot');
} catch (error) {
displayMessage('エラーが発生しました。', 'bot');
}
}
function displayMessage(message, sender) {
const messagesDiv = document.getElementById('messages');
const messageDiv = document.createElement('div');
messageDiv.className = `message ${sender}`;
const messageContent = document.createElement('div');
messageContent.className = 'message-content';
messageContent.textContent = message;
messageDiv.appendChild(messageContent);
messagesDiv.appendChild(messageDiv);
messagesDiv.scrollTop = messagesDiv.scrollHeight;
}
</script>
</body>
</html>style.css
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
app.py
from flask import Flask, request, jsonify, render_template
import nltk
from nltk.chat.util import Chat, reflections
import spacy
import sqlite3
import os
app = Flask(__name__)
nlp = spacy.load('en_core_web_sm')
pairs = [
[
r"こんにちは|やあ|おはよう",
["こんにちは！", "やあ！", "おはようございます！"]
],
[
r"あなたの名前は何ですか？",
["私はAIチャットボットです。", "私の名前はまだありません。"]
],
[
r"さようなら|バイバイ",
["さようなら！", "またね！"]
]
]
chat = Chat(pairs, reflections)
# SQLiteデータベース接続
def get_db_connection():
conn = sqlite3.connect('chatbot.db')
conn.row_factory = sqlite3.Row
return conn
with get_db_connection() as conn:
c = conn.cursor()
c.execute('''
CREATE TABLE IF NOT EXISTS messages (
id INTEGER PRIMARY KEY AUTOINCREMENT,
user_message TEXT,
bot_response TEXT
)
''')
conn.commit()
@app.route('/')
def index():
return render_template('index.html')
@app.route('/chat', methods=['POST'])
def chat_response():
user_message = request.json.get('message')
response = chat.respond(user_message)
if response is None:
response = advanced_nlp_response(user_message)
with get_db_connection() as conn:
c = conn.cursor()
c.execute('INSERT INTO messages (user_message, bot_response) VALUES (?, ?)', (user_message, response))
conn.commit()
return jsonify({'reply': response})
def advanced_nlp_response(user_message):
doc = nlp(user_message)
if doc.ents:
entities = [ent.text for ent in doc.ents]
return f"あなたのメッセージには次のエンティティが含まれています: {', '.join(entities)}"
else:
return "ごめんなさい、理解できませんでした。"
@app.route('/history', methods=['GET'])
def chat_history():
with get_db_connection() as conn:
c = conn.cursor()
c.execute('SELECT * FROM messages')
rows = c.fetchall()
history = [{"user_message": row["user_message"], "bot_response": row["bot_response"]} for row in rows]
return jsonify(history)
if __name__ == '__main__':
nltk.download('punkt')
app.run(debug=True)
python プログラミング言語
import re
# トークナイザー
def tokenize(code):
token_specification = [
('NUMBER', r'\d+'), # 整数
('ID', r'[A-Za-z_]\w*'), # 識別子
('ASSIGN', r'='), # 代入演算子
('END', r';'), # 文の終わり
('OP', r'[+\-*/]'), # 演算子
('NEWLINE', r'\n'), # 改行
('SKIP', r'[ \t]'), # 空白とタブ
('MISMATCH', r'.'), # 一致しない文字
]
tok_regex = '|'.join('(?P<%s>%s)' % pair for pair in token_specification)
get_token = re.compile(tok_regex).finditer
tokens = []
for mo in get_token(code):
kind = mo.lastgroup
value = mo.group()
if kind == 'NUMBER':
value = int(value)
elif kind == 'ID' and value in {'if', 'while', 'def'}:
kind = value.upper()
elif kind == 'SKIP':
continue
elif kind == 'NEWLINE':
value = '\n'
elif kind == 'MISMATCH':
raise RuntimeError(f'{value} unexpected on line {code}')
tokens.append((kind, value))
return tokens
# パーサークラス
class Parser:
def __init__(self, tokens):
self.tokens = tokens
self.pos = 0
def parse(self):
statements = []
while self.pos < len(self.tokens):
statement = self.statement()
if statement:
statements.append(statement)
return statements
def statement(self):
if self.pos >= len(self.tokens):
return None
token = self.tokens[self.pos]
if token[0] == 'ID' and self.pos + 1 < len(self.tokens) and self.tokens[self.pos + 1][0] == 'ASSIGN':
return self.assignment()
elif token[0] in {'ID', 'NUMBER'} or (token[0] == 'OP' and token[1] == '-'):
return self.expression()
else:
raise SyntaxError(f'Unexpected token: {token}')
def assignment(self):
id_token = self.tokens[self.pos]
self.pos += 1 # skip ID
self.pos += 1 # skip ASSIGN
expr = self.expression()
self.expect('END')
return ('assign', id_token[1], expr)
def expression(self):
term = self.term()
while self.pos < len(self.tokens) and self.tokens[self.pos][0] == 'OP':
op = self.tokens[self.pos]
self.pos += 1
term = (op[1], term, self.term())
return term
def term(self):
token = self.tokens[self.pos]
if token[0] == 'NUMBER':
self.pos += 1
return token[1]
elif token[0] == 'ID':
self.pos += 1
return ('var', token[1])
else:
raise SyntaxError(f'Unexpected token: {token}')
def expect(self, kind):
if self.pos < len(self.tokens) and self.tokens[self.pos][0] == kind:
self.pos += 1
else:
raise SyntaxError(f'Expected {kind}')
# インタプリタクラス
class Interpreter:
def __init__(self):
self.variables = {}
def evaluate(self, node):
if isinstance(node, int):
return node
elif isinstance(node, tuple):
if node[0] == 'assign':
self.variables[node[1]] = self.evaluate(node[2])
return self.variables[node[1]]
elif node[0] == 'var':
if node[1] in self.variables:
return self.variables[node[1]]
else:
raise NameError(f"Variable '{node[1]}' is not defined")
else:
left = self.evaluate(node[1])
right = self.evaluate(node[2])
if node[0] == '+':
return left + right
elif node[0] == '-':
return left - right
elif node[0] == '*':
return left * right
elif node[0] == '/':
return left / right
return None
# REPL (Read-Eval-Print Loop)
def repl():
interpreter = Interpreter()
while True:
try:
code = input('>>> ')
if code == 'exit':
break
tokens = tokenize(code)
parser = Parser(tokens)
tree = parser.parse()
for statement in tree:
result = interpreter.evaluate(statement)
if result is not None:
print(result)
except Exception as e:
print(f"Error: {e}")
if __name__ == "__main__":
repl()
CSS ローディングアイコン
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Animation</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="loading"></div>
</body>
</html>style.css
@charset "utf-8";
.loading{
width: 32px;
height: 32px;
border-top: 8px solid red;
border-right: 8px solid blue;
border-bottom: 8px solid green;
border-left: 8px solid yellow;
border-radius: 50%;
animation: spin 800ms infinite linear;
/*animation-timing-function: linear;*/
}
@keyframes spin {
100%{
transform: rotate(360deg);
}
}python WEBブラウザ
import sys
import os
import json
from PyQt5.QtWidgets import (QApplication, QMainWindow, QVBoxLayout, QHBoxLayout, QPushButton, QLineEdit, QWidget, QTabWidget, QAction, QMenuBar, QMenu, QListWidget, QInputDialog, QMessageBox, QFileDialog, QToolBar)
from PyQt5.QtWebEngineWidgets import QWebEngineView, QWebEngineProfile, QWebEngineDownloadItem
from PyQt5.QtCore import QUrl, QTimer, Qt
class Browser(QMainWindow):
def __init__(self):
super().__init__()
self.setWindowTitle('Advanced Browser')
self.setGeometry(100, 100, 1200, 800)
self.bookmarks = []
self.history = []
self.home_page = 'http://www.google.com'
self.auto_browse_url = ''
self.auto_browse_interval = 60
self.timer = QTimer(self)
self.timer.timeout.connect(self.auto_browse)
self.load_settings()
self.tab_widget = QTabWidget()
self.tab_widget.setDocumentMode(True)
self.tab_widget.tabBarDoubleClicked.connect(self.add_new_tab)
self.tab_widget.currentChanged.connect(self.update_url_bar)
self.tab_widget.setTabsClosable(True)
self.tab_widget.tabCloseRequested.connect(self.close_current_tab)
self.setCentralWidget(self.tab_widget)
self.status = QLineEdit()
self.status.setReadOnly(True)
self.statusBar().addPermanentWidget(self.status)
navtb = QToolBar("Navigation")
self.addToolBar(navtb)
self.url_bar = QLineEdit()
self.url_bar.returnPressed.connect(self.navigate_to_url)
self.back_button = QPushButton('<')
self.back_button.clicked.connect(lambda: self.tab_widget.currentWidget().back())
self.forward_button = QPushButton('>')
self.forward_button.clicked.connect(lambda: self.tab_widget.currentWidget().forward())
self.reload_button = QPushButton('R')
self.reload_button.clicked.connect(lambda: self.tab_widget.currentWidget().reload())
self.add_tab_button = QPushButton('+')
self.add_tab_button.clicked.connect(self.add_new_tab)
self.auto_browse_button = QPushButton('Auto Browse')
self.auto_browse_button.clicked.connect(self.toggle_auto_browse)
navtb.addWidget(self.back_button)
navtb.addWidget(self.forward_button)
navtb.addWidget(self.reload_button)
navtb.addWidget(self.url_bar)
navtb.addWidget(self.add_tab_button)
navtb.addWidget(self.auto_browse_button)
self.menu_bar = QMenuBar()
self.setMenuBar(self.menu_bar)
self.file_menu = QMenu("&File", self)
self.menu_bar.addMenu(self.file_menu)
self.bookmark_menu = QMenu("&Bookmarks", self)
self.menu_bar.addMenu(self.bookmark_menu)
self.bookmark_menu.addAction("Add Bookmark", self.add_bookmark)
self.bookmark_menu.addAction("Show Bookmarks", self.show_bookmarks)
self.history_menu = QMenu("&History", self)
self.menu_bar.addMenu(self.history_menu)
self.history_menu.addAction("Show History", self.show_history)
self.settings_menu = QMenu("&Settings", self)
self.menu_bar.addMenu(self.settings_menu)
self.settings_menu.addAction("Set Home Page", self.set_home_page)
self.settings_menu.addAction("Set Auto Browse", self.set_auto_browse)
self.add_new_tab(QUrl(self.home_page), "Home")
def add_new_tab(self, qurl=None, label="New Tab"):
if qurl is None:
qurl = QUrl(self.home_page)
browser = QWebEngineView()
browser.setUrl(qurl)
i = self.tab_widget.addTab(browser, label)
self.tab_widget.setCurrentIndex(i)
browser.urlChanged.connect(lambda qurl, browser=browser: self.update_url(qurl, browser))
browser.loadFinished.connect(lambda _, i=i, browser=browser: self.tab_widget.setTabText(i, browser.page().title()))
browser.page().profile().downloadRequested.connect(self.download_requested)
def update_url(self, qurl, browser=None):
if browser != self.tab_widget.currentWidget():
return
self.url_bar.setText(qurl.toString())
self.status.setText(qurl.toString())
self.history.append(qurl.toString())
def navigate_to_url(self):
qurl = QUrl(self.url_bar.text())
self.tab_widget.currentWidget().setUrl(qurl)
def update_url_bar(self, i):
qurl = self.tab_widget.currentWidget().url()
self.url_bar.setText(qurl.toString())
self.status.setText(qurl.toString())
def close_current_tab(self, i):
if self.tab_widget.count() < 2:
return
self.tab_widget.removeTab(i)
def add_bookmark(self):
url = self.url_bar.text()
if url and url not in self.bookmarks:
self.bookmarks.append(url)
QMessageBox.information(self, "Bookmark Added", "Bookmark has been added.")
self.save_settings()
def show_bookmarks(self):
dlg = QInputDialog(self)
dlg.setLabelText("Bookmarks:")
dlg.setComboBoxItems(self.bookmarks)
dlg.exec_()
def show_history(self):
dlg = QInputDialog(self)
dlg.setLabelText("History:")
dlg.setComboBoxItems(self.history)
dlg.exec_()
def set_home_page(self):
url, ok = QInputDialog.getText(self, "Set Home Page", "Enter URL:")
if ok and url:
self.home_page = url
self.save_settings()
def set_auto_browse(self):
url, ok1 = QInputDialog.getText(self, "Set Auto Browse URL", "Enter URL:")
if ok1 and url:
interval, ok2 = QInputDialog.getInt(self, "Set Auto Browse Interval", "Enter Interval (seconds):", min=1)
if ok2:
self.auto_browse_url = url
self.auto_browse_interval = interval
self.save_settings()
def toggle_auto_browse(self):
if self.timer.isActive():
self.timer.stop()
self.auto_browse_button.setText("Auto Browse")
else:
self.timer.start(self.auto_browse_interval * 1000)
self.auto_browse_button.setText("Stop Auto Browse")
def auto_browse(self):
if self.auto_browse_url:
self.tab_widget.currentWidget().setUrl(QUrl(self.auto_browse_url))
def download_requested(self, download):
path, _ = QFileDialog.getSaveFileName(self, "Save File", download.path())
if path:
download.setPath(path)
download.accept()
def load_settings(self):
if os.path.exists('browser_settings.json'):
with open('browser_settings.json', 'r') as f:
settings = json.load(f)
self.bookmarks = settings.get('bookmarks', [])
self.history = settings.get('history', [])
self.home_page = settings.get('home_page', 'http://www.google.com')
self.auto_browse_url = settings.get('auto_browse_url', '')
self.auto_browse_interval = settings.get('auto_browse_interval', 60)
def save_settings(self):
settings = {
'bookmarks': self.bookmarks,
'history': self.history,
'home_page': self.home_page,
'auto_browse_url': self.auto_browse_url,
'auto_browse_interval': self.auto_browse_interval
}
with open('browser_settings.json', 'w') as f:
json.dump(settings, f)
app = QApplication(sys.argv)
app.setApplicationName("Advanced Browser")
window = Browser()
window.show()
sys.exit(app.exec_())
CSS @keyframe
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Animation</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="box"></div>
</body>
</html>style.css
@charset "utf-8";
.box {
width: 80px;
height: 80px;
background: pink;
animation-name: move-around;
animation-duration: 4s;
animation-iteration-count: infinite;
}
@keyframes move-around {
25% {
transform: translate(100px, 0);
border-radius: 0;
}
50% {
transform: translate(100px, 100px);
border-radius: 50%;
}
75% {
transform: translate(0, 100px);
border-radius: 0;
}
}